Offset Commerce
Web App Redesign: Merging Design & Commerce Technology
In 2016, our boutique design studio, renowned for its expertise in the wine industry, merged with a leading commerce technology platform. And in 2019, we decided to unify under one brand. This unification revealed an opportunity for growth. While our product features were top-notch for the luxury wine sector, we saw the potential to enhance the legacy product interface to meet our high design standards. This insight drove us to innovate and elevate the product, ensuring it shines on our marketing website. This project underlined Offset’s commitment to world-class design and exceptional customer experience.
With this project, I pivoted to product design and played a key role in its success.
From this:
To this:
Project details
-
A more integrated product: The newly built Content Management System (CMS) needed to be visually refined and fully integrated into the core web app.
A better process for scaling and spreading knowledge: The small team of two rapidly grew to a team of over ten people. We needed to implement new methods to help the team successfully scale and share knowledge.
Become a more design-led, user-centric product: The product had been built piecemeal and lacked cohesion of UX. We needed to transition from designing directly in code based on individual client requests to a customer-centric, research-driven product. We also wanted a product that we could be proud to showcase on our website!
-
Redesign & Rebuild: We redesigned and rebuilt the product front end from the ground up while maintaining legacy flows and proven features. This approach allowed us to establish reusable patterns and components, speeding up the development process.
Product Team & Agile Methodology: Operate like a true product company—by building a full-stack product team, implementing agile methodology, building documentation, and adopting a design-led product approach.
-
Including myself, we had a 10-person team.
Design Director/Project Lead (me)
Chief Product Officer
1 Senior Back-End Developer
2 Senior Front-End Developers
3 Junior Front-End Developers
1 Senior Product Designer
1 Dev Manager/Scrum Master
-
Primary Responsibilities:
As the senior product designer, my main focus was on the product redesign and the development of our design system and component library in Figma.
I was given free rein to solve both the redesign and establish our design process.
I upskilled by teaching myself product design and learning best practices.
Team Development:
I hired key team members, including a dev manager and a junior product designer.
I introduced agile methodology and tools like Figma, UserBit, Jira, and Confluence (I was a fan from my previous role at Atlassian) to the team workflow.
An early design exploration for the dashboard
The Navigation
The introduction of the CMS to the already extensive and complicated product drove the need to reconsider the navigational structure. Besides some basic visual design, such as aligning colors and type to the new Offset identity, my first focus was on exploring a new navigation design.
-
Through my research of other commerce products in the market, like Stripe and Squarespace, we aligned around a side nav that allowed for multi-level menus, a cleaner UI overall, and better work focus once at a deeper level.
After many design iterations and prototypes in Figma, I conducted several rounds of user testing with a range of clients to gain insights into usability and visual design preferences. The results: The horizontal nav tested well, was intuitive, and garnered quick adoption by testers, despite its difference from the current nav.
A catalog of every navigation state
The design system
Colors
Muted blues form the base for the high-contrast work area, with a complimentary burnt red-orange as the primary action color.
Mature
Calm
Functional
Typography
Focus on readability and a strong numerical character set.
Inter - Base
Beatrice - Brand
Component Design
I led the design of the main components and system, applying them to core product pages.
Directed the full build-out of the component library, style guide, and product page design with the junior designer.
Navigating Pivots
Challenges:
Extended project timeline and increased costs led to a leadership decision to pivot.
The legacy product, originally built in PHP, was being rebuilt in React. However, the current dev stack had limited support for React.
Adjustments:
Leadership decided to maintain the PHP stack, limiting some design flexibility and adopting an evolutionary design direction to meet the aggressive timeline.
Utilized most of the new design library styles and component designs for the reskin, incorporating many new flows and features despite the pivot.
Decoupled the CMS from the core product, which allowed us to go back to a horizontal navigation.
Explorations for a horizontal navigation
Because we decided to decouple the CMS to the core product, we made the decision to go back to the horizontal navigation, which users were used to and allowed for non-lateral navigation, an insight which came out later in our work.
“You guys are like The Porsche of wine e-commerce! A beautiful blend of form and function.
Offset Commerce‘s blend of form and function has streamlined our process without sacrificing quality. The user interface is friendly and efficient for both our administrative and sales needs. Internally, we can quickly train staff and rapidly increase proficiency. In path to purchase, customers can experience our brand at their pace, but finalizing their order is just a click away.”
—A satisfied client, who likes Porsches
Conclusion
The team did a great job of working within the new constraints and still delivering an excellent design that was very different from our starting point.
Achievements:
Enhanced product design and integration.
Established scalable, user-centric processes.
Overcame challenges by being adaptive, resulting in a product that still aligns with our high design standards and can be proudly showcased.
