The Who
A startup in stealth mode is creating a robo-advisor investment product for the every day consumer to reap the benefits of wall street's playbook.
The Problem
The startup has a small team of two engineers and an MVP to develop in just a few months. They had UI hastily put together in Figma, but not much attention was given to creating consistent components that could be leveraged over and over. Each page presented as a bespoke piece of UI. Additionally, the designed experience was not mobile friendly. Given that this is a consumer product that hopes to leverage influencer marketing, creating components that were optimized for mobile is tantamount.
The Before
- Information density was not good for mobile or desktop
- Too much of the same shade of blue didn't allow the user to clearly see the CTAs
- Text sizes and styles weren't consistent
- Visual elements didn't have a clear aesthetic vision
The Design "System"
System is perhaps too strong of a word for a component library built to drive forward an MVP. Let's call it a kit. Beyond what to call it, the solution is methodical, but simple. Define a standard set of components and start rebuilding the UI. With clear goals around improving information density, improving the mobile breakpoint, and adhering to UX best practices I could test the success of the design kit fairly quickly.
The Test
After a few tweaks the Design kit passed the first pass on the UI. Two benefits we noticed right away: Information density was much better and CTAs are now jumping off the page. The UI is simple and minimal to reflect the stage the business is in. As we continue to march towards launch date, the front end will continue to evolve.