Project Banana

Project Banana

UI / UX       JULY 2016

Project Banana is a user experience project aimed at solving laundry challenges through a native iOS application. The objective is to provide users with relevant data to make informed decisions about laundry habits and frequency.

Using survey results and user interviews, I generated personas, wireframes, mockups, and numerous prototypes throughout several iterations. Realizing the initial user flow proved too complex, I pivoted to a print and digital solution, and addressed navigation and interaction issues in the last iteration.

I also studied and prototyped micro transitions using Flinto and Principle for Mac to generate more intuitive interactions.

A detailed case study of the entire project, from initial user interviews to final iterations, is located at project-banana.design.

Partners in Crime

As a manager, I get to demurely suggest what fun it would be to help me in a personal project. My awesome co-workers Jennifer Herald and Wan Choi helped send the Typeform survey and compile the responses. 

Jennifer (also known as Gennifer) also helped me conduct the user interviews.

0.1 USER TESTING

Initial user research consisted of a Typeform survey (sent to 28 people) and 6 interviews. Using a script, audio recording, and written notes, I translated interviewee answers to color-coded post-its. The script allowed for easy categorization of answers, such as laundry facilities, preferred washing schedule, whether fabric makes a difference in terms of washing schedule, etc. Certain themes began to emerge from all the data.

  • 85% of total participants wear items more than once before washing.
  • 100% of interviewees rewear jeans and jackets the most before washing.
  • 100% of interviewees prefer not to repeat outfits too often.

0.2 PROBLEM STATEMENT

The problem I suspect is that people prefer to wear their clothes a few times before washing, while still being clean, and not repeat outfits too regularly. But there isn't an easy way to track wears and last worn dates without worn items being piled up somewhere in their room or closet.

0.3 PERSONAS

I chose characters that represented the target audience – younger people without in-unit laundry, who dislike doing laundry, and who want to preserve the longevity of their clothing. As for why the one-sided gender representation – I really didn’t see gender as having a significant impact on the end product. Thus, I deliberately chose to stick to one gender, so that the other characteristics (laundry resources, age, motivations, etc.) would stand out.

0.4 THE SOLUTION

Project Banana is a digital solution to help people easily track the number of wears in between washes and the last wash date of an item. The objective is to provide people with relevant data to make an informed decision about laundry habits and frequency.

0.5 THE BLOATED USER FLOW

I approached the solution by diagramming out an initial user flow, just to see if the main tasks can be intuitively completed within a reasonable number of steps.

The user flow below (yes, it's illegible) diagrams out the onboarding process, the plan outfit function, and the do laundry function. The first two steps are necessary for the do laundry function to work. When a user chooses to do laundry, the number of wears resets to 0.

The obvious complexity of the user flow was alarming. It demonstrated that interacting with one’s closet through a glass interface is just not aligned to how humans typically interact with clothing – through sight, smell, touch, and emotions.

Users would have to pull double duty; they would have to replicate everything they do in real life – selecting an outfit, deciding what to wash, etc. – in the application. The payoff for the amount of work required is just not there.

5_user-flow5_user-flow

0.6 PIVOT TO THE QR TAG

Interacting with clothing through a glass screen is not intuitive and makes for a complicated user flow. Because of this, iteration 2 introduces the QR tag.

The app provides a printable QR code tag for each item of clothing. It can be attached to each item of clothing with a string. The QR tag would hold all the relevant data, such as number of wears, last worn date, last wash date, etc. This combination of manual and digital would mimic natural behaviors to help build user habits.

0.7 PAPER PROTOTYPES

Prototyping out how the user would use the QR tag scan to track wears and comparing it to the manual tracking demonstrates that the former is definitely more efficient.

0.8 USER FLOW & WIREFRAMES

Simple wireframes and user flow allowed me to make some UI design decisions as well as consider gestures, such as the long tap to bring up a contextual menu for each item in the closest.

0.9 UI ITERATIONS

From iteration 2 to 3, I focused on a more intuitive user experience by combining various states, simplifying the navigation, and having a constant tab bar that included all the functionalities

  • The tasks on iteration 2's home page are now incorporated into the UI on iteration 3.
  • The bottom menu provides universal accessibility to all the functions.
  • There is a hierarchy to where and how functionalities are displayed and accessible, thus making for a better user flow and cleaner UI.

1.0 MOCKUPS

The color scheme features warm and cool tones. It also utilizes a colored gradient consisting of these two hues. A shifting gradient visually indicates progress – orange is the beginning of a task and blue is the end. Some states – such as the closet or item record – are solid colors.  

1.1 FINAL PROTOTYPE

I prototyped in Flinto. Below are several videos that showcase the main functionalities of the application. After working out the design scheme and overall navigation, I focused on micro transitions that utilize nuanced motion to indicate feedback to user actions.

Let’s face it. This app is about laundry. But even something as mundane as laundry can be quite complex, especially because laundry is something that is deeply personal. What was especially challenging was the realization that something as habitual as laundry really didn’t need to be complicated by what this application purports to do. Most of the people I had interviewed did not care whether their jeans have been worn 3 times or 13 times; they cared about whether it looked, smelled, or felt dirty.

In the end, it was a solution for a nonexistent problem. And I must admit sometimes I feel a little silly explaining this project to people.

On a brighter note, someone pointed out that the use of the QR tag in this project was perhaps the only instance he did not hate.

And on an even brighter note, working on this project not only allowed me to practice the basic tenets of user experience design, but it afforded me the chance to really see the human element behind any design endeavor, no matter how mundane the subject matter.

[unex_ce_button id="content_tlu0h76f3,column_content_u3crrqe86" button_text_color="#000000" button_font="light" button_font_size="12px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/bon-voyage/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]PREVIOUS[/ce_button]
[unex_ce_button id="content_tlu0h76f3,column_content_2zkscy89k" button_text_color="#000000" button_font="light" button_font_size="12px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/grid-crazy/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT[/ce_button]