Client: Self initiated
UX/UI Design: Beth Moeur
I led the design for a website refresh and brand redesign for Spirit. The client’s site is for e-commerce, and they wanted a design that was more responsive and provided an intuitive shopping experience. I delivered a more personalized and simplified online experience that captures the essence of Spirit.
Define competitors and understand current trends that will help set Spirit apart from them.
1 on 1 Interview
To help shape the e-commerce experience, I interviewed four users in order to gain deeper insights into their needs, motivations, and frustrations.
Customers want to feel informed
Customers look for reviews, diverse product photos, and well-sorted items. Refined searching helps with the decision-making process and builds trust.
Simplicity is key for easy navigation. Thorough filtering options and a clean layout make the experience more efficient for the customer.
Based on user insight sessions, I synthesized my findings to create a persona: Dani. This helped me move into the ideation process.
Dani has a keen eye for aesthetics and quality. She enjoys finding clothing that makes her feel unique. Her shopping experience becomes more satisfying when she can efficiently shop through well-sorted items that are represented with diverse, high-quality photos, and detailed information about the quality of products.
The main pillars integrate users, business, and design to identify project goals. Identifying them at an early stage helped me prioritize key features for the product feature roadmap.
A virtual card sorting was performed through optimalworkshop.com. Eight participants categorized and labeled 30 items related to clothing. This helped me understand how users group different pieces of information within a common category. This led to the initial information architecture I developed.
Card sorting findings
Most categorization was by type (shoes, accessories, jackets, pants, etc.). Some were also categorized by occasion (Sleek Chic Casual, Dressed Up Casual, Dressy Lounge).
I translated what I interpreted into design solutions and ideas. A sitemap was created to show the overall information architecture for the solution. The structure of this e-commerce site allows users to look and find products efficiently and to make purchases quickly and with ease.
I created a user flow that illustrates the journey of purchasing a product. It shows multiple task flows that a user could take to complete the checkout process.
Wireframes were created to target the ideal customer experience, making it curated, personable, simple, and sophisticated.
Build loyalty through customer reviews.
Personable & Human
A brand that feels relatable and personable to customers.
A brand that has consistent standards for quality and style that help connect with its customers. Photography as well as grouping products in “collections” will enhance the curated feel and brand appeal.
Simple and sophisticated
This design approach emphasizes simplicity and gives photography and layouts ample space.
The visual style of the interface encapsulates a modern, fresh, and uplifting brand.
From the photography to the range and names of product collections displayed, a fresh and modern aesthetic is important.
Using a high-fidelity prototype, I conducted usability testing with four participants. This helped me to evaluate and clarify my design ideas and gain insights regarding friction points for the three task flows:
An affinity map was created to consolidate patterns in users' feedback and to refine it for optimized usability.
I applied the priority revisions on the final designs:
Show alert message if the customer forgets to select size or color.
Show a pop-up when an item is added to the bag.
Seek critical feedback from user research
User interviews were integral to the redesign and led to simple but important tweaks that made for more seamless and straightforward interaction with the customer.
Establishing a cohesive visual brand
It was important to have a distinct style and voice that communicated a fresh and uplifting brand. Having a visual language creates personality and enhances the customer's online shopping experience.
Desktop view of final design