StyleMe

Created in my first year as a UX student, the Style Me app aims to simplify wardrobe organization based on similarities, style, and occasion. I revisited and enhanced the project for my senior design capstone, incorporating valuable feedback from users and faculty.

Problem

Before the Style Me app, individuals faced the challenge of disorganized wardrobes, making it time-consuming to select outfits based on personal preferences, style, and occasions. Recognizing this common struggle during my early years as a UX student, I embarked on a mission to streamline the wardrobe management process and provide users with a more efficient and enjoyable experience.

The Challenge

How do I balance design and function for an interactive closet application experience?

Research

Issues

  • Can’t create custom categories for clothing
  • Save outfits to specific categories i.e., work, going out, vacation, etc.
  •  Does not provide recommendations of similar clothing
  • Larger selection of clothing colors to better categorize
  • Need to allow multiple pictures of one clothing item
  • Make a favorites button for pieces of clothing or whole outfits

Original

In the preliminary stages of development, I delved into extensive research focused on applications of a similar nature. By exploring user-reported issues within this domain, I identified a clear demand for the type of application I was envisioning. This discovery prompted a comprehensive investigation into existing closet organizer applications, where I meticulously analyzed user reviews. The insights gleaned from these reviews became instrumental in shaping and refining both the design and content of my application. This iterative process of gathering feedback from users' experiences with comparable tools enriched my understanding, allowing me to incorporate user-centric improvements that addressed specific pain points within the realm of closet organization apps.

To optimize scannability, I aimed to present information in a top-to-bottom layout. The bottom menu features icons alongside text options, facilitating seamless navigation for users. By incorporating icons like the closet icon corresponding to the closet function, users effortlessly recognize and comprehend the purpose of each icon. The strategic use of colored buttons and fonts enhances visibility, making it clear to users where they can tap and interact. Upholding the principle of designing for usability, the goal is to eliminate cognitive load, ensuring an intuitive navigation experience where users can effortlessly engage without the need for explicit thought.

Revisit

In response to user feedback, identified areas for enhancement in the original application were addressed. A significant improvement focused on decluttering the homepage, aiming to achieve a clean and presentable aesthetic. This involved streamlining the layout of the main page to feature essential information exclusively. Key adjustments, such as relocating navigation to the bottom, presenting available clothing options, and introducing a back button for seamless retracing of steps in the closet, profile, and calendar pages, were strategically implemented in the finalized application.

Addressing a common user challenge related to icon recognition, a solution was introduced to mitigate confusion. Captions were added to the icons, offering clear identifiers and enhancing user understanding. The icons and images underwent a reimagination process, culminating in a more intuitive user experience that aligns with user expectations and preferences.

Design

Mockups

User Flow

Wireframes

Visual Design

Typography

In selecting the Open Sans font for my app, I opted for a font widely acknowledged for its readability on mobile devices. Knowing that Open Sans is commonly used in mobile contexts, I aimed to ensure an enhanced user experience. The font's ability to scale smoothly aligns perfectly with responsive design principles, offering flexibility across different devices. By incorporating Open Sans, my focus is on readability and seamless adaptability, key elements for an optimal typographic presentation in my mobile app.

Color Theory

Incorporating the dynamic color palette of 9a031e, ea638c, and 7f4a4e into my closet app for a visually captivating and user-centric experience. The deep richness of 9a031e can be employed to highlight essential features or key categories within the app, while the soft elegance of ea638c can contribute to a pleasing background or accent elements. Introducing the subtle warmth of 7f4a4e to add sophistication and balance to the overall design. This thoughtfully crafted color scheme aims to enhance the user interface, creating a visually appealing and harmonious environment within the app.

Solutions

Opening Page
Sign In Page
Home Page
Filter and Sort Page
Calendar Page
Profile Page

Reflection

In my inaugural venture into independent product design, I garnered invaluable insights. One key takeaway was the paramount importance of empathizing with the audience and prioritizing their needs over my own preferences. The process afforded me the opportunity to delve into various approaches to tackle unforeseen challenges, offering a deeper comprehension of the rationale behind my earlier design decisions.

The visual layout emerged as a critical component, serving as a nonverbal expression of the product's essence through thoughtful color schemes, photo arrangements, and icon selections. Crucially, the visual elements were crafted not to detract from but to enrich the application's usability.

This project illuminated the ongoing nature of decision-making in the product design lifecycle—before, during, and after completion. Despite initially believing in the functionality and usability of the product, subsequent reflection revealed room for continual improvement to encapsulate an efficient and memorable user experience.