01 — Challenge
The Challenge
C Spire needed a scalable design system and a robust UX process to ensure consistency across multiple products, faster time-to-market, and improved usability aligned with best practices.
The challenge was to create a framework that combined design flexibility, developer collaboration, and data-backed decision-making, while maintaining a unified brand experience across all digital touchpoints.
"Create a framework that combined design flexibility, developer collaboration, and data-backed decision-making."
02 — Approach
Our Approach
Our approach centered on three key pillars — User Flows & Collaboration, User Testing & Validation, and Research & Auditing. Each pillar was designed to reinforce the others, creating a holistic design process.
User Flows & Collaboration
Created detailed user flows in FigJam with developer leads
Testing & Validation
Early-stage usability testing before development begins
Research & Auditing
Baymard Institute standards and benchmark auditing
03 — User Flows
User Flows & Collaboration
Created detailed user flows in FigJam in partnership with developer leads. Designers mapped out screens while developers added back-end details like API and database connections. Updated flows with high-fidelity comps to provide an end-to-end view for business stakeholders.
- Collaborative FigJam flows co-created with developer leads
- Designers mapped screens while developers added API and database connections
- Updated flows with hi-fi comps for complete stakeholder visibility
- End-to-end documentation reduced miscommunication during development
04 — Testing
User Testing & Validation
Conducted early-stage usability testing on comps and prototypes using UserTesting.com. Gathered actionable feedback before development began, reducing costly post-launch fixes. Shared results with cross-functional teams and tracked insights through analytics tools.
05 — Research
Research & Auditing
Leveraged Baymard Institute's research library and auditing tools to benchmark against industry best practices. Presented audit results to cross-functional teams and tracked completion through post-production analytics. Required all UX team members to complete Baymard Premium Certification.
- Baymard Institute research library and auditing tools for benchmarking
- Audit results presented to cross-functional teams for analysis
- Post-production analytics tracked completion and progress
- All UX team members completed Baymard Premium Certification
06 — Design System
Building a Unified Design System
To address scalability and consistency, we developed a modular design system with reusable components that streamlined collaboration between designers and developers, a consistent visual language applied across all Horizon products, and flexibility to adapt to evolving business needs.
07 — Impact
Impact
The new UX framework and design system delivered measurable benefits across all digital products.
Minimized Design Inconsistencies
Unified patterns across multiple platforms eliminated visual drift.
Accelerated Product Releases
Reduced design and development cycles significantly.
Improved User Experience
Data-driven decisions enhanced usability and customer satisfaction.
Scalable Foundation
Positioned C Spire for long-term growth and digital innovation.
08 — Takeaways
Key Takeaways
Collaboration is critical
Integrating design and development early ensures clarity and efficiency throughout the product lifecycle.
Research-driven design wins
Leveraging Baymard standards and usability testing reduces risk and drives informed decisions.
Design systems enable scale
Modular components accelerate delivery and maintain consistency as products grow.