An image showing a mockup of the Beem omnichannel platform on a laptop
BACKGROUND

The implementation of a design system for Beem, a Pan-African startup that offers businesses effective ways to communicate and engage with their customers.

Beem is a communications platform that helps businesses interact with their customers through a variety of channels including SMS, social media, and through the phone. Their main target audience were medium to large businesses who were personally onboarded to the platform to provide them with several ways to connect with their customers and carryout campaigns based on their current business goals.

A laptop and mobile phone mockup of Beem's previous platform design

In June 2021, Beem approached me with a goal in mind. They wanted to better serve small businesses as they make up the majority of businesses in Tanzania and contribute to a significant portion to the country’s GDP. For three months, I served as a UX Design Consultant and worked with Beem to tackle several challenges in order to achieve their goal.

Goal

Enable Beem to better serve small businesses

OPPORTUNITY

95% of businesses in Tanzania are small enterprises that contribute 35% of the country’s GDP

Challenge

How might we make the Beem platform more accessible and easier to use for small businesses?

Through research, I was able to uncover a few problems that would keep Beem away from reaching their goal. One in particular was with the design-development process. It shifted design tasks to the development team, resulting in an inefficient mess.

A web of pain points identified at Beem with regards to the product design process

Tasks such as making designs, figuring interactions, or making do with static images were being handled by the development team, which impacted their ability to work on features effectively. This made me realize that we would have to break down the goal into smaller goals. In this case, we needed to focus on internal workflows to improve the design-development process.

INTERNAL objective

Improve the design-development process

To tackle this objective, we used specific metrics to evaluate how successful our solution was including but not limited to: the time taken to create prototypes, the turnaround time for new components, and the time needed to implement handed-off designs.

For this solution to work well internally, it was important to involve stakeholders at every step of the process. I did this by having them actively participate in the design process while also consulting them for feedback at different stages of the process. Together, we decided to achieve our goals by creating a tangible design system and make changes to existing processes.

Deliverables

A design system that provides a consistent and reliable experience for everyone

An improved design-development process that makes hand-off seamless

SOLUTION

A reliable design system that empowers developers and designers to continue doing what they do best as the company scales

As Beem expands their platform further into the Pan-African region, the wide range of cultural and behavioural differences evolve too. With over a billion transactions processed on the platform, how can Beem ensure a positive and reliable experience for everybody? A major path to achieving that goal is through a design system. By building a reliable system that scales, developers and designers are supported with the necessary tools to continue doing what they do best as the company expands.

A grid of images showing use cases for various components available in the Beem Design System

The Beem Design System was inspired by adaptable design systems that are successful at providing the necessary building blocks to solve problems.

A grid of different design systems that were used as inspiration for Beem's design system

The design system provides everything the team needs to build scalable products

Heavily inspired by Spotify's Encore design system, this structure provides a foundation of colours and typography for components to be developed for both the web and mobile design system. And for some situations, local design components could be made for specific products or locales that cannot be applied universally. The scope of this project prioritized the Foundation and Web components of this design system.

A illustration showing how the Beem Design System can scale to include many smaller and local design systems

Adopting principles to ensure that the design system thrives

With a sound structure set, it was also important to foster principles that encouraged growth and maintenance of a healthy design system. These principles were adapted from Microsoft's Fluent design system. We believe that they will help the design system prosper.

Image listing principles for the Beem Design System

This gave us what we needed to quickly build a library of over 120 components and their 500+ variants in just three months. It will help provide a consistent experience across all Beem products. From simple sign-in pages to facilitating payments, the team now had a reliable source of truth for their development needs.

An array of different input field variants available in the Beem Design System

A good design system isn't just a few coloured shapes organized together

Just building a design system isn't enough. It was important to ensure that the system integrated well with the product team and fostered collaboration across the entire team. This is why we implemented several process improvements. By onboarding them on to Figma, the team now had a tool to work together from ideation to prototyping, and finally to implementation.

When it came to design hand-off, developers were shown how Figma could be used to minimize confusion and could be used in conjunction with Storybook to compile a source of truth for all things related to components and their usage.

Lastly, ownership of the design-development process was assigned as it was previously not clear what parties were responsible for it, which sometimes led to communication gaps. With members from every department at Beem aware of the developments, there was motivation to get things done right as it benefitted everyone.

A mockup of the product design process at Beem where ideation, prototyping, and hand-off occurs seamlessly

Documentation that shows anyone how to use Figma

With interest in Figma coming from several departments within Beem, it was ideal to make it easy for anyone to learn how to use it to achieve their goals. Documentation is used to educate users on the purpose of the design system and how to get comfortable with using Figma. For example, Developers were encouraged to learn and play with the system by manipulating components to their desire, giving them a better understanding on how components are built from a design perspective. This made communicating design into code easier than before.

Image showing a mockup of documentation available in the Beem Design System
process

A lot of collaboration and asking questions to help understand the context and build robust solutions

While I am unable to go into detail about everything due to my NDA, below are a few key parts of the entire process that helped us achieve what we did:

Stakeholder Consultation

To kick-off this project, I consulted internal stakeholders of the company from all departments to gain an understanding of their culture and how the business operates. I then interviewed customer facing departments such as sales and support to learn of customer goals, needs, and pains with the current platform. These insights enabled us to identify key problems and define what goals and deliverables would help address them.

User Experience Audit

In collaboration with the product and strategy teams, I conducted a UX audit of the platform and company website, mapping out its architecture and highlighting obstacles and opportunities for improvement that would generally improve the experience for customers. Findings from this exercise directly led to improvements on the Beem platform.

Participatory Design

Implementing a design system and introducing new processes is not an easy task considering the amount of learning and practice teams need to get up to speed. To address this, I had the product team actively participate in creating the design system, making it better suited for their needs. This process made the team more familiar and comfortable with using the design system and Figma, making it easier for them to use it to create Beem's support platform, Moja.

Developer Hand-off

After several iterations of Moja and the design system, we reached a state where implementation could begin. I worked closely with the development team when handing-off designs and prototypes. This was a new learning curve for the team, but because they actively participated in creating the design system, implementation progressed at a faster pace.

The main objectives of every process initiated during this project were to understand the context that we were designing for, to have users actively participate in the making of the solution, and to slowly ease team members into being comfortable with the new concepts and workflows that were being introduced. By incorporating education and active participation in most if not all processes for this project, the team was able to quickly pick up the new system and put it to work for their goals and the larger business goals.

RESULTS

A smoother experience for everyone

From SMS campaigns to chatbots, the Beem Design System today powers experiences across six different communication channels nested in two interconnected platforms. The results were immediate with the Beem Support Platform (Moja) that launched late-2021, with changes implemented to the Beem Platform in 2022.

Moja

A mockup of Beem Moja, Beem's customer service platform

Launched: 2021

Moja was built from the ground up with the Beem Design System. We worked in sprints to iterate and craft an interactive prototype, making it easier than before for developers to create the systems needed for it to function.

Beem Platform

A mockup of the Beem Platform with its new design

Launched: 2022

To implement the design system into the platform, we focused on making improvements in the user experience and introducing a feature that directly puts the platform's focus on user goals.

Alongside being integrated into Beem products, the design system and Figma are now being used at several stages of the product development process. Furthermore, they are used to support the operations with other departments such as marketing and sales. With collaboration at the forefront of this system, feedback from sources other than the product team have a louder voice than before, giving the team essential information at the right time.

Used by the development team to implement features

Quicker prototyping and easier developer hand-off

Figma is now being used for brainstorming

Figma used to support marketing operations

Used to plan and design new features

Used by product managers to collaborate with the rest of the team

KEY TAKEAWAYS
  1. Listening is how problem-solving begins

    Before even trying to solve any problem, it is important to listen and understand the context behind the situation before iterating a solution. By listening to stakeholders and understanding Beem’s culture, I was able to recommend and implement solutions that would fit in and enhance their current operations.

  2. The process of implementation isn’t always straightforward

    With the resulting solutions from key projects influencing major areas of Beem’s products, it was necessary to create a feasible implementation plan for these changes. Together with the leadership, we baked in flexibility within these solutions, allowing them to be reconfigured or added upon if needed.

Image of Taha Jiwaji, founder of Beem Africa

"Suhail took the time to understand our internal processes, customers and existing platform in depth before suggesting changes and working on his assignment. He generally goes beyond what is expected of him to deliver something holistic and complete."

Taha Jiwaji, Founder, Beem Africa