Spurfit
Design Systems and Component Libraries

Spur.fit is an AI co-pilot for fitness and wellness coaches to create a streamlined way to track client progress. With an established app and desktop site, I conducted a UI Audit as a guide for documentation, design tokens, and component libraries.

Project Brief

UI Audit

The UI audit is conducted to better understand what inconsistencies I can rework into changes to better improve the site. I will also have better insight into the elements that’ll be brought along through the design’s reconstruction to further update the site. Through this I have determined that I’ll focus on the information hierarchy, the lack of white space and information crowding, and the inconsistencies with the graphics.

Design Tokens

Design tokens were created as regulation for the development process. Tokens were created for text and fonts, colors, and spacing.

Documentation

Project documentation was taken throughout the design process. Documentation from the UI audit is utilized to make future design decisions and and provides insight into decisions made.

Component Libraries

The component library is created as a hub for design specifications for designers and developers to reference.

Process

Reusable Elements

Colors

Fonts

Buttons

Cards

App snapshots

Needs Improvement

Information hierarchy

Lack of white space / information crowding

Inconsistent use of graphics

UI Audit

The UI Audit is conducted as an assessment of the site's design elements to determine what works or what may need improvement.

*Images in this section are from the Spur.fit site, not my design. Used for reference, only.

Design Takeaways

Design Tokens

Color palette

was strong so colors were reused. The hierarchy of colors are used have been further clarified.

Paragraph

font is an easily read font so it will be reused. Three font sizes are created to for general body text, cards, and smaller sections.

Header

font was distinct and was reused. The header was used throughout the site but there were inconsistent sizes throughout.

Padding, margin, and grid spacing

for card elements. The cards will be of fairly consistent sizes to maintain a cleaner look than what was originally designed.

Button

font is the same as the body font but the button size is set.

Core Components

Buttons

were established for different purposes but the button states weren't specified. Utilized the color palette to determine what colors were used for which state and continued the process through four different styles of buttons.

Cards

were established to provide more information into the services provided and a link to such information. The iconography and layout of the card were slightly changed for improved readability and and visual consistency.