Maple design system and redesign
Maple design system and redesign
Maple • 2020
Maple • 2020
Shortly after I joined Maple, we went through a brand refresh that began as a Marketing initiative where we enhanced our visual identity to better align with our users. I was tasked with redesigning the native app as the first step towards aligning our products to our brand refresh. In conjunction with the redesign, I also had to create a design system from scratch as there currently wasn’t one in place.
Shortly after I joined Maple, we went through a brand refresh that began as a Marketing initiative where we enhanced our visual identity to better align with our users. I was tasked with redesigning the native app as the first step towards aligning our products to our brand refresh. In conjunction with the redesign, I also had to create a design system from scratch as there currently wasn’t one in place.
Approach
Approach
I approached this project by first conducting a current state analysis of the app. Since we didn’t have a design system in place at the time, the styles and components used were inconsistent and different sections of the app looked and felt disjointed. It was important to note all the inconsistencies, styles and discrepancies in behaviours. Some of the key issues that stood out in the audit were:
I approached this project by first conducting a current state analysis of the app. Since we didn’t have a design system in place at the time, the styles and components used were inconsistent and different sections of the app looked and felt disjointed. It was important to note all the inconsistencies, styles and discrepancies in behaviours. Some of the key issues that stood out in the audit were:
There were too many variations of colours
There were too many variations of colours
Component styles varied
Component styles varied
Colours and font sizes were not accessible
Colours and font sizes were not accessible
This is what the app used to look like:
This is what the app used to look like:
The majority of our issues had to do with basic atoms, in which we had none defined, hence why the app became an accumulation of many random stylistic differences.
I began by redefining our atoms at the most basic level, beginning with colours, typography, and spacing scales. I took the opportunity here to fix many of our accessibility issues such as using correct contrasting colours and utilizing more legible font sizes.
The majority of our issues had to do with basic atoms, in which we had none defined, hence why the app became an accumulation of many random stylistic differences.
I began by redefining our atoms at the most basic level, beginning with colours, typography, and spacing scales. I took the opportunity here to fix many of our accessibility issues such as using correct contrasting colours and utilizing more legible font sizes.
Once the atoms were done, next steps was to redesign each component. We now had a very simple and bare bones design system that the engineering team could use to implement the design changes on their end.
Once the atoms were done, next steps was to redesign each component. We now had a very simple and bare bones design system that the engineering team could use to implement the design changes on their end.
Outcome
Outcome
The new designs were a major contrast from the old. Our goal in aligning it with our new brand was successful. The app was now accessible, modern and the overall experience felt cohesive. Our focus for the redesign was just for the patient side of things, but a future goal is to align the rest of our platforms including our provider-facing apps to be aligned with the new brand.
The new designs were a major contrast from the old. Our goal in aligning it with our new brand was successful. The app was now accessible, modern and the overall experience felt cohesive. Our focus for the redesign was just for the patient side of things, but a future goal is to align the rest of our platforms including our provider-facing apps to be aligned with the new brand.
Impact
Impact
A fresh, modern user interface.
A fresh, modern user interface.
A more accessibile user interface providing an inclusive experience for all our users.
A more accessibile user interface providing an inclusive experience for all our users.
Improved visual cohesion that improved product credibility.
Improved visual cohesion that improved product credibility.