— ROLE
Research
UI/UX Design
Prototyping
Strategy
— SOFTWARE
Figma
Fig Jam
— TEAM
1 Product Designer
4 Software Engineers
1 Product Owner
Challenge:
With Sofar’s core audience shifting older, we needed to evolve the product to resonate with Gen Z — a more digitally native, conscientious, and mobile generation. I had previously developed a blue-sky website vision based on behavioural research into Gen Z’s browsing and purchasing habits, which earned enthusiastic support from the board, executive team, and wider company. The challenge: bringing that vision to life without the time or resources for a full-site rebuild.
Outcome/Solution:
Working with the Product Owner and Lead Engineer, we proposed a phased approach that prioritised redesigning our most trafficked, conversion-critical pages first. This secured stakeholder buy-in and allowed us to launch early, high-impact improvements — including a new atomic design system, guest checkout, and built-in accessibility enhancements — while laying the groundwork for a broader transformation aligned to long-term goals.
Choosing the Right Starting Point:
Working with the Product Owner and Engineering team, I facilitated strategic planning sessions to determine that individual Event pages should be the strategic starting point. This decision was based on practical considerations: these pages were among the most trafficked, served as gateways to conversions, and, due to their high visibility, offered a solid foundation for the broader site revamp.
We also identified over 60 variations of the Event page across four key flows, which needed to be prioritized.
Stakeholder Alignment:
Our proposal resonated with business stakeholders, paving the way for collaborative efforts. The initial step was to break down the project into key goals, leading to the creation of a new, flexible, and scalable design system.
Key Objectives:
- • Develop a design system that is both flexible and scalable.
- • Prioritize accessibility (a11y) compliance to enhance user inclusivity.
- • Keep customers seamlessly engaged within the purchasing experience.
- • Adding a Guest checkout feature that would also support lead and growth initiatives.
- • Integrate opportunities for localized and tailored content.
Wireframe exercise for content exploration
Core event page states
Strategic Approach:
I initiated the UI redesign by advocating for the prioritization of a Guest Checkout flow. Previously, customers were required to create an account before making a purchase, which was a significant barrier to conversion, especially on mobile devices. Our user testing, the fact that 80% of our traffic came from mobile users, and e-commerce best practices indicated that introducing a guest checkout option would be a high-effort yet high-impact enhancement.
Accessibility as a Priority:
Recognizing the importance of accessibility, I worked closely with Customer Support to identify top concerns and questions from our customers, integrating these insights into the event page. Coordination with Concert Operations also led to including accessibility considerations in our venue checklist, enhancing the overall user experience.
Crafting a Unique Tone:
The tone of voice (TOV) on the redesigned page reflected our brand’s energy and Sofar vibe. As a proof of concept, I developed some initial copy, setting the stage for a consistent and engaging communication style.
Creating an Atomic Design System:
Employing a new atomic design system, I systematically broke down the site into components, including micro-animations and change states. Collaboration with engineering facilitated an overhaul of our typography system, ensuring flexibility based on page requirements. Expanding our color library added shades and tints for accessible contrast values. Iconography was updated to be consistent and used judiciously.
Holistic Collaboration:
Engaging with Marketing, we updated and expanded our image library, maintaining a commitment to inclusivity and diversity representation. Future iterations envisioned multiple images for specific venues and video content for past shows.
Desktop layout reuses mobile structure for design continuity and ease of development.
Conclusion:
The journey from conceptualization to implementation was marked by thoughtful collaboration, strategic decision-making, and a steadfast commitment to user-centric design principles. It reinforces our iterative approach and dedication to continually enhancing the user experience.