Are you ready to buy a Tesla or install solar panels on your house? Probably not. If we are going to help our environment and be more sustainable, this is not the starting point. Sustainability is something that everyone can take part in and make an impact on their carbon footprint now.
Problem:
We all know that climate change and sustainability are hot topics you hear or see every day. There seems to be a disconnect of what we can do on an individual level to make an impact yearly, monthly or daily.
Goal:
Build an app that helps people be more conscious of their carbon footprint in their yearly, monthly and daily routines. Educate and inform users they can make a difference without drastic and expensive purchases. Encourage people to make simple daily choices that can reduce their carbon footprint.
Team:
The UX team consisted of myself, Emma and two IOS developers. We had three weeks to design and build an iOS app that would help our users reach this goal.
Process:
Time was limited, so working in an agile environment made it important for us as a team to be continually communicating about the project. Having the developers involved from the first meeting was a great way to start the project.
We outlined our three-week schedule and planned out our first week together as a team so that we all knew what each of us was going to be working on. We held weekly stand-ups to plan out the goals for the week. We also met at the end of each week to recap with the team what we accomplished. The developers knew that we were going to need environmental data so they looked into API’s the first week.
Emma and I knew that we couldn't speak for everyone. We didn’t have the answers to why people did or didn't make more sustainable choices every day.
Empathize:
Using Design Thinking, we needed to find out who we were designing for and get to know them. To find out what they do, say, think and feel about sustainability we came up with some assumptions. By doing this we hoped to gain empathy for our user.
- People don’t care
- It’s too hard
- It’s expensive
- It’s inconvenient
Using the assumptions we came up with questions to send out a survey. Our goal was to understand opinions about carbon footprints and sustainability. We sent the survey out via social media outlets.
We also wanted to interview people to better understand our users. This gave us the chance to hear what people were saying and get a better feel about what they were thinking.
I organized the data from the survey and interviews into an affinity map. This helped by showing a more complete picture of the data and common points to focus on improvement.
Interesting points from our surveys and interviews:
- People are positive and hopeful about sustainability
- There is a stigma of it being inconvenient and expensive
- Avoidance of “Tree hugger” image but wants to be conscious of the environment in their choices
- People are not willing to change their lifestyle
- They are willing to do things that are convenient but not aware of what those are
With the data, we gathered and filtered through the common points. This gave us a summary of our survey responses and interviews to create a persona of who we needed to focus on. Meet Becca.
Define:
We introduced ‘Becca’ to our developers so that we all understood who we were designing for. We had them take part in our process of creating a user story map. As a team, we talked about features that would help Becca reach her goals. Working as a team in the user story process was helpful in deciding on an MVP within the timeframe of the project. Through working together on the user story we established the app and its basic functions.
MVP features we decided on:
- A carbon footprint quiz
- Breakdown of quiz results
- List of actions that can be done now
- A weekly reminder list of actions that they committed to
- See the impact of each suggested action
- Track history of actions and impact
With the user story map established, I created a site map of the app. This showed us the relationships of the features and how the user flow would work between pages.
Ideate:
With a first draft of the site map established I sketched out all the different wireframe layouts that came to mind. I did this for all the pages that we decided on from the user story. This process quickly helped me get a bunch of ideas out on paper. I focused on the wireframes that I thought were most successful for ‘Becca’s’ needs. Emma and I went through our wireframes and combined our most successful wireframe layouts. We collaborated together and came up with our final rough wireframes.
Prototype:
Emma went into full research mode to track down data. I worked on converting our drawn wireframes into sketch. Once I had those done I put the low fidelity wireframes into InVision to create a working prototype. This was for two purposes:
- Handoff to the developers to show them the layout and user flow.
- To put in front of users to test and give us feedback.
We met with the developers to show and discuss the wireframes. They felt the features of the site all seemed possible to do within our time frame…*
*As long as we had data.
Emma crushed it getting together a list of actions that everyone can do now to reduce their carbon footprint. We divided these actions into categories; Home, Food, Transportation and Stuff. We went through each category, figuring out the carbon footprint data for each action. Super, super time intensive. Emma and I spent a ton of time throughout the process gathering data for the app.
Focusing on Becca we decided that the tone of the app would be friendly and encouraging. We decided to make the app visually interesting by including illustrations. This would keep the tone of the app fun and light. This tone would make the actions feel more obtainable. In turn, this would encourage Becca to keep her commitment to the actions.
Testing:
With a working wireframe prototype, I needed to put it in front of users to test and get feedback on. The user flows went well for the most part. There were a few pain points:
- The categorization of some actions they could take
- Clear instructions for each action
- Clarify adding and deleting tasks
- Clarify carbon footprint calculations for a week, month or year
I updated the wireframes with the testing feedback to address the pain points. I added text to the calculations to clarify the time frame that they represented. I realized that the mental model of sliding to delete tasks was not intuitive as our team had thought. I added in an edit button on the page and more testing proved these changes to be effective.
Testers were still confused with the categorization of our actions list. Card sorting would help flush this out. I tested open and closed card sorts to see how users categorized actions. I also put in the main features just to confirm our user journey through the app. This helped us realize that we could narrow it down to 3 categories in our score breakdown. We could drop the ‘stuff’ category and move those actions into the other categories.
Implement:
Emma created the illustrations used throughout the app. We worked on copy for the app to keep an encouraging and friendly tone throughout. I started building out the Hi-fi wireframes. We were hesitant but knew that we should use the stereotypical green in our color palette. We decided to pair it with some brighter colors to help take the focus off of the green. We choose Open Sans being a humanistic typeface and paired it with Century Schoolbook to help make it look more official.
Visual Design 1.0:
I put the hi-fi mockups in front of users and described to them the tone we were aiming for. Multiple testers said the colors made it feel heavy and burdensome. The font combination seemed too serious for the friendly tone that we were going for. With this feedback, we looked at our colors and typeface choices.
Visual Design 2.0:
We lightened the green, dropped the cream and brightened the other colors making the palette more playful. We changed the two typefaces out for Circular and used the different weights to achieve visual hierarchy. This typeface is a geometric sans serif that shows balance with a few quirks. This gives the type some warmth and fits with the tone that we are trying to set. I built out the main screens and we tested them again to check to make sure it matched the friendly and encouraging tone we were aiming for.
Final Designs:
We worked together updating the main hi-fi wireframes with our final color and typeface choices. Once we finalized our design layout, I built out the rest of the action pages with the final copy and illustrations. I took the hi-fi mockups and created a final prototype in InVision for the developers. We exported the icons and final designs of the app to hand off as well.
We were able to deliver our final files to the developers on schedule. Once we handed off the final files we were on development support while they finished building the app. During their process, we were able to catch missed interactions and clarify the flow of pages.
Conclusion:
A proverb says “A journey of a thousand miles begins with a single step.” This is true in the context of making an impact on the world’s sustainability. In the end, we can make a difference without drastic and expensive purchases. We helped Becca accomplish her goals and addressed her frustrations by giving her access to:
- Find out what her carbon footprint is
- See what category she is scoring high in
- See a list of actions she can start doing now
- Create a checklist with reminders to take those actions
- See her weekly, monthly and yearly CO2 impact
With these tools, Becca can learn what she can do and see the impact her choices are having on her carbon footprint now. The question is, does she have enough information to be Conscious of her daily sustainability choices?
Next step:
The final app addressed Becca’s goals and frustrations. Our real test is to get it into the hands of users and the people we gathered research from. These are the people who made up our persona and they would give us real results. We would need to find out, through using the app are these people able to answer what and how to make more sustainable choices daily?
Insights from the process…
- The developers were close but not close enough. They were within walking distance. But being able to easily see and ask questions about what we were each working on saves the team time.
- Talking about and showing functions and flows are both needed to effectively communicate with the team.
- Keeping the meetings lively and making sure you are working together as a team helps reduce the feeling of being overwhelmed and stressed. The result is continual productivity and collaboration.
- Working with developers on this project was a great experience of how to collaborate as a team in an agile workflow.
Let me know what you think about this project in the comments below!
