When I began working at Aspire it was still a small but quickly growing company. I started when the company was beginning to build its product team with structure and new processes that it had never had before. We knew the place to begin was a UI refresh but where does that start exactly?
It starts, with defining the main components of a design system - the scaffolding of product design.
Problem: Design Inconsistency
Until this point, the product had never been touched by a designer. That leads to a large platform with a lot of visual inconsistencies.
1. Arial and a dated look
Arial is a classic font used in old Windows systems in the 90’s and while it is easy to read there are so many other good choices available that are more current.
2. Unclear field behaviors
Not only were there visual gaps between screens and field behaviors. There were also inconsistencies with today’s design standards with things like required fields.
3. Icons for everything
Icons can be a useful tool for quick at-a-glance actions but their usefulness is only valuable if they’re easily recognizable. The use of icons in place of words in Aspire was excessive.
Explorations
Many prototype designs and tests over many weeks began the process of designing Aspire’s design system
Design
Using Figma and a little inspiration from Google’s Material Design, I was able to build a solid design system that filled in the gaps and inconsistencies. This was the launching pad for the new UI rollout.
Details and Prototypes
Outcome
A complete design system shared across teams, streamlining the UI portion of any future projects. A centralized source of truth nearly eliminating design errors and inconsistencies and contributing to the development ecosystem.
“Having designs and standards all in one place saves me so much time in development. Time I would have spent either in meetings, chats or going back and forth with QA and design.”
-Aspire Developer
Reflection
Overall, the design system was a success not only for the handoff process to development but also for me. Creating a reusable and flexible component library in the beginning made it easier to prototype over 1k pages, menus and modals for the Aspire UI refresh project.