Designing an Easier Way to Be Eco-Friendly

A deep dive into the UX design process, from unwieldy problem to seamless solution.

When I tell people I’m embarking on a dramatic career change, from medical doctor to user experience (UX) designer, the initial reaction is surprise and confusion. Then, as I explain the current conditions and limitations of working as a junior doctor in the UK, it slowly starts to make sense. For me, the most frustrating part of the job is the poorly functioning systems, both digital and logistical, that exist in the National Health Service (NHS).

That’s why in March 2018, I enrolled in the User Experience Design Immersive course at General Assembly London: to do my part in improving those systems and advocate for “front-line” staff — the “users,” so to speak, in the future direction of health technology.

In our first project, we were tasked with designing an eCommerce website for an imaginary bookshop. We learned about the Double Diamond — a visual map of the design process — while also receiving lectures about UX design tactics, which we applied immediately. It was probably the most intense assignment of the course because the subject matter was so new and unfamiliar. I felt more settled as Project 2 rolled in.

Unlike Project 1, the second task was open in its foundation: Talk to a classmate about their real-life problems and create a mobile app-based solution. It encouraged us to think big and have fun but also taught us how to narrow down to a realistic project scope for a three-week sprint.

I took my learnings from the Double Diamond into Project 2 to help guide and structure it into four phases: Discover, Define, Develop, and Deliver. Here’s how I worked through the UX process to design a way for eco-conscious individuals to measure their environmental impact.

Discover

I started by asking my classmate Adrian to share problems or issues in his everyday life. One that surfaced was his frustration in managing the environmental impact of his lifestyle. He cares deeply about the environment and actively takes steps to reduce his personal impact, but he finds it difficult to keep track of this and would like to make more effective lifestyle changes.

I then performed user interviews, a tactic for learning about current or potential users’ behavior. I asked Adrian and four other students detailed questions about their attitude and thoughts about environmental issues. I was particularly interested in finding out why they felt environmental issues were important, how they had changed their lifestyles accordingly, and what sort of limitations they had encountered in making further changes.

Define

Next, I compiled their answers into an affinity map, a UX design tool used to organize research into trends, themes, and areas of opportunity for improvement.

My user interview affinity map.

Here are the key insights I gleaned from the affinity map:

1. Users view lifestyle changes that reduce their environmental impact as a responsibility and duty; as reducing guilt, not as a source of pride or reward.
2. A preoccupation among them is consumer/throwaway society, especially related to packaging and in particular plastics.
3. The true impact of our actions is hidden away and disconnected from our everyday lives.
4. Convenience and lack of guidance stop people from making further positive steps.
5. There’s both a feeling of powerlessness and reliance on other people and the government that are slow to change.

I found these insights fascinating. They resonated with me personally, especially the last statement. One of my interviewees described it as feeling like “a drop in the ocean.”

I felt that, in the battle to encourage the population at large to make positive changes, this feeling of being a small cog in a big machine, of our individual actions being only a tiny part of a huge problem, is a major — if not the primary — hurdle. I therefore decided to focus mainly on this problem and weave the other insights into the solution if possible.

Develop

After I zeroed in on a problem (the “drop in the ocean” attitude to environmental issues), the next step was to ideate on potential solutions. To prepare for and maximize the effectiveness of a brainstorming session (aka, design studio), I first created a typical scenario and experience map, also known as a customer journey map, to give more context to the issue at hand, identify pain points in the user’s journey, and illustrate a user’s processes, needs, and feelings throughout their experience.

From this I developed related “How might we?” questions. This is a design technique that reframes a problem into a question, thereby turning it into an opportunity for ideation. Selecting the most promising “How might we?” question is tricky, so it’s useful to think up a number of alternatives first. (I used this resource to explore different angles.)

The Scenario

Adrian is a busy young professional who cares about the environment. Today, he is looking to buy a quick lunch — the nearest food outlet is a Tesco grocery store. He knows that Tesco is not the most environmentally friendly shop and uses lots of plastic packaging. However, he doesn’t feel motivated to go elsewhere because he feels his actions are a drop in the ocean and sees other people in his office buying food with plastic packaging. He therefore goes to Tesco and buys lunch, then struggles to recycle the packaging and feels guilty about it.

The pre-app experience map I created based on my user research.

Amp up the good: How might we make Adrian feel like his changes are significant? How might we make Adrian feel more motivated?

Remove the bad: How might we make Adrian feel like other people are also making changes? How might we allow Adrian to see other people who have chosen to go to other food shops? How might we make it easier for Adrian to recycle plastic?

Explore the opposite: How might we make accessing environmentally friendly shops more convenient?

Question an assumption: How might we remove the choice entirely so that all food shops are environmentally friendly?

Go after adjectives: How might we free up Adrian’s time so he can go to another food shop?

Identify unexpected resources: How might we make the office a source of environmentally friendly choices?

Create an analogy from need or context: How might we build a community surrounding environmentally friendly choices?

Change the status quo: How might we make lunch into an experience that values the environment?

I took the question, “How might we make Adrian feel like other people are also making changes?” and developed it further. Essentially I wanted to flip the premise that other people/the community around him were the DE-motivating factor and turn it into a motivating factor. The final “How might we?” question is therefore the following:

How might we motivate Adrian to make positive changes by showing him that others are trying to live in a more environmentally friendly way?

In a design studio brainstorming exercise with Adrian, we discussed various ideas. We eventually settled on the following solution:

An app in which Adrian and his local community can share “green” goals and tips and track his and others’ progress in their goals.

I was pleased with this solution because I felt it addressed our “How might we?” question reasonably well and attempted to tackle the original problem of feeling powerless about other people’s choices. Hopefully, it would make people feel that, although they are a drop in the ocean, at least that ocean is a welcoming and positive one!

A few months ago, I read the book Influence: The Psychology of Persuasion by Robert Cialdini, which I highly recommend.

The app uses two important principles outlined in the book. First is consistency: Making a commitment public (e.g., telling all your friends about your New Year’s resolution) greatly increases the likelihood of sticking to it and is a powerful motivator for behavior. The app, similarly, allows a public pledge of a behavior change.

The second concept is social proof: We use information about how others have behaved to help us determine how to act ourselves, and this is particularly effective if there is uncertainty. The app allows the user to see that others are making positive changes and in so doing encourages the user to do the same.

Deliver

How would this app improve the user journey and change the outcome of the scenario above? I constructed an outcome statement and new experience map to demonstrate the intended benefits of the app. These helped to provide an end goal and continued focus for the rest of the Deliver phase.

Outcome statements simplify and structure the scenario into the situation, problem, solution, and outcome. Here’s what I came up with:

Situation: Adrian is a busy young professional who cares about the environment. He has a nagging feeling of guilt that he isn’t doing enough, but he’s not quite sure which next steps to take.

Problem: Today he is looking to buy a quick lunch — the nearest food outlet is Tesco, but he knows there’s a food shop a bit farther away that doesn’t use as much plastic packaging. He feels demotivated because he thinks his actions are a drop in the ocean and he sees other people in his office buying food with plastic packaging.

Solution: He uses an app where he and the local community can share goals, next steps, and ideas. He can track how he is doing with those goals, as well as how other users/the community is doing in meeting theirs.

Outcome: He chooses to put up a goal of avoiding plastic packaging at lunch. He also sees other people trying to cut down on plastic packaging and takes on board some of their tips and ideas. Over a few months, he sees that he has saved a significant amount of plastic. He feels less guilty, less frustrated, and more motivated as a result.

The post-app experience map I created based on the idealized outcome.

As is evident from the new experience map, the app is really tackling the feeling of long-term guilt that arises after going to Tesco and throwing away the packaging.

After creating the outcome statement and new experience map, I drafted the user flow and wire flow, which serve to outline the steps a user will take through the app.

Following that, I created a paper prototype, a basic version of the app for the purpose of obtaining user feedback and making improvements as quickly as possible. Compared to the alternative of making a “perfect” digital version of the app or even coding it straight away, the UX design process of iterating over multiple basic prototypes means it’s much quicker and easier to correct mistakes and adapt to strategic changes, ultimately resulting in a better product or service.

Using this paper prototype, I performed user testing on four users. Ideally I would have aimed for more, but I was limited by time constraints. The task I gave them was to add a new goal of reducing their plastic consumption using the home screen as the starting point; they were also given an opportunity to comment generally on any part of the prototype. I collated all of the feedback and observations of how they performed the task onto a “rainbow” spreadsheet:

My Usability testing tracker (rainbow spreadsheet)

The spreadsheet helped to identify patterns in the testing results, and I revised the prototype according to them. For example, multiple users did not instinctively understand the images in the navigation bar, so I added labels. I also changed the name of “ideas” to “tips,” removed the “update” button and replaced it with a progress bar, removed the “add location” button, and clarified and streamlined the home and “thank you” screens.

Amid these minor alterations, I also made a major change in response to user feedback: I added “premade” goals and steps. Despite it increasing the number of screens the user has to go through, this addition gave them a clearer route to achieving a goal, thus addressing another key problem that emerged from the user interviews and affinity map: a lack of guidance preventing people from making further positive steps.

I then tested the digital prototype on another set of users from the GA student community and summarized my findings in another rainbow spreadsheet.

The next round of testing led to another major change, this time in the underlying concept of the app. During the testing, I found that there was confusion about how the app’s various functions (e.g., goals, community stats, tips) integrated into a whole unit. I had a small eureka moment when I realized that the entire app would feel more consistent and integrated if users “joined” into community goals rather than adding personal ones. The stats and tips could therefore be related to specific community goals. The idea of “joining” goals tied in well with the concept of community, which was central to the app.

Brainstorming Brand and Visuals

To develop the app’s brand and visual style, I starting by brainstorming with a classmate to come up with words we would instinctively associate with its concept:

• Community
• Supportive
• Sharing
• Commitment
• Reflection
• Inspirational
• Practical

The last two words represented an essential dichotomy: The app needed to be practical, organized, and easy to use, but on another level able to inspire its users to aim for and reach new goals.

Using those words I created two mood boards — visual inspiration that captures a particular style or concept. I made them from images gleaned from Pinterest and Google.

Mood board 1 (left): organized, practical, calm, cold; mood board 2 (right): community, supportive, diverse, warm.

I decided to incorporate elements of both of them into the visual design of the app.

To develop a name for the app, I again brainstormed with my main user, Adrian. We came up with “The Green Community” and “The Ecommunity.” I liked both but felt they were too long — the latter was clever but difficult to read and pronounce. I decided to shorten “ecommunity” to “e.co” and ran with that.

The tagline: Take steps toward a greener life together with your community.

Below, you can see the various versions of three pages of the app, from the paper prototype on the left, to the final high-fidelity prototype (created digitally with the design and prototyping platforms Sketch and InVision) on the right.

The homepage improved over time, first through the use of clear “cards” — content divided into digestible, visual chunks — and infographics that are more consistent with the overall look of the page, as well as through removing the unnecessary white bar at the bottom of each card.

I improved the goals page by enlarging the buttons, adding a “tracker” banner, and using the full width of the page for the progress bar. The call-to-action button, “Join New”, got bigger — the color also changed so that it stood out more.

The steps/confirmation page improved through better color and visual consistency as compared to other pages.

For the style guide — the visual template for font and layout settings — I chose a variety of shades of green for consistency with the eco/green concept. I also used two bright accent colors. The “snakeskin” pattern of the splash screen, which appears when the app is launching, was not originally meant to look like snakeskin — it was initially intended to represent leaves or faces evoking a repeating “community-esque” pattern. It worked well as a very subtle background on the homepage, so I kept it anyway. For the font, I chose Avenir because it was clean, simple, and modern.

Here is the high-fidelity prototype — the interactive end-result:

Click here to view the project `e.co`

Next Steps

For my next steps, there are various stages of research I’d like to explore further: competitor research (e.g., Joulebug, a similar eco goal-sharing app with an emphasis on gamifying the process rather than the community), information architecture research (sorting goals into the appropriate high-level categories), and accessibility (especially as the very “green” visual design of the app might lend itself to poor readability for colorblind users).

I would also like to make the user flows and screens for the “stats” and “tips” sections, as well as the signup process.

What I Learned:

• It’s possible to go from a seemingly huge, unwieldy problem (the environment!) to something that is manageable for a short design sprint if research is done to split it into its component parts.
• The quality of ideas that emerge from design studio and brainstorming sessions is not merely a product of how “creative” the individuals involved are — the groundwork needs to be laid by providing helpful context and a “How might we?” question of an appropriate scope.
• The iterative user testing process can accommodate major conceptual changes, even in a relatively short time frame.
• Working intensively on a project that is created from scratch is immensely fun and satisfying!

At General Assembly, learn how to create seamless user experiences by leveraging these key UX strategies and more. Skill up through our career-changing UX Design Immersive, part-time evening or weekend course, or short-form workshops and bootcamps at our global campuses, or get started for free with an Intro to UX livestream. For businesses, cultivate UX and visual design talent through upskilling or reskilling initiatives; grow your team by hiring new UX designers; or bring fresh perspectives to your organization through our UX partnership program.