Checkout Refresh
Background
As my first project with the company, I was asked to conduct a complete audit of their online checkout. The checkout had not been updated for many years, resulting in a clunky layout that was difficult to navigate. After completing a comprehensive analysis of the site, I presented my findings to the wider digital team and discussed my strategic recommendations. Those recommendations became the foundation for the complete redesign that followed.
Project Context & Challenge
The most challenging part of the work was the complexity of fulfillment options along with technical requirements and responsive size needs. I quickly found that one of the most difficult parts of the redesign was keeping all the moving pieces consistent across the whole experience.
Fullfillment options:
1. Shipping
2. Pickup
3. Delivery
4. Pharmacy Delivery
5. Mixed of the above
6. Authenticated uses vs. Unauthenticated
7. App vs. Website
8. Size differences & responsive needs
1. Design System Foundation & Strategy
• I Established comprehensive design system as core deliverable, recognizing that checkout inconsistencies reflected broader lack of standardized UI components across the platform
• Conducted audit of existing visual elements, identifying 23 different button styles, 15 form field variations, and inconsistent color usage throughout the checkout experience
• Developed design system documentation including usage guidelines, accessibility standards, and implementation specifications for seamless developer handoff
The purple highlighed areas show components that were resuable to demonstate different fulfillment options and states. With Figma's game-changing tools, colors, font sizes, ect. you can change any screen to meet the requirements for displaying the design for any situation.
2. Results & System Impact
• Successfully implemented design system across checkout experience, reducing development time for future checkout modifications by 50%
• Achieved 100% visual consistency across all checkout touchpoints, eliminating previous brand fragmentation issues
• Established foundation for company-wide design system adoption, with checkout components serving as proof-of-concept for broader platform standardization
• Created maintainable system that enabled rapid iteration and testing of new checkout features while preserving consistent user experience
Following, are some examples of field states used in the design system.
3. Future Design System Evolution
Identified opportunities to expand design system beyond checkout to encompass product pages, account management, and customer service interfaces
Established roadmap for design system maturation including advanced components
Using the same principles, I was able to move forward with other aspects of the business and website to create usable components for future projects such as this Account Dashboard Upate.
