Project
Overview
My Role
Research
User Persona
User Flow
UI/UX Design
Wireframe
Test Facilitator
Project
Group Effort
Project
Duration
4
Weeks
30+
Screens
Project
Tools Used
Figma
Google Forms
Miro
Google Slide
Zoom
Project
Timeline
Project
Problem Statement
User Perspective
As a young man with a long-standing passion for wildlife and their preservation, I often face difficulties in this pursuit due to the limited availability of information on the subject and the lack of general interest. This can leave me feeling isolated and frustrated.
User Research Perspective
Norwegian residents often know about the challenges wildlife encounter, but they are limited in their ability to personally contribute due to a lack of knowledge on the subject, resulting in feelings of frustration.
POV:
- People in Norway needs information and clear guidelines because they want to be a part of taking care of wildlife, but don’t know how.
- People in Norway needs the contents to be fun because they find lectures boring and ineffective.
Project
Solution
Goal
To make a user-friendly app that makes environmental information accessible to everyday users, encouraging positive change through interactive engagement and personal reflection rather than focusing solely on scarcity.
Empathise
Research Goals
The objective of the research was to discover ways to encourage and empower ordinary individuals to educate themselves about wildlife and take actionable measures to support their well-being.
We conducted a session with 5W&H questions to get us started and try to narrow down research goals.
Who
Who will use the guidelines and what are they like?
When
When will the guidelines be used?
Why
Why is this product important?
What
What motivates people to take care of wildlife?
Where
Where will the guidelines be used?
How
How will it help users?
Empathise
Key Insights
Empathise
Interviews
Interviews
Participants and key insights
“At the end of the day, that’s definitely the people’s responsibility, the government cannot put a gun to people’s heads to reduce their waste, right?”
Define
Target Group
Broad Target Group
Primary Target Group
Secondary
We aimed to create a solution for a broad audience, so we introduced a secondary persona, Kari, who is passionate about wildlife conservation. By considering the needs and motivations of both primary and secondary personas, we strive to develop an app with wide-reaching appeal for maximum impact in wildlife conservation.
Define
Primary Persona
Define
Secondary Persona
Define
User Scenario Contextual
Matias is on his way to work when he comes across a newspaper article discussing the latest numbers of an endangered animal in Norway. The news makes him a bit concerned, and he wonders what this means.
As he is walking to work, his thought process is interrupted when he reads the news, but shortly after, he becomes distracted and forgets what he had just read. Instead, he starts thinking about something else and continues on his way to work.
During his lunch break, some of his colleagues bring up the same article that he had read earlier in the day. They discuss the animal in question, but soon the conversation shifts to another colleague, who recommends an app that helps identify flowers suitable for bee and insect pollination in gardens.
After trying the app out, he discovers several mini-games and ends up playing them on his way home. Through these games, he learns a lot about how to support bee and insect populations. Later that evening, he reads more about what he can do to help and tries to implement some of the suggestions in his own home. He feels a sense of satisfaction that his small actions could potentially bring about a significant impact on the bigger picture of wildlife conservation.
Define
4 W's
Define
How Might We
Ideate
Ideation Workshop
Ideation methods we used:
- Problem Statement
(including HMW questions to initiate the next step) - Ideation Techniques
- Mood Boards
- Brainstorming
- 100$ Workshop
In addition, we prepared other techniques such as Mind Mapping and Storyboard in case the need arose to switch to other methods for inspiration. In the end, we utilized four techniques.
Screenshot from Ideation workshop.
From top left: Mahshid, Martine & Thomas
Ideate
Mood Boards
Ideate
Our Top Solutions
We moved on to the last part of the workshop, we refined our top solutions where we got to play the $100. These were the ideas included for the last session of the workshop:
Awareness app with mini-games
The app feature mini-games tailored to awareness of different animals and what you can do to help them.
QR Codes in Nature -> Website
QR codes will be placed on plaques in nature/other places to be scanned and opens a website for more information.
App with Map, Tracking and Image Recognition
The app would be used out in the nature
Animation Series
Animation series based on an animal hotel/bug hotel.
Nature GO
A type of “Pokemon Go” app where you can catch wild animals and learn about them.
Virtual Wildlife Tour
Where you can virtually visit the different animals and experience them.
Ideate
MoSCoW Technique
Ideate
Our Top Solution
“Our concept is to create an awareness app with mini-games enabling learning through gamification. The goal is to raise awareness and educate people about the importance of taking care of wildlife, as well as give them tools and guidelines for personal engagement.”
Name - Wildlife Wonders
Animals featured in the app:
- Bees
- Hedgehog
- Butterfly
- Arctic Fox
- Bat
- Lynx
- Beetle
- Pygmy Goose
- Musk Ox
- Wild Reindeer
+ many more
Ideate
SWOT Analysis
Ideate
Games in the App
A brief overview of some of the games that can be included in the apps for the different animals
Flight of the bumblebee
Animal: Bees
Game type: Flyer
Description: The user is the bee on a mission to pollinate flower and can only pollinate specific flowers that you can plant in your own garden.
Awareness: Need more plants for pollination for bees.
Butterfly Bubbles
Animal: Butterfly
Game type: Bubble Shooter
Description: Classic bubble shooter which increases in difficulty as the bubbles disappear and are replaced with houses.
Awareness: Butterflies are losing their habitats.
Musk Surfer
Animal: Musk Ox
Game type: Endless Runner
Description: Similar to subway surfers, where you control the Musk as he is collecting food while navigating between trains and tries to not get run over by one
Awareness: Musk Ox habitats and their history in Norway.
Hedgehog Highway
Animal: Hedgehog
Game type: Driver
Description: The user competes with different hedgehogs in a map through different gardens. Some parts are off rail as some gardens are closed off with fences.
Awareness: Create Hedgehog highways in your garden.
Beetle Hotel
Animal: Beetle
Game type: Puzzle
Description: Classic puzzle/maze game where you have to solve puzzles and navigate through a maze in a bug hotel to find you beetle friends.
Awareness: Butterflies are losing their habitats.
Ideate
Technical Requirement
Ideate
Our Top Solution
Ideate
IA Diagram
Ideate
Task Flows
Ideate
User Flow
Prototype
Sketches
"Design is not a single object or dimension. Design is messy and complex."
Natasha Jen (N.D)
Prototype
Wireframes
Prototype
Wireflows
Sign up as a first time user
Scan an animal and view results
Find coupon and purchase product
Play a game
Usability Test
Scope
Goal
The goal was to test if the concept and design is matching the user’s expectations and mental model, as well as uncovering any usability issues. We also hoped to expose any frustration or pain points in the user flow.
Hypothesis
Is the user able to onboard easily to the app?
Is the user able to play a game and is it an enjoyable part of the app?
Is the user able to upload a photo and scan and finds it useful?
Is the user able to find and utilise guidelines?
Is the user able to find their rewards, purchase an order and feels that this contributes to them helping wildlife?
Tasks
Signing up as a new user to the app
Play a game and check the leaderboard
Scan and view results
Find guidelines
Find coupon and purchase product
Usability Test
Features We Tested
Usability Test
Prototype
We prepared our prototyping using Figma and connected all relevant frames together.
We wanted to focus on specific areas such as game, guidelines and scan, while at the same time see how everything was connecting giving the user a full experience on navigating around the app. We created an illusion of playing a game using auto smart animation.
Usability Test
Participants
Usability Test
Results
Usability Test
Task Completion Rates
Usability Test
Proposed Changes
- Restructure Welcome page with highlighting Login and Sign Up buttons
- Add proper back navigation UI elements on all pages
- Highlight possibility for skipping onboarding
- Add a share button on sharing results
- Adding a search bar for the language options as there are many languages to choose from
- On Sign Up/Log In, make underlines on links
- Restructure the elements on the Hamburger Menu
- Make pictures selected for uploading in scan highlighted
- Connect rewards/redeem coupons with a pop-up in the game
- On Sign Up/Log In, make underlines on links
- Add drop down for choosing coupons during checkout
- Add “My Rewards” to Hamburger Menu
- Add Redeem reward button on the option after clicking animal on the game map
- Links needs to be extended from just the arrow to the whole box
Usability Test
Design Iterations
Changes and additional frames
We set out to refine and improve our product through multiple rounds of feedback, evaluation, and modification so that it meets the desired goals and objectives of our users. We also implemented the adjustments to our prototype.
Usability Test
Key Findings
Concept
The participants enjoyed the concept and believed this would be beneficial for them.
Reward System
The reward system was well received, but may not be highlighted enough. This needs to be further connected with the gaming part.
Consistency
Our prototype had some inconsistency when it came to navigational UI elements such as back buttons. We need to improve the navigational experience and ensure consistency.
Shopping Experience
3 out of 5 participants were not able to complete the coupon purchase task without any help. We need to improve the overall shopping experience.
Additional Features
Participants suggested additional features, such as exploring the idea of users being able to share tips and suggestions for each other to keep up the motivation.
Highlight Scan Feature
The participants loved the scan feature, but only scored 88% on satisfaction on the task. We need to improve the scan experience and consider highlighting it as one of the main features.
Usability Test
Summary & Conclusion
We need review the shopping experience within the app
We need to rethink the navigational structure
We need to create a new main page
We need to further develop the reward system
Usability Test
Constraints
Technical
Zoom only gives 45 minutes of meeting time. This may have shortened some of the usability testings and recommended to upgrade or find another solution for next round of testing.
Remote
As a remote team, we had limited choices of usability method we were able to conduct.
Recruitment
The project had a broad target group, but due to time constraints and lack of incentives, we were not able to recruit outside our own social network.
Testing outside target group
We conducted usability testing with one participant outside our target group. We used this to our advantage as they would still be looked as a secondary audience, giving us insights to cater for a broader audience.