WaterDrop

OVERVIEW

Project scope: 4 weeks

Project type: Semester project

Role: UX/UI designer

Tasks: Empathize, Define, Ideate, Prototyping, Test, Implement

Tools: Paper, Pencil, Figma, Maze

WaterDrop was a group project that consisted of Sandra Oen Jakobsen, Carl Gillis Atterbrand Erenius, Caroline Louise Cederblad, and Bjørn Ivar Skuggen. WaterGuards, as the group was named, focuses on water-usage within the clothing industry by making the users aware of the water usage in different clothes they would buy, and suggest other, similar products with less water usage. To achieve this, we designed an app, WaterDrop.

WaterDrop is only a concept!

THE TASK

The task for this project was to raise awareness around the issue of water scarcity, wastage and/or conservation in your area. We needed to come up with a concept for a solution to educate people about the importance of water and the seriousness of waste.

GOAL

The goal of the WaterDrop app was to raise awareness of the water usage within the clothing industry, and make shoppers make more eco-friendly options, and at the same time do something good for others.

Buy clothes and save the planet !

DESIGN PROCESS

The tasks for this project were to research and ideate for a product that might achieve the goal, sketch and prototype this product, test it, and improve the product based on the test results.

1. Empathize

RESEARCH

In order to create a good product, and keep on track the entire way, good research is important. For WaterDrop, we created a research plan, and collected data using literature research and interviews.

DATA ANALYSIS

After the data collection, we analysed the information and created insights and conclusions using the method Affinity Mapping.

EMPATHY MAP

We created an empathy map based on the research and interviews we had done. The empathy map is meant to make it easier for us by having one person represent the target group. From this person, we can understand and prioritise user actions, goals and emotions. We chose a young and professional woman who would seem very smart to her peers. She wants to make a difference, but like most people, she doesn’t know where to start.

2. Define

USER PERSONA

With the research, interviews and now the empathy map, we could make the person we were creating the solution for more real by making a Primary Persona. Like a lot of people, Lise Sande is driven by her need to fit in, coupled with her desire to make a difference. As a young professional working at a law firm, she has to look representative, but she is struggling with the thought of buying a lot of clothes when she knows that the clothing industry is a big part of the water-scarcity issues the world is facing.

SCENARIOS

To fully understand what the persona needed to achieve her goals, we used several scenarios which lead us to the How Might We questions that were used for future findings.

3. Ideate

WORKSHOP

After writing down our HMW questions, we started to plan our ideation workshop to generate ideas and work out design solutions. We decided which HMW questions we wanted to base the workshop on. We decided on the following:

How might we help Lise discover professional and environmentally friendly clothes?
How might we enable Lise to become more aware of her water usage and how her choices affect the world around her?

After deciding on our HMW questions we started preparing for the ideation session. For the workshop, we aimed to create and generate as many ideas as possible to solve the design challenge.

Ideation techniques

We chose mind mapping and brainstorming as our ideation techniques. We conducted the ideation technique Brainstorming with the team “The Four Personas” over Discord, because of the covid-19 regulations.

When the time was out, the participants helped out with categorising the ideas, and voted on the ideas they found more interresting for the product.

We also conducted a Mind mapping session. This was done internally within our team.

During this ideation technique, we branched out and got a wider view on what our product could be, and what it should provide to the user. When all the suggestions had been put up on the board, we voted again on the most interesting suggestions.

To choose the top ideas and critique them, we used the MoSCoW method. Our Must-have are the things we focused on throughout the rest of the project.

FRAMING REQUIREMENTS

To ensure we had all the data we needed of the apps content, we created framing requirements. This helped us visualise what the app should contain of features, data etc.

INFORMATION ARCHITECTURE

For the information architecture, we tried to visualize how the steps in the app would look like based on content audit and framing requirements. We decided to pursue the highlighted path with scanner functionality.

TASK FLOW

We created three task flows based on the primary personas goals. These flows will show our desired paths to success using the WaterDrop app.

USER FLOW - SIGN UP

A user flow was then created to understand how a user would navigate through the app from the time she opens the app, until she has decided whether or not to buy the clothing at the current store.

SKETCHES

Based on all the research, ideation, and flows, we started making sketches. The first sketches were in pen and paper, and the winning design were chosen to be digitalized.

4. Build

WIREFRAMES

With the pen and paper sketches in place, we created lo-, mid-, and hi-fidelity wireframes.

WIREFLOW

To show the interractions and actions of the app, we created a wireflow of the hi-fi wireframes.

BEST PRACTICES

We collected insiration from other apps that uses best practices in their products. In the WaterDrop app, there are many best practices used to make sure the app works as intended.

PROTOTYPE

Before the usability testing, we made a prototype of the app.

Figma link to app prototype here

5. Test

USABILITY TESTING

The WaterDrop prototype was ready to be tested. To ensure we got the feedback we needed, we created a usability test plan. This plan included things like scope, hypothesis, objectives, methodology, tasks, and goals. Our goals for the testing were these:

Goals:

That the user finds the scanner on the main screen and scans the tag.
That the user finds more eco-friendly options by answering questions.
That the user finds out where the better option is located.
That the user is able to scan the receipt after purchase to donate water.

And the scenario and task were these:

Scenario:

“On the bus heading for H&M, you read an article about the use of water in clothing production and become a bit stressed by the critical situation. The article mentions an app that lets you see how much water it took to produce a piece of clothing and you decide to download it to test. Inside the store, you find a cardigan that you want to buy and you open the app.”

Task:

“Use the app to find a more water-friendly cardigan option, and have the app make a donation.”

With these, and all the other planning in place, we conducted the usability tests on five people in the age between 16 - 36 years old, who were either students or working professionals. The participants had to be used to using mobile applications, and be interrested in the enviroment, and shops on a regular basis.

Findings / Insights

After the tests, we got a lot of good feedback. We analysed the feedback using Affinity mapping, and turned the findings into insights for further improvements.

Picture of the findings of the usability testing

MAZE - the raw data

To get more detailed data of how the tests actually went, we used the software MAZE. This gave us information of misclicks, time spent, success, etc.

The data from MAZE showed that there were some confusion in some parts of the app. In addition to the feedback directly from the users, and the data from MAZE, we also collected a SUS (System Usability Scale) data after the tests. This data was within an acceptable stage (86,5 points), but it also indicates that the app could use some improvements.