|
Project Overview
|
Project Duration:
November 2022 - January 2023 Project Type: Responsive Web Design Tools & Methods Used: Adobe XD, competitive audit, interviews, empathy mapping, user personas & journey maps, wireframing, prototyping, usability testing & iterating. Target Users: Individuals looking to easily reduce their carbon footprint. |
|
My Role
|
Lead UX designer from conception to delivery.
|
|
My Responsibilities
|
> Conducting competitive research
> Creating wireframes > Building low and high-fidelity prototypes > Conducting usability studies > Accounting for accessibility > Iterating on designs > Documenting design process |
The Problem
|
Users need information on how to be more sustainable and motivation to improve their habits.
|
The ObjectiveCreate a product that allows users to track their carbon and ecological footprints and encourages them to take action to change their habits, lowering their footprint.
|
My Process
Here is a quick summary of my design process. Continue scrolling to check out the process in more detail.
Here is a quick summary of my design process. Continue scrolling to check out the process in more detail.
|
|
1. Explore & empathize First, I studied different digital products focused on sustainability in order to get a sense of what people have access to now, what works well, and find gaps in the market.
Then I completed user research, including interviews and user personas and journey maps. |
|
|
2. Design Next, I sketched out multiple options for key screens and chose which features were most important to include.
Then came designing the site map and digital wireframes, followed by a low fidelity prototype. |
|
|
3. Test & iterate Next, I conducted usability testing of the prototype. Using this data, I completed another iteration of the design, creating a high-fidelity prototype, followed by more usability testing. |
|
|
4. Refine After conducting usability testing on the high-fidelity prototype, I refined the design, improving efficiency and accessibility.
|
|
|
5.
Reflect At the end of every process, it is important to look back on the project, take stock of what I've learned & determine next steps.
|
|
|
1.EXPLORE & EMPATHIZE |
Competitor Analysis
To start any project, I conduct research to get a sense for the product space.
|
Key insights from competitor analysis:
|
|
Interviews &
Empathy Mapping |
Next, I conducted a series of interviews to gather more data.
I asked participants questions related to how much they think about their carbon footprint, what they currently think of when they think of being sustainable, and what level of effort they would be willing to devote to reducing their impact. Next, I organized the interview data by empathy mapping, which I then used to create the user personas. |
|
User Personas
|
After conducting the competitive audit, interviews, and empathy mapping, I created user personas which represent some of the target users of CarbonIQ.
|
|
User Journey Mapping
|
Next, I used an empathetic approach to develop a thorough user journey map. This map shows how Kyla is currently living her life and the opportunities for improvement in terms of meeting her goal to live a more sustainable life.
|
|
|
|
Features & Functionalities
After conducting research, the key features and functionalities that I determined would be most important to include to ensure that the website is user-friendly and engaging were:
|
Ideation
|
I started the ideation phase with a 'How Might We' exercise. This exercise supported rapid ideation focused on possible solutions for the current needs in the market.
|
Next, I rapidly ideated different ideas for the homepage.
|
|
Next, I sketched out different layouts for the main pages with a bit more detail, starring the features that I wanted to keep for the digital wireframes. Here, you can see different possible layouts for the homepage. |
|
|
|
|
|
Then, I sketched new wireframes with key elements from the different layouts for each major screen such as the homepage shown below. I did this for three main device sizes in order to create a design that is responsive for different devices.
|
As you can see, for smaller screen sizes like tablets & mobile devices, I made changes like a hamburger menu for navigation to save space, whereas for larger screen sizes, a traditional menu where users can see the different pages without an extra click is used.
|
|
Further, on the larger screens, different features such as the friend feed will be laid out next to other content. Whereas on a smaller screen, this will be moved below the other features rather than side by side.
|
|
Site Map
|
Next, I developed a site map to determine how the site would organize information into different pages.
|
Low-Fidelity Wireframes
After sketching out paper wireframes, I moved the design to Adobe XD, creating more detailed wireframes for both mobile & web screen sizes.
|
|
Prototyping
After creating the low-fidelity wireframes, I created a working prototype in Adobe XD. This prototype allowed me to complete the next step, usability testing.
|
|
Usability Testing
Key insights from usability testing:
|
1. Users appreciate the dashboard view, but would like more visual representations of their carbon footprint to help them better understand the numbers.
2. Users want to download this product as an application on their mobile devices so that they can easily access it on the go. 3. Users want a news feed section where they can scroll and get caught up on news related to sustainability. |
A/B Testing
Throughout the design process, I conducted informal A/B testing, asking peers which design they preferred. After getting feedback from an acceptable sample size, I would make the final determination.
For example, when determining how to represent the actions, I conducted A/B testing around using icons vs. photos.
For example, when determining how to represent the actions, I conducted A/B testing around using icons vs. photos.
|
|
A/B Testing informed my decision to use images for each action rather than icons.
After continuing to refine the design, the habits & actions components eventually came to have rounded corners, larger font, and shorter width, as you can see below.
|
|
High-fidelity Mock Ups
|
After creating the low-fidelity wireframes and prototype, and conducting first round usability testing, I created high-fidelity mock ups. Some of the key screens such as the landing page, sign up screen, and carbon footprint calculator are shown below.
|
|
|
High-Fidelity Prototyping
After turning the low-fidelity wireframes into high-fidelity designs, I connected the high fidelity screens to create a working high-fidelity prototype, allowing the simulation of completing the sign up process, completing the carbon footprint calculator, and viewing results.
|
|
|
Next Steps
1. Continue to accommodate Responsive Web Design in High Fidelity designs by designing all screens for both tablet and mobile.
- Responsive web design: designing for different screen sizes to create a better user experience for users on different devices.
2. Continue to build out functionality of high-fidelity prototype.
3. Conduct more usability testing on both web and mobile designs.
4. Update the design based on insights found in usability tests.
5. Build the website & mobile application and gain users.
6. Continue to refine and improve the design based on user insights.
- Greater functionality will allow the user to better understand their footprint and their actions, help them build better habits, and feel a sense of pride and joy watching their footprint decrease over time.
- Examples of functionality to add:
- Calculator function: allow users to easily get an estimate for the carbon footprint of any action.
- QR scan function: allow users to scan products to see the carbon footprint of that product.
- Connect to bank account / credit card: allow users to see how their shopping habits impact their footprint.
- Examples of functionality to add:
3. Conduct more usability testing on both web and mobile designs.
- Allows me to find user pain points before bringing the product to market.
4. Update the design based on insights found in usability tests.
- Improve the design in order to for it to be extremely user-friendly before entering the market.
5. Build the website & mobile application and gain users.
- Once the design is refined and ready to hit the market, I will work with developers to make this design concept a reality.
6. Continue to refine and improve the design based on user insights.
- Design is a never-ending process. Once the product hits the market, the design process continues to cycle: I will continue taking feedback, looking at pain points, and making improvements.