WellSpent

A digital application that guides users to sustainable fashion stores that matches their preferences and shows the impact of their sustainable purchases.

Timeframe

September – February 2020 · 16 Weeks

Role

Together with the team
Research and concept design · 8 weeks

Individually
Detailed design and iterations · 8 weeks

Responsibilities

Research · facilitation · concept design · interaction design · visual design · motion design · prototyping · user-testing.

Tools

🏆

Golden Dot Awards Nominee:

Amsterdam University of Applied Science
Jun 2020

Brief

Problem Statement

Consumers have become so accustomed to the cheap prices of “Fast Fashion”, that they have trouble understanding why they should pay more for clothing. The buying behaviour creates a vicious circle with a problem that is affecting manufacturers in clothing factories and the environment.

Millions of people, most of them girls and women, are exposed every day to an unsafe work environment. The collapse of a clothing factory in the Rana Plaza building in Dhaka, Bangladesh killed at least 1,132 people and injured more than 2,500 people.

Project Goal

To change the behaviour of fashion consumers in a way that they buy less fast fashion clothing. This is to contribute to the reduction and negative impact of the fast fashion industry.

Long story short

WellSpent guides and lowers the threshold of finding sustainable fashion stores which match consumers their shopping preferences.

The app makes a donation to an ethical fashion cause with each purchase—allowing the users to feel more competent in their sustainable behaviour. Users can easily contribute to making a positive and sustainable impact on the world, and for a more ethical fashion industry.

1. Filter Sustainable Stores

Users can filter for sustainable brands based on their preferences and context (time, distance, budget, categories, brands, opening times) for more meaningful store results and suggestions.

This helps to lowers the threshold to find a store that fit’s the users preferences and context. 

 

2. Registering Purchases

Users can register a sustainable purchase with a QR code by a store employee. *WellSpent donates money to partner foundations that strive for sustainablility after every registration.

*A percentage of a service fee that is paid by partner stores

3. Seeing Impact

WellSpent keeps people updated about the donations and amplifies their impact. The goal of this is to focus on intrinsic rewards and to make sure the user feels competent and fulfilled with their sustainable purchases.

The Design Process💡

Understand

Interviews & Surveys

Through prior desk research we discovered that millennials consume the most fashion. We decided to frame our challenge on this group and interview them. Based on our (20+-) interviews we identified three types of millennial fashion consumers:

We further framed our target audience towards millennials people who are open to the idea of shopping more sustainable shopping but don’t do it due to a lack of knowledge.

Insights about this target group:

1. They think all sustainable fashion is expensive (unaccessible)

They currently think sustainable clothes are unaccessible for them since they don’t know any cheap and fast options to buy them.

2. They want to shop sustainably without too much effort

Consumers feel like finding a sustainable store that matches their preferences/context is too much of an effort. It’s difficult to get started and they don’t really know how.

3.Consumers are intrinsically motivated to shop more ethical fashion because it makes them feel good.

Buying fast fashion gives them feel guilty and causes cognitive dissonance. They wan’t to have a positive impact but keep falling back in their fast fashion consumption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

According to behavioural psychologists, external rewards have negative results on intrinsic motivation. Intrinsic rewards are more sustainable in this context.

  • Intrinsic rewards
    With intrinsic motivation we do something because the behaviour itself gives us a pleasant feeling. In this case: having a positive impact on climate change or ethical manufacturing.

  • Extrinsic rewards
    With extrinsic motivation we show a certain behaviour because it gives us something (money, a promotion, good grades, etc).

Surveys

Within the survey method we tried to validate the insights from our interviews. That people are open and willing to shop more sustainable is also reflected 54,6% answered that they already tried doing this.

My Contribution

  • Defined the interview questions over multiple interview rounds
  • Interviewed 10 +/- participants
  • Took notes of 10 +/- interviews my team members were doing.
  • Identified behavioural patterns for multiple target groups based on interview output.
  • Proposed making use of the survey method to validate prior research findings.
  • Picked behavioural patterns to validate in the survey.
  • Helped my team with defining the survey questions.

Define

User Flow

After we framed our target group we formulated the user flow of our target group. The main barricade within the flow is that the consumer thinks that finding ethical fashion shops which they will like is too much work. In our solution, we want to make it simpler to find the right store.

My Contribution

  • Helped to define the user flow
  • Helped to define the main barricade and target behaviour.

Empathy Map

I suggested to make an empathy map to gain deeper insight in the target group and to communicate our research with stakeholders.

My Contribution

  • Proposed making use of this method.
  • Sorted and identified the main interview insights.
  • Involved in defining the main pains and gains.

Design Challenge

“Design a digital product for millennials that are open to shop more sustainable, which make it easier for them to find sustainable stores based on their personal preferences.

After synthesising our research, we collectively defined our first design challenge to get our creative flow going.

Applying behavioural models

Before we started to ideate, we wanted to make sure to keep theory and research about behavioural change in mind. We ended up choosing the for The Transtheoretical Model of Behavioural Change.

This model is aimed at understanding individuals’ behavioural changes and describes how people dynamically move through five different stages of behavioural change.

We used this as input to develop our concept (see below).

Developing a concept

This are the clusters of the sketches we ended up with.

We sketched and generated ideas for our concept based on specific processes that span across the selected behavioural modelWe also looked into some ideation card/methods.

My Contribution

  • Proposed the idea of making use of the selected behavioural model as input for our sketches.
  • Involved in generating & sketched ideas.

Decide

Morphological Chart

We first started to vote for our favourite ideas.

In the morphological chart we combined those ideas based on user requirements we specified.

With the help of the sketches we made, we generated multiple concepts with the help of the morphological chart. We generated a complete range of alternative design solutions per user requirement. We used sticky dots to choose 3 concepts as a team.

My Contribution

  • Suggested the morphological chart method.
  • Facilitated the morphological session and idea generation.
  • Involved in brainstorming concepts with the team
  • Picked a concept with the team.

The (initial) Concept

1. Making public sustainable commitments
We wanted to persuade people with the “commitment & consistency” principle. Starting with small commitments like one single purchase. Users make this commitment on a public space with friends.

2. Search and filter sustainable stores
The user can set shopping preferences based on their budget, location, and fashion style to select a recommended sustainable store that they want to visit and got what they are looking for.

3. Go to the store and purchase a product
People can look up the store location in the app and easily make they way over there (google maps etc.).

4. Register the product upon purchase
Users can scan their personal QR code upon purchase to validate a purchase. This can be done in the physical store at the tills by store employees.

5. See Impact
WellSpent makes a donation after every purchase registration. It keeps people updated about the donations and impact they are causing and makes sure that user feel more/stay competent and fulfilled to buy sustainable products.

My Contribution

  • Made the concept design presentation for the go/no go moment.
  • Designed a one pager (excluding the app screens) to pitch the concept.
  • Developed the initial branding.
  • Defended how the product intrinsically motivates users, and is linked to the selected behavioural model.

Concept Video

My Contribution

  • I was involved in making the storyboard for this video

⚠️

Individual work below

The group split up after the concept design phase. I did the detailed design part of this project individually. Everything you see below is all my individual work.

Prototype

Sketching and Rapid Prototyping

After the concept was defined, it was time to sketch my first wireframes and user flows.I did this with the help of my first job stories, user process flow, site map and screen flow.

In this project, I’ve tested my design with rapid prototypes and higher fidelity designs. I did this with around 10 test participants in target group, I also did heuristics and feedback sessions with other designers (5+-).

I learned the most with the rapid prototype tests insights from my target audience. It allowed me to make big mistakes early in the prototyping phase
.

Rapid prototype

Validate

Rapid prototype test insights

Beside some usability issues, there were quite some issues with the initial concept that really needed some work. This were the most important ones:

1. A lack of focus and hierarchy confused people

The social aspect of the app should be less important than finding an actual store. The first screen users saw was a social feed with the activity of their friends when they actually expected a screen that helped them with finding a sustainable store.

2. The commitment idea doesn’t add up

The commitment part of the concept was not thought out properly at all. Since the app is all about sustainability, you don’t want to stimulate people to shop an x times to fulfil a commitment (not sustainable). There weren’t that many other sustainable things the app could verify beside registering a purchase. I decided to drop it.

3. The QR code/registration flow was difficult to understand. 

Mainly because there was no clear introduction or onboarding in the app.

Concept Iterations

One of the first things I did was taking a few steps back and look at the information architecture.

Letting go of the social aspects
Based on the feedback I knew the commitment aspect wasn’t going to work (Which was input for 8.Activity feed), and not long after I also decided to let go of the other social parts (8. My friends). It didn’t add value and dropping it also made the app way less complex.

Focusing on what’s really important: intrinsic rewards and stores
I changed the hierarchy of the activity feed and explore page to give the app a better focus (see sitemap). This allowed people to directly search for stores from the jump. The activity feed now serves as a feed with activities from good causes and their donations.

Job Stories

After I iterated on the concept, I also iterated on my MVP specifications. With the revised prioritisation I was fully allowed to focus on store finding, registering and intrinsic rewards (having impact).
Format: Situation + Motivation + Expected outcome

1. When I plan on buying new sustainable clothes, I want to be able to filter the available stores in the app, so it can guide me to ‘sustainable’ shops that fit my personal preferences and context.

2. When I’m making a sustainable purchase in a partner store, I want to register these purchases in the app by an employee, so I can proof that I’ve made a sustainable purchase and automatically donate to an ‘ethical fashion’ cause.

3. When I have registered some sustainable purchases automatically made some donations, I want to see how much I impact I’ve had, so I can feel like I have had impact in improving the negative impact of the Fast Fashion industry and stimulated to keep shopping sustainable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

User Process Flow

This User Process Flow indicates which steps a user must go through in order to achieve their goal.

Site Map

An iterated version of the sitemap with more focus on finding stores and seeing impact

Screen Flow

The Screenflow puts the steps of the User process Flow in screens (based on the sitemap). The happy flow shows what steps the user must go through in order to achieve their goal in the application.

Developing a visual language

To develop a visual style, I have defined these visual characteristics: Sustainable, Nature, Conversational, Organic and Fun.

After visualising the experience properties, I combined these two into WellSpent mood boards. These mood boards formed the basis for the visual expression in the style guide.

Some outtakes of the style guide.

Hifi Prototype

In the hifi prototype I’ve worked designed the most job stories to meet my MVP specification:

1. The user filters for a sustainable store that fits their preferences so they can find the right store.

This journey is the most important flow to make users shop more sustainably. Users want an easier way to gain knowledge about fun sustainable stores that suit them.

2. The user registers their personal QR code after purchase at the cashier so WellSpent can make a donation for an ethical fashion charity.

If WellSpent earn money, the app must ensure that the purchase has actually been made. This can be done by having an employee scan the QR code in the store after purchasing a sustainable product.

3. The user checks an article from a sustainable charity, that used their funds to finance something that fights for an ethical fashion industry, so the user can feel fulfilled about their sustainable purchase.

Sometime after registering a product, the user gets notified of the impact they have contributed to. WellSpend uses a small percentage of the funds to support an ethical fashion industry

Motion Design

I made motion storyboards for multiple interactions to add different narratives trough the app. This one is for the registration flow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

The transform of the QR code to a checkmark provides flow and narrative in the screen. It shows the user the action is completed.The value change in “amount of money raised” happens at the same time in order to relationship with the transformation. This change of value indicates that the numbers change based on actions taken by the user

Final Clickable Prototype

See the final clickable Marvel prototype below.

Takeaways

🚫 Specifying a MVP is difficult

In this project I had quite some setbacks in terms of process. During the research phase I made the mistake of wanting to solve too much and not narrowing down my concept enough. People didn’t really understand my focus. Looking back I definitely learned allot from this.

✅ Motion Design

During this project I feel like I went a extra mile in motion design and it definitely payed off. Other than finally naming my sketch layers properly, I feel like I learning to look at my designs more detail/critical after each project. I feel like I’m able to establish deeper relations between objects/pages.

Other Work