Fiteo Inc.

Exploring possibilities for a better e-commerce experience.

Project Summary

Fiteo Inc. is a startup that is looking to bring a new “outfit builder” feature to market. The outfit builder will allow customers on e-commerce clothing sites to create a “look” using products from the site and share the look on their social platforms.

Problem

How might we allow customers to create an outfit using products from an ecommerce site, and share the looks to their social platforms.

Solution

Through competitive analysis and user research, we will discover our target audience and explore existing solutions. The goal is to create an outfit builder that encourages users to build and share their creations in order to increase the conversion rate and provide brands with organic acquisition opportunities.

Timeline

1 month

My Role

Research: User Research & Analysis

Design: Ideation, Wireframing, Prototyping, Usability Testing

Tools

Figma, Miro, Slack

Final Prototype

Empathize

To start off on how we could help Fiteo Inc., we needed to gain a better understanding about the current outfit building market, how outfit builders are utilized in other companies, and user’s experience in using outfit builders. We outlined a research plan to state the objectives and methodologies on how research will be conducted.

Research Goals:
- Identify a target demographic
- Understand the online outfit building market
- Identify the direct/indirect competitors
     - Find the customer goals, needs, frustrations, and motivations

Market Research

Competitive Analysis

A competitive analysis was performed to:
1. Synthesizing the information collected before designing the widget
2. Identify common pain points
3. Identify features that we should include in the widget
4. Enhance our features by taking notes from the competitors widgets

We looked at three categories of competitors (Independent desktop online web outfit builders, Mobile App Outfit Generators, and Retailer-Integrated Outfit Builders) and gave them a heuristic rating based on the site’s usability

Pain Points:‍

The Solution

Define

User Persona

View all personas here.

Ideate

Red Route Analysis

To understand more specifically on which decisions are most important for the app, we created a red route analysis using Figma to determine which functionalities are most important based on the user personas. This helped narrow down the scope of the project.

User Flow

To understand more specifically on how decisions might be made when navigating through the app, we created user flows using Figma and laid out how we would make decisions in certain scenarios. This helped in understanding the user's behavior on how they might interact with the screens and features within the app.

Low Fidelity Sketches

We then created low fidelity sketches using pen and paper to quickly visualize how one would make decisions in certain scenarios. This helped us get our rough ideas out on paper before fleshing it out on Figma.

Low Fidelity Wireframes

Mid Fidelity Wireframes (Gallery)

Mid Fidelity Wireframes (Clothing Item selection)

Mid Fidelity Wireframes (Outfit Builder)

Entry Point Flow

To visualize more specifically on how decisions might be made when navigating through the widget, we created an entry point flow using Figma and laid out how one would make decisions in certain scenarios. This helped in visualizing how the user's might interact with the screens and features within the app.

Visual Design

Per discussion with our client contact, we ended up concluding on the following color scheme to emphasize youth and elegance.

Components

Usability Testing

Before the testing was conducted, a usability testing plan was created to outline the objectives, methodology, participants, and tasks. Using this we were able to conduct a moderated remote testing with 7 participants. The think aloud method was prompted and all observations were documented.

Testing Objectives
- Identify the overall ease of use in navigating through the Fiteo prototype.
- Understand the efficiency in users completing each task.
- Understand the approach users choose to complete each task.
- Identify any frustrations, confusions, and misunderstandings.

Testing Findings Overview
- # of Participants: 5
- 2 Males & 3 Female
- Ages 21 - 26
- 80% completion rate
- 92% error-free rate

High Fidelity Wireframes

Reflections/Next Steps

As a person who enjoys creating/sharing new outfits, working on this project was fun to do. I was able to learn more on how businesses and brands sell and market their products online. With that knowledge, it helped me to understand better on how we can utilize technology to implement this on a wide scale market. Projects like this remind me of how much technology is advancing and the convenience it can bring to people if used correctly. A takeaway I got out of this project was to not overthink the design. Because Fiteo is still a growing company, it is best to give it room to grow and not design more than I am supposed to.

Next steps will include:
- More usability testing with the updated prototype
- Explore implementing the product on different retailer apps/websites
- Continue to update, iterate, and maintain product

What did you think about this case study?

✉️  Let me know your thoughts by sending an email
‍🔗  Connect with me on LinkedIn