Rake & Hose
About
Rake & Hose is a gardening app and website that allows citizens to volunteer at local gardens.
My Process
I conducted interviews and usability studies, created a sitemap, paper and digital wireframes, low and high-fidelity prototypes, accounted for accessibility, and iterated on designs.
The Problem
Figuring out how to sign up online to volunteer at a local garden is confusing.
Users
Through research, I discovered that users wanted to volunteer but often found the process confusing, which dissuaded them from signing up to volunteer.
My Role
UX designer and Writer
Tools
Adobe XD
Typical User
Wireframes
Starting the design
To keep everything organized, I started with a sitemap. My goal was to make strategic information architecture decisions that would improve the overall website and help with clutter.
I created paper wireframes for a desktop, tablet, and smartphone.
Moving to digital wireframes, I prioritized the volunteer button and upcoming events so that the user could quickly find the elements they used the most.
While designing the mobile app, I needed a way to place information in a compact place. To solve this problem, I created a hamburger menu.
Prototypes
Bringing the product to life
To create the low-fidelity prototype version, I connected all of the screens involved in the primary user flow of registering to volunteer. I also implemented user feedback that addressed specific user pain points.
View Rake & Hose High-Fidelity Prototype
Mockups
Refining the design
The mockups brought the design to life.
Before usability study
After usability study
Desktop
Mobile
UX Writing
Helfpful navigation
I created UX copy to help guide users through the process of volunteering. The goal was to keep it concise, simple, and clear.
What I learned
I learned that simplicity works great for this demographic. Too much clutter on a page confuses the users and discourages them from using the website. Users said they appreciated the confirmation page, map function, and link to add the event to their calendar. Considering accessibility, I created a clear visual hierarchy, approved colors, and landmarks to help users navigate the site.