top of page
6380133f538c62356f6fe861_raingarden.png

Summary in 30 Seconds

In collaboration with Master Rain Gardener, a Washtenaw County initiative offering rain garden design tutorials, our team focused on enhancing their "RainScaping in Southeast Michigan" website. After learning from the client and users' insights, we conducted usability tests targeting two critical features: online form submission and interactive map use.

Problem

Users reported difficulties in submitting online forms and interacting with the project visualization map.

  • Lack of guidance in online form filling

  • Difficulty in returning homepage

  • Poor association between legends and project types

  • Limited motivation in exploring rain garden project

Solution

Identify current usability issues through usability tests and provide insightful redesign recommendations.

  • Add instructions and progress bar

  • Add a consistent"home" icon
  • Replace confusing legends with clearly defined icons
  • Add more features on each rain garden's profile

My Role

UX Researcher & Designer

My Team

Luis Guerrero, Woojin Kang, Miranda Kharsa, Ziying Liu, Ge Zeng

Timeline

Kick-off

"Can users navigate the website easily, or not, that is the question."

About the Website:

  • RainScaping in Southeast Michigan is a website celebrating and promoting rain garden projects by Michigan residents

  • Two features:

    • A form for residents to share their rain garden projects.

    • A real-time map displaying rain gardens.

  • Demographic: Mostly retired adults who have passion for gardening and environmental preservation​
homepage of the rainscaping in southwest michigan website

RainScaping in Southeast Michigan Web

Objectives

  • Measure users’ ease to input project information and navigate the map

  • Learn the motivation for users to complete the form

  • Identify and address specific usability challenges in either or both form and map interface

Protocol Design & Review

These Questions Need to be Answered

Can users complete the form without any confusion?

Are the map icons effective to help users find desired content? 

Can users easily navigate between form and the website homepage?

Do current features boost user engagement?

Final Protocol

Usability Test

Test Structure

Pre-test Questions (3-4min)

Learn users' rain garden journey and experience with the website 

Main Tasks (20min)

Tasks List

  • Submit a project

  • Find a rain garden in your neighborhood

  • Find a rain garden by image

  • Fina a rain barrel on the map (optional)
     

Post-test Questions (3-4min)

Learn the pros, cons, and expectations of the current features

Participants Demographic

  • 15 participants recruited from Washtenaw county

  • The average age is 55+

  • ALL participants reported they have some experiences with rain garden and the Master RAIN Gardener program

  • 13 tested on mobile, 2 on laptop

Affinity Wall

Photo Gallery

IMG_4784

Overview of the WALL

IMG_4781

My teammates in framed shot

IMG_4777

Me and other teammates in framed shot (I'm the one in white :p)

Final Presentation

Finding #1
Ambiguities in Form Requirements and Technical Queries

Insight #1.1: Unclear guidance

  • Several users did not know there is photo requirements

  • Technical questions in the form lacked explanation

Recommendation #1.1

  • Add brief explanations to the potentially confusing terms

  • Provide a checklist of the required information at the beginning of the form

Client's Adaptation

Client's Adaptation

Insight #1.2: Unclear status

  • Uncertainty regarding current position or progress within the multi-step form

Recommendation #1.2

  • Add a progress bar on top of each page of the form to notify users their current stage and overall progress

Finding #2
Challenges in navigating between various pages through buttons

Insight #2.1: Non-activated Banner Image

  • Most mobile users encountered difficulties in returning to the homepage after submitting the form

Insight #2.2: Confusing hamburger Menu

  • Users were not clear about the function of the current hamburger menu on top of the page 

Recommendation #2.1 & #2.2

  • Add a “Return to Homepage” button on the top corner of the successful submission and the map pages

Map Redesign Mockup

Client's Adaptation

Finding #3
Unclear Image-Map Linkage and Legend Clarity

Insight #3.1: Confusing Legends

  • The current legends did not align with their representations (e.g: heart icon = rain barrel)

Insight #3.2: No Highlighted Location

  • When users clicked an image from photo gallery, the corresponding location pin on the map was not highlighted 

Recommendation #3.1 & #3.2

  • Incorporate images into legend (e.g: barrel image = rain barrel)

  • Enlarge or change the color of the selected pin on the map

Client's adaptatin of the recommendation

Client's Adaptation

Finding #4
Map Functionality Confusion Reduces Engagement

Map Redesign Mockup

Insight #4.1: Promotion-driven Data Submission

  • The motivation to submit data was highly dependent on the personal connection with the client

Insight #4.2: Limited Map Information

  • Users wanted more interaction with other rain gardeners to learn from each other

Juicy Quotes:

  • “I want to know if I can see the rain garden when I walk by the neighborhood.”

  • “I’m a quiet person. I don’t talk people about my rain garden actively, but I’m happy to share my experience if they come ask me.”

Recommendation #4.1 & #4.2

  • Incorporate website information at the conclusion of the Master Rain Gardener course as a showcase opportunity

  • Introduce a "visibility" feature on individual rain garden profiles (need to incorporate a matching question in the online form)

Sequel

Client's feedback
bottom of page