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—I developed and pitched the concept together with my team (2 other people).

Individually—I developed the hi-fidelity prototype after the concept pitch by myself.

Responsibilities

User Research, Facilitating, Concepting, Interaction Design, Visual Design, Motion Design, Prototyping and User-testing.

Tools

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 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

WellSpend guides and lowers the threshold for consumers to finding sustainable fashion stores that matches their preferences.

The app also makes a donation to an ethical fashion cause with each purchase—allowing the users to feel more competent. 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 to make sure that user feel more/stay competent and fulfilled to buy sustainable products.

By addressing the universal human principle of relatedness* there is a higher chance people will maintain this behavioural because it gives them a good feeling.

*According to behavioural psychologists, external rewards have negative results on intrinsic motivation. WellSpend focusses on intrinsic motivation: the universal human principle called relatedness.  the need to give and being able to matter in other people their lives.

Wireflow

The Design Process💡

Discover

Interviews & Surveys

Based on our interviews we defined three types of groups in our target audience:

A big group of the interviewed people open is to the idea of more sustainable shopping, but don’t do it due to a lack of knowledge. 

1. They lack knowledge and sustainable options because of it

They currently think sustainable clothes are inaccessible 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. They don’t really know how to start.

3. They want to take more initiative towards a more sustainable earth and an ethical fashion industry.

They increasingly hear and see more about the bad impact the fashion industry has on the environment and communities all over the world. It makes them feel bad and feel increasingly more responsible to do something.

The survey verified allot of the interview insights. For example: people try to thrift shop/buy used clothes in order to be more sustainable.

My Contribution

  • Defined the interview questions over multiple interview rounds
  • Facilitated/interviewed 10 +/- participants
  • Took notes for 10 +/- interviews my team members were doing.
  • Identified behavioural patterns for multiple target groups based on interview output.
  • Picked behavioural patterns to validate in the enquete.
  • Suggested the survey method.
  • Helped my team with formulating the form questions.

Define

User Flow

After validating our assumptions 2 times we formulated the user flow of the user that is open to the idea shopping more sustainable, but doesn’t do it due to a lack of knowledge and ends up buying fast fashion anyway.

My Contribution

  • Formulated the hypotheses to test.
  • Designed, printed, cut and spread the posters/flyers.
  • 1 Iteration on poster design to increase input.

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

  • Suggest the method.
  • Sorted out interview insights.
  • Involved in deciding pains and gains.

Develop

Design Challenge

“Design a digital interactive product for consumers (18-25 yrs) that shop fast fashion but are intrinsically motivated to shop more sustainable, which allows them to find sustainable stores based on their personal preferences so it will be more accessible for them to do so.

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

Transtheoretical Model of Behavioral Change

We benchmarked several related digital solutions for changing behaviour and choose for this model. It is aimed at understanding individuals’ behavioural changes and describes how people dynamically move through five different stages of behavioural change.

Developing a concept

To apply behavioural influencing, we sketched and generated ideas for our concept based on specific processes in the model.

My Contribution

  • Involved in benchmarking digital solutions, frameworks, models for behavioural change.
  • Further researched the behavioural modal and its processes of behavioural change.
  • Suggested to and facilitated sketching our concept ideas based specific processes with brainstorm tools.

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 method.
  • Facilitated the morphological method and idea generation.
  • Involved in generating & sketched ideas.
  • Involved in brainstorming concepts with the team
  • Involved in collectively picking a concept.

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

WellSpend makes a donation after every purchase registration. It keeps people updated about the donations and impact they are causing (the universal human need of relatedness) and makes sure that user feel more/stay competent and fulfilled to buy sustainable products.

My Contribution

  • Defined the interview questions over multiple interview rounds
  • Facilitated/interviewed 10 +/- participants
  • Took notes for 10 +/- interviews my team members were doing.
  • Identified behavioural patterns for multiple target groups based on interview output.
  • Picked behavioural patterns to validate in the enquete.
  • Suggested the survey method.
  • Helped my team with formulating the form questions.

Concept Video

My Contribution

  • Brainstorm concepts with the team.
  • Suggested and defined the core values of the product
  • Suggested and defined the value proposition
  • I designed a one pager to showcase the concept (excluding the app screens in the mockups).
  • Developed the initial branding.
  • Made the product pitch presentation (keynote).
  • Explained how the product intrinsically motivates users, and is linked to the transtheoretical model for behavior change, answered most of the during the product pitch.

⚠️

Individual work below

At the deliver stage of this project our group split up and worked on developing the detailed prototype individually. Everything you see below is all my individual work.

Deliver

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. After that I started testing with a rapid prototype.

Key Insights

Beside some usability issues, there were quite some issues with the initial concept that really needed some work.

1. The QR code/registration was difficult to understand. 

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

2. At no point the app asked for permission to use the users location

3. There was a lack of focus and it confused people

People can look up the store location in the app and easily make they way over there (google maps etc.).

4. The commitments aren’t leading to anything

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.

Concept Iterations

Iteration Initial sitemap

Letting go of the social aspects

Based on the feedback I knew the commitment aspect wasn’t going to work and not long after I also decided to let go of the other social parts. It wasn’t thought out, didn’t add that much value and losing it also made the app way more simple to use.

Focus strictly on intrinsic rewards and finding stores

I changed the hierarchy of the activity feed and explore page to give the app a beter focus (see sitemap). This allowed people to directly search for stores from the jump. Allot of participants got confused because there wasn’t a clear focus.

In the activity feed users now can stay up to date with just the donations WellSpend made.

Job Stories

After I iterated on the concept, I also iterated on my MVP specifications. With the refised MoSCoW prioritisation I was fully allowed to focus on store finding, registering and seeing 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.

User Process Flow

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

Site Map

The first thing I set straight after deciding on what to iterate was the sitemap.

Screen Flow

The Screenflow puts the steps of the User process Flow (and some) in screens. The happy flow shows what steps the user must go trough in order to achieve their goal in the application.

Developing a visual language

To develop a visual style, I have conducted an Experience properties study to develop experience properties. This has resulted in the following experience 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

After I had defined the operation and the visual expression of the product, I was able to get started with digital screens. In the end product I have worked out the following most important user journeys to meet the 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. This one is for the registration flow.

Confirming the purchase (Screen 1 & 2)

The Screenflow puts the steps of the User process Flow (and some) in screens. The happy flow shows what steps the user must go trough in order to achieve their goal in the application.

Completing the goal (Screen 3 & 4)

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

✅ 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.

✅ Branding

I was never confident about my visual design skills. In this project I wanted to change that and work on my branding skills. Even though I used online resources for the illustrations and icons, I’m quite happy with how it turned out since I added my own twist to them!

🚫 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.

Other Work