Chattahoochee Riverkeeper App

“Keeping Watch Over Our Water Since 1994”

- Chattahoochee RiverKeeper (CRK)

CRK is an organization that works to advocate and protect the Chattahoochee River through water monitoring, education, and volunteering events. Our team was tasked to create a mobile application to promote their mission of protecting the water and help river-goers to navigate and enjoy the river.

Meet the Team

Caterine Maum
Jordan Brown
Charson Jun

Deliverable

Hi-fidelity Interactive Prototype

Timeframe

2 weeks

Tool

Adobe XD

My Role

User Research
Research Synthesis
Comparative Analysis
User Flows
Wireframes (lo-fi & mid-fi)
Prototype
Usability Test
Project Management

Process

We approached this task by establishing a project plan based on the Double Diamond Process Model. We used the first week for research and analysis and spent the second half on ideation and wireframing.

I used my project management and organization skills from my previous role to create an active list of backlog items and prioritize them based on objectives throughout the process.

By the end of all this, we presented our design process and high fidelity mockup to our fellow comrades in the UX program at General Assembly.

DISCOVERY

Getting to Know the Users' Needs

To ensure that we start off in the right direction, we spent an afternoon generating our interview questions to understand users’ behavior and attitude of:

The River
Phone Usage
Sustainability

We wanted to interview as many users as possible in a given time frame, so each of us recruited participants to interview separately.

A Day of Connecting the Dots

We proceed to compile the data from the 7 participants that we collectively interviewed and used affinity mapping to discover common focuses for the user.

What are the users saying?

“I get mad when i see trash because people aren’t being responsible.”

"Water quality is important to me. I don’t want to get sick.”

“I don’t know where to launch and land.”

With the users’ needs and CRK in mind, we establish our problem and solution statement to guide us throughout our design process.

Problem

Nature enthusiasts need to access information about the Hootch and environmental ethics to ensure a fun and safe experience.

  • a way to avoid overcrowded areas and to find the best location that fits their needs
  • access information about current weather/water conditions and the equipment needed to successfully navigate the river.
  • social motivation to volunteer as well as knowledge about volunteering activities.

Solution

By creating an app that provides useful tools, encourages environmentally responsible practices, increase awareness about social events and volunteering opportunities, the app will promote the sustainability and enjoyment of the Hootch.

DEFINE

At this stage, we are all extremely excited about coming up with creative solutions for the app. We found ourselves exhibiting early symptoms of Featuritis...

Because I was delegated to keep the project moving along, I help the team refocus by asking: “Can our research support this feature?”.

I listed out all the features we came up with so we evaluated the list, as a team, and prioritize the features that meet the needs of the users while promoting CRK’s mission.

Key Features

Accessible Interface
Trip Planning w/ Suggested Routes
Live/Downloadable Maps

Water/Weather Conditions
Volunteering/Social Events
Reporting Hazard/Contact Rangers

What Others Are Doing?

We conducted a comparative analysis on other outdoor sites and apps to understand common structure and the functionalities. Additionally, we reviewed Waze to learn more about how maps and user-generated reporting are structured as navigation is one of our key features.

Going With the Flow

Because I’m a sucker for processes, I mapped out the user flows for the CRK app. The user flows guided the team in determining the frames to create. We sketched out all of the frames but, due to the time constraint, we focused on the user flows in the dash section for the wireframes and mockups.

DESIGN

A Day of Design Studio

We selected the user flows that we would design for and brainstormed with Design Studio. During this process, we kept accessibility in the forefront of our minds as our users would most likely be using the app near water in a plastic waterproof case.

Sketches to Wires

Once we all agreed on a design, we transformed the sketches to a digital wireframe using Adobe XD. Then, I prototyped our wireframe with the user flows in mind.

How Users Would Plan a Trip

LET'S TEST

During our first round of usability testing, we realized that our task scenarios were too specific, and thus, unintentionally leading the users through the process. To gather more accurate data, we avoided phrases that were used in the app in our task scenarios.

What We Learned

Users didn’t know what to do at the end of “Route Page”. They mentioned that they didn’t want to press “Start My Route”, because they haven’t reached their launch point yet.

“Save for Later” made it explicit that users can save the route and access it once they get to the launch site.

We failed to consider that users would typically plan their trip beforehand.

“End Route Confirmation Popup” was too long and out of place.

We realized that users are unlikely to sign up at this phase of their trip because their main priority is to land and exit. (duh!)

The Last Stretch: Divide and Conquer!

While Catherine and I are updating the wireframes based on our user feedback, Jordan created the mockup for our main user flow of planning a trip using the updated wireframes.

SUMMARY

Next Steps

  • More user testing on the hi-fi prototype
  • Build out the hi-fi prototype for other user flows
  • Add ability for user-generated content to connect the community
  • Gamification to encourage reporting
  • Allow customizable routes on the map view
  • Create an icon for phone screens

Takeaways

Working with a design team was a highly rewarding and eye-opening experience. As we all came from different backgrounds, each member of the team brought in their own unique perspectives and strengths. Of course, there were also challenging aspect that comes with teamwork. We had moments when we were not on the same page due to miscommunication, but we were able to work through it together.

On a personal note, I realized that my previous experience with project management and organization was extremely valuable in a team setting. It allowed me to see the big picture and keep a team of eager UX designer organized and on track.