Digital product & UI/UX

Own Up Design System

Project overview

Own Up is a technology company that makes sure borrowers get the best deal on their mortgage.

As the design team at Own Up, we used the Atomic Design model to create a cohesive design system and component library. Atomic Design is a modular system founded on the principle that a whole system can be subdivided into smaller parts.

Atoms: the most basic building blocks. Examples are elements like color, shapes, and typefaces.

Molecules: Created from two or more Atoms. Examples are buttons, links, and

Organisms: Complex combinations of multiple Atoms and Molecules, often performing more than one function.

Previously we’d been working off of a very haphazard group of designs and needed to create new components for each page, which was impractical and bad for accessibility.

Details

Company / client: Own Up

Role: Product Designer

Direct collaborators: 3 designers

Team: Developers

Time period: 2021

Project type: Digital product & UI/UX

(note: if the video does not load, refresh the page)

Before

After

Goals

Have a cohesive, adaptable, well-branded, and accessible (WCAG 2.1 compliant) design system to use throughout the product.

Color contrast testing for WCAG compliance. Classifying which colors can be used as text colors on certain color backgrounds.

Process

Conducted competitor research
Outlined what components we needed to create
Created multiple rounds of design for each component, holding brainstorming meetings
Decided on final designs. For components like buttons included dynamic states like hover state, clicked state, and focus state (for screen readers)
Checked in with key stakeholders and development leads to confirm the components were realistic to build and there weren’t any oversights
Rinse and repeat for each new component, until we had enough to create the Component Library 1.0
Created thorough developer documentation for each component
QA with developers to ensure components are being held to high quality standard
When all initial components were created, we released v1 of the Component Library and applied it to all our current webpages! This process also included mocking up all the current webpages in Figma with the new design elements, so the devs would have a guide to work off of
Continued adapting and updating the design/component libraries over time to fit our changing needs

Typography guidelines

Challenges

Since this was a huge revamp which required a lot of designers focusing on a project that didn’t directly generate profits, it was difficult to get this project prioritized by stakeholders

Extremely detail oriented project, from the creation of each Atom to ensuring proper QA on finished components

Success

This project was a huge success, and made the work of designers and developers much faster and easier. The design system brought a much more cohesive and modern look to the entire website, as well as ensuring that crucial elements like text, links, and buttons are accessible.