Outfit Builder Widget

Fiteo provided me and three other team members with the opportunity to create an outfit builder that can be seamlessly integrated into current e-commerce platforms.

Role

Context

Fiteo intends to “elevate the shopping experience for brands and retailers by guiding their customers on what to buy. We combine the Art of Fashion (using Human Intelligence) with the Science of AI to recommend the right outfit for different occasions to boost conversion and increase sales.”

We were fortunate to be granted near-complete creative freedom, allowing us to divide responsibilities efficiently. With that in mind, I assumed the role of UX researcher, while two of our team members eagerly embraced the roles of UX designers. The final member enthusiastically took charge as the primary UI designer.

How might we allow customers to create an outfit using products from an e-commerce site, and share the looks to their social platforms?

Here are our goals and how we measured success

We defined project goals for the primary stakeholder involved: Fiteo

What are our design goals?

• Intuitive and User-Friendly Interface: We aim to design an interface that is easy to navigate, allowing users to effortlessly browse and select clothing items for their outfits. Clear and intuitive design elements, such as categorization and filtering options, will help users find what they need quickly.

• Personalization and Customization: Our goal is to provide users with the ability to personalize and customize their outfit choices. We will incorporate features that allow users to mix and match clothing items, experiment with different combinations, and save or share their favorite outfits.

• Visual Appeal: The outfit builder should have an aesthetically pleasing design that appeals to users and enhances their overall experience. We will pay attention to color schemes, typography, and visual elements that align with the brand and create an engaging atmosphere.

How do we start designing?

Finding Competitors

When introduced to our project, one of our first tasks was looking up some competitors in the field of fashion.

Our main criteria of rating these competitors is through the heuristic evaluation which is a method of inspecting and evaluating the usability of a website, or product. We rated the competition on a scale of 1-5 with 1 being the lowest and 5 being the highest in usability.

Ideate

Defining the audience

Through extensive research, my team and I came to the conclusion that Gen Z would be the perfect end users for the outfit builder.

TLDR:

Gen Z, the largest global generation aged 12–25, has a purchasing power of $360 billion in the US and prefers spending on fashion over dining, video games, and music. They are the first digital natives, pragmatic, and rely heavily on social media for aesthetics and fashion inspiration. PSFK* suggests “programmable customization” as a strategy for engaging Gen Z and Fiteo can use an outfit builder to cater to this interest.

*source

I created a detailed explanation that can be found here.

Research Highlights

Solution

Through competitive analysis and user research, we will define our target audience and explore existing solutions. The goal is to create an outfit builder widget that is able to be embedded within an existing e-commerce site.

The outfit builder will encourage users to build and share their creations in order to increase the conversion rate and provide brands with organic acquisition opportunities.

User Flow

The overall goal of this user flow is to outline the end to end experience a user would have when using the outfit builder. This provides an outline for the team to be able to focus on the important stages of the outfit builder to design.

Wireframes

As I went through the wireframing process, I realized how essential it was for ensuring that everyone on our UX team was on the same page and working towards creating a seamless experience for our outfit builder. With this shared understanding, we eliminated ambiguity and promoted collaboration, allowing us to discuss and iterate on design decisions based on a common reference point.

Color Palette

We picked colors that were cool and modern for Gen Z. The colors we chose are similar to a color called Viva Magenta, which is the Pantone color of the year for 2023.

Pantone’s color of the year is a usual indicator for what colors will be trendy in the upcoming year.

Over a few days on the third week, another team member and I conducted in person testing with a total of 10 different users who fit the audience we were trying to target.

We created two tasks for users to test.

Task 1: Building and Saving an Outfit

• Users were instructed to use the outfit builder to create an outfit of their choice.

• They added desired clothing items to the outfit builder and customized the look as needed.

• Once the outfit was finalized, users proceeded to save their outfit.

• Saving the outfit involved adding all selected items to the cart for future purchase.

pt.1

Edits

Result Synthesis

After users completed the tasks, the I analyzed the results and feedback gathered.

• The feedback was categorized into three main categories: positive feedback, discovered issues, and actionable steps.

• Positive feedback highlighted aspects of the outfit builder that users found enjoyable, intuitive, or visually appealing.

• Discovered issues referred to any problems, difficulties, or bugs encountered by users during their interaction with the outfit builder.

• Actionable steps represented the specific measures and improvements the design team planned to implement based on the feedback received.

The main issue that was brought up with users was that adding clothes didn’t feel intuitive. There were too many screens that took the user out of the outfit builder experience. There was an opportunity to integrate the experience on one screen.

We came up with the idea of an overlay style menu for the experience. This way, users will stay on the outfit builder and seamlessly create their outfits.

What an amazing opportunity! Here’s what I learned.

Always ask questions.

In our design process, we encountered numerous challenges at the beginning because we lacked a clear understanding of what we were expected to create. We learned the importance of actively seeking clarification through asking questions. Rather than relying on assumptions, we realized that it is crucial to inquire about any uncertainties, gather necessary information, and make informed decisions based on a shared understanding.

Create a list of responsibilities for each team member.

Implementing a task distribution system proved to be highly beneficial in enhancing our efficiency. By creating a detailed list outlining the specific responsibilities and roles for each team member, we were able to streamline our workflow and complete tasks more quickly. We leveraged a project management tool called Trello to help us organize and track progress, ensuring that everyone had a clear view of their assigned tasks and deadlines.

Prioritize in-person communication.

We discovered that face-to-face discussions have numerous advantages when it comes to sharing ideas and fostering creativity. While relying solely on messaging platforms, we encountered challenges such as misinterpretation and delays in response. However, when we switched to phone conversations or in-person meetings, we experienced improved communication efficiency and effectiveness. Being able to communicate in real-time allowed us to bounce ideas off each other, brainstorm collaboratively, and resolve any issues or concerns more swiftly.

Basically, incorporating a question-driven mindset, establishing clear responsibilities, and emphasizing direct communication channels greatly contributed to our design process.