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

The Impact of Loneliness – A UX Case Study

A UX Case Study –

The impact of loneliness

The Impact of Loneliness – A UX Case Study

Project Overview

THE PROBLEM

Loneliness can have an impact on anyone at any given time in their lives; it does not discriminate against age, gender or even professional background. 

THE TASK

Research causes for loneliness and present the top findings, as well as the top idea for solving the social pandemic of loneliness.

THE AUDIENCE

Everyone can be affected by loneliness at some point in their life.

My role

UX designer, researcher

Team effort: Research and affinity map
Members: I. Martchenko, C. Wilhelmsen, C. Getz and T. Hansen

October 2020

Tools

Photoshop
Illustrator
Adobe XD
Miro

THE PROJECT

This project was for my UX studies at Noroff.

Methodology

I have used Design Thinking approach in order 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.

Design thinking illustration
  • Research
  • Analysing and Synthesising
  • Define the problem
  • Personas
  • Scenarios
  • Ideating solutions
  • Requirements
  • Information architecture
  • User flows
  • Low-fidelity sketches of idea/solution
  • Usability testing

The first step in the Design Thinking process is to empatise, and is all about understanding the problem that needs solving and who experiences the problem. In order to achieve this understanding, I gathered both qualitative and quantitative data. 

For primary research we sent out two surveys and recruited on social media. We also conducted secondary research in the form of a literature review. 

THE SURVEY

We sent out two surveys to gather as much data as we could, both qualitative and quantitative.

Survey 1 got 51 responses, and survey 2 got 39 responses. 

Some of the questions we asked were:

  • Demographics: age, gender, location, civil status
  • How often they socialize with others
  • If they’ve felt lonely recently or at all
  • What they do when they feel lonely
  • What they think causes loneliness and how they can prevent it
  • How often they use social media

All facts found in the research phase, literature review and surveys was added to a spreadsheet and used in the affinity mapping to find insights later.

Facts:

Analysing & Synthesising

In order to make sense of all the information we collected through our research, we imported all our facts into Miro and conducted an affinity mapping session. This session led me to find several insights, and 6 key insights, by asking the 5W’s and H questions.

Conclusions

My conclusions are based on all research gathered and the formed insights.

  • Be inclusive and see the people around you. Take an interest and reach out, talking to someone or being the listening ear might do wonders.
  • When moving to a new place, keep in touch with family and friends while you get used to being in a new environment. Volunteer or find the social center of the town and sign up for activities. That might be the start of a new social circel.
  • In periods of grief or conflict, find someone to talk to. Even if you don’t feel like it, reach out to someone for just a little while.
  • As a society we need to make it easer for people to reach out and meet each other in real life. Organize activities and social gatherings anyone can sign up for. Make it less scary to meet new people, and make it about including others instead of expectations and performance.
  • Built digital platforms that can change the way we use social media. Put loneliness on the agenda and try to find ways to combine social media with cultivating real life connections and relationships.

The next step in Design Thinking is the Define stage, which is based on the research findings from the empathise stage. Using that information I created persona, scenarios and problem statement.

Persona

The persona is based on my assumptions of what the archetypical user would be like, and answers the question: “who are we designing for?”

Context scenario

Persona: Trina  Goal: Feeling less lonely and building social network

1. Trina just moved to a new city and started a new job as a graphic designer intern.
2. She doesn’t have many colleagues and no friends or family nearby.
3. After work every day, Trina goes home alone. When talking to a friend on the phone she tells her how lonely she feels and that she wishes she had something to do or someone close by to go ut with or talk to. The friend tells her about this new app that is great for making connections and meeting other people.
4. Tina downloads the app and starts to browse the community and forum. She plays a few games and chat with others on the app. After a while they plan to meet up and eat lunch together.
5. Trina is excited about the new possibilities with the new app.

Key path scenario

Trina downloads the app from app store and reads the introduction and terms of use, before she creates a profile for herself. She then scrolls through the different features of the app; the forums and chat functions, the tips section, the games you can play with others from your city and scheduled IRL activities and meetings. She then joins a game of poker and starts to chat with the others on her “table”. She finds out they all signed up for a lunch meeting the next day not far from where she works. Since they seem nice, she also registers for the same lunch activity.

Problem statement

People that move to new cities can experience loneliness becaus e they move from a place where they have a network – close friends and/or family – to a comp letely new area where the social network in most cases ar e non-existent. If we can solve this problem with our app, it would mean that our users have a easy wa y to connect with others and expand their network through positive activities. This tool will help combat loneliness and will also gain our company positive feedback and reviews and boost our other apps and ventures.

Vision statement

Our app helps Trina and others that move to a new city and wants to meet other people in order feel less alone by providing a way to meet other people by joining activities or play games.

In the third stage of the Design Thinking process it is time to generate ideas. I now have a good idea of who the user is, their needs and goals. To further fuel the ideation sessions we asked HMW questions:

  • How might we make it easier to make connections to people in new places?
  • How might we create a social platform that does not promote loneliness?
  • How might we make it easy to interact with others?
  • How might we make it easy to meet people in a new town?
  • How might we make it so people have a way to expand their social circle?
  • How might we make it easy to make connections regardless of what type of person you are?
  • How might we create an inclusive platform?
  • How might we create a platform that does not care about social status, looks, income and how successful you are?

Ideation workshops

To find as many ideas as possible 3 ideation sessions were performed.

The first was a mind/tree map to find as many ideas and connections as possible. The second session was a brainstorm, to confirm that the top idea was the best one and the last one was laddering – to help us look at the desigh challenge from different perspectives.

Vision statement

“My solution will help people that relocate expand their social circle and find new friends by being inspiring, motivating and provide the tools neccessary. This will allow people to connect with others in a easy and fun way, in a safe environment that promotes friendships and social interaction.”

What the product is, and what it should do.

The product is thought to be an app. The aim of the app is to promote socializing with others, not only online but in the real world as well through playing games in small groups, organising and signing up for activities in your town and in that way increase your social circle. The thought is to focus more on interactions and easy meetings with small groups to decrease the pressure, and focous less on looks, social standing and success.

Requirements

The process explains what the product is and what it should do, and includes data-, functional-, technical-, and contextual requirements. The design requirements was identified by the personas and the problem- and vision statement. The personas’ goals and pain points were taken into consideration, and I also based them on my HMW-questions. 

🛠 Play games

Virtual “rooms” where you can play small games in small groups to get to know others.

🛠 Activities

Organize or sign up for activities to meet others. Maybe you want to go out to eat lunch or dinner, go to a concert, watch sports or join a tour of the city etc etc.

🛠 Message and chat function

Have the possibility to send messages to other users, and chat with them when playing games etc.

Information architecture

After finding the requirements, the information architecture was born. To avoid frustrating users content has to be organised and stuctured in a way that promotes usability and makes it easy to navigate the app.

User and task flows

The flows focuses on what the user needs and their goal. They depict visually how the user will navigate through the app. 

During the prototyping stage I made sketches and low-fidelity wireframes of the app, so that I could come up with the best possible solution.

Persuasive design

This seeks to understand and interpret human behaviour based on the data collected during the previous stages.
The main goal is to help the users in their decision making and help the designer to communicate better.

 

Norman’s Three Levels of Design

Visceral Level Behaviour Level Reflective Level
First impression: Clean, simple design. Automatic recognition, easy to use and understand. User experience: The app should have the user in mind. Intuitive tooltips that show the users the most important features. Memories: Will use familiar icons, layout and interface. This will make sure of the users recognition.
Visual appeal: Fonts, colors, shapes, images and design elements will work together to form a pleasing experience. Does the app meet the user’s needs and goals?: The app will provide the user with the tools to meet others. It engages and motivates so that the user can reach their goals. Users relationship with product: The app will help the user interact with others, get to know other people and increase their social circle.
Emotional impact: Use positive colors and images to engage the users. Does the app meet the user’s expectations?: A familiar interface will make sure that the user recognizes how to use the app and it will have low cognitive load. Usability testing will uncover any problems. User reflection and impression: I think this app can make a difference to people that relocate and struggle to find a new social circle. It will engage them and make it fun and non-threateing.

Sketches

Sketches of solution

Wireframes

Low fidelity wireframes

The wireframes are based on the user/task flows, as well as the information architecture and requirements.

The last stage in Design Thinking is the test phase. And I made a prototype I presented to real users for testing and feedback. For this I used the platform UserZoom, and conducted a  unmoderated and remote usability test. I had a screener so that only people that fit the persona/user were able to proceed to the test.

The test itself was a combination of qualitative and quantitative. Direct observation and assessment on how the participants interacted with the prototype, and they were asked both open- and closed-ended questions to gather their opinions on the user flow and the overall usability of the product.

The users that got through the screener got a predefined task to complete, to see how they responded and interacted with the design.

Attitudinal vs. behavioural research

The participants were encouraged to think aloud (CTA) while completing the set task. This was to see if there was any correlation between what they said vs. what they did during the test.

The prototype

The wireframe/prototype tested was the user/task flow to the activites part of the app, and how to browse and book activities. I considered this to be the core of the app and the most important use- and task flow.

 

 

Besides observation, the other metrics used to find information was success rate, critical error, non-critical error, time to completion and subjective measures.

I used an atomic research method to analyse and synthesise the findings of the usability test. The finding are based on the recordings and feedback from the users.

To summarise

  • Bug: A non-critical error was discovered during participant 1 test session. When clicking the button to go back a page on the selected activity page, you arrive at the book activity page instead.
  • Usability issues: The participants rated the usability from mid to high, meaning that the usability is ok and could be a lot better. Observations did not reveal any severe issues, and some of the feedback can also be due to this being a low-fidelity wireframe.
  • Look and functionality needs to improved.

Conclusion

General thoughts and learnings.

This was one of my first projects and case study as a novice UX designer, and I learned so much from this process. We worked as a team of four in the first step, empathize, and did the research and affinity map together. Then we separated and formed our own insights and conclusions and went through the rest of the Design Thinking process solo.

This assignment has taught me to empathise and listen with an open mind, and to see the big picture and not get caught up in all the small details.  I also got a whole new understanding of Design Thinking, and that it really is an iterative process. It’s easy to get stuck on a solution, but if it doesn’t work for the user’s and solve their needs, then the solution is wrong.

I enjoyed every step of this process, but the area I faced the most challenges with was the testing. Both technical and with recruitment. But in my experience it’s the things that goes wrong we learn the most from.

What’s next?

The next steps in this process would be to take the information gathered from user testing and make the improvements on the low-fidelity wireframes and then make a mid-fidelity prototype for further testing. I feel that more testing is neccessary to see if this product would meet the potential user’s goals and needs.

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

 

Thanks for reading!

Other case studies

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