About
We are a group of students from the National University of Singapore who are interested to learn more about UX design. Through the module CS3240 Interaction Design, we embarked on a 3-month long project which exposed us to the design life cycle and UX design principles. This website encapsulates the journey that we undertook, showcasing how we applied our learning points into creating an interactive prototype of our own. Feel free to explore the site to discover more of our journey.
Design Process
Empathise
-
Survey
-
Contextual Inquiries
-
Interpretation Sessions
-
Affinity Diagram
-
Personas
-
Scenarios
-
User Journey Maps
Define
-
Brainstorming
Ideate
-
Wireframing
-
Hi-fidelity Interactive Prototype
Prototype
-
Heuristic Evaluation
-
Usability Testing
Test
Problem Statement
As youths, dressing well is a topic close to our hearts. Whether it is a social gathering or going to school, we wish to put on an outfit that is both physically appealing and appropriate to the context. This is because appearances matter in the world that we live in, and appearances are strongly influenced by our outfit choices. However, we found it difficult to always be able to make good outfit choices where the process of choosing what to wear is more complex than what many of us think. Possible factors include:
1
Lack of fashion knowledge
2
Rushing for time
3
Decision fatigue
Therefore, we set out to create a digital interface to simplify the process of outfit selection, so that dressing well can be hassle and stress-free. In particular, we strive to alleviate the difficulties that people face when deciding on their OOTDs.
Target Users
Primary
Youths between ages 17 – 25 inclusive, who face difficulties in selecting an outfit.
-
Experience more transitions between different environments
-
Have limited budgets to purchase new clothes
-
Digital savvy
Secondary
Youths between ages 17 – 25 inclusive, who are comfortable with decisions involving outfit selection, but are open to suggestions that can value-add to their choices or simplify their current workflows.
-
Needs can be tackled without harming the interests of the primary user group.
-
Can benefit from a simpler workflow regarding outfit selection.
User Study
Having identified our target user groups, we need to understand and empathise with them in order to design a solution that truly tackles their needs. Our user study is done via 2 main ways.
1
Survey (Quantitative)
2
Contextual Inquiries (Qualitative)
Survey
We conducted an online survey for youths aged between 17 – 25 inclusive. Its objective is to obtain quantitative data regarding their fashion choices and outfit selection processes. There were a total of 50 responses.
4.14 out of 6
How conscious are you about your choice of outfits for social activities?
We want to understand if youths are indeed conscious about what they wear.
1 - Do not care, 6 - Extremely conscious
3.08 out of 6
How often do you face a dilemma when selecting an outfit?
We wanted to obtain a more concrete understanding of the severity of the issue regarding outfit selection.
1 - Never, 6 - Always
Positive Correlation
How knowledgeable are you about dresscodes?
How would you rate your fashion sense?
We wanted to better understand the variations among different youths regarding their fashion sense and knowledge regarding different dress codes.
Correlation between the 2 questions
Analysis
-
4.14 / 6 rating for consciousness indicates youths' desire to dress up well.
-
Relatively low frequency of decision dilemmas do not accurately reflect the problems that one faces in dressing up well because being able to swiftly make choices does not mean that one dresses presentably.
-
There are instances of youths who are unaware of the differences between dress codes and how to dress fashionably.
Contextual Inquiries
We conducted a total of 6 contextual inquiries with members of our target user groups. 4 belong to our primary group, while 2 belong to our secondary group.
Joe [U1]
-
23 year old male university student
-
Comfortable with existing outfits because he finds selecting an outfit troublesome
Oscar [U4]
-
23 year old male university student
-
Enjoys shopping and comfortable with making outfit decisions.
-
Often take inspirations on what to wear from influencers and celebrities.
Clement [U2]
-
22 year old male who recently transitioned from National Service to university
-
Finds it difficult to select an outfit to go to school
Chrstine [U5]
-
21 year old female university student
-
Loves to shop and has a lot of clothes
-
Cannot decide what to wear since she has too many options
Frank [U3]
-
25 year old mechanical engineer
-
Confident and quick in making outfit decisions, but needs help with closet management.
Dora [U6]
-
21 year old female university student
-
Introverted and lacks confidence in her outfit decisions.
We approached the contextual inquiries using the Apprentice-Master model, where we asked our interviewees to show us the process that they go through when selecting an outfit.
Interpretation Sessions
After conducting the contextual inquiries, our team came together for Interpretation Sessions where we shared the notes that we had taken down, We created Sequence Work Models and Cultural Models to analyse the data obtained, using systematic diagrams to identify breakdowns, stakeholders and potential opportunities.
-
Recognised common breakdowns across interviewees, such as the inability to decide what to wear and budget constraints when wanting to expand one’s selection of clothes
-
Established that friends, influencers and retail shops impact interviewees' outfit selection choices, where they strive to look good and follow fashion trends
![Sequence Work Model [U2]](https://static.wixstatic.com/media/2618be_b19c570937d94e1a8efc38f946fcfc8a~mv2.png/v1/fill/w_807,h_838,al_c,q_90,enc_avif,quality_auto/2618be_b19c570937d94e1a8efc38f946fcfc8a~mv2.png)
![Cultural Work Model [U2]](https://static.wixstatic.com/media/2618be_40c6b9d646d24028a3feb29c5d9e9f0e~mv2.png/v1/fill/w_835,h_831,al_c,q_90,enc_avif,quality_auto/2618be_40c6b9d646d24028a3feb29c5d9e9f0e~mv2.png)
![Cultural Work Model [U6]](https://static.wixstatic.com/media/2618be_d8c542dc9008440f8f808f1e31735d24~mv2.png/v1/fill/w_980,h_989,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/2618be_d8c542dc9008440f8f808f1e31735d24~mv2.png)
Affinity Diagram
Using the notes taken down from our Interpretation Sessions, we created an Affinity Diagram, which is a bottom-up approach that allowed us to distill main themes and key issues regarding outfit selection.
Key User Tasks
Having completed data collection and analysis for our user study, we clearly defined the scope of our project via identification of 3 key user tasks that we want our interface to tackle.
1
Allow users to digitally log their clothes so that recommendations could be made to them regarding what to wear.
2
Allow users to upload and share an outfit combination to the community who is using the application in order to receive real-time feedback on it.
3
Allow users to seek recommendations on what and where to buy a piece of clothing when they want to expand their closets.
Personas
To allow our team to better infer and tackle the needs of our users, we created a total of 5 personas to put a personal human face on the quantitative and qualitative data that we obtained. These personas collectively provide a humane perspective on the issues that youths face in outfit selection, allowing us to better tackle them when designing our solution.
-
Just completed National Service, upcoming Year 1 undergraduate
-
Introverted and lacks fashion sense
-
Needs help with putting together a fashionable outfit
-
Year 2 undergraduate
-
Unable to have good outfit combinations when rushing for time
-
Spends more time mulling over outfits for special occasions
Terry Soh [P1]
Mark Goh [P4]
-
Marketing associate with outgoing personality
-
Likes to shop and dress up
-
Faces difficulties making up her mind on outfit decisions.
-
Year 2 Institute of Technical Education student
-
Confident in her outfit styles
-
Open to new suggestions on how to dress fashionably
Sheryl Lim [P2]
Charis Loo [P5]
-
New polytechnic student
-
Needs to expand her closet since polytechnics have no mandatory uniform.
-
Wants to do so with a limited budget.
Rachel Tan [P3]
Brainstorming
There are many different possibilities on how our interface would be able to tackle the identified key user tasks. Hence, our group conducted brainstorming sessions to develop ideas and approaches that could be used in our interface. Each session revolves around a problem statement that is affliated with one of our persona.
1
How might we recommend outfit combinations for Terry (P1)?
Solo Brainstorm
Group Brainstorm
Best Ideas
Idea 5
Input form where Terry indicates dress code, weather and other details. AI suggests recommendation based on Terry’s requirements.
Idea 2
Social feature where Terry can search for tags such as “school” or “dining” to see how others dress to these occasions.
Scenarios
To begin designing our prototype, we need to envision how our target users would use our interface. Hence, we created scenarios based on our primary personas, integrating the problem statements and top ideas from our brainstorming sessions.
User Journey Maps
The scenarios provide us with a good representation of how our target users would interact with our interface to carry out the key user tasks. However, the text paragraph and storyboard do not adequately portray the emotions and thought processes of the user when using the interface. To supplement them, we created 3 user journey maps that outline what the user thinks and feels in the given scenarios. This sheds light on users’ pain points, providing opportunities for us to explore ideas that would tackle them.
Wireframing
Brainstorming and scenarios provided us with ideas for the core features of our interface that take into account how the user would feel and act when interacting with our interface. With these ideas in mind, our group developed possibilities on how our interface would look via a fast-paced design exercise known as Crazy 4s. Each of us was assigned 2 key user tasks to work on. For each key user task, members who were assigned to it would rapidly develop 4 different possibilities for the layout of the interface for that specific task. Since the tasks are not easily represented using a single screen, each possibility consists of 3 sequential screens.
Crazy 4s: Outfit Recommendations
Crazy 4s: Voting Interface
Crazy 4s: Purchase Recommendations
Then, building on the possibilities generated from our Crazy 4s, each team member designed wireframes for 2 key user tasks. After designing them, our group conducted a round of internal review where we gave each other feedback.
Click here for detailed view
Task 1 Areas of Improvement
-
Could have included a system to further differentiate the article of clothings within the broad categories themselves.
-
The lighting meter takes up a large percentage of the screen, especially on the homepage, and draws attention from other elements such as the story bar above it.
-
It is not entirely clear on how the quick combinations work.
Task 2 Areas of Improvement
-
It is unclear what ‘liking’ your friend’s outfit combination does in the story.
-
There is a search bar present on the home screen, however it is unclear how it would be used to add other users.
Individual Hi-Fidelity Prototype
After wireframing, each member developed a hi-fidelity prototype for 1 key user task. Our hi-fidelity prototypes were built using the feedback that we obtained from wireframing. Also, we each sought feedback from an individual belonging to our primary target group for user review.
Key User Task 2: Allow users to upload and share an outfit combination to the community who is using the application in order to receive real-time feedback on it.
Incorporation of Learning Points from Wireframing
User Review
Group Interactive Prototype
Leveraging on the feedback obtained from our individual interactive prototypes, our team developed a group prototype together,
Typography
We chose this font because it is a San Serifs font which is easy to read on a screen. Also, it is simple and has a clean look.
Colour Palette
The colours that we chose are easy on the eyes and exude warmth, which are important as we are designing a digital closet interface and want the user to feel comfortable using it. A closet is something that resides close to the heart of the user, and warm colours better reflect this point.
Meet PC. Our logo.
Pocket Closet. Personal Companion.
The fundamental design of PC is a closet. It is inspired by the main aim of our interface, which is to help users make outfit decisions using clothes from their closet.
PC is designed to be small, reflecting the idea of a pocket closet since our interface allows one to view his/her clothes on the go,
The handles of the closet form the eyes of PC's smiley face. This brings a friendly tone to the logo, portraying it to be like a personal companion that one can bring around to provide outfit recommendations.
All your clothes.
Right at your fingertips.
View your closet on the go via our Digital Closet feature. Categorised by Tops, Bottoms and Shoes for ease of searching.
Enter and view information about each item,
Add a new item into your digital closet.
Get outfit recommendations.
Simple
Advanced
Engage the community.
Have a good outfit?
Share it with others.
Cannot decide on your outfit?
Let others help.
Determine if you already have something similar in your closet
Find out if you have something compatible to go with the new purchase.
Get recommendations on how to expand your closet.
Design Choices
Our group prototype was designed using the feedback obtained for our individual hi-fidelity prototypes.
Interact with our prototype
Testing
Having completed the preliminary version of our group prototype, our group is ready to conduct evaluation and analysis on it. Our testing approach consists of 2 steps.
1
Heuristic Evaluation
2
Usability Testing
Heuristic Evaluation
The first step of our evaluation approach is heuristic evaluation. Heuristic evaluation was done internally, where we ourselves assessed our prototype using expert usability standards. In particular, we used Jakob Nielsen’s usability heuristics for evaluation.
Heuristic evaluation was done before usability testing as it is a fast and cheap method to spot potential usability issues that we as designers could have overlooked during feature development. Therefore, via heuristic evaluation, our team would be able to ensure that our interface adheres to established usability standards, rectifying problems before we present our interface to third-party users in usability testing.
1
Each team member went through ClosetLogue's interface twice, independently noting down issues for each heuristic.
2
Our team got together to share findings and decide on appropriate fixes.
Visibility of System Status
Visibility of system status focuses on providing good communication to the users regarding the state of the system.
Usability Testing
The second step of our evaluation approach is a usability test, which aims to understand how third-party users interact with ClosetLogue. This paints a better picture of the actual user experience that ClosetLogue provides, since heuristic evaluation was conducted internally without third-party input.
We identified 3 usability test goals:
1
To find out whether users can use our Get Recommendations feature to get an outfit recommendation.
Getting outfit recommendations is the crux of our interface and we wish to test for any potential usability issues with it. Also, as we have both the Simple and Advanced features of getting outfit recommendations, we want to see how different users interact with them and whether the provision of these two features adds value to the user experience.
2
To find out whether a user is able to create and upload a Vote for an Outfit type of post.
The Vote for an Outfit type of post is our main solution in tackling the issue of youths needing third-party opinions on what to wear when they cannot decide which outfit is better. Many social media platforms today allow uploading of posts to share pictures, but they are less focused on making voting-related posts which allow other users to vote on which picture is better. Therefore, we want to test if our approach of designing such voting-related posts is intuitive and easy to use, especially for new users.
3
To find out if a user is able to use our Get Purchase Recommendations feature to get recommendations on how to expand his/her closet.
We want to test whether the process of entering the search terms to get purchase recommendations is user-friendly and intuitive to use, especially for novice users. At the same time, we wish to test for the necessity and relevance of the information presented to users in the Get Purchase Recommendations feature, since we presented a variety of information like location of shop and compatibility with existing clothes.
User Goals and Task Scenarios
To test our usability test goals, we created task scenarios with user goals that we want our participants to go through. The scenarios and user goals are closely related to our usability test goals. They provide the users with a relatable and understandable context to interact with our application while allowing us to assess whether we have achieved our goals or not.
Task Scenario 1
You have an upcoming dinner appointment with your friends. You want to dress well and presentably but do not know what a good combination is. Use ClosetLogue to get an appropriate outfit combination
User Goal: To get an outfit recommendation suitable for a particular occasion or dress code.
Task Scenario 3
You have a limited collection of clothes in your closet. With a limited budget, you want to purchase a new T-shirt to add to your collection. Use ClosetLogue to get recommendations on what to buy.
User Goal: To get a purchase recommendation suitable to one’s desired type of clothing and budget.
Task Scenario 2
You have an upcoming dinner appointment with your partner. You are deciding between 2 outfits but cannot decide which one is better. Use ClosetLogue to engage the community’s help in making your decision.
User Goal: To get community feedback regarding which outfit decision is better when being in a dilemma.
The Process
We engaged a total of 6 participants for our usability test. Each participant was requested to show us how they would use ClosetLogue in each of the test scenarios. Therefore, being a within-subject study, we employed the Latin-Square design where participants were allocated to one of the experimental orders from the Latin-Square Combinations. This is an attempt to minimise confounding variables since a user would be more familiar with ClosetLogue in subsequent test scenarios, after having interacted with ClosetLogue in previous scenarios.
Scenario 1 -> Scenario 2 -> Scenario 3
P1, P4, P7, P10
Scenario 2 -> Scenario 3 -> Scenario 1
P2, P5, P8
Scenario 3 -> Scenario 1 -> Scenario 2
P3, P6, P9
During the test, participants were encouraged to think aloud by verbalising their thoughts or queries. We observed and recorded down the things that they said, including any intermediate feedback that they provided. At the end of completing all test scenarios, we had short discussion sessions with the participants to obtain feedback and opinions regarding ClosetLogue. Thereafter, we provided a post-test questionnaire to obtain general feedback regarding the usability of ClosetLogue.
Data Collection And Analysis
We organised our data in the form of an Affinity Diagram. This is because given time constraints, we would not be able to tackle every small detail or issue raised by our test users. Also, different users could have varying preferences and opinions on ClosetLogue. Therefore, by processing our data through an Affinity Diagram, we are able to identify the main strengths and problems of ClosetLogue, prioritising issues to be resolved.
From our Affinity Diagram, we had 3 main groups, namely Usability, User Interface and Bugs. We resolved usability issues first since they prohibit users from carrying out the basic and essential features of ClosetLogue. Then, for user interrface, we made refinements to the visuals of ClosetLogue to ensure clarity and consistency. Finally, we resolved errors in interaction flows for bugs.
Usability Issues
These issues are related to the usability and functioning of our core features. Some points include whether users can locate the features, whether the features are easy to use, and whether the features add value to the user experience or not.
From the post-test questionnaire that we gave our test users, we scored an overall usability score of 73.75. This is not an ideal grade, but through usability testing, many issues related to usability, user interface and bugs were discovered with the help of third-party users. These were all overlooked by us during our own internal testing and heuristic evaluation, highlighting the importance of engaging users outside of the design team for a more holistic and balanced view of our interface.
Final Prototype
Conclusion
The past 3 months have been a very fruitful experience for each and every one of us in the team. We started with no background regarding UX design, and concluded with valuable knowledge regarding it. This group project has provided us with the opportunity to be exposed to the different stages of the design life cycle, where every step is indispensable in creating a user-centric solution for our problem statement.
While ClosetLogue may not be perfect, our team did our best in creating a product that we feel would best solve our problem statement for our identified target users. The knowledge and experience that we had gained proved to be much more valuable than any of our products or deliverables. Hence, we would like to express our utmost gratitude to all the people who have helped us along the way. ClosetLogue is only made possible with the help from all of you.
