Fashionopia
Digitalized closet to help users stay chic and organized
Team DECAF: Chen Liu (Visual Designer) · Xavior Wang (Programmer)
My Role: Team lead · UX Designer
Date: September 2016
Duration: 10 weeks
Tools: Axure RP · Paper 53 · Google Analytic · I Movie
Practices: User Research · Wireframing · Usability Testing
Skills I learned: storyboarding · paper prototyping · Heuristic Evaluation · Video Prototyping · A/B Testing
Introduction Video
Overview
My Contribution: I led the user research and video editing process. I also took responsibility in designing user interface with Chen Liu, the other team designer.
Task: The initial task was to choose an aspect of people's daily life and design a mobile web application to address users' needs.
Statement: Our group saw a potential unaddressed user needs in the domain of clothes management. Food, clothes, living are three rudimentary components of human lives. Surprisingly, food and living (social, housing) have been the topic of lots of applications. Yet clothes management was rarely touched on.
Our Solution: We developed Fashionopia as the final solution. Using human-centered design methodologies from user interview, iterative prototyping to final implementation to address current user needs, our group presented this mobile web app as our final solution. It enabled users to record their daily outfits in order to maintain an organized closet and stay chic every day.
Within 10 weeks, our group managed to implement the idea from scratch
Why is keeping clothes organized so stressful?
What exactly do people struggle with organizing clothes then? What do they need help with? In order to find out answers, we conducted contextual inquiry with users. By observing them interact with their own closets, we were able to observe and take records of their actual behaviors. Then we were able to ask open-ended questions under each different scenarios. Our group came up with the following 3 insights and hand sketched 3 storyboards to illustrate these main struggles.
Highlight quotes from interview
Purchase Redundancy
Having trouble mix and match
Do laundry in time
Insight 1. Purchase Redundancy
People complained about buying similar items. It seemed like people do not have an accurate records in mind regarding what exactly were in their wardrobe. Overwhelmed by the excitement of buying new clothes, they ended up purchasing items they already owned.
Insight 2. Have trouble mix and match
We found out the problem isn't that people have insufficient amount of clothes to generate chic looks. Instead, it's a issue of inability to generate new combinations from existing clothes, which resulted in the self-portrait of not being chic enough and need of buying more clothes.
Insight 3. Do Laundry in time
During the interview, we also found out that mainly among male interviewees, there is a tendency of occasionally running out of shirts or underwears, which is due to inability to do their laundry in time. The main cause of this issue was their inability to keep track of their usage leading to the failure of planning laundry time ahead.
Get Hands Dirty -- Prototyping
Paper prototypes
Having three main concerns that need to be addressed, it's time to test our ideas out. After showing our friends the storyboards, we realized that the laundry problem was not so much a universal issue comparing to the problems of purchase redundancy and creating new looks. Paper prototypes were used as a low-fidelity methods to visualize and test our two initial ideas.
iCloset
Fashion Choice
Heuristic Evaluation
Our group employed the method of heuristic evaluation to perform usability testing on the paper prototype design, which involved actual users evaluating our prototypes from 10 heuristic categories and providing feedbacks for any usability failures. We identified 4 main problems to address in priority and proposed solutions.
Video Prototype
The result of Heuristic Evaluation helped our group iterate on the paper prototypes and produced a video prototype. In this iteration, we combined the two ideas into one coherent App idea. The video showed the mock-up being used in real user scenarios.
Wireframes
Finally, we go digital to encompass the digital prototypes.
What's wrong? -- Usability Testing
Using the published App, we conducted In-person user testing followed by A/B testing using google analytic. We are hoping that the incorporation of the two methods will provide more helpful feedbacks for us to iterate on our design.
In-person User Testing
It's time for us to find some users and test it out! In-person user testing enabled us to observe users interact with our prototypes in real time. Following the procedure of "Planning, Running, Analyzing", we developed a protocol, tested it with 3 real users and recorded our interface flaw with annotated pictures.
A/B Testing
There are a total of 27 participants. 14 of them were assigned the Version A, with totally 4 conversions. 13 of them were assigned the Version B, with totally 10 conversions. The feedback provided by Google Analytics tells us that Version B’s probability of outperforming original is 99.2%. The winner is Version B.
Proposed changes after testing
Establish consistent visual design including changing the background color of top bar on login page
Implement a user walkthrough that will appear only for first time users
Finish implementing incomplete functions including uploading
Takeaway
For future iterations, we would like to apply changes from user testing to the application
This is my first design project using human centered design process. I realized the importance of user testing. It helped our team identify usability failures that we would now have found otherwise.