Overview
UX/UI Design, UX Research
The Client
Save the Bay is the largest non-profit organization in the Bay Area. For over 50 years, Save the Bay has committed its mission to preserve, restore, and protect the natural habitat that thrives in the bay. As climate change and pollution threaten the bay more each year, this organization has rooted its cause in leading initiatives that protect the bay for future generations to come.
Client Goals
Create their first-ever Trail Challenge for their supporters and users.
Redesign their Bay Day website to reflect the 2020 Trail Challenge.
Ensure their website is mobile responsive for their users.
The Challenge
Designing a Trail Challenge on their existing BayDay.org website to promote throughout Bay Day.
Creating mobile responsive designs that mimic a native app for users to access while hiking out on the trails.
Discovering the appropriate approach to defining and measuring success.
The Outcome
A newly designed BayDay.org website promoting Save the Bay’s Trail Challenge 2020.
Mobile responsive designs for the entire online experience, including registration, hiking, and submission form.
23% increase in registration experience, 47% increase in hiking selection experience, 27% increase in overall experience.
Timeline
5 weeks
Team
Katelyn Johnson (me)
Role
Lead UX Product Designer
Methods Used
Business Analysis
User Interviews
Task Analysis
User Flows
Affinity Mapping
Journey Maps
Persona & Scenario Development
Usability Testing
Metrics Analysis
Prototyping, Iteration
Constraints
Resources
As a non profit and prioritizing their mission to protecting the Bay from the harmful effects of climate change and pollution, resources to enhance their web experience is limited with time and money.
Technology
Save the Bay’s original goal was to create a native app for the Trail Challenge, but due to the lack of time and resources, they were confined to making the website mobile responsive for users to utilize while out on the trails.
Initial Research
Competitive Feature Inventory Analysis
I conducted a feature inventory analysis to compare and contrast competitors with one another and gain inspiration for routes I could take the BayDay Trail Challenge in terms of features, task flow, and more.
Conducting this feature inventory analysis put me in a strong position to build a framework for what BayDay’s Trail Challenge should look like in terms of the flow and available features.
One validating discovery I uncovered through this analysis is most competitors have integrated an app into their challenges for users to rely on during their hikes. This validated the decision to move forward with designing a mobile responsive design as the next best solution for Save the Bay until they have the resources to move forward building out a native app.
Competitive Task Analysis
I conducted a competitive task analysis, using Miro, to get a better understanding of how the users’ tasks are carried out with each trail challenge. My goal with this method was to find commonalities, as well as areas of friction that can be avoided when designing Save the Bay’s challenge.
This was a crucial step in the discovery process as it validated which task flows are useful, usable, and friendly for the user, while others create friction and frustration at a critical moment in the beginning of the experience.
Main Takeaways
All three competitors approached the registration differently, which allowed me to evaluate each option and decide which is best for Save the Bay. It’s clear that Competitor 3 had a required, incredibly lengthy process, asking for birthday, address, gender, etc. which created friction within the sign-up process for the user.
While Competitor 3 had the least user-friendly registration experience, they had the best user-friendly experience for browsing and selecting hikes. All information for each hike (photos, distance, map, etc.) was viewable within one page, where the user can scroll through the hikes seamlessly and have all the information readily viewable.
Other competitors only provided names of hikes as the first step, with clicking into each hike individually as the next step to see all relevant information. My assumption to avoid this approach was validated in my user interviews.
1:1 User Interviews
From conducting secondary research, I felt I had gained enough knowledge on the experience to build a framework, but I needed to validate my assumptions before beginning the design stages. I approached this by conducting remote 1:1 interviews with the goal of understanding the motivations, needs, and behaviors of individuals who enjoy hiking in the outdoors.
I used Miro to conduct Affinity Mapping, which pushed me forward in the process of identifying key commonalities and trends amongst the users and either confirming or debunking my assumptions.
This sparked the majority of my brainstorming and ideation phase of the design process. Talking to users directly and getting more detailed information on what motivates them to get outdoors reflected much more valuable information than the surveys.
Main Takeaways
100% are motivated to hike when there are views or a destination involved.
100% tend to enjoy the social aspect of hiking with friends and catching up.
80% mentioned the distance of hike is a huge factor when determining to hike.
60% mentioned wanting to know the type of hike before deciding whether or not to go.
Action Steps
High, quick visibility for hiking features when selecting hikes for Trail Challenge.
Promoting social media engagement, while practicing safe distancing due to Covid-19.
Identifying our Target User
Persona Development
With the completion and validation of research, I was able to develop a persona that encompasses Save the Bay’s target user for the Trail Challenge. This persona was a critical step in the process, as it served as the key framework in which all future design decisions were based off of.
Developing this persona allowed for alignment and consistency with all decisions moving forward and ensuring the target user was being placed at the forefront of all design decisions.
The Problem
Currently, Save the Bay does not have their website set up to execute a Trail Challenge and does not have research on users’ needs for this challenge.
Save the Bay needs a way of providing a Trail Challenge for their users, giving them the information they need to safely enjoy the outdoors and continue to support Save the Bay’s initiatives of protecting the San Francisco Bay.
The Solution
I believe by designing a flow for users on BayDay.org that allows them to easily participate, view hikes by region and difficulty level, browse through photos, and easily fill out a submission form to successfully complete the challenge, users will be left feeling motivated and fulfilled knowing they are continuing to support a valuable cause.
Measuring Success
I’ll know I’ve succeeded when I have designed a successful experience when users score an average of 80% or higher on the following criteria:
Registration
Hike selection
Submission form
Overall experience
NPS
Designing for the Casual Hiker
Designing a plethora of paper sketches to explore various layout opportunities.
I started with paper sketches to begin drafting up design solutions that were quick to iterate on and build multiple design solutions in a short amount of time. I wanted to get a breadth of ideas before committing to a digital design. A few of the selected designs looked like this:
Moving it Digital
Mid-Fi Designs
After building out lo-fi wireframes in Figma, I upped the fidelity to mid-fi so I had enough context moving forward with the first round of usability testing. I designed the entire experience to be on one page and added generous white space to increase minimalism as a user is scrolling through each section on the page.
Additionally, I wanted to test two versions of my design, to understand which hiking design was more accepted by the users during usability testing.
Version 1
Ability to scroll through all hikes and view each hike’s details within a single page. Filter feature for region and difficulty level.
Version 2
First instance is to view list of hikes by region and difficulty level. Click into each hike to view full details.
Usability Testing
Round 1
A moment that didn’t go as planned.
This was my most humbling round of usability testing to date. I conducted usability testing on my mid-fi prototype to gain a better understanding of users’ experiences with my design and understand if my assumptions were aligned with the user experience or not. I was surprised to discover there were a handful of issues the users had with the experience not related to the A/B hiking versions.
In hindsight, testing two versions shouldn’t have been on the very first round of testing the prototype. This decision validated that the first round of usability testing should be primarily focused on testing the functionality, navigation, etc. rather than separate versions.
Main Takeaways
100% of users tried clicking on How it Works icons (register, hike, submit) as they were expecting to be taken to a new page, not scroll.
Users expectations are to be brought to next page → anchor scrolling is unexpected → creates friction/confusion in orientation during experience.
57% of users were confused with the extended spacing → no affordance to signify to scroll further.
86% of users made a verbal comment expressing satisfaction with submission form → easy and intuitive.
Results
I had 100% of participants complete an anonymous post-usability test survey to rate their experience with the features mentioned earlier. The results are as follows:
Action Steps
Focus on optimizing overall flow and navigation before conducting A/B testing.
Switch design flows to mirror step-by-step task flow → create independent pages for each stage of the process.
Increase # of available hikes to choose from → greater selection and more accessible.
Switch from checkbox list to dropdown menu list due to increased # of options to select.
Reduce white space → signify to the user there’s more content on the page.
Round 2
Iterating based on user feedback and seeing positive results after second round of usability testing.
With an extensive round of iterations on the first version of the design, I conducted a second round of usability testing and found much more promising results.
Main Takeaways
80% or higher across all measurements of success.
User flow and navigation better received by the users → met expectations of being taken to a new page with the new step.
Users appreciated hiking selection layout → ability to see all information/content at once.
Form submission flow yielded better results with dropdown selection menu.
Upping the Fidelity
With successful results from the second round of usability tests, I began upping the fidelity with my designs to prepare the final product.
Final Product
Registering to Participate
Features
Autofill, newsletter sign-up, hover-state button
Hike Selection
Features
Filter, tags, map integration, pagination, photo carousel
Submission Form
Features
Autofill, dropdown menu, photo attachments
Mobile Responsive Design
Designing art boards that reflect BayDay.org’s website in mobile responsive designs.
Once I had the successfully iterated designs, I felt confident moving forward in the process of designing art boards that reflected the mobile responsive view. As the majority of this experience requires users to be outdoors and away from their desktop devices, it’s necessary for users to have a streamlined experience using this website both on the desktop as well as their phones. I began designing a mobile responsive solution for some of the main pages:
Confirmation Page
Home Page
Submission Form
Next Steps
Implement
Connect with developer to discuss implementation of designs once hi-fi wireframes are fleshed out and ready for Bay Day.
Design
Save the Bay discussed rebranding of logo and color scheme, so I would like to have a conversation with them regarding how we can move forward with a brand redesign.
I would like to continue optimizing the white space and layout, test it, and see if it yields even better results.
Research
After receiving valuable feedback from Usability Testing, I would like to conduct another round of surveys that are more intentional with this newfound knowledge. With this, I’d plan on gaining new user insight and continue to iterate on designs.
I’d also like to dive into the Trail Tracker feature and conduct research to understand users’ experiences with it. My assumption is that there’s friction within this current process, so I’d like to test my assumptions and either confirm or debunk them for an improved experience.
Mobile App
As time was Save the Bay’s largest enemy with the native app, it would be great to begin the discussion for designing a mobile app for the 2021 Trail Challenge. Considerations: gamifying the experience, track miles/elevation/etc. to attain personal goals and records.
Reflection
This design project surprised me in many ways along the journey and led me down roads I hadn’t expected. I learned incredibly valuable lessons that I wouldn’t have otherwise learned had I not done testing on users. This, again, validated how critical it is in the design process to interact with the users at every given opportunity, listen deeply, and design accordingly.
It’s a gratifying experience every time I work on a project to see how my designs are being improved and positively received by users as I iterate on designs according to their needs, motivations, and behaviors.
It’s incredibly humbling to see that my own personal biases and assumptions aren’t always in-line with how users perceive and interact with products. It reminds me that my opinion and voice is just one out of millions. Yet, combining them all together and finding commonalities that connect us through these shared experiences is what keeps pushing me forward to improve designs for all.
Project completed July, 2020.