Creating a Foundation for Product Evolution

Translated wireframes into refined visual experiences, built prototypes to validate design decisions through user testing, and established a scalable design system to improve consistency and efficiency across future product initiatives.

Design System

Prototyping

Web Design

Agency

GALE Partners

Role

Senior Designer

The Challenge

Becker, a leading provider of CPA preparation and professional education, identified an opportunity to improve the CPE course discovery experience. Users needed a more intuitive way to navigate, filter, and find relevant courses based on their professional goals. The project focused on simplifying the user journey, improving content discoverability, and creating a more efficient path from exploration to enrollment.

The Solution

Through research and wireframing, the team identified key friction points within the user journey, particularly around navigation and course filtering. The experience was redesigned to create a more intuitive discovery flow, allowing users to efficiently explore, refine, and find relevant courses. Interactive prototypes were developed to validate design decisions through user testing, using feedback to iterate on the experience and ensure the final solution balanced user needs with business objectives.

Identifying what we have and what we need

To establish a strong foundation for the project, the team conducted an audit of existing assets, workflows, and requirements to identify gaps and opportunities for improvement. Through stakeholder conversations and a review of current materials, key areas were identified to guide updates and establish a scalable approach that could support future product initiatives.

architecture

Develop a scalable design system

Established a scalable design system to align visual patterns across the website, creating consistency in UI components, styling, and user experience while providing a foundation for future enhancements.

trackpad_input

Design for prototyping and validation

Designed with prototyping requirements in mind, preparing reusable assets and interaction patterns to support user testing. This allowed the team to validate key flows, gather insights, and refine the experience before development.

Collage of design system
No items found.

Design System Foundations

As the website was developed without an existing design system, a foundational system was created from the ground up. The process began with an audit of existing UI patterns, including typography, buttons, icons, and reusable components, to identify inconsistencies and opportunities for alignment. Relevant assets from a previous Sketch-based system were incorporated where applicable, while new components were developed to address gaps and establish a scalable framework for future design and development needs.

Translating Strategy into Scalable Experiences

Building on the new design system and brand framework, visual concepts were translated from wireframes into refined interface designs while partnering closely with the UX Designer. To support focus group testing, prototype requirements were considered throughout the design process, ensuring components, naming conventions, and reusable patterns were structured for efficient validation. This approach strengthened collaboration between design and research, allowing the team to iterate quickly and validate key user journeys with greater confidence.

Prototyping

During the prototyping phase, interactive flows helped identify usability issues and uncover opportunities to refine the experience before development. Collaborating with the UX Designer, wireframes were updated to address functionality concerns and improve key user journeys. Focus group feedback provided additional insights, including adjustments to button sizing and visual hierarchy, allowing the team to refine interactions and increase clarity. Prototyping early created a valuable opportunity to validate assumptions, test scenarios, and improve the overall experience before implementation.

3 phones with website mock ups of check out experience on screen.

Designing for Product Longevity

A few months later, the client identified an opportunity to improve the checkout user journey. Because a scalable design foundation had already been established, new experiences could be developed by extending existing patterns rather than rebuilding from scratch. This allowed the team to move faster while maintaining consistency across the product, demonstrating how thoughtful system design creates long-term value beyond a single project.

Collage of design system
No items found.

Key findings and lessons from this project.

Design is strategic problem-solving: exploring possibilities, anticipating future needs, and building adaptable solutions that create lasting product value.

Let's connect

Whether your need support with designing, consulting or learning, let's bring your ideas to life.  

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.