FitPlanner App Development
A detailed walkthrough of my design process for an AI-powered outfit planning mobile app.
Background
Design Challenge & Responsibilities
Challenge
Design an outfit planning app that leverages artificial intelligence to provide personalized outfit recommendations.
Timeline
March 2024 - June 2024
Disciplines
User Experience Design
Product Design
User Experience Research
Background
Our Vision
In today's fast-paced world, making quick and confident outfit decisions can be overwhelming. Our vision is to create a virtual wardrobe app that harnesses the power of AI to simplify outfit planning. By analyzing individual style preferences, weather, and wardrobe options, our app empowers users to look and feel their best effortlessly, every day. We aim to reduce the time and stress of deciding what to wear, allowing users to focus on what matters most while expressing their unique sense of style.
Background
The Process
Research
Initial Problem Discovery
Competitor Analysis
User Interviews
During the early stages of our project, we identified that many people face daily challenges when choosing outfits. Common pain points include indecision, lack of time, and difficulty visualizing outfit combinations. Traditional outfit planning methods, such as manually browsing a wardrobe or relying on fashion advice apps, often fail to address these issues holistically. Additionally, weather conditions and personal style preferences can complicate decision-making.
Our initial research indicated that users seek a streamlined, personalized experience that helps them confidently plan their outfits while saving time. This discovery led us to explore AI as a potential solution, enabling us to design an app that could learn from users' preferences and provide tailored, weather-appropriate recommendations.
To better understand what our app needed to stand out from other wardrobe planning apps, we conducted a thorough competitor analysis. We examined popular platforms such as Combyne, Whering, and Pureple Outfit Planner to evaluate the overall user experiences they offered.
Combyne
Build outfits using your own clothes or other people’s uploaded items and post to a feed with FYP, follow, chat features.
Interviewee Responses:
Opportunity
There is an opportunity to develop an intelligent outfit planning app that simplifies decision-making by offering personalized, AI-driven wardrobe recommendations tailored to users' preferences and lifestyle.
Team
Evan Hoang
RJ Mao
Ethan Dith
Maya Totonochi
Ideation
Information Architecture
Pain Points
Wireframes
Mid-Fidelity
High-Fidelity
Major Improvements
Final Designs
UI for Launch
Whering
Upload photos of your clothes and create outfits as well as save them to certain days in your calendar. Also has a marketplace to help you find and purchase clothes.
Tools
Figma
Slack
Reflections
Post Designs
Research
Initial Problem Discovery
Research
Competitor Analysis
Pureple Outfit Planner
Upload photos of your clothes and add tags such as color, size, etc. The calendar feature allows you to save outfits to certain days. The community feature allows people to share their outfits on a feed.
While all three apps offer the ability to upload and organize personal wardrobes, features such as community interaction, outfit sharing, and calendar integration are common across platforms. These apps often feel more like marketplace or social platforms, with a strong emphasis on browsing, purchasing, or sharing outfits, rather than focusing on solving the core problem of helping users decide what to wear each day. None of these apps fully leverage AI to deliver personalized, dynamic outfit recommendations based on user preferences or environmental factors like weather. This highlighted a clear opportunity for our app to stand out by prioritizing smart outfit planning, providing a more tailored and functional experience for users seeking efficient wardrobe management.
To gain deeper insights into our target audience's wardrobe planning habits, preferences, and pain points, we conducted a series of user interviews. We selected a diverse group of participants based on their varying lifestyles, fashion habits, and familiarity with outfit planning tools. This included professionals with busy schedules, students, and individuals who had experience with virtual wardrobe apps, as well as those who had never used them. Our goal was to gather a wide range of perspectives to understand how different users approach daily outfit selection and what challenges they encounter.
Interview Questions:
Can you walk me through your current process for choosing outfits each day? What challenges do you face during this process?
How often do you struggle to decide what to wear?
On a scale of 1-5, how helpful would it be to have an app that suggests outfits based on the weather and your personal preferences?
Have you ever used an outfit planning or virtual wardrobe app before? If so, what did you like or dislike about the experience?
How often do you plan your outfits in advance (e.g., for a special occasion or the night before)?
Based on the user responses in our interviews, here are the key pain points that we identified:
Synthesis
User Persona
To better understand the needs, motivations, and frustrations of our target users, we developed a detailed persona to guide our design process. This persona, Alex, represents a professional individual with a busy schedule, balancing multiple events and meetings throughout the day. By focusing on Alex's specific goals and pain points, we were able to tailor our app’s features to provide practical solutions that streamline the outfit planning process while ensuring style and appropriateness for various occasions.
In the wireframe phase, we began translating ideas from our Information Architecture into a visual structure. Using a whiteboard, my team and I sketched out key screens to focus on layout, navigation, and the overall flow of the user experience. Like the IA, once we were satisfied with the design we created a digital version.
Ideation
Information Architecture
During the ideation phase, we carefully crafted the Information Architecture (IA) to ensure the app delivers an intuitive and user-friendly experience. By brainstorming different ways users might interact with key features—such as wardrobe management, AI outfit recommendations, and event-based planning—we explored various structures to optimize efficiency. The goal was to create a logical flow that aligns with how users naturally think about and organize their outfits. This process of ideation allowed us to experiment with different layouts and navigation systems to ultimately select a structure that best meets the needs of our users while simplifying their journey through the app.
After completing our wireframes and low-fidelity prototype, we moved on to creating a mid-fidelity prototype to explore more in-depth design elements. This phase allowed us to build on the structure we developed. We added greater detail to the interface, such as button placements, typography, and component sizing. With this prototype, we began to visualize how users would interact with features like personalized outfit suggestions and wardrobe management in a more refined layout. The mid-fidelity prototype allowed us to test the user flow more realistically and identify areas for improvement before creating our high-fidelity design.
Ideation
High-Fidelity Prototype
As we transitioned to the hi-fidelity prototype, we not only focused on refining the user experience but also drew inspiration from high-fidelity design concepts used by our competitors. By analyzing their approaches, we envisioned the potential appearance of our app, gaining insights into visual trends and design patterns that resonated with users. This research helped us shape the visual style of our app, ensuring it stood out while staying aligned with modern UI trends. We combined these influences with our own unique design elements
Throughout our user testing and iteration process, we identified key areas for improvement in both functionality and aesthetics. These changes not only improved the user experience but also aligned the app more closely with the needs of our target users.
1. Clarifying AI Outfit Suggestions through Onboarding
In early testing, we realized it wasn’t clear to users how the AI would generate outfit suggestions. Users were unsure what criteria the AI was using to make recommendations, leading to confusion. To resolve this, we introduced a personalized questionnaire during the onboarding process. By answering a series of questions about their style preferences, clothing choices, and needs, users could better guide the AI to suggest outfits that align with their tastes and daily demands. This enhancement not only clarified the AI’s role but also made the suggestions feel more tailored to each individual user.
2. Simplifying the Home Screen for Intuitive Navigation
Initially, our home screen offered three options: adding an outfit from the wardrobe, creating a new outfit, or jumping straight into recommendations. However, through user testing, we discovered that this setup felt redundant, as the "plus" button already provided similar functionality. To streamline the experience, we simplified the home screen to feature just one primary button for AI outfit suggestions. Users can still create a new outfit manually by pressing the plus button, but the new layout made navigation more intuitive and reduced unnecessary steps, improving usability.
3. Refining the Color Scheme to Align with Our Style Guide
During testing, we noticed that the app’s original color scheme, which used a lot of black, was throwing off the balance and didn’t align well with our overall style guide. Users provided feedback that they preferred a lighter, more welcoming color palette. Based on this feedback, we chose to incorporate lavender purple, a color that evokes a sense of calm and creativity, while still being stylish and modern. Lavender purple not only helped create a more visually appealing and harmonious interface, but it also aligned with the app’s goal of providing a personalized and engaging styling experience. This change improved the aesthetic appeal and gave the app a unique and inviting look, making it more attractive to users.
4. Finalizing the Name and Logo
As we moved toward finalizing the app, we decided to make a major branding change. Our initial name, "iStyle," and its logo featuring a closet, didn’t fully resonate with the purpose of the app. It felt more like a virtual wardrobe app than a styling assistant. To better reflect the app’s mission, we rebranded it as "FitPlanner" and changed the logo to feature a mannequin torso, emphasizing that this is a styling app designed to help users create outfits, not just manage clothes.
My Key Takeaways
1) User-Centered Design Drives Clarity and Usability
Through continuous user testing and feedback, we were able to identify key pain points, such as confusion around the AI's functionality. This led to the creation of more intuitive features, like the onboarding questionnaire, which improved user satisfaction and the overall clarity of the app.
2) Simplifying the User Interface Improves Navigation
By refining the home screen and reducing redundant features, we enhanced the app’s ease of use. Streamlining options, such as consolidating the AI outfit suggestions and manual outfit creation buttons, significantly improved navigation and reduced user friction.
3) Visual Design Impacts User Engagement
The shift to a lighter, more cohesive color palette—incorporating lavender purple—made the app more visually appealing and better aligned with user preferences. This change demonstrated how small adjustments to color schemes can create a more inviting and engaging user experience.
4) Branding Plays a Crucial Role in App Perception
Rebranding the app from "iStyle" to "FitPlanner" and changing the logo to a mannequin torso emphasized that this is a styling app, not just a virtual closet. This branding shift clarified the app's purpose and made it more appealing to the target audience, reinforcing the importance of clear, intentional branding.
Research
User Interviews
Research
User Pain Points
Synthesis
User Persona
Ideation
Wireframes
Ideation
Mid-Fidelity Prototype
Ideation
Major Improvements & Design Decisions
Final Designs
UI for Launch
Reflections
Post Designs Outcome