Project: Designing for a Trust

Project: Designing for a Trust

Introduction

Native Woodland Trust is a foundation dedicated to “the preservation of Irelands remaining ancient woodlands” (Anonymous. N.D.a). The brief from the company is to create a new logo and style guide. They would also like to launch a new app for Android, and have asked me to create low-fidelity and high-fidelity wireframes of the app and then test it in a usability test. In addition they have also asked for a design system their designers and developers can use.

The Objective

Create a style guide, design an app for Android and create a design system, and then execute a usability test of the prototype of the app.

 

The Problem

Raising awareness get people exited about preserving the ancient woodlands in Ireland.

 

The Solution

Create a cohesive brand image with a clear message, and get people involved by getting them out in the woodlands to experience the incredible nature in Ireland.

Timeline

May 2022

Team

Terese Hansen

My role

UI Designer, researcher

Project

Exam Project Noroff

Tools

Adobe XD
Photoshop
Illustrator
Airtable
Miro

Guiding Goals and Principles

Design principles

Style Guide

Before starting on the style guide, I did some research by going through the Native Woodland Trust website. I was trying to figure out who they were, and what their mission was. And I also wanted to consider who their users are, so that I design with them in mind. 

The style guide contains the logo, colors, typograhy and photograpy – as well as the do’s and don’ts.

Native_styleguide

The Logo

The logo is inspired by the forests, and I wanted it to be clean and simple but also elegant and organic. For this logo I used a elegant and slightly rounded, organic serif-font.

Versions of the logo

The rules of the logo

Clear space around the logo and aim for high contrast.

Logo space
Logo don't

The Colors

The color palette is inspired by the forests. Dark green hills meeting a blue sky.

Color Palette

Typography

The main fonts are Lora and Roboto. Lora is used for headings and quotes, while Roboto is used for body text. It also gives a slight organic feel and flow. It is also well optimized for screens, and also works well on print.

Lora is a modern serif font that contains some very unique calligraphic elements. Roboto is a friendly and slightly geometric sans-serif font. It is modern, with a very natural flow. It provides a good contrast to Lora and is nice to read.

Typography

The story in photography

The photography should speak to people. It should feel intentional and fit the setting and text it accompanies. The photos should enhance the story/subject, connect with the audience and inspire them.

For this brand I chose to mainly use images of nature and animals. Snapshots of ecosystems, and flora and fauna with  harmonious colors and layout. Images in focus and in high resolution. Basically the photos should be vibrant and tell a story.

Image Style

See the complete Style Guide.

Wireframes

The second part of this project was creating an app for Android. The purpose of the app is to raise awareness about The Native Woodland Trust within Ireland. It gives the users an opportunity to find areas with trails for hiking and also a way to identify the trees they see.

Low-Fidelity Wireframe

Made InVision

Low-fidelity wireframes

High-Fidelity Wireframe

Made in Adobe XD

High-Fidelity wireframe

Test the Wireframes.

Design System

All elements and principles was put into system in a Design System. 

Design System

Testing

The final part wast testing the prototype. I planned and executed a usability test, and you can read the full report here.

Usability test

Conclusion

From start to finish I have tried to keep a consistent look and feel from the style guide, through the wireframes and design system. The result from the usability testing indicates that I have managed to create an app that visually appeals, but that there were some points of confusion that needs to be improved. The testing provided good feedback, and gave me a clearer vision of the modifications I need to make and the iterations that are needed to improve the app/high-fidelity wireframe. I did not do any of the changes at this time. 

What’s next?

The next step is to iterate and make the changes to the issues pointed out by the testers – and then test again.

 

image of app

Thank you for reading!

case studies

Pictures of the wireframe for the app
Image of desert

Design Foundations: TreeLife

Design Foundations: TreeLife

The Brief

TreeLife knows that many people care about nature, want to protect the environment and fight climate change –especially its eco-conscious customers. TreeLife recognises the importance of tree planting as a natural climate solution but doesn’t necessarily have the knowledge or space to plant trees themselves.

The Objective

Design a four-page website for TreeLife’s initiative to educate people about planting trees.

 

The audience

TreeLife’s target audience is:
  • 50% male and 50% female
  • aged between 25 and 35
  • people who like spending time outside
  • people who value nature and their surroundings
  • people who strive to lead a more sustainable life.

Timeline

September 2021

Team

Terese Hansen

My role

UI Designer, researcher

Project

Course Assignment Noroff

Tools

Adobe XD
Photoshop
Illustrator
Airtable
Xtensio
Miro

Methodology

The Design Thinking approach was used to gain an empathic understanding of the people
we are designing for, and for the problem we are trying to solve.

 

Design thinking illustration

Reflect & Research

After reading the brief and other information several times as well as studied the problem statement – I started gathering my own information and thinking about the problem. One of the things I did was search for similar companies and brands that sell clothes or other items to reforest or rewild. I also searched for foundations that don’t necessarily sell stuff but is based on contributions (charity) for more information about the problem itself. Foundations are a good source for more quantitative data about reforestation. They often refer to research and studies done on the cause and effect of deforestation and planting trees around the world. Lastly, I tried to read more about sustainable living, to get a better understanding of what it means in practice.

While gathering more information (informal literature review) about the subject I also looked at the design and layout of the websites. I noticed that many of them use much of the same color-palette and much of the same layout. They also have a very similar tone of voice. My impression is also that a few of them have some usability issues in terms of too much informat ion, placed illogically and with little contrast. Many of the sites not written in English also struggle with the English translation, where some text is in English and other parts in French for instance.

Research illustration magnifying glass

Defining the idea

To really have a clear vision of t he target users, I created a persona profile to keep them firmly in mind and to better understand and feel empathy for the users. I made one female and one male based on t he information about the target users provided. Usually, a lot more work goes into making these – something I did not have time for on this assignment.

I also created a moodboard of sorts to keep my inspirat ion going while working on this. It helps me to stay focused on the direction I want to move in, and t he mood and message I want to express.

After research and defining the idea, I started to work on t he low-fidelity wireframes (sketches), and the goal was to make the pages tell a story.

 

Meet the personas:

TreeLife moodboard
Female persona
Male persona

Ideate & Low-Fidelity wireframes

TreeLife adresses a serious problem; We are in a critical climate crisis but I still wanted the visitor to get a positive and hopeful vibe when visiting. Because we can still do something, it’s not too late.

I also wanted the page to be organic, simple, informative and elegant, in order to get the visitor interested, learn about the project – and most of all to get them to plant a tree or to donate.

In order to visualize the build and hierarchy of the pages I made a very simple IA (in – formation architecture/UserFlow) and I also tried my hand at some low-fidelity, rough sketches.

Treelife sketches
IA TreeLife

High-Fidelity Wireframes

The page is mostly a three grid layout. All the important information is placed inside these three columns, and the layout is consistent and predictable. The colors and fonts are in acordance to the company graphic profile. Colors are used sparingly, mostly to emphasize or as an accent. The images fol low the tone of the company, and are used as navigation, to illustrate and tell a story. I’ve tried to focus on usability and visibility. I’ve made sure that the whitespace gives the users time to breathe, to separate different content and to create a logical flow in the design.

Some changes were made from the low-fidelity wireframes to the finished design, but the basic structure and idea is the same. 

TreeLife BrandGuide

The TreeLife brand guide.

The High-Fidelity Wireframes

Aboutpage
Homepage
Treepage
Contactpage
Treelife on screen

Conclusion

I tried to tell a story with the use of pictures, text, colors and consistent layout. I’ve tried to follow conventions, design rules/principles and also wcag 2.1 (accessibility/usability. While the design is finished for now, I do think that the pages need testing to find out if the text and navigation needs more work.

But overall I think that this design will engage the users and take them on a journey.

 

What’s next?

The next step would be to test the wireframes/prototype and then iterate until it is ready for launch.

 

Click the link to see the live wireframes.

Thank you for reading!

case studies

Pictures of the wireframe for the app
Image of desert

Brand Identity: Baristas

Brand Identity: Baristas

Overview

This task was about designing part of the brand identity for the coffee company Baristas. They are passionate about making coffee for their customers. In this assignment my job was to create a logo, color palette and typography.

THE AUDIENCE

They cater to a younger crowd of people who like a good cup of coffee and meeting up with friends.

My role

UI designer

September 2021

Tools

Photoshop
Illustrator
Adobe Indesign

THE PROJECT

This assignment was for my UI studies at Noroff.

Methodology

I always use the Design Thinking approach in some form to understand the problem and people’s needs, becuase this process is very user-centric and makes it a bit easier to organize the whole process and find effective solutions to the problem. Even on small assignments like this one, I use this approach.

Emphatize

Before starting the design process I need to understand both the client and the users. In this case that meant research. I researched other coffee houses – what their logo was like, colors and other elements. Then I looked at their users who are young, energetic and on the go. And I also played a bit in Adobe Color for inspiration to the color palette.

So with the brands’ attributes and the brand personality in mind, I started designing the logo.

Brand attributes:

Energetic, friendly, imaginative, youthful and modern

 

 

Brand personality:

Sincere – down to earth, honest, wholesome and cheerful
Exciting – daring, spirited, imaginative and up-to-date

 

Brand Guide

 

The logo

Because of the brands’ attributes and personality I pretty much excluded most vintage fonts and handwritten/calligrahy type fonts. But I still wanted the logo to visible in different sizes, clear and also timeless. So I leaned very little on trends and instead focused on robust fonts that could withstand time and also let the customers grow with the logo, instead of outgrowing it.

The font I ended up with for the brand name is a robust, elegant, stylized and versatile font with a nice flow. I adjusted the kerning and tracking and also resized some of the letters.

For the rest of the logo I wanted to avoid the traditional stamp- or banner logo. But I also wanted a graphic element that could stand on its own without the rest of the logo. I took coffeebeans and made them in different sizes and colors and placed them in a pattern almost like a flower. Combined with the almost masculine font, this should make the logo appeal to both male and female customers.

I also introduced another stylized fort for the “coffee house” in the logo to make it a bit fun and to keep a nice flow without it getting too rigid and tight.

The logo and elements were first designed in black and white:

After some adjusting and resizing I started to look at colors. I wanted to use the different hues of coffee and cream/milk, since Barista is passionate about their trade – but I also wanted som contrast and keeping it a bit organic.

The logo can be scaled down quite a bit without losing quality – and there is also possibilities to use only parts of the logo for different purposes. I tried to design it so that every element can stand on its own.

The graphic coffee bean “flower” for instance can be nice to use on cups, windows etc.

So after further adjustments and introducing colors, the logo looked like this:

Color and Typography

The main focus on this assignment was on the creation of logo, and that is also what inspired both the color palette and the typography.

Colors

The main inspiration is taken from the coffee beans and leaves. The brown brings balance and a natural and organic feel while the green brings to mind health, growth and vitality. Together with the typefaces they should appeal to a “younger” crowd without being based on trends.

Fonts

For the fonts I decided to keep the stylized Russell font as a decorative header font. It will display nicely on printed effects like menus etc and also works well on a screen. The main logo font Brixton does not work as well as a header font and was discarded as such.

For the sub header and body I decided to go with a sans serif font that is very versatile and readable both in print and on screen. Sofia Pro also have a lot of styles (16) in the family and is designed with a higher x-hight which also makes it a very readable font. It’s a modern font that is rounded and has a very nice flow to it.

Since I chose a decorative and stylized header font, Sofia works as a complement and calms it down. Both fonts should also speak to the target since they in combination is both edgy and laid-back and inspires creativity.

Conclusion

General thoughts and learnings.

After finishing the logo, fonts and colors I feel that the combination fit the brands’ personality, while also appealing to their target group. The elements work well together, and can also be broken up and stand on their own – depending on what the use is.

While the design fit the brand’s personality, the colors and placement of the text and graphic elements also gives a nod to the traditional. Coffee after all have a long history and tradition, and it is a craft Baristas is proud of.

After submitting the assignment the feedback was good, but I was challenged on contrast.

The brown colors are very neutral and don’t have a lot of personality while the green brings in a fresh, youthful feel. So how would the logo loog like with the main word “Baristas” in the green and the sub words “coffee house” in brown?

The answer is this:

What’s next?

The next steps in this process would be to improve on the logo and flesh out the color palette and typgrahy and to create a complete brand style guide. In the end it should also be tested on the target audience, what are their feelings about the colors and design? That’s the most important question.

Thanks for reading!

Other case studies

Image of desert
Pictures of the wireframe for the app
Pictures of the wireframe for the app

Effortless Activity – A UX Case Study

Effortless Activity logo

Being active is not only important for the body, but it’s aslo very important for the mind. It can give a sense of accomplishment, raise self-esteem and help us set goals and achieve them.

 

Physical activity for mental well-being

Many of us have been living with social distancing for over a year now, and many have been in their homes alone with little to no contact with others. This has surely affected their overall well-being and especially their mental well-being. This affects how people think, feel and act- and it also determines how we handle stess, relate to others and make choices.

Activity is a big part of mental well-being and can give positive reinforcement in other areas as well.

For this case study I’ve used the Design Thinking approach.

Timeline

April-May 2021

My Role

UX Designer, researcher

Project

Project exam Noroff

Tools

Adobe XD
Illustrator
Photoshop
Flowmapp
Airtable
Drawio

Design thinking illustration
1 empathize

In any design challenge it’s important to understand the challenge. So what is the problem?

Mental wellbeing affects how people think, feel and act. It also determines how we handle stess, relate to others and make choices. Mental well-being is important at every stage in life, from childhood and youth through adulthood. Mental wellbeing can have an impact on anyone at any time in their lives; it does not discriminate against age, gender, or even professional background. We as humans like to create social structures to support our mental-wellbeing. To name a few, people need human interaction, healthcare, financial freedom, and physical and mental health. The lack of these structures can have a negative impact on our mental wellbeing.

Evidence suggests that there are five steps you can take to impr ove your mental health and wellbeing (Anonymous. 2019): Connect with other people, Be physically active, Learn new skills, Give to others and Pay attention to present moment (mindfulness).

I aim to learn more about peoples level of activity and their motivation. Many of us are cooped up inside, have an office job or simply don’t know where to start or feel we have enough time.

Assumptions

1. Based on preliminary litterature- and app research my working assumption is that most people don’t feel like they have time to be active in their daily life. Their other obligations, like work, family and friends, take much of their time and they struggle to set aside time for themselves and find motivation to do some type of physical exercise.

2. The last year, with Covid-19 has been hard on us all and disrupted our routines. Many of us spend more time at home, we socialize less and with gyms being closed my assumption is that this has affected peoples level of activity.

3. The market is full of fitness- and workout apps. But t hey seem to be more focused on people subscribing, fancy content and social media marketing, than they spend on motivating users to commit and spurring them on in their effort to make a lifestyle change. A simpler app with focus on motviation and inspiration might be one of the answers.

Research Goals

 

  • How can we motivate busy people to find activities that suits them and commit?
  • What motivates people to become more active?
  • How can we help people increase their overall mental well-being with physical activity?
  • Are existing fitness apps more focused on content and number of subcribers? Rather than motivation and incentives?

Target audience

👤  Adults 25-45.

📱  They use smartphones and have at least basic knowledge about
training apps/programs.

💬  Are on social media platforms.

💪  Wishes to be more active, but don’t know how or have enough
time.

Research approach

My goal is to find out how we can become more active in our daily life and improve our mental wellbeing. I want to understand the user and their goals and challenges. In order to try and figure this out, I followed a descriptive research approach.

 

Method

  • Survey (primary and generative method) – exploratory research to gather qualitative and quantitative data and insights on the topic.
  • Competitive analysis (secondary and evaluative method) – to determine primary and secondary competitors. How they are performing and how well they are doing (SWOT analysis).
  • Literature review (secondary and generative method) – to gather information about activity and it’s affect on mental wellness.
  • Usability testing (primary and evaluative method) – conducted later in the design process to evaluate the mid-fidelity prototypes.
Research illustration magnifying glass

Primary research – Survey

I conducted a survey that got 29 responses most of whom were between 30-39 years old, have a family (partner or kids) work full-time and are only active once in a while. I also used this survey as a recruitment tool for the usability test – asking if they would participate.

Survey results

🔎 Click to enlarge

Secondary research – Competitive Analysis

🔎 The market for fitness- and workout apps is pretty saturated, you can find an app for virtually any kind of training. There are different levels of content, but some of the might be too full of imagery, videos and audio.

🔎 The apps require the user to be very motivated to the exercise or activity plan. They also require the user to very experienced using their smartphones and apps.

🔎 The apps did not have much focus on motivation, but they did have programs for beginner to advanced.

🔎 Most had a free plan, or a trial period – but they all required a subscription to unlock the full potential of the app and all feaures.

🔎 The market is mostly driven by trends. We have a significant increase in the obese population, and many of us spend a lot of time sitting.

🔎 The research into market and competitors show that there is room for an app that focuses on motivation and incentives.

Analysis

I took the atomic research approach to analyse all the date collected through the survey, literture review and competitive analysis. This method helps with keeping the data logical and manageable. This is especially important when we analyse the material to turn the facts into meaningful insights.

Based on the facts from the Atomic research, I created an affinity map to create the insights. 

 

Atomic research an affinity map

I discovered that

Research discoveries

🔎 Click to enlarge

Design opportunities

🔎 Click to enlarge

2 define

Turning challenges to opportunities

The personas and scenarios are based on the information collected from the survey and literature review – the empathize phase. 

I decided to narrow down my focus to norwegian working adults (30-39), because this was the segment that stood out the most in the survey and research phase. Most of them also had a “static” job, with little physical activity during their workday. The majority had a office job, and family responsibilities (spouse and children), and stated that they felt they had little time and motivation to be active or do physical exercise. Most of them also thought that their activity level was less than, or the same as others their age, but that they also felt that they were less active now compared to a year ago and blames covid-19.

Meet the primary persona – Maria

Maria Primary Persona

Marias Contextual Scenario

Maria wakes up at 5.30 to start her busy day. She runs around trying get both herself and her family ready for work and daycare. They try to eat breakfast together, but with an active 2-year old they eat on the go.

After dropping her child off at day-care she arrives at work heads straight to her desk ready for another busy day with looming deadlines.

Concentrating and sitting in the same position for hours can be hard on the body, leading to muscle straing and tension headaches, and she tries to take 5 minute breaks regularly. But imersed in projects it’s easy to forget – and before she knows it it’s lunchtime.

At lunch, she and her colleagues talk about anything and everything, when one of them mentiones that she’s gotten so much better in her arm after she downloade a app that had 5 minute stretching and breathing exercises she could do at her desk. Intrigued, Maria asks more about the app and discover that it has all kinds of activities for busy people and that it is quite motivating. She asks for the name of the app and downloads it immediately.

Back at her desk she is soon immersed once again in her work,when she feels tension in her neck. She remembers the app, opens it and creates an account. She browse through the content and see that it doesn’t only have stretching and destress exercises – but all kinds that you can do to get in shape. She also notices that there are several levels from short programs with lower intensity, to longer with higher intensity.

She also sees that she can set short-term goals in addition to long-term goals.

She find an exercise for stretching tight neck and shoulder muscles that she can do in her chair and only lasts about 5 minutes. She starts the program and do the exercise. She notices immediately afterwards that she is calmer, and that her neck, shoulders and arms hurts a lot less. Happy, she gets back to work.

After work she rushes to the day-care to pick her son up before it closes, and then heads home. The hours fly wit h making dinner, keeping her toddler active while also trying to talk to her spouse. After her son’s bedtime she is tired and sit on the couch just messing around on her phone. She remembers the app, and opens it. She looks at t he short activity programs and find one that combines yoga with breathing exercises and only lasts about 10 minutes. And it’s something she can do without preparing. She decides to try it out, and get’s down on the floor.

After a month of trying different exercises in the app, she finds that she is more active, she has found activities that suits her after trying several and has even set a goal for herself. She also discovered the groups for people to do stuff together, and has plans to joing 3 people from her part of the town to go on a hike. She is really surprised and happy about the whole experience.

 

Design opportunities

Problem definition

From the insights so far, I created “How might we” questions to help with
the creative process and develop the design opportunities.

  • How might we motivate and inspire office workers to become more active at work and exercise in their daily life?
  • How might we show them that they don’t have to have a lot of time to be active, that they can do short bursts of something fun or easy, and it will still be effective?
  • How might we create a solution that makes it easy for people to set goals and reach them?
  • How might we create a solution that offers different activities, with different length and intensity?

The 4 W’s

🏆 What is the problem?
People are less active. Especially office workers spend hours sitting down in front of a computer. This can lead to physical and mental stress, and make people less motivated. It also often leads to strain injuries and/or dexterity issues.

🏆 Who experiences the problem?
Everyone can experience trouble with finding motivation and time for physical activity. But it is a bigger problem for the adult working population, and especially those with desk-jobs. They spend long working hours sitting down and this might make them unmotivated and feel that they have little time for exercise.

 

🏆 Where does this problem occur?
It occurs in our daily live, at the office. And it then often transfers into our private life. We struggle to find time and motivation between all our responsibilities and it’s much easier to make excuses.

🏆 Why does it matter?
It has a strong impact on our physical and mental health. Being active can prevent strain injuries, improve our overall mood and daily quality of life. It can also give more confidence and make us better at handling stress.

 

Problem definition

“Office workers spend most of their days sitting in an office and this has started to affect their health. They struggle with motivation, and uses lack of time and not knowing where to start as excuses. If I can solve this problem, it would improve office workers’ overall health and motivation, and prevent them from consequences like losing work because of muscle strains and dexterity issues. This would also benefit t he company because of the positive effect promoting health can have on the brand, and open up possibilites to collaborate further with other businesses.”

Vision statement

“My solution will help office-workers become more active by being inspiring, motivating and providing incentives and tools to show the user how to start being active and reach their goals. This will ultimately allow people to find something that works for them, and have fun while their increased levels of activity also better their overall health.”

Accessibility and WCAG 2.1

My work on accessibility and WCAG 2.1 can be viewed by clicking the link.

3 ideate

To start making sense of all the data collected and defined it isnow time to organise the date into logical patterns or groups. In the ideate stage the point is to think creatively and generate as manye ideas as possible. This process also allows me to think outside the box and think of more solutions to the problem.

Brainstorming and Moodboard

To generate as many ideas as possible and fast, I chose brainstorming. I used the previous HMW-questions and problem statement as my main focus, and generated as many ideas as I could surrounding them.

The solution to the problem is thought to be an app (scenario insights). And this session will either validate the idea, or it will show me another better solution. In addition this branstorm will also help set the requirements for the solution.

To engage my visual senses as well, I created a moodboard to help me keep focuses and for further inspiration.

Brainstorm and moodboard

I found various solutions and features to my scenarios and problem statement, and started creating the requirements, information architecture and user flows.

Requirements..

.. is the process that explains what the product is, and what it should do. The requirements are based on personas, the scenarios, problem- and vision statement and the ideation process so far. And to make sure that the requirements fit the product, they were also based on my HMW-questions.

🛠  Motivation to be more active. The app is geared towards busy people (office workers) and is tailored to the environment you’re in. The aim is to get people started, and show them that they don’t have to have alot of time in order to be active. Diversity in type of activities.

🛠 Set goals and track progress, get rewards for point collection or reaching goals. Rewards in the form of discounts, coupons etc.

🛠 Activities can be marked as favorite and easily found again (added to list). Activities can also be scheduled in a calender and the user will receive reminders if they choose that option. There is also a possibility to log progress and add notes to the calendar.

Information architecture

To improve usability, this is the system that is used to organise and label information. The IA shows how the information in an app or on a website is organised and structured.

To make sure that the navigation was user friendly, easy to understand and predictable, a card sorting session was also conducted.

Card sorting session
IA effortless app

User Flows

These are based on the persona’s needs and goals, and how to get there in as few steps as possble. Considering her needs, frustrations and goals, this is how she might want to experience the product:

  •  Register user
  • Browse and chose activity to do
  • Add activity to schedule
  • Add goal
  • See progress, track goals and how long to reward
User Flows

Task Flows

Are a single flow that represent a task that is completed similarly by all users for a specific action. It tends to be linear, doesn’t branch ou and illustrates the main steps the user will take to reach a goal or complete a task.

Task flows
4 prototype

During the prototype phase, I made low-, mid-, and high fidelity wireframes. This was done to come up with the best solution. In this process the Three Levels of Design was considered, to make absolutely sure that the app meets the users’ wants, needs and goals.

To get the best start on the wireframing I also created a moodboard, and sketched out some ideas. This resulted in the beginnings of a Design System. A Design System makes it much easier to keep consistency throughout the process. It’s also good for reusing and standardizing the design.

Design system

Click the image to see the full Design System.

Mid-Fidelity Wireframes

Mid Fidelity wireframes

The mid fidelity wireframes were used for the usability testing. High Fidelity was created after the test-phase.

The prototype sorted, and the design principles used.

High-Fidelity wireframes

High fidelity wireframes
5. Test

The main purpose of testing this prototype was to see if the user can accomplish the tasks presented and how. Does it meet expectations? Do they encounter any usability issues and how can we create a better user experience?

A unmoderated and remote approach was chose for this first usability test of the prototype. It was conducted without a facilitator, and they could test in their own environment.

The participants were encouraged to think aloud (CTA), while completing the tasks. This was to see if there was any correlation between what they said vs. what they did. They also were asked to answer some questions before and after the test.

The mid fidelity wireframes were the prototype used in this test. Test them here.

Data capture sheet

Analyzing and Synthesizing

I used the atomic approach here as well, and an affinity map.

 

To summarize the results:

“Would try this at work”

Participant 4

 ✅ The layout and user- and task flow seemed to match the users mental model. It also appeared that it matched their expectations and they navigated the app without trouble.

❌ Some of the icons were too small, and led to poor visibility. In addition they were hard to interact with leading to poor usability as well. The app should be improved in regards to icons and buttons. Should also ensure that they all work.

❌ Not all icons worked when the user tried them, and should be fixed.

✅ The users’ liked the colors and layout of the app, and thought it was clear what the app was about.

✅ Most of the users’ thought the app was a good idea, and would at least try it. Especially since it focused on busy people and the work environment.

❌ The activity cards should be re-designed. The play-button is confusing. Mismatch between design and the users’ mental model in regards to the links/cards. They don’t behave the way the user expect.

✅ The app was tested by persons that fit the demographics, and seemed to have hit the target group in terms of layout and colors.

❌ Emphasize the benefits and incentives in the app more.

Iterated Wireframes > High-Fidelity

The insights gained from the usability testing formed the basis for this iteration on the wireframes.

Test the iterated high-fidelity wireframes.

 

The main changes made in the wireframes:

 

  • The icons were made bigger and more visible, and increased spacing between them.
  • Made sure that everything worked and was linked correctly.
  • Added a search bar to the “office” and “home” page for better access. It’s easier to reach with thumb, and I expect this feature to be most used on the main activity pages.
  • Changed some imagry/iconography and made it more visible.
  • Tried to emphasize the incentives by adding text to the main page.
Iterated wireframes high fidelity

Conclusion

After completing the design process for now, I have created an app that should help busy people start getting active. Most of the challenges I faced during this process occurred in the usability testing. Some of the participants did not complete the test, or changed their mind. And I also faced some technical challenges with the platforms I used for the testing. Some recordings and information was not saved, and the test stopped functioning half-way through.

 

What I learned ..

The biggest lesson I learned from this is to always have a plan B, C, D and E for usability testing. Because something will always go wrong. The other thing is to continue being open to changes and not get too attached to the idea and product.  The other thing I take from this is to keep the focus on each step of the Design Thinking process, to not jump ahead or form opinions or conclusions ahead of time. And keep in mind always that Design Thinking is iterative, and if something does not work – it’s seldom the user’s fault and most often it’s the idea or the product that needs more work.

 

What’s next?

  • Testing and more testing. To gain more insight a moderated session should be conducted. The previous testing did not yield enough insight into the users goals.
  • Test the high-fidelity prototype with the improvements to see if the prior usability issues are solved.
  • The app needs more emphasis on purpose and incentives.
  • Images needs to be more unified across the app.

 

To see the whole report on this project, just follow the link to the .pdf-file.

Thank you for reading all the way to the end!

other case studies

Image of desert
Pictures of the wireframe for the app

Water Wastage – A UX Case Study

A UX Case study

Water wastage

Water Wastage – A UX Case Study

With any design challenge it is important to understand what problem needs solving and why. And the challenge we are facing today is water wastage in Norwegian households.

Due to water scarcity there are still some geographical locations that struggle with procuring fresh water for their citizens, and as a result 1.1 billion people worldwide lack access to water, and a total of 2.7 billion find water scarce for at least one month of the year (Water scarcity, Threats. WWF, 2020).

Why is this a problem?

Norway is the least water-efficient country in the Nordic region, we lose 24 million litres of water every day due to leaking sanitary products (Start Norge, The water barometer 2020), and only 56% people in Norway think that they consume water in a sustainable and responsible way.

Solution?

In this case study we will try to uncover how, why and when water is wasted. We will come up with a product that could potentially reduce water wastage as well as educate people on this topic.

Is the driving force for change of behaviour knowledge, incentive or recognition? Or a combination?

Timeline

November-December 2020

Team

Cecilie Getz
Terese Hansen
Christian Wilhelmsen
Ilya Martchenko

My role

UX Designer, researcher

Project

Semester Assignment Noroff

Tools

Adobe XD
Photoshop
Illustrator
Airtable
Xtensio
Miro

Methodology

For this project we used the Design Thinking approach to gain an empathic understanding of the people we are designing for, and for the problem we are trying to solve. Based on our research we enter the define stage where we create representative personas, scenarios and find a clear vision and problen statement to get ready for the ideation stage and finding the solution.

Design thinking illustration
1 empathize

The purpose of our research was to find out how we as humans can reduce our extreme consumption and wastage of water, so that every human around the world will have access to fresh drinking water. 

Our research questions were:

👣  How can we educate and motivate people to use less water in Norwegian households?

👣  What makes Norwegian households waste water?

👣  What direct action can every Norwegian take to reduce water consumption?

To gain a better understanding of water scarcity, wastage and/or conservation in our area we chose to do both qualitative and quantitative research.

✅ Questionaire: For exploratory research a survey was sent out.

✅ Literature review: to gather secondary research (generative).

✅ Interviews: 4-8 one-on-one interviews to gather qualitative data.

✅ Usability testing: to evaluate the low-fidelity prototype (evaluative).

Participants and Recruiting

Since our scope was very broad, e decided to categorize our users into three main categories. 

💻 Survey (50 participants)

📋 In-depth interviews (5 participants)

We chose these two research methods becuase qualitative surveys gives more insights than quantitative surveys. We wanted to uncover thoughts, motivations and knowledge about water waste. The survey was anonymous to make people comfortable speaking their tryth. And the interviews gave us an even deeper understanding.

Water users illustration
Primary research quotes
Secondary research statistics

Primary and secondary research

Literature review, in-depth qualitative interviews and survewy was analysed by using Affinity mapping.

We discovered that:

 

🔎  Local governments are too passive in their action against water waste, not pushing or punishing the big-scale industries enough towards a more sustainable operation, causing havoc around the world as climate and the people suffer from a even more water scarce world.

🔎  With better oversight, regulations and information, Norwegians would be more wiling willing to change their water consumption for the better. Especially if they got some sort of incentive, like tax relief.

🔎  There are multiple alternatives available to reduce personal water waste, which people hear nothing about due to lack of media coverage. This makes it difficult for the average person to find easily accessible and relevant information in a user-friendly and consumable way on our media platforms and devices.

 

 

🔎  Norwegians are relatively water-spiled considering the massive resources they have and to properly create urgency for them to reflect over their water consumption, many believe higher costs and less accessibility per household can encourage Norwegians to reduce more actively and consistently.

🔎  Norwegians lack knowledge about the price tag around water wastage, globally as well as domestically.

🔎  Most Norwegians believe that by regulating water, the consumption rate will decrease.

🔎  Defective sanitary products and old and failing infrastructure is a main cause of water wastage in Norway.

2 define

From challenges to opportunities. 

We created “How might we”-questions from our insights in order to turn challenges into design opportunities. The HMW questions helped us come up with creative solutions to solve the challenge.

  • How might we get Norwegians to care about water waste?
  • How might we make information about water wastage more available?
  • How might we encourage local industries to oblige to a more sustainable consumption?
  • How might we make water stewardship more rewarding?
  • How might we enable easily accessible tips and trics alongside affordable tools to battle water waste?
  • How might we get local authorities/government to take an active part in saving water/resources?
  • How might we make it easier, fun and engaging to save on water consumption?
  • How might we make people more aware of the value-chain and water use behind their purchases?
  • How might we illustrate how much water is wasted everyday, and it’s impact on the climate?
  • How might we inform about how water is contaminated by the industry?
  • How might we make the impact water stewardship has, more visible?

What is the problem?

Water waste in Norwegian households, and the lack of information, knowledge, incentives and adequate tools to reduce the water consumption

Who experiences the problem?

Everyone experiences it, corporations, industries and people – whether they are aware of it or not. Especially eco-conscious people.

Where does the problem occur?

It happens in your house, backyard, at your neighbours, in the local store and even on an industrial scale.

Why does it matter?

Because it has a devastating impact on the planet, and everyone and everything on it.

Problem statement

Our Norwegian households are the least water effective in the nordics due to lack of information, knowledge and incentives to reduce water consumption. If we can solve this problem, it would impact the households and the environmental footprint positively. Maybe most importantly to Norwegians, the cost would plummet.

Vision statement

“Our solution will help anyone who wants to reduce their water wastage by making information, knowledge and incentives, and a mainstream of adequate tools easily accessible. ultimately allowing people to go through and affordable step-by-step process in reducing their environmental footprint”.

Meet the Mainstream User Adam – The primary persona

Adam was made to represent the main group of participants. He is the face of most Norwegians; the people that don’t see water as a scarce resource, because they are not educated on the topic. He is willing to reduce his water consumption if he is shown the consequences of water waste, his purchasing footprint and the results of his reduction. His main motivator is getting a tax relief or discount on his water bill. 

Adam - primary user persona

Persona picture from Pixabay

Meet the Extreme Saver Eva – The secondary persona

Eva was made to represent Adam’s opposite, the people with a high level of awareness. She is an environmentalist, and the type to inspire and educate people to take action against water waste and climate change. She fights for a sustainable and healthy planet to live on, starting with combating water waste.

Eva secondary persona

Persona picture from Pixabay

3 ideate

At this stage we started ideating different solutions to water waste, and we started by conducting an ideation workshop to find solutions based on our HMW-questions. We voted on the tree best ideas. Since they all were ideas for an app, we then used mind-mapping to create the features and direction we wanted. We finished this off by using the NUF method to grade the tree best ideas to find the top idea, which were a value-chain app

✔️ Brainstorming (divergent thinking)

✔️ Mindmapping (Tree-model)

✔️ NUF (convergent thinking)

Top 3 ideas

The Product..

..is an app that tackles a problem facing all consumers of water today; information about where the water comes from, how it’s used and what impact it has on the planet and people.

Adam is able to easily browse a product library which gives him a full overview of sustainable products and stores, he can also see the product information from materals and ingredients, down to the specific details such as origin and source of water.

If Adam doesn’t find a product in the library he can use the intuitive AR-scanner to quicly add a missing product to the library. He can set and track his personal goals in regards to reduction and see the impact his actions have directly. To make it even more rewarding, Adam collects points every time he scans a missing product and adds it to the library, which he later can cash-in by collecting coupons and discounts.

Ideation workshop
4 prototype

Requirements

Based on the personas and problem- and vision statement we have identified the design requirements. This was done by having an open discussion in our group on what our personas needs and pain points are. And to make sure the requirements fit our product, we also based them on our HMW-questions.

🛠 Reduce personal water consumption/waste and see the results gained through this process.

Set and track goals and also find products to help save water. You can also find information about products and their value chain.

🛠 Receive affordable solutions to solve the problem of personal water consumption/waste. Track progress and get rewards in the form of discounts and coupons.

🛠 Find relevant and digestible information regarding water scarcity/waste, globally and locally. Products and news in the form of articles and blogs.

Information architecture

IA is the blueprint of the design structure, and can be generated into wireframes and sitemaps for the project. To make sure our navigation and layout was user friendly, we conducted a card sorting exercise. The participants fit our criteria. 

We conducted and open-card sorting, so the participants did not get any headlines or main categories. They placed all content freely.

Card sorting

IA and User Flow

IA water waste app
User flow for app

Task Flows

The task flows is just a single flow that doesn’t branch out. It is a task that is completed similarly by all user for a specific action. The flow tend to be linear and illustrates the high-level steps our user will take to get to a end point or complete a task.

Wireframes

When developing the wireframes we considered the Three Levels of Design (Don Norman), to make sure the app connects with the users’ needs and goals.

We need to create a relationship between the app and the user, and the app needs to bea easy, helpful and engaging to make users’ want to use it continuously.

Three levels of design

The process first started with sketching and visualizing our mobile interface on screens on paper.

After that we created the low-fidelity wireframes in Adobe XD.

Sketches of app
Wireframes with annotations

We kept both best practices, design- and gestalt priciples in mid when designing the wireframes. We kept the design intuitivt and easy to follow, and also taken the F-pattern into consideration. Our menus are also placed where the users would expect to find them.

Gestalt principles

Proximity/common region – We’ve placed related content close, because they appear more related than if they were placed further apart. Common region is related to proximity, and means that when objects are located withing that same region, we perceive them as belonging together.

Similarity – We’ve established similar groups of content and will further aply this principle with color to distinguish different sections.

Focal point – The things that stand out in the design visually will capture and hold the viewer’s attention first. We’ve used this principle to draw the eye to the QR-scanner button for instance and also used graphs and other elements to draw the eye to what’s important on each page.

Low-fidelity wireframes

Low fidelity wireframes
5. Test

In the last stage of Design Thinking we planned and conducted usability tests. The purpose was to identify usability problems, and to see if we have made a product that meets the users’ needs, wants, goals and mental models. We screened participants with an online survey, and the test was conducted with a facilitator – moderated and recorded, and then added to a capture sheet for further analysis.

1. Screener

A mini-survey was sent out to people on social media platforms, and their answers either qualified or disqualified them for the user test.

2. Pilot test

Running a pilot test allowed us to test the facilitation techniques, test the script, tasks and the equipment to identify technical issues. We made the neccessary modifications after discovering inconsistencies, tested again before engaging the participants.

3. Usability test

Because of covid-19 we conducted this test remotely and moderated through phone/video interviews. This method gave us the opportunity to test any person in our city using an online communication program that records the participants when they tested the prototypes from Adobe XD.

 

 

“Overall I think it’s great. You simplified it, and I am a huge fan of simple apps.”
– participant 4

Testing methodology

  1. Moderated – Phone or video inteview
  2. Moderated – In person, Lab testing

The techniques used for the testing were:

– Concurrent Thinking Aloud (CTA) where we encouraged the participants to think out loud and share their thought process while completing the tasks.

– Concurrent Probing (CP) This technique allows the facilitator to probe the participant for information when the participant does or says something unexpected during the testing session.

Findings and Reccommendations

Analysis and observations

❌ In several situations users’ mental model did not match that of the concept design which resulted in misunderstandings of what the application was originally supposed to do.

 

💡 Possble solution for this is to increase the emphasis on the onboarding experience so that users will get a better understanding of the applications functions and the overall design. One way to do this is to implement pop-up guides that explaing the current function the user is using and its design purpose.
❌ In several situations text elements were confusing enough to disrupt the users workflow. 💡 Possible solution would be to review faulty labels and text elements and replace them with more recognizable and direct asosiations to better improve the workflow.
❌ We found that the overall perception from the participants regarding the intention of the app was good and they felt it was a useful app to battle water waste.
❌ Inactive/faulty buttons distracted users with maintaining a steady workflow. 💡 Review the connections between the wireframes and its design elements and fix the faulty/inactive buttons before continuing with the next iteration of usability tests.
❌ We found that although certain design elements were correctly placed and relevant, occasionally, users would not understand their usefulness because of poor labelling. 💡 Before moving onto the next stage in the design process, we would recommend better labeling to obvious elements like arrows back and forth with “ Back “ & “ Next”, this will make next users better understand that the elements can be used and wiggled with. The same regards our filtering elements, without guiding text below the element, the user is going to struggle to understand what to do with it.
❌ The (menu navigation) tab bar was well received, and will be kept. 💡 Since this element was received well our recommendation would be to increase its fidelity by introducing colours and other design elements.
❌ We found that placement and relevance of certain design elements caused frustrations among the users. 💡 For the next round of testing, we recommend removing the choice in the registration process about gender as it feels not relevant, same regards requiring users to leave phonenumbers in the process. We also recommend changing the prioritization of the placeholders in the homepage view, goals should be the main focal point and merged into one placeholder not 3 different like we have now. In the onboarding & registration process , we recommend changing the video-button inside the circle with text like “ move on “ instead to make the action more understandable.
❌ We found that bugs occurred which interrupted the overall experience for the user, as they were not able to perform certain actions as intended. 💡 We recommend to do several test runs of the prototype before launching usability tesing with external participants and informing users about the need for a strong and stable wifi or network connection while performing the tests.
❌  We found that the prototype did not always fulfill the requirements of Gestalt principles. 💡 Moving on with the process, we recommend to use colors more actively across the design elements but also to use better graphics in our placeholder that are more relevant to the specific content. One user also pointed out that particularly the News page section and its elements were small, the same regarded the categorize, both elements and text should therefore be enlarged. Lastly, we got feedback on some elements being out of place, these should also be aligned better before testing again.

Design iteration

After testing and analysing the results the wireframes were revised and the design iterated on.

Iterated wireframes

Conclusion

This process has shown us that most Norwegians have difficulties finding accessible and digestible information for them to get personally involved in reducing their water consumption. However, early results from the usability testing showed an increased interest in the topic and higher initiative to reduce personal water waste when provided with more information and incentives.

Findings that answers our problem statement:

✅ With a product that motivates, informs and rewards people for their efforts in reducing water waste, many Norwegians are willing to change their consumption.

✅ The main factor for the willingness to change and reduce water waste is gaining points which will result in discounts, while the user feels like he/she is doing the right thing and is on a path to a more sustainable life.

✅ The engaging part of the app is the QR-scanner which makes it possible for users to scan products in stores, and to see information videos/articles and the water footprint of the product. This gives the user a chance to make a conscious decision to buy or not to buy the product – while earning points at the same time.

I learned a lot in every step of this process, how to listen, research, keep an open mind and how to work on a team towards a common goal. We all had our strengths and weaknesses, and different areas where someone was more of an “expert” than others. But I think we managed to distribute the workload evenly and our differences and discussions was solved and conducted in a diplomatic manner.

Our product might not have solved the entire problem, but my hope is that this project can spread some awareness around water wastage and inspire others to take action.

 

What’s next?

The next stages in the Design thinking process is to further test the new, and improved prototype. This will show us if there are more pitfalls and iterations that needs to be done before making high-fidelity prototypes.

 

Click the link to see the entire Water Wastage-project in a .pdf-file

 

It seems like the driving force for a change of behaviour really is a combination of gaining knowledge and motivating people by rewarding them, and letting people know that their efforts really matter.

Thank you for reading!

case studies

Pictures of the wireframe for the app
Image of desert