PermuStyle

Challenge

Build a fashion-related mobile app that will help the both men and women that are interested in apparels.

My team and I had three months to create this mobile app from ideation to high-fidelity prototype.

My Role

I was the UX Designer and Product Manager in this project. I was responsible for getting all four team members on the same page, as well as maintaining the product vision. I was also responsible for the information architecture and the prototyping for PermuStyle.

Solution

My team and I made some tradeoffs in order to fit the project timeline. We had to limit our user requirements (from user research findings) and give up the number of times we could test and iterate our prototoypes (and therefore eliminated medium-fidelity prototyping/testing).

I drew a storyboard to illustrate what a user would go through from looking at her wardrobe (exposition), to deciding what she wants to wear (conflict/problem), to opening our PermuStyle app (rising action), to creating her favorite outfit using our unique feature (climax), to saving her outfit (falling action), to finally being one happy user because she has PermuStyle to help her choose her clothes (resolution).

What it does

PermuStyle is a mobile app that aims to help both men and women who would want styling ideas that would closely match their taste. Current available apps let users select different outfits; however, they are limited and are not based on user’s taste.

How the app works

Our app learns about user preferences by asking them to select any individual items they like. Based on the collection of these individual items, our app provides different outfits by generating random combinations of the clothing and accessories that the users already chose.

How is it unique?

The main difference of this app is that users have full control of choosing styles they like with assistance from the app to put together different outfits for users to visualize.

Metrics

Goal

User will experience an intuitive and easy to use application that is effective at navigating through the app.

Measure

This would be a quantitative measure that determines the effectiveness of the app, which will be measured by the following:

Stitch Fix

Positive Findings

• Error prevention: The app has used a clear visual to show the user the delivery date and prevent user error in date selection.
• Aesthetic and minimalist design: There is clear call to action button.

Negative Findings

• Consistency and standard: Questions regarding the user’s taste are long and vague.
• Match between system and the real world: There is a lack of sizing options, as there are clothing items that do not have certain sizes available. Also, for selecting the sizes, user often needs to guess the closest size they want, as each clothing item may fit differently depending on brand and category.
• User control and freedom: There is a lack of user control and freedom in inputting credit card information. The only option is scanning credit card and there is no option for inputting manually. There is also no back button to get back to the previous page.

Trunk Club

Positive Findings

• Match between system and the real world: System status is transparent and there is a responsive feedback while user performs the task.
• User control and freedom: The use of clear black button and undo option, had made the interaction smoother and easier for the user.

Negative Findings

• Match between system and the real world: At first glance, users may not necessarily equate visual iconography with their associated function. “Looks” is a Trunk Club created term. However, a quick tour around the application makes it easy enough to understand the simple setup and features available to the user.
• Flexibility and efficiency of use: There is no accelerators or shortcuts for frequent actions. However, every destination within the app can be accessed by 3 clicks since the app is small.

Stylicious

Positive Findings

• Match between system and the real world: The visual items that are used in the app are close to user’s mental model which enhances the app’s learnability.
• User control and freedom: Users are able to edit and remove the lookbook that they have created before.

Negative Findings

• Consistency and standard: There is no consistency in regard to the position of the navigation bar in the app. The placement of the hamburger menu and the navbar made it hard for users to identify navigation. Also, the position of the search bar changes in between pages.
• Match between system and the real world: The system status is not clear in subpages. They include a separate tab bar which do not indicate in which page the user is currently on.

Physical & Mental Constraints of Fashion Shoppers

Most participants mentioned that for reasons such as time, laziness and efficiency, they prefer online shopping. However, some participants stated that they rather go to store physically because they would like to feel the texture of the clothing. Users also mentioned that the return policy is not clear on some apps.

Origin of Shoppers' Fashion Style

Our participants stated that they get influenced by other people such as friends and family members.

They also pointed out that they get inspired by popular social media apps such as Pinterest and Tumblr.

Motivation of Fashion Shoppers

When we asked participants what motivates them regarding fashion and online shopping, the majority mentioned discounts, deals, and designer brands. Several participants stated that they prefer to buy something that is on sale and the price is reasonable.

One participant mentioned that an app that offers free shipping is what makes her considered shopping online. Additionally, several participants mentioned clothing brands and said they would pay more for particular brands.

Features & Needs Missing from Current Fashion App

Most participants showed their interest in an algorithm that could matchs their clothing items and create an outfit for them. They expressed their concerns about the difficulty of purchasing items individually that go well together.

One participant stated that fashion websites are targeted towards special audiences that she does not identified with. Additionally, regarding the app features, most mentioned they would like an app that enables them to filter the options based on price or other criteria so they can view the results that are more appealing to them.

Brad, The Accountant

Based on our interviews, we created Brad Franklin, the professional accountant who is hard-working, determined, passionate. He is a fashion lover which would fit our target profile perfectly. He constantly follows the latest styles of styles, but doesn't have time to match clothing with his busy schedules.

Annie, The Super Mom

We also created Annie, the super mom, who can do anything. She is dependable, observant, intelligent, caring, capable and humble. She fits our other target profile because she, like other mothers, take well care of her family and always tries to find fashionable clothing for her husband and son.

What we did

We used OptimalSort to understand the different categories of where each page should be.

We analyzed the card sorting results, and came up with the information architecture that makes the most sense.

Who we recruited

• DePaul Students
• Fashion Lovers
• Coworkers
• Family
• Friends

Final Pages

• News Feed
• Browse
• My Stylist
• Mix & Match
• Outfit Maker
• My Collection
• My New Outfits
• My Clothing
• My Favorites
• My Friends
• My Account
• Profile
• Settings

Page Definitions

0.0 - News Feed (Homepage)

• Shows outfits and liked clothing of their friends.
• Includes links to view outfits and friends’ profiles.

1.0 - Browse: to favorite clothing pieces

• 1.1 - Deals: Displays discounted clothing or accessories on sale.
• 1.2 - Brand: Filters/displays by popular brands, and Includes a search bar to find specific brands.
• 1.3 - Category: Filters/displays tops, skirts, dresses, outerwear, pants, jackets, accessories, shorts, sweaters, suits, sweats/hoodies, denim, jewelry, bags, purses, shoes.
• 1.4 - Price: sort by price, and display clothing/accessories that are within certain dollar amount range.
• 1.5 - Friend's Collection: Displays clothing pieces or outfits that friends have favorited.
• 1.6 - Trending: Displays clothing pieces, displays above filter options, and heart button to favorite a piece (will be saved in My Favorites).

2.0 - Stylist: algorithm-based

• 2.1 - Mix & Match: for clothing users already own
• Browse/generate new outfits within user’s outfit collection to help them gain more styles with buying less clothes and therefore more cost-efficient
• 2.2 - Outfit Maker: for clothing that users newly collected
• Price estimation based on multiple e-commerce sites with same/similar style clothing or accessories.
• Sizing guide (metric or english) by brand or by category
• Size availability based on user’s inputted measurements.

3.0 - My Collection: Digital wardrobe that stores all the clothing pieces or outfits that users favorited.

• 3.1 - My New Outfits: displays outfits that users favorited from either the Outfit Maker or the Mix and Match.
• 3.2 - My Clothing: displays clothing items that users took pictures of what they already own in their closets.
• 3.3 - My Favorites: displays clothing items that users favorited during browsing.

4.0 - My Account: section that includes user's personal details

• 4.1 - Profile:
• 4.1.1 - Measurements
• 4.1.2 - Color Preference
• 4.1.3 - Style Preference
• 4.2 - Settings:
• 4.2.1 - Change Password
• 4.2.2 - Notification
• 4.2.3 - Logout

5.0 - My Friends: section that connects with friends and share outfit ideas with friends.

• Messages: function to allow users to message other friends on PermuStyle.
• Followers: feature to allow users to keep up with friends’ favorite clothing items or outfits.

Updates after Usability Testing

Positive Findings

• Users like the friends/social aspect of the app.
• Screen is organized and app is generally easy to use.
• The app’s functionality is pleasing to the users, and they liked the idea of the app making an outfit for them and them being able to match some clothing as well.

Negative Findings

Error #1

• Error: Users are confused on what the icons mean on the bottom of the screen.
• Impact: User may need to go back and forth on the page titles to known what each page is, and navigate to the wrong pages.
• Severity: High
• Recommendations:
• Update shortcut icons or add short words to the bottom of the icon to clarify what they mean.
• Use icons that are more intuitive and closer to users' mental model.
• Include icons in the hamburger menu to help the user learn quicker.

Error #2

• Error: Users don't know what the outfit maker does, or if they landed on a page that has the outfit already generated.
• Impact: User may doubt whether or not the outfits were generated.
• Severity: High
• Recommendations:
• Provide system confirmation when a task has been completed, has been initiated, or is being processed.

Error #3

• Error: Users do not know how to get to browse from the shortcut icons, but they know exactly how to get there from the hamburger menu.
• Impact:
• Users may become confused seeing a search icon, believing this to be a true "search", when in fact the search icon in this case represents browsing.
• Severity: Medium
• Recommendations:
• Use an icon that better represents "browse" and does not carry with it contrary expectations as to its function.

Severity Definitions:

• High: The usability problem will significantly slow down users, and needs to be fixed as soon as possible.
• Medium: Users feel frustrated or irritated, but will not affect task completion. Fix needed when possible.
• Low: Minor, usually a cosmetic issue. It is not a big deal if this is not fixed right away.

Updates after Usability Testing

Positive Findings

• Some users like this app because it’s a time-saver and they can get opinions of outfits through the app.
• They also like that there is math to help them with styling ideas.
• Users like that outfits show the total price in the Outfit Maker and the Mix & Match.
• Some users are satisfied with being able to follow big people in fashion to get inspiration.
• Some users like that this app takes everything to generate outfits because they’re too lazy to think.

Negative Findings

Error #1

• Error: Users was confused that outfit was generated immediately. She expected a page of explanation first.
• Impact: User may need not know what the app actually did.
• Severity: High
• Recommendations: Send users to a landing page with an option to generate outfit.

Error #2

• Error: Users was confused about what "Stylist" does or mean. User wanted an instruction or tutorial at the very beginning when she first uses the app.
• Impact: User may not understand what this app does, so he/she may refrain from using it.
• Severity: High
• Recommendations: When the user logs in fro the first time, give them an option of a tutorial. Also have the tutorial available in the settings menu.

Error #3

• Error: User did not find categories and labels on the clothing items.
• Impact: User may not know which category the items are in.
• Severity: Medium
• Recommendations: Add categories and labels to each clothing item/description.

Error #4

• Error: There needs to be an "OK" button, or this "outfit has been generated" message bar needs to disappear after 2 seconds.
• Impact: User would be confused and not know how to get back to the page he/she is on.
• Severity: Medium
• Recommendations: Put a small "x" in the top right corner of the pop-up.

Error #5

• Error: User was looking for an OK button for the filter. He clicked the "X" to close the filter, and there's no refresh button.
• Impact: User does not notice the "X" and may not know how to exit out of the filter slide.
• Severity: Low
• Recommendations: Add an "OK" button to the bottom of the filter page.

Error #6

• Error: User was expecting to have only her selected clothing to show up in the "outfit image" after app generates the outfit.
• Impact: User is confused on why the outfit did not have any of the items he/she selected.
• Severity: Low
• Recommendations: Update Outfit Maker description text with more information.

Severity Definitions:

• High: The usability problem will significantly slow down users, and needs to be fixed as soon as possible.
• Medium: Users feel frustrated or irritated, but will not affect task completion. Fix needed when possible.
• Low: Minor, usually a cosmetic issue. It is not a big deal if this is not fixed right away.

Goal/Metric

User will experience an intuitive and easy to use application that is effective at navigating through the app.

• Ability of user to complete task successfully (95% of users): Yes, 96%.
• Time on task (70% of users complete task within 2-3 minutes): Yes, 96%.
• Ease of use (95% of users with an average of 4 or higher, on a scale of 1-very difficult to 5-very easy): No, only 83%*.
• Number of errors (Less than 2 per task): Yes, average of 0.4 between 8 participants.

One of the main reasons that we could not achieve our goal for ease of use was because we did not have enough time to iterate our prototype and test. We jumped directly from low-fidelity prototype/usability testing to high-fidelity. Some navigational concerns could have been fixed between the two fidelity prototyping/testing.

More iterations & usability Testing

Here are the next steps to what we would do to further optimize our designs:

• With the usability testing conducted with the Hi-Fi prototype, more iterations and testing must be conducted to mitigate the navigational issues found.
• We might widen our usability test participant pool to include a more diverse demographic - teenagers, first-time fashion users/entrants into the professional world, and retired persons, as access to designer clothing is becoming more accessible and affordable.
• We would also add an onboarding experience to our prototype to show how PermuStyle would work.