Whale watch
CASE STUDY: Responsive App
To learn more about Adobe XD and how to approach responsive web design, I designed and built an app with screen adaptations for desktop and tablet use. Beginning with a generated prompt, this app is a tool to monitor, track and record whale sightings for both recreational and commercial use.
As a solo project, I was responsible for all roles from competitive audits to high-fidelity prototyping. This included conducting research interviews, competitive audits, paper and digital wireframing, low and high-fidelity prototypes, usability studies and iterating on designs.
Project Goal
Many coastal recreational boaters enjoy spotting whales, however both recreational and commercial traffic pose a danger to whales. This app allows users to collectively record whale sightings, as well as view previous sightings from other users.
This project aims to create a tool that will help naturalists collect data about whale behavior while also providing commercial boaters up-to-date sighting information that may help avoid whale strikes.
Target Audience & User Research
As this project was a prompt and not a real-world app build, my initial user research was done in the way of competitive audits. I compared three whale conservation organizations with both web and mobile apps. This offered me insight into what sort of data is important to users in this market, as well as what sort of mapping and recording features currently exist.
I discovered the app should also appeal to commercial boaters in addition to conservationists, so I also audited one of the more ubiquitous marine navigation products available (Navonics). Both recreational and commercial boaters use this ubiquitous technology, thus I wanted to leverage some of the existing marine UI design systems that are already already familiar to many users.
Key Takeaways
Real Time
The most crucial info to marine traffic is the most recent. Ability to get up-to-date whale sighting info is key.
Ease of Use
Because most users will be on the water and moving when using the app, simplified menu navigation will be important.
Responsive Gap
None of the competitors audited had responsive app to web experiences. This leaves a gap in the market for a unified user experience.
User Research: Persona Mapping
Persona: Kiyoko
Kiyoko represents the recreational and scientific user base for the app. This user is tech savvy, and is likely to actively seek and collect whale sightings in coastal areas.
Persona: Dane
Dane's persona represents a commercial user of the app. While this user is interested in whale conservation, their main concern is to use the app passivly to avoid dangerous collisions with whales.
My target audience research led me to understand that my app should cover two very different types of users. Conservation and commercial interests are often in competition with one another, but there is a great opportunity for addressing the overlap of these two types of marine enthusiasts.
Initial Design
Paper wireframes
Since the predominant app format will be mobile app, paper prototypes were first drawn to test visual arrangements of required functions of each feature.
Crazy Eights
Additional screens for desktop and tablet use were created. In this example, the “Crazy Eights” exercise was used to ideate how other screens might look.
Digital wireframes
For this project, I used Adobe XD to build the wireframes and prototypes. Adapting the best features of the paper wireframes, I first built the main chart view then based other designs from that template
Once the wireframes for the mobile app, I built connections for the lo-fi prototype. With the lo-fi prototype finished, I could then initiate user testing and incorporate my insights into the desktop and tablet wireframes.
Drop menu adapted as floating control
USABILITY STUDIES
One round of in-person usability studies were conducted. Users were asked to complete three tasks while being observed in-person.
The subsequent affinity diagram showed most pain-points were navigation related. A list of actionable items was produced, and the lo-fi prototype was refined before moving forward.
After visually organizing the user feedback in each round of usability studies, I synthesized that data into actionable insights. The feedback offered insight into navigation bias in the design I was previously unaware of, such as only making thumbnails (not text) active buttons. This process offered me direction and priority as to what changes should be iterated in the design before moving ahead to the high-fidelity prototype.
Real Time
Directional navigation in survey section should be clarified
Ease of Use
Icons should be added to help identify button functions
Responsive Gap
Button functions should be constant across user flows
High fidelity Prototype
Navigation was simplified in the survey area based on feedback on the lo-fi prototype. Icons for button functions were created, as well as text labels for each button function
A bright, high-contrast color scheme with a nautical feel was established. Buttons were formatted to have consistent dimensions and active state identification.
Impact:
As an app that is uncomplicated and easy to use, Whale Watch has the potential to make a positive environmental impact by reducing catastrophic whale strikes and facilitating awareness of whale migration patterns.
What I learned:
This project taught me to empathize with a user community that I am not directly involved with. By researching the user’s needs, I was able to ideate potential solutions to real-world problems.