MESH

MESH is an online community for the Kenyan biz space. It fuses social networking, skill sharing, and job opportunities to give young entrepreneurs a leg up.

I began working with MESH in early 2022 as the sole UI designer. With no existing style guide, I updated the interface with an iterative visual language and built out a component library to easily scale across the app. We also began to design new features — I would build a prototype based on a user story, UX would test, and I would iterate.

After about six months MESH went through a complete identity rebrand, and I was tasked with overhauling the app’s style guide to match the new guidelines.

I continue to work closely with UX, Product, and Brand to improve and iterate upon the app as we evaluate the needs of our users.

When I first started at MESH, I was asked to refresh the design of the app. It had been built without a complete style guide and lacked coherence.

Looking at the live site, I extracted a colour palette, began building a component library, and got to work. This early refresh was meant to modernise and refine the app without taking too sharp a departure from the existing identity.

One of the most important steps was clarifying the hierarchy and creating a consistent navigation paradigm.

• The bottom navigation bar would be used for the most important pages of the app.
• The top bar would be dynamic, with the right side offering relevant controls for the current page.¹ The left side of the top bar gave quick access to the Profile panel, or changed to a back button as a user moved deeper into the hierarchy.
• A tab bar just below the top bar would handle sub-level pages.

The refresh was a months-long, piece-by-piece process. The navigation improvements, style guide, and component library gave me a solid base as I completely redesigned entire sections of the app.

One area we sought to tackle was search, hoping to create a whole new experience to go along with a rebuild of the tech by dev. I abandoned the previous small auto-complete pop-up for a full-page design that surfaced a user’s recent searches, offered live suggestions, and presented filterable results.

The completed prototype tested well, but unfortunately the feature never shipped as other projects took priority.

We also reimagined the experience for MESH’s training modules. The Learn page is one of the most important parts of the app, designed to help give users the skills they need to start and grow their own businesses.

I placed the modules front and centre — no longer buried below a wall of text — and adopted a design more familiar to users of streaming apps. A “Continue learning” section lived up top if a user had started any module, followed by recommendations, categories, and curated lists. Selecting any module presented a large button to jump right into the training, with included videos and supplementary materials listed below.

Watching videos would earn users badges that would be displayed next to their avatar and on their profile page. And to promote community, videos could be discussed in a comment section below.

In mid-’22, MESH underwent a complete identity update. It was a radical rethinking of the brand, with a new visual language, tone of voice, and clarified mission.

I worked with the brand team to take the visual identity they had created and build and expand upon it to suit the needs of the app.

It was a vibrant new look that proved challenging to translate to an interface. Some of the colour combinations didn’t pass accessibility requirements for contrast, and triangles — a key part of the new identity — don’t exactly lend themselves to box models.

An interest in designing the app in “dark mode” was expressed, and I found that the bright colours worked well, with plenty of contrast, against a dark background. With the OK from the brand team, I built upon the core palette a collection of dark blues to use as background colours and a range of neutrals for text.

I explored many options before we finally settled on Raspberry as the primary accent colour — using it for CTAs and active indicators — with the rest of the palette filling secondary and tertiary roles. I added a harmonious blue to complement Raspberry and signal interactivity.

I overhauled the style guide and component library, allowing me to quickly iterate as we built out new features for the app. These would also serve the development team as they implemented on the live app.

I utilise as many existing components from the library as possible, while continually adding to it as we build new features which require specific new components. This significantly speeds up my work, allowing me to iterate quickly, make changes and improvements on the fly, and push changes to existing designs with ease.

The redesign was a big success upon launch, with users praising the new look.

• In love with the new updates. Smooth and cool.
  —MAY Upscale CBO
• Dark mode imeweza 👍 na logo pia lko tops!! I really love all features 😊
  —Emily Wairimu
• I love the new UI it is very interactive and warm
  —Peter Kariuki
• Site running so smooth. Upvotes zimekuwa now easy to work around. Just awesome.
  —George Kyalo
• Best updates so far 🔥🔥🔥🔥
  —Ellie Stae

In addition to adding new features and refining parts of the app, I’m working on some visual updates to further aid with usability and discoverability that I’m very excited about.

As for details… 🤐

You can check out the app for yourself here.²