June 2020
Superbloom
Building a design system for a women’s healthcare platform
Deliverables
High fidelity mocks, visual design, design system
Background
Superbloom aims to demystify women’s health issues through a female-supported community and crowdsourced information. As a freelancer, I worked with the Creative Director and founder to design the platform in its entirety. Additionally, I brought on another designer to help me build out a design system.
The Starting Point
The initial project had a tight deadline because they had planned to launch in Fall 2020. So first and foremost, I needed to push out the core pages of the platform, which included the landing page, profile page mocks, some forum pages, and onboarding.
Translating the Brand Guide
Superbloom’s brand guide was created for print and marketing purposes, but didn't translate well into the product because of accessibility issues with the colors. To build a digital platform, I needed to convert these print designs into something that was more readable and followed basic UX principles.
But A Style Guide Wasn't Enough
I made the mistake of underestimating the scope of the project and not pushing back on the timeline.
As a result of creating the platform in a rush, the initial product had a lot of UX issues and holes in the supporting pages. As I filled these pages in overtime, all of the one-off solutions I had created to solve each issue individually made the product feel incoherent. This was evident on both a page level and on a component level.
The Real Problem
My other mistake was not communicating with developers earlier on.
While these inconsistencies made the design look less clean, the bigger issue was that the developers working on the platform had to spend a lot of time and resources building the one-off solutions. Some components weren’t responsive while others varied from page to page. So the developers either had to build a lot of custom code or guess how things should work and look. When the MVP launched, we knew it wasn’t ready for the public eye.
In these MVP screenshots, the colors and spacing of components are incorrect because I failed to specify the specs consistently in the mocks.
Better Late Than Never
I saw this as an opportunity to use what I’ve learned about design systems and build one out for Superbloom in Figma. Because the timeline for this was also short, I brought on another designer to help build text layers and icons, and implement the design system into the product.
On the left is the old mock prior to the design system. On the right is the new mock created with components from the design system.
Superbloom’s Design System
Text, Colors, and Layer Styles
While there were only two primary fonts that were used on the product, the original design had over 20 variations of font sizes and line heights for no good reason. Similarly, colors, borders, drop shadows, and spacing were all over the place. So in the design system, we minimized the variants and defined the uses for each layer style.
Buttons
In order to make easier global changes to buttons, I only created three different types: an auto-width primary, a manual width primary, and a tertiary (text) button. I controlled spacing for the button through Figma’s autolayout feature and created states for the button through overrides.
On the right are the button settings I used to create the auto width buttons. Autolayout ensures that I don't have to measure out the padding of the buttons every time I change its text. Manual width buttons were used for mobile screens.
Form Fields and Dropdowns
I used a similar concept to create different variants of form fields and dropdowns. In order to make the components more flexible, I created two form fields (boxed in red) that could be used with different elements hidden/unhidden to represent different states and use cases.
The two dropdowns on the left each needed variations that included a search bar for users to search symptoms, diagnoses, and treatments. As you can imagine, there'd be a lot.
Navigation
The navigation needed the most cleaning up because, as new features and pages were added, my initial solution no longer sufficed. Now I really needed to put my UX hat on to research how other sites handled navigation and to understand the users’ primary goals on each page.
Website Pages
When the user hasn’t logged in yet, they’re still exploring what the platform has to offer through information that they can find on website pages such as the landing page, about, blog, etc. The primary goal here is to get the users to sign up or log in. Everything else is a secondary action, so I kept it hidden in the hamburger menu.
Onboarding Pages
Once the users click “Sign Up,” we want them to focus on creating their account. So on these pages, I’ve hidden all navigation except for the logo.
Pagination was used on the onboarding process to help with usability. To create the component in a way that would be flexible if additional steps were to be added in the future, I created extra elements and hid them. Additionally, I used to autolayout so that I could use the same pagination component across all onboarding screens rather than creating separate ones for each number.
Profiles & Forums
After the user has logged in or created an account, they’d have access to features such as messaging, forums, notifications, profiles, and search. Using these features is much more important than exploring the website pages, so I got rid of those entirely. On mobile, I moved navigation to the bottom of the page for better thumb reach.
Other Components
Other components such as modals and cards came with standard settings to reduce variants in size and layer styles. In the example of the modals below, you can see that elements can be hidden/unhidden to be utilized in many different use cases.
Conclusion
I loved this project because it allowed me to apply the things I’ve learned over time while forcing me to continue my education and growth in design. While I’ve worked with design systems before, this was my first time building one out on my own. It showed me both the benefits and pitfalls of using design systems, how to build them with flexibility, and how to think about designing components as continuing solutions rather than as one-offs. Of course, a design system isn’t a one-off project so there will be ongoing work to maintain and add new components to it.
But for now, these designs are currently in development and the product will launch at the end of October 2020. The client, along with designs from this project, was also featured in Vogue.