Skip to content

Early Iterations at MESH

Visually refreshing a young app to bring consistency and scalability.

Three screens from the MESH app, mostly dark text on a light-grey patterned background with pops of teal. The left-most screen features scrollable collections of videos and category cards. The middle screen is a news feed, displaying user posts. The right-most screen is a profile page dominated by a large banner image up top, with the user's profile picture and name just below and buttons to send a message or connect; below this is more information about the user.

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.

Initial visual refresh #

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. This early refresh was meant to modernize and refine the app without taking too sharp a departure from the existing identity.

Without previous documentation, the live site served as guidance for a baseline. I constructed a functional color palette that felt familiar to the existing palette; specified type styles and how to use them; and harmonized our icon set by handpicking a selection of Microsoft's Fluent UI Icons, which strike a good balance of professionalism and approachability.

A collection of screens from the MESH app before my refinements. They share the palette of dark text on a patterned white and light-grey background with teal accents. The screens lack much consistency visual hierarchy though.

Before — ready for a little TLC.

A collection of screens (the same from the above image) from the MESH app after my refinements. Visual heirachy is clearer with persistent control bars at the top and a navigation bar on the bottom. Visual elements are also more consistent, utilizing cards with rounded corners, and sharing type styles, button styles, colors, and iconography.

After — familiar but evolved.

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.1 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.
Four screens from the MESH app with the top bar and navigation bar highlighted. The top bar is dynamic—always maintaining its position at the top of the screen, but changing to contain 1) a search bar with filter tabs below on a Search page, 2) a Back button and Sort button on a page listing videos, 3) a user avatar and buttons for sort, search, notifactions, and messages with filter tabs below, on a news feed page and 4) a back button with buttons for Save Draft and Submit on an application page. The tab bar maintains its position at the bottom of the screen, but the active page is always signalled with a teal accent color and filled icon.

The dynamic top bar, top tab bar, and bottom navigation bar make control and exploration more predictable and discoverable.

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.

Four screens from the MESH app depiciting a search flow. 1) From the news feed, a user can tap a Seach icon at the top of the screen in the top bar. 2) The top bar now contains a Back arrow and a focussed search bar, with recent search terms listed below. 3) As the user begins typing, the search terms update accordingly. 4) Once the user submits the search, results are listed below, grouped by the categories People and Posts.

The updated, full-screen suggestive search experience.

Learning modules #

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 center — 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.

On the left: A before/after comparison of the Learn landing page. Before, the page is dominated by a block of text up top, before listing to course categories with circular photos. After, the page has a continue learning section up top which contains a video module card. Below is a Recommended for You section which contains a scrolling list of more video module cards. On the right: a before/after comparison of a training module page. Before, the page shows a thumbnail at the top, followed below by the title, description, and three tabs which appear to be floating in empty space. Then a subheading and two more tabs, styled like a pill, with a video card below. After, the top features a card with the module thumbnail, title, and category, then a large Start Training button and a description. Below this card is a scrolling list of cards for the module's videos.

The evolution of the Learn landing page and training modules.

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.

Four screens depicting a user flow of completing a video training module. 1) The Learn landing page with the Continue Learning section at the top which contains a video module card. 2) The training module page with the details card featuring the Continue Learning button and the videos listed below. 3) The video page. A card at the top displays the video thumbnail with a large play button, and the video title and description. Below this card is a user comment section. 4) The previous page but with an overlay that reads 'You've earned a Business Managment badge,' with a large image of a simple teal badge with a handshake icon, and an OK button at the bottom.

MESHERS can pick up where they left off, discuss videos, and earn badges to show off their work.

Just the start #

This early work helped the development team begin adjusting to a component-based system and gave us some good bones to build on top of — without being so drastic a shift in visual language that we would alienate or confuse existing users.

I soon saw that even bigger changes were on the horizon. ☼

  1. We also included quick links to DMs and Notifications. There wasn't space for these in the bottom bar, but it was decided these needed to stay plainly visible, so this was the compromise. ⤶