Upon analyzing the competitors, I created an affinity map to divide the responses to understand the responses better.

Interview Findings

Overview

Project Background My sisters and I were on the hunt to find the perfect white coat that wouldn’t hurt the bank and looked amazing at the same time. We spent a lot of time on going to our favourite brands websites just to be able to narrow the options and then compare prices. That experience made me realize that there should be a better way to search fashion brands on a mobile device.

Problem Online, people deal with too much information, making it hard to sort through it all. In fashion, buyers have many choices with new brands appearing regularly, but they still find it tough to quickly locate high-quality items at reasonable prices.

Objective Enhancing user’s online shopping experience as they browse the web to find the desired fashion item, as well as how they compare these alternatives.

UI Design

Empathize

Why Using competitive analysis and user interviews to better learn about the user and their needs.

Research Objectives Determine users online shopping process
Determine what the user looks for while shopping process
Determine user sentiments while online shopping process as well as any potential challenges.
Determine the tools and applications a a user uses to compare prices

How Secondary Research + Competitive Analysis + 4 User Interviews

Competitive Analysis

Research Ramp-Up Findings

Interviews

Affinity Map

58% of all online visits came from smartphones in 2021, and mobile was already taking the lead with 64% of all online traffic in 2020.

When shopping online, a poor search function can be frustrating due to long search times and irrelevant results. It should be easy to find what you want quickly and at a good price.

Shopping online means you can shop anytime, anywhere. No need to worry about store hours or long lines.

However;

E-commerce in fashion lacks the ability to try on clothes, leading to size discrepancies and quality uncertainty for customers.
Waiting for a delivery is frustrating; getting an outfit for an event might not arrive on time.
Many fashion customers have difficulty finding clothes that fit well, with 62% facing this issue.
More often than not, retailers will find product clarity is the primary issue, with up to 70% of returns due to poor fit or style.

After analyzing competitors, I engaged in one-hour-long individual interviews with users to understand and relate to their behaviours.

Number of Participants: 6
Age Demographic: 20-46
Tech Savviness: 7-10
Location: Canada & United States

Insight 1: Participants prefer online shopping vs in-store shopping because of ease of access, wider range of size and style, visibility of price and the ability to narrow and compare options.

Insight 2: Participants spend anywhere from 10 mins to months shopping for a desired item - some of the criteria that dictates time spent includes urgency and price range (low vs high end).

Insight 3: Most participants find online shopping to be overwhelming, frustrating and time consuming because of the amount of options available to swift through, the ability to track multiple tabs for different brands and perception vs reality.

" Sometimes its hard to manually keep track of multiple stores, especially on the phone because need to have multiple tabs open " - Hibba

" Shopping online can be overwhelming due to many options per site " - Susan

Insight 4: There are times where people like exploring items and other times they want to stay focused on looking for specific items.

Insight 5: All participants shop at their favourite stores first due to their brand loyalty, purchase history and perceived brand value.

Insight 6: Top criteria for comparing items across different brands include; price, quality and style.

Insight 7: All participants expressed that a centralized system that would help compare across different brands would be helpful for comparison to save time.

Insight 8: Most of the participants expressed that they rely on reviews before purchasing whether on the brands website or other platforms such as Youtube.

User Persona My interview debrief revealed an avid shopper (Alexa) who loves to keep up with all the fashion trends.

Feature Roadmap To design FashionEase effectively, I tailored a roadmap with key features for all user types, organizing them based on importance and timing. This plan aided in efficient time management to achieve an MVP.

Ideate

Define

Why Utilize past research to set main objectives and determine top priorities for FashionEase features.

How User Persona + Feature Roadmap

Sitemap Using Miro, I created a sitemap for FashionEase. Starting with the navigation menu and working my way down, referring to my "must-haves" on my feature roadmap to ensure all the features are there.

Task Flows Using the same tool, I created three task flows for the main functions the app should have.

The first one lays out account creation and selection of user preferences.

The second one lays out selection of shopping method; and search for the desired item.

The third one lays out comparison of the item and navigation to the vendor’s website.

Scenerio #1: User is on the hunt to buy a specific fashion item but get frustrated with the countless options internet suggests, so they download FashionEase to create an account using their email to ease up the search process.

Scenerio #2: User is on the hunt to buy the perfect women's black pants across their favourite brands.

Scenerio #3: The user really likes the black pants they came across, how would they go about seeing similar items to this product, in specifically similar in quality.

Sketching Wireframe | Using the Balsamiq app on my iPad, I started drawing my wireframes. I used my sitemap and task flows to help me decide which screens to draw.

How Sitemap, Task Flows and Wireframe Sketches

Why With the user persona and essential feature roadmap defined, it was time to brainstorm and imagine how FashionEase could be created logically.

Design

How UI Design

2.

For ease of comprehension, I added text under the logos so that users can easily read the name of the brands.

I also, updated the “Add” button to a “+” to maintain consistency with the other screens.

Why Now that the detailed wireframes are successfully completed, I took the opportunity to thoroughly test my ideas for the various task flows. To facilitate this process, I utilized the Figma file to construct a clickable prototype that incorporates simple yet effective interactions and animations. This approach has allowed me to better visualize the user experience and gather valuable feedback on the overall design.

How High-fidelity click-through prototypes

Affinity Map

I made an Affinity Map to summarize my usability testing results, noting Successes, Concerns, and Suggestions, and used color coding to distinguish between users.

Why To improve my product's usability, it's important to analyze and act on user feedback. This will help ensure the product better meets their needs and expectations.

7.

Added a redirecting prompt to let the users know that they will be taken to the brand’s website to buy the item.

Final Prototype

Last but not least, I would like to invite you to take a moment to thoroughly enjoy and appreciate my final prototype! Your feedback and thoughts would be invaluable to me.

As you go through the prototype, keep in mind the below tasks:

You're looking to buy a specific fashion item but feel overwhelmed by too many online options. So, you download FashionEase and create an account with your email to make your search easier.
You are looking to buy the best women's black pants from your favorite brands.
You like the black pants you found. How can you find similar high-quality items?

5.

Updated the navigation bar bookmark icon to a heart icon to keep it consistent with the heart icon on the images.

Test

Why With my prototype successfully up and running, it was finally time to carefully validate and thoroughly test my product. This phase was crucial, as it allowed me to gather comprehensive feedback and make any necessary revisions based on the results I obtained during the extensive testing process. Ensuring that the product met the desired standards was now my top priority.

How Usability Testing, Affinity Map and Priority Revisions Matrix

Usability Testing

Total User Testing Participants: 4
Duration: 6 hours
Goal: To test my assumptions of how users would navigate the app and if users would find the features useful.
# of Tasks: 3

Each user had to finish 3 different tasks during the session. After completing the first task, I asked specific questions to understand their actions, expectations, frustrations, and overall views on the experience. I also recorded each user testing session to capture the dialogue and interactions, which helped produce detailed final results.

Outlined below are the 3 scenerios that were provided to the users.

You're looking to buy a specific fashion item but feel overwhelmed by too many online options. So, you download FashionEase and create an account with your email to make your search easier.
You are looking to buy the best women's black pants from your favorite brands.
You like the black pants you found. How can you find similar high-quality items?

Iterate

Revisions Here are the main changes I made to my wireframes, showing the updates and improvements made during the design process.

4.

Updated the image dimensions to utilize white space better.

Renamed the wording of the page title to “select an option to proceed”, instead of “select shopping method”, as users were confused about the verbiage.

Affinity Map Findings

User testing sessions were successful. All users completed the tasks with ease, and their feedback mainly centered on clarifying things, suggesting improvements, and discussing possible scenarios not included in the project.

All the users suggested that something similar is not accessible to them currently, and what like something like FashionEase.

Everyone found the website easy to navigate, and appreciated the chat and flag feature as it make communication easier.

Most of the feedback was around UI, which included (but not limited to):

One of the concern that was brought up in different points on the app was about text sizing which made certain areas not legible.
On the page where the users were supposed to select their shopping method, majority of the users recommended change of verbiage to make the intention more clear.
Addition of favourites icon on the images was suggested and users also wondered how they can view the favourited items.
Some also suggested to have a redirect pop up when "Buy" is clicked on the final page of the app to allow the user to know that they are being taken to another platform.

Overall the user testing session were very helpful. All the users were able to navigate the app with ease. Aside from acknowledging the ease of use, all made great recommendations and improvements.

Majority of the changes that will be made are small but will be impactful. That being said, all the participants like the idea of this app and the convenience it will provide.

Priority Revisions Matrix

The next step was to choose which issues and ideas to address. By organizing the notes in my Affinity Map into a priority chart based on user value and effort to implement, I could easily identify problems to solve right away (high value, low effort), those to tackle next (high value, high effort), and issues to ignore if they had low user value and were not recurring.

1.

For this screen, I Changed the wording to “Swipe up to sign” from “Swipe up” to increase legibility.

Also, pushed the image further up and curved border to highlight the text on the bottom of the screen.

6.

For this screen, I updated the verbiage of the ‘Compare’ button to ‘See similar’, as well as ‘Buy’ to ‘Visit site’ as the users found the intention of the original verbiage unclear.

Added a magnifier plus icon for the users to zoom incase they want to see details.

Lastly, I also changed the position of the ‘Visit site’ to be closer to the reviews so the users scroll down further to go through the details.

Why I refined FashionEase's appearance by meticulously crafting its interface and visual aesthetic, ensuring it was polished and visually appealing, before proceeding to test it on the online platform.

Protoype

3.

Added a section for preferred fit to add another layer of customization as per the feedback.

As well as capitalized the lower case sizes to match the real world sizing layout.

Final Prototype