Tablet app for a fast-paced, dynamic sales environment.
The Coca-Cola brand needs no introduction, it’s products are known around the world, and its US operation alone employs tens of thousands of sales reps. These sales reps are at the frontline of the business, regularly interacting with business customers such supermarkets and restaurants.
The agency I work for was contracted by Coca-Cola to improve the performance and efficiency of their reps by building a mobile salesforce automation tool called PACE. After a year of breakneck development speed and no integrated designers within the team, the product was beginning to suffer growing design debt. The PACE team asked me to help them create a design system in order to establish some clear standards, and streamline future implementation.
PACE was initially built for the Pacific region, but has since expanded to the Asian and American markets.
Challenge
After my initial meetings with the PACE team it became apparent that, due to short timeframes, they were unable to create or follow any UX standards. Developers were having to make quick styling decisions on their own, which led to inconsistencies in the design of identical elements. Resourcing inefficiencies were also surfacing, as new features were being built from scratch, without considering if they could utilise elements that already existed.
How could we implement a design system that enabled non-designers to build an interface? And how could we also support scalability for a design system without an integrated designer?
The design system needed contain a library of modular, reusable components with accompanying guidelines. The PACE team also needed to understand how to maintain, and contribute, to the system when I moved back to my usual team.
The design system can provide guidance on how to implement component attributes such as colour and layout in particular use cases, as shown above.
Solution
The first step I took when building this design system was to perform an audit of the product in order to understand its current state. I set up regular meetings with the senior developers, so that we could catalogue and comment on every individual element - we were able to identify and agree on the styling of repeating patterns, and we drafted guidelines around how they should be implemented. These components and guidelines were then able to be applied to the current version of PACE, not just the future releases.
I also created a number of templates that contained all of the sections and properties that would allow someone else to contribute to the design system in the future. This removed the heavy reliance on a designer to maintain the system, allowing me to move on to other projects.
The dashboard is the main screen of the system. The goal was to remove as much effort for the user by allowing them to access the content most relevant to them.
Conclusion
Once implemented, the design system’s standardised components and guidelines were able to greatly improve the visual and UX consistency of the product. The PACE team was able to utilise these components when building new features, saving them valuable dev time and its associated costs.
In the future, bottlers around the world will be using their own version of PACE using the modules built within the current project. I'm much more confident that these bottlers can successfully launch their own PACE, now they have a library of reusable components and clear guidelines to follow.