Web Experience
Rains
↓
Overview
In 2018, I led the redesign of the Rains e-commerce site, a leading outerwear lifestyle brand known for its conceptual-meets-functional design approach. The objective was to craft an engaging, intuitive online shopping experience that not only bolstered sales but also strengthened brand loyalty. This case study delves into the processes and innovative strategies employed to achieve this transformation.
Role
As the Design Director and Lead Product Designer, I directed the project end-to-end, ensuring that each design decision reinforced Rains' brand ethos while enhancing the user journey through data and user-centered design.
Responsibilities
Project Leadership, Product managements, Cross-functional Collaboration, User-Centric Research, Design Execution and Technical Integration.
Goals & Objectives
The primary goals were to enhance user experience, increase online sales, and improve customer retention. We also prioritised mobile optimisation and elevating Rains' visual identity.
To achieve these, I focused on intuitive design, user feedback-driven iterations, and maintaining brand consistency using Rains' minimalist aesthetic, signature colours, and typefaces.
Research
Extensive research was the bedrock of this project, involving competitor analysis, market trend evaluation, and detailed user behaviour studies. These insights were pivotal in understanding user pain points and aspirations. Our research emphasised the brand's neo-Scandinavian aesthetic and its appeal across four continents.
Participants
We engaged a diverse group of participants, including current and prospective Rains customers, as well as industry experts. Their feedback was instrumental in shaping a user-centric design.
Key Insights
〰️
Key Insights 〰️
Streamlined Checkout
Users demanded a faster, more intuitive checkout process.
High Quality Product Content
Customers sought comprehensive product details and high-quality content.
Reinforce Brand Storytelling
Users wanted to feel informed, represented and feel part of Rains brand narratives.
Information & Technical Architecture
A complete overhaul of the information architecture was executed to work with Shopify and Rebuy to simplify navigation and enhance content discoverability and storytelling. We ensured that the technical architecture was robust, scalable, and seamlessly integrated with existing systems.
Personas, Empathy & Journey Mapping
Creating detailed personas allowed us to deeply understand the varied needs of our users. Empathy maps and journey maps were developed to visualise user interactions and emotional experiences, highlighting opportunities for design improvements.
The Design Process
The goal was to create an elegant, minimalist experience where the products are the main focus, seamlessly reflecting the Rains brand vision. This approach allows the UI to breathe, making it as intuitive as possible for the user.
The design process was iterative and closely adhered to Rains' brand guidelines. We began with collaborative brainstorming sessions to align on the project's vision. Initial wireframes explored layout options and user flows, leading to the development of interactive prototypes for testing.
User Testing
User testing was integral to our process, involving A/B testing and usability testing with a diverse group of participants. This iterative approach helped us fine-tune the design, ensuring every decision was carefully considered from a users point of view.
The Solution
The Solution
The final solution featured a modular approach to UI components that use graceful animations in transitions and brand elements that can be personalised, staying true to Rains' minimalist aesthetic.
This included introducing their new Europa Grotesk typeface, and the brand's signature black, white, and grey colour palette, all contributing to a modern and cohesive visual identity.
I implemented a streamlined checkout for efficiency and a sleek, responsive mobile-first design. Rich product pages featured detailed descriptions, high-quality images, and user reviews. The modern, minimal UI highlighted the products, while integrated brand storytelling enhanced user engagement and loyalty.
Impact & Results
😍
Impact & Results 😍
Mobile Transactions
A 25% increase in mobile transactions across mobile and desktop.
Enhanced Brand Storytelling
Strengthened ways to showcase content that aligns with Rains' premium positioning.
Cart Abandonment
A 15% decrease in cart abandonment rates across mobile and desktop.
Improved Conversion Rates
A 20% increase in overall conversion rates across product details pages.
Improved User Satisfaction
Enhanced user satisfaction, evidenced by positive feedback and increased repeat visits.
Increased Revenue
The re-design led to an 18% boost in online sales revenue.