Rollin Poe takes on the fashion world Closet Buddy

The Scope A new way to approach clothing

As a culmination of Simon Fraser University's Advanced Human Computer Interaction (IAT351) course, myself and a small team worked to create a design solution grounded in Bannon's 3 wave and Bodker’s multiwave HCI philosophies. From initial concept to interactive mockup, we tested, designed, and reiterated implementing current best practices and HCI theories.

Time: October, 2019 — November, 2019

Status: Complete

A Couple Key Aspects

Explicit grounding of design for human performance (wave 1), societal rules (wave 2), wholistic experience (wave 3), and integrative HCI (multiwave/wave 4)
Design research and testing
Interactive prototype created in Adobe XD

Starting The Research

5W1H

Starting with research into who the target demographics are and what their use cases were, data came from quick and dirty ethnographic interviews, information repositories such as Statistics Canada, and fashion magazines.

Who: All genders aged approximately 14-35. These users have relative autonomy over their fashion choices, the ability to spend money on new clothes, and may be more likely to be influenced by trends on a local or national level.
What: Offloading the mental effort of choosing outfits. Interviewing subjects and outside research suggested that time investment and lack of knowledge were key barriers to engaging with the fashion world.
When: Key touch points happen when out shopping for clothes and when choosing an outfit for the day
Where: At home when dressing. When out shopping such as at malls or boutiques.
Why: Many people want to engage with the fashion world but face steep barriers to entry. Many others have expressed dissatisfaction at how they currently approach the clothes that they do own
How: Offload users mental efforts to a mobile application as a constant fashion companion. A person's mobile phone is often within arm's reach at all times from when they get out of bed, out shopping, and back home.

Existing Apps

To better guage the current state of solutions available, the team took to evaluating other applications on the market. This was also done to ensure that our solution would solve a problem not currently addressed. A few key points below:

Apps such as YourCloset had limited and burdensome onboarding proccess such as necessitating users take photos of every individual article of clothing they owned
An app such as GetWardrobe offered users an incredible amount of features, but it was very easy to be overwhelmed. Too many options left the application difficult to use at times, such as when searching.
Stitch Fix focussed almost exclusively on women, while we wanted our solution to appeal to all genders.

Wave 1

Perceptual: The limited scope of our attention and perception systems meant that ClosetBuddy worked to focus users to the core of the system. Unlike an app such as Chicisimo which overwhelms users with bright pink, we sought to emphasize the clothes and align the hierarchy of the UI so as not to unduly divert cognitive resources
Memory Load: People are bad at remembering things, while computers excel at tasks like that. From our interviews, we found that users often forgot about articles of clothing they had. By offloading the mental list of clothes they have to the app, as well as leveraging recognition over recall we reduce the memory load of our users.
(CPM-)GOMS: During later testing of prototype builds we undertook a CPM-GOMS analysis allowing us to better undestand the parallel actions and flows users took when interacting with the application.

Going Social Wave 2

Various Stakeholders

Users: Want to digitally organize, categorize, and sort their wardrobe. They also want to have the ability to plan outfits and get suggestions in a powerful, easy to use app.
Development Team: Looking to see the app through to completion. Development needs to progress in a logical fashion, keeping the end users in mind while also providing the flexibility for future expansion, and enough detailing for upkeep
Fashion Industry: The fashion industry needs people to be interested in current trends and a given company/fashion house wants to attract potential customers to their products and services.
Venture Capital: Want to see any investment made in ClosetBuddy return. Interested in growing the userbase and exploring additional sources of revenue.

Ethical Considerations

ClosetBuddy largely skirts many privacy issues surrounding data collection, as the app can be run entirely on the users phone, with secure cloud accounts not retaining personal data. As there are no ecommerce portions we also avoid many dark patterns such as "sneak in basket" or "hidden costs".

There were discussions within the development team about whether we were furthering crass, consumerist goals or influencing users to conform to traditional fashion trends. However, this is largely believed not to be the case, as the core feature of the app do not rely on outside fashion trends, and only act as an extension of the user themselves.

Social Impact

ClosetBuddy was designed to serve both those with a keen eye for fashion and those who chose not to bother. For the fashion-inclined users we aim to facilitate their ability to pick and choose outfits and explore external trends from the fashion world. Those who care less about fashion will see some of the burden taken away from them as automatic suggestions are delivered whenever the user wishes. A smooth transition between the two ends of the spectrum is expected and supported. No matter the level of fashion expertise, all users benefit from the offloading of information into a digital space via the wardrobe database.

Tailored Experience Wave 3 Testing

Think Aloud & Free Reign (Highlights)

Navigation: Each user that was tested struggled at various points with moving through the app. This happened more within-screen then between-screen. Some redundancies for navigation were built in, but in later iterations we sought to improve affordance to single screen naviagtion such as indicator arrows on the outfit-picker.
Weak Visual Feedback: The early iterations of a user's closet database lacked images of individual clothing items, opting instead for density of items per page. It became clear that users prefered to be able to see their clothes when browsing through the virtual closet without having to tap into the clothing card. This also harkens back ideas of "recognition over recall" and generally reducing user mental load.
Visual Design: Feedback was overall postitive in this area, with participants noting that the gentle colours allowed them to focus on their clothing options yet still provide enough visual hierarchy for effective navigation. The team would continue to make small updates as we produced more mockups and prototypes.

Heuristic Evaluation (Highlights)

User Control and Freedom, Error Recovery: Failure. The current state of the application has no real error recovery, as using the back button resets progress in a nuclear way, forcing users to reselect or input all the information they had previously. We also found pain points with knowing what actions were available on any given screen.
Recognition Rather than Recall: Mixed results. On one hand, the outfit picker, filters, and individual clothing cards all offer immediate information about the current pieces of clothing or options selected. On the other hand, the database and calendar functions relied too heavily on text, hurting immediate understanding.
Aesthetic and Minimalist Design: Grade B+. Aligns to current ideas of flat design and gentle colours. Menus are unobtrusive and iconography is clear and conforms to known standards. Less frequently used commands and options are hidden until they become necessary.

Emotional Design (Highlights)

Visceral: Making the app pleasing to the senses. Given one of the primary use cases is right when users wake up, the gentle blues and muted oranges don't overwhelm the visual system while still highlighting key interface elements. Additionally, these colours are generally accessible for those with colour vision deficiencies. Auditory and haptic feedback is generally controlled by the user at the system level.
Behavioural: Design for behavioural emotion is aligned with the traditional aspects of human-computer interaction. The pleasure and effectiveness of use are key here. User performance and sentiment were tested extensively during this milestone, and the development team continued to iterate flows and interactions to ensure a pleasing experience.
Reflective: Our goal at the outset was to help people approach their wardrobe in an intelligent way and to open up the world of fashion to all. Taking the stress out of choosing outfits everyday or keeping a mental catalog of each piece of clothing you own provides relief and calm at a higher cognitive level.
ClosetBuddy has also worked to be aware of its societal impact from the early ideation stages. Information on clothing repair, clothing sharing, and fashion information have been ideas built into the applicaiton.