GuideStone's Design System
UI/UX
2024
Lead Designer
Project info
Challenge
GuideStone's product teams lacked a unified design language, leading to inconsistency across their critical financial and trading apps and slowing down development.
Solution
I was hired to evolve their limited 20 component style guide into a fully functional, scalable Figma design system. With the process I developed, the design system was considered complete a year early, unlocking:
Significant time and cost savings for the company,
A cohesive user experience, and a more efficient workflow.
A contract extension opportunity for me to work on other projects for GuideStone.
Platform
Figma, Storybook.
Timeframe
Estimate - 2 years
Completed - 1 year
My Tasks
Rule Suggestion, Component Creation, Visual Design, Q&A Testing, Information Architecture, UX Writing, Infographic Design
The project when I started
Results
The new system provided:
84 clear scannable pages organized by atomic design principles
220 reusable components,
2021 variants designed for clear and easy customization,
Comprehensive guidelines written for each component,
Built in prototype animations,
Image examples of when and where each component is utilized,
7 breakpoints and page layouts for website and app use,
54 variables for padding, corner radius, font size, and line-height
2 breakpoint modes to change the type, spacing, size, and shape of all art board components with 2 simple clicks.
New knowledge for the team including:
How to utilize branching in Figma, streamlining the review and approval process
How to add and edit more modes in Figma, like light and dark mode
The project when completed
The impact of my work
Achieved a major goal early:
“Due to your work, the time to produce the basic design system elements in Figma decreased by 66%. Before your work, the timeline for producing the basic level of design system components was 2 years. You helped GuideStone achieve that goal in 1 year. “
“Adding variables sped up the time it takes to prepare different screen sizes. That also helped the UX team handoff various screen sizes to the developers and reduced their questions since they could see more options than just desktop and mobile. “
My Process
Auditing and Aligning on Pattens
The initial style guide covered core elements like:
Logos, colors, and fonts
Buttons
Form inputs (drop downs, text fields, checkboxes, radio buttons)
Responsive designs for desktop and mobile
After reviewing these components, I identified recurring patterns and collaborated with the design manager to establish consistent foundational rules for the design system.
Create and establish the rules of the design system
The rules included breakpoints, grid styles, typography font styles, spacing, modes and how they all change depending on the viewport. This also included how to organize the components which was decided to be by the principles of atomic design and then in alpha order. This was all created utilizing Figma Variables.
Figma Branching for Workflow Optimization:
Create & Update: Open a new Figma branch named after the component page. Make all necessary updates to the component.
Submit for Review: Request manager approval while continuing work on other branches, maintain productivity without waiting for feedback.
Merge & Repeat: Once approved, sync the branch to the main file creating a history log.
This branching system enabled seamless parallel work while maintaining version control and design consistency.
Create and Test the Components
After I created, organized, and got approval for the component page to be merged into the system I would test the components for the following:
Discoverability: How hard is it to find the component?
Prototype Functionality: Does the component animate?
Variable Clarity: Are the variable option instructions clear?
Responsive: Do the components resize correctly with modes?
