Creating the company's design system to better reflect services
Forfend Health
Lead Designer (UI, UX)
3 months
iOS and Web design system
CEO • Engineering
I joined Forfend Health in 2022, taking over the role of a graphic design and UI/UX designer. My first tasks were to create blog illustrations and investor pitch decks, but my role soon grew to designing the website landing page and employer dashboard. See the lack of consistency across social media and the website, I sought to create an overarching design system that better reflected Forfend’s services.
One of the main pains I discovered when I was designing one of the website’s landing page was that there was no design system to fall back on to maintain a consistent theme along with the social media graphics. On the Engineering side, they found it difficult to code purely based on frames I created on figma, having to write new code for the same things.
The previous graphic designer had some leftover assets that I refined and added additional colors to the theme that could cover more user cases.
To prevent previous scaling confusion, I conducted research on the typical margins and padding for different screen sizes. With this new research I set official margins and spacing to help engineers when coding.
Their systems helped guide me in my decisions in creating scalable buttons.
After covering more of the basic asset states, I decided to create custom components that combined Forfend's brand logos and icons to more functional assets.
I created more UI components that could be easily used on both the mobile and web platform.
Using Forfend's design logo (the dot and lines), I designed an expandable accordion card that was a combination of brand and interaction design.
Assets used for lists, cards, and common iteractions.
Icons mainly used for labels or aesthetic purposes
Max Web Dimensions: 70px * 70px
Smaller Icons used for interactions
Max Web Dimensions: 30px * 30px
The design system helped guide in my decisions when it came to designing the user flow for both mobile and web.
Based on the design system, I created pagers aimed to advertise the company’s benefits and opportunities for those potentially interested in joining the platform.
While the semantics of the design system needed improvement, but I was able to build the starting foundation for Forfend Health. The design foundation not only acted for mobile and web features, but also for social media graphics and investor pitch decks. The design system was not only utilized by me and the engineers, but also by the CEO herself because she used many of the icons and card components when it came to presentations.
Easier communication between product (CEO), design, and engineering
Less discrepancies between coded design and the Figma file
Build a foundation that previously was non-existent
It’s easy to get caught up in everyone’s opinions and wanting to cover as many corners possible. But, sometimes the best way final product is one that is simple and adaptable. I wanted to push my own thoughts as well as my CEO’s and engineers, but it’s hard to cover everyone’s suggestions with conflict.