Fashion responsive site to meet market shift.
Challenge
Design a new online shopping experience that simplifies finding and purchasing personal style, across multiple platforms that reflects the company’s new brand.
Overview
Mirror is a trusted, long standing brick & mortar clothing store providing quality affordable fashion styles for every fashion enthusiast, family and occasion. Their fashion business does not serve the growing online shopping community needs, leaving them at a disadvantage in reaching new market segments and communities.
Role
UX Designer, User Research, Visual Design, Prototyping and Testing.
Duration
4 months. This is a fictional project for DL, UX Academy.
Goals and metrics
Create a responsive and trustworthy web shopping experience to purchase fashion apparel.
Provide customers guidance in size matching after viewing style results.
Provide optimized images and details of merchandise to increase accuracy for customers.
Establish another revenue generation opportunity and convert more visitors to purchasing customers using the profile feature with fast checkout experience.
Research
Competitive analysis
I thoroughly studied the new market space Mirror is entering to better understand current successful online shopping patterns, trends, and identify any gaps and opportunities. I identified and analyzed five direct competitors on key dimensions: shopping cart feature, payment and shipping process, search and filter function.
User interviews
I interviewed 5 online shoppers to better understand their challenges when shopping online. What shapes their shopping experience? What motivates them to make a purchase and what discourages them?
Synthesis and analyze
I sorted and clustered the learnings into four defined categories: Goals, needs, frustrations, and motivations. This aided in discovering the most common patterns and led to the next step of identifying true insights that helped create solutions by uncovering what might drive their different behaviors and needs.
After defining core insights that emerged from the themes, I prioritized them into actionable insights while taking into consideration the business goals.
I then was able to create a persona to communicate users’ needs captured from the research, and guide me through design decisions.
Organizing content in a meaningful way
Each purchase item was placed on a card for an online open card sort. This helped me understand how shopper’s organized and located the information, and what makes sense to them, to better guide them in finding the items they are looking for easily.
I used the results from the card sort to create an information architecture that matches users’ mental model and expectations. The site map was then created to illustrate the structure, layout, and organization of the web pages.
The site information architecture and research informed the design of a simple navigation style reflecting how shoppers most commonly grouped items with focus on reducing cognitive overload.
Interaction design
The user flow outlined all the possible paths a female shopper might take to complete the task of finding and purchasing the perfect yellow sweater. I focused on optimizing the shopping experience by providing a clear path from site entry to purchase goal.
Wireframes
Once I had mapped out the ideal shoppers path, I began sketching out solutions with the shoppers pain points, needs and business goals in mind. I rendered my sketches into a set of wireframes. I then tested out the wireframes in Invision and iterated on the results with improvements on the process, search priorities and the experience.
After testing out the wireframes and iterating on the results, I moved forward by translating my wireframes to a high-fidelity clickable prototype. I designed a UI kit focusing on the homepage, product search results and product page with adding item to cart.
Validating the design against the goal
I conducted a moderated usability test using the prototype to validate the designs and make sure they provided a clear and consistent path for users to reach their end goal. I recruited three users to complete certain tasks covered in the design.
The results
All participants successfully completed a purchase, recognizing common design patterns in e-commerce sites.
All Participants expressed the need for a ‘continue shopping’ option or an exit sign inside the cart pop up window.
One participant expressed frustration of not having number of reviews for purchase item.
Two out of the three participants noticed the breadcrumb, one of them used it to return to previous page.
Two participants easily used the accordion feature to learn more about an item. Participants enjoyed navigation use and visual design.
Responsive designs for desktop, tablet and mobile
Lessons learned
The fashion industry is wide and evolving. Trends change and so do shoppers’ style and habits. Finding ways to create value in the market place is crucial for a business to thrive.
As more stores expand their business to online, competition increases in offering shoppers a delightful experience, one that’s more convenient for some than in-store.
Creating a delightful user-centered shopping experience that caters to it’s wide, diverse audience is a process that requires thorough and constant research, and iterations even after the site is launched, to continue to meet users’ changing needs and expectations.