A comprehensive mobile design case study
Project Background
Most people are concerned about the climate change crisis but don’t realize how much carbon footprint they’ve created and still need more education on ways to take action. I would like to explore how I can help them recognize and reduce their carbon footprint in daily lives with ease. The biggest challenge is how I can engage users to continue doing it in their daily lives.
Potential Solutions
I approached this problem space by designing “GoGreen”, a mobile application that helps users understand their environmental impact and encourage them to keep on track on reducing their emissions by providing
-
Carbon footprint tracker
-
Learning resources
-
Goal-setting tool
Designer:
Nattamon Sitthiphisai
My Role:
UX Researcher, UX Designer,
UI Designer
Key Skills:
Content Design and Strategy, Branding, Visual Design
Tools:
Figma, Invision, Miro, Marvel Pop
Timeline:
February 2021 - July 2021
Potential Users
Users who are concerned about their environmental impact, whether they have just started or already adopted some sustainable habits.
Approach: UX Process
Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.
— Tim Brown
The Design Thinking Process
-
Competitive Research
-
User Interviews
-
Affinity Map
-
Empathy Maps
-
User Personas
-
Problem Statements
-
Brainstorm Solutions
-
User Stories
-
Site Map
-
User Flows
-
Sketching
-
Wireframing & Wireflows
-
Style Guide
-
High Fidelity Mockups
-
Interactive Prototype
-
Guerilla Usability Tests
-
High Fidelity Usability Tests
Empathize with Research
I initially started by studying the articles, academic journals and case studies to understand the problem space I tried to solve. I also conducted the competitive research of existing eco-friendly applications in the market that have similar goals to "GoGreen". Discovered competitors’ strengths and weaknesses helped me to determine which design process I should approach.
Heuristic Analysis
I performed usability heuristic analysis on three competitor applications
Livegreen provides a service for users to track, understand, reduce and offset their carbon footprint.
Consistency and Standard
Recognition Rather than Recall
Aesthetic and Minimalist Style
Capture offers a service for users to track, learn, and remove their carbon emissions.
Ecosia is the search engine platform that will let users contribute to planting a tree every time when search.
5/5
5/5
4/5
4/5
5/5
4/5
4/5
5/5
5/5
Screener Survey
I recruited the user interview participants by posting screener surveys online through social media and Slack community channels. Twenty-nine participants filled out the survey.
Carbon Footprint Tracking Experience
Interest level in reducing Carbon Footprint
This made me realize that despite the urgency around climate change, yet people don’t know enough about their emissions, and less than half of the participants are serious about their carbon footprints.
User Interview Insights
Five Interviewees were recruited through the screener surveys. Here are some insights that were mentioned by the interviewees
education around being sustainable is complicated"
I want some easy steps to start working toward reducing the carbon footprint"
the customized and specific feedback would help me improve effectively"
Motivation and engagement are needed"
Define Problems
To keep my design focusing on empathize with users, I synthesized the research findings by using different methods to help me find the solutions.
Affinity Map
To emphasize with the users, I created the affinity map to categorize the users’ insights based on
the interviews.
Empathy Map
To better understand users’ pain points, goals, feelings, thoughts, and behaviors, I create 2 empathy maps based on users’ experience levels to visualize and organize interview insights.
Meet My Users
To bring my users to life, I created 2 main personas to represent the target users. (Click on images to enlarge)
Angela: A busy mom who wants to do more for the environment
Walter: A college student who doesn’t know where to start
Turn Challenges into Opportunities
Once I had a better understanding of my users and how I could provide them with solutions, I began to frame “How Might We” (HMV) questions. To be able to find the solutions, I need to identify what the problems are. These HMV questions help me define the necessary features (MVP) that I should include in GoGreen.
How might we...?
Ideate Solutions
To visualize solutions that I synthesized and learned from research process, I sketched my solution ideas by using different ideation techniques.
Brainstorm Solutions
After analyzing each HMV question, I was able to ideate some ideas that could potentially become "GoGreen" solutions and the MVP features.
User Story (MVP and Next release features)
After deciding what my epic story were, I created user stories based on the user personas and the features they expected GoGreen to deliver.
Organize features & functionalities
Once I had a rough idea of how to structure and organize the application, I began mapping out the information architecture by creating a site map, red routes, and paper sketches. These steps are important in helping me organize the content to be easy to navigate.
Sitemap
I created Sitemap to group the related content together and present how they all connected in hierarchical order.
User Flow (Red Routes)
I created user flows to provide a visual representations of critical routes users can navigate through an application to achieve each task, from an entry point to a final interaction.
Turn concepts into tangible experiences
To transform my ideas into tangible solutions, I started sketching paper screens so that they can be tested and adjusted before I make higher fidelity versions of my designs
Early Validation
I conducted five guerilla usability tests to validate initial ideas and get feedback early on. This helped me to quickly identify usability issues and adjusted them before transforming screens to the digital version.
Try the prototype here
Wireframe & Wireflow
Learning from the first usability test, I was able to identify usability issues and fixed them before creating wireframes. Putting together wireframes and user flows to create wireflows, I was able to visualize the red routes that my users would take to accomplish each task.
Create a consistent Visual Identity
Style Guide
Before starting the high-fidelity design process, I created the style guide to help me keep a consistent design throughout the process and ensure to provide the familiar user experience across the product.
High Fidelity Design
I evaluated the usability test findings along with my personas and red routes. Bringing my project to life, I transformed my design decisions into high-fidelity mockups using Figma. This process is what excites me the most because it’s when GoGreen becomes the closest to the real product.
The objectives of the final design were…
To simplify a carbon footprint tracking experience with minimal steps and a clean interface.
To decompose the overwhelming information into organized and simpler knowledge.
Onboarding experience
Track
Calculate your monthly personal carbon footprint of your lifestyle by answering simple questions.
Learn
Enjoy easy tips, articles, news, and videos of how to reduce your carbon footprints effectively.
Achieve Goal
Keep track of your progress by setting a monthly goal to help you achieve target emissions.
Prototype and Test
Usability testing
Performing couple rounds of usability testing, I recruited five users to participate in the first round and another five users for the second one, then iterated and redesigned in between. I received some valuable insights that uncover GoGreen’s usability issues and identify users’ expectations. This process helped me improve my design to serve the better user experience.
First Round : Key findings
Issue 1: The goal-setting process should be more clear as the instruction is confusing
Issue 2: The tracking process needs to be more intuitive and shorter.
Iteration
Issue 1 iteration
Issue 2 iteration
Final Round : Key findings
After iterating and fixing usability issues finding in the first test, participants were able to complete all tasks successfully with some minor improvements suggested.
Future Improvement
Interactive prototype
Try the Invision prototype below or click here
Takeaways
1. Simplifying the complicated matter like climate change isn’t easy
To help users understand how their carbon footprints are being produced in a less complicated way is difficult. People often avoid problem space they don’t understand, so it’s important to provide users with varied and simple resources based on their experiences.
2. To discover the solutions, I need to identify the problems first
At the beginning of the design process, I had a few solutions in mind. However, the user interview insights helped me understand my target users and their behaviors. This process is crucial in helping me create the necessary features for GoGreen.
3. Always keep consistency as your priority when it comes to design
Consistency is key in the design process as users would expect a familiar experience when navigating through an application. I learned from usability testing that a small change in UI element style could cause major confusion for users.
See more Projects
SYndee
an AI-based mobile application that helps users to overcome impostor syndrome and negative self-talk (Designed the MVP for a Startup)
Geared up
An e-commerce website that provides bike finder quiz and bike compare feature to help users find the best bike that suit their needs