Responsive dropdown menu - Bedimcode

Confirm Action

Context

Eco Centre SW is a Somerset-based Charitable Comminity Benefit Society. They are currently working on 'E-SAVE' - a web application focussed on helping people to both save money and cut their carbon emissions by guiding them towards environmentally friendly money saving practices. I ran UXR Surveys on behalf of E-Save and used the results to present potential feature changes. Below, you can read the presentation for suggested changes to the "Confirm Action" feature.

Details

Scope

Volunteer work

Improving design for prototype web-app

Role

Research

UX & UI design

Tools

Figma

Figjam

Adobe Acrobat

Impact

The suggested feature change was received well, but is yet to be completed, as Eco Centre SW are still looking for skilled backend and frontend code volunteers to help with E-SAVE. If you think this is a role that you could fill, please visit their Reach Volunteering page, or message them via LinkedIn or their website.

Info Gathering: User Survey

User Comments

I conducted an in-person observation session with 6 users individually. Users were asked to perform a series of short tasks within the web-app and explain what they were doing and feeling out loud to me. Users were then given a short, paper survey to fill out about the tasks they performed.
  • "I feel like it's better to put all this info at the start rather than after I've done it."

  • "That's a really small amount of text for an (information) popup"

  • "Why doesn't it give me the full information before I make the saving?"

  • "This feels like it's for people who already know what they need to do to be eco friendly, but I'm a complete beginner"

Problems to Solve

Upfront Cost & Savings

Although at first glance this looks like a useful collection of info, surveyed users did not feel like we were providing enough and some questioned it's relevance. We should aim to make this section stand out more, and make it feel like a "quick breakdown" of the action.

Red Info Button

This button was ignored by most surveyed users and those that did press it didn't feel that the information provided was extensive enough to warrant hiding it behind another button press.

Save Every Year

The wording of "Save every year" implied that the user is making the decision to add this action to their savings right there on the preview page. Surveyed users expressed anxiety around this. One user asked: "Why doesn't it give me the full information before I make the saving?" We may require 'softer' wording here.

Overview

Overall, when we look at these problems together, we can determine that we must try to provide the user with more relevant information about the action upfront without overwhelming them.

More to Show

What can we learn from our "Confirm Your Savings" screen?

Professional - call in the experts

Based on the comment "This feels like it's for people who already know what they need to do to be eco-friendly, but I'm a total beginner": It would be useful to display this information upfront on the preview card.

Installing cavity wall insulation...

We can also include a preview of this information upfront rather than hide it in another popup box.

Images

One comment stated:

  • "I want a picture of the dark cookware I'm meant to be buying"

It may helpful to our users to include a related image as part of the preview.

Potential New Card Design

Example Cards from Existing Actions

Changes

  1. Upfront cost has been highlighted in pale green to better stand out to the user
  2. Rather than hiding the info/blurb behind a button, we condense it and display it to the user directly
  3. Star rating pulled from the "Confirm Your Savings" page
  4. Primary CTA text changed from "Save Every Year" to "Find Out More" to lower the perceived level of commitment and to give some flexibility for actions that occur more often than annually
  5. Images added to illustrate what these actions could look like. Royalty-free images were used in this case, but we could take our own photos for simple tasks and contact local companies for photographs of more complicated tasks

Rating Frames

A Closer Look At The Component

  1. Rating copy based on existing rating copy, just slightly shortened to allow for easier display.
  2. Changed ranking icon from wrenches to stars. Some users were mistaking the wrench emojis for bones at a small size.
  3. Colour-coding added to indicate difficulty at a glance.
  4. Five-star rating changed to professionals only. The vast majority of users will need to call in help and spend a fair amount of money to accomplish these tasks. This is not to gatekeep these tasks, but to prevent potentially unsafe DIY decisions.

Taking It Further

Applying our findings to the "Confirm Your Savings" screen

Relevant User Comments

  • "Oh I didn't know these were links (about Learn More / Read More / View Tips)"

  • "(User lingered over the 'Back' button before clicking confirm)"

  • "It needs like a 'did you know?' style section or something like 'here's some resources to get you started'"

Suggested Changes

  1. We received several comments asking for a "did you know?" style call to action. We also had requests for "resources to get started". This may indicate that we need to improve the visibility of this section.
  2. We also had some comments about the clarity of links. Many users did not click on anything in the 'More Info' section, and those that did were surprised by new pages opening up. This may indicate that we need to improve our clarity here.
  3. Some users lingered over the 'Confirm' and 'Back' buttons for a while. Expectations and best practices indicate that primary actions (confirm) should be right-most and more brightly coloured than secondary actions (back).

New "Confirm Your Savings"

A desktop redesign based on the comments and feedback provided.

Mobile Redesign