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.
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.
Enable Beem to better serve small businesses
95% of businesses in Tanzania are small enterprises that contribute 35% of the country’s GDP
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.
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.
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.
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.
The Beem Design System was inspired by adaptable design systems that are successful at providing the necessary building blocks to solve problems.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
— Taha Jiwaji, Founder, Beem Africa
Transactions processed
© Suhail Jaffer 2023. All trademarks and copyrights are held by their respective owners.
