UX CASE STUDY
Anglercast
A mobile fishing weather and forecasting app that allows fishers to safely enjoy their fishing experience.
Role
Lead UX/UI Designer
Timeline
September 2020 –
April 2021
Tools Used
-
Pen & Paper
-
Adobe XD
-
Adobe Illustrator
-
Optimal Workshop
-
Usability Hub
-
Miro
-
Zoom
Final Screens
Anglercast Demo
The Problem
Confusing weather information could lead fishers to suffering a bad experience while out on the water.
All fishers want to enjoy doing what they love; fishing and catching fish. However, most fishing-specific weather sites do not display complex weather data in an accessible and easy-to-comprehend way, making it challenging to interpret and understand.
The Goal
Create an app that gives fishers of all levels a simple, quick way to check and understand both current and forecasted weather and fishing conditions of their desired fishing location, enabling safe and enjoyable fishing experiences.
The Process
BUSINESS REQUIREMENTS
Competitive, SWOT, UX Analyses
UNDERSTANDING THE USER
Surveys
A total of 22 individuals who fished were surveyed.
Surveys were first conducted before the interviews to help script better interview questions and to narrow the target audience.
77%
identify as male
83%
are ages 25-64
87%
fish at least a few times a year
Interviews
Based on the results of the surveys, more tailored interview questions were created.
Interviews were conducted with 4 individuals from the target demographic set with a variety of fishing expertise (beginner, intermediate, expert).
Interview Goals:
Understanding fishers’ behavior in checking weather forecasts and tech
Identifying the types of weather data fishers find useful
Their current experience with existing fishing weather sites and apps, including pain points and likes
Affinity Mapping
The data from both surveys and interviews were extracted. Each individual’s response was put onto a card. These were then grouped into categories to identify insights.
(Image below) Affinity Map. User research data organized by user. After grouping them into clusters, key insights were discovered.
Key Insights
Weather detail needs dependent on fisher skill levels.
Analyzing weather for fishing comes from experience or is taught.
Feel frustrated with weather data accuracy from existing apps.
Experienced fishers monitor weather data for calmer conditions.
Enjoy connecting with a fishing community to gain insights.
Want detailed amenity information on fishing locations.
Billy
Skilled Angler, Saltwater
Billy is older and seeks more
in-depth marine weather forecasts.
Joe
Hobby Fisher, Freshwater
Joe is middle-aged and is looking to create memorable fishing trips with his family.
Dani
Avid Novice Fisher
Dani is younger and likes to check general weather for fishing and connect with a fishing community.
User Journey Maps and User Flows
Creating user journey maps and user flows helped determine pain points and opportunities.
User journey maps and user flows were constructed for each persona to help visualize the steps they would take to accomplish a goal, empathize with their thoughts and feelings, and streamline their process. Having this context helped uncover actionable opportunities where Anglercast could help the user.
FOUNDATIONAL DESIGN
Information Architecture (IA)
Using data generated from both an open and closed card sort, a sitemap was constructed to organize the app.
An initial sitemap was created based on the data from key insights, user journey maps and user flows. An open and closed card sort were conducted using OptimalSort, with 7 and 9 participants respectively. After analyzing the data, refinements were made to the original sitemap.
Low-Fidelity Wireframes
Previous research findings helped guide the initial sketches of potential screen layouts.
Based on the user flow analyses and the creation of the sitemap, these findings helped determine the app content for each of the screens and how the screens should be linked. While keeping design patterns and usability heuristics in mind, multiple versions of the core features (weather details, location search, and setting custom weather alerts) and high-level navigation were sketched out. This helped solidify the best screen designs.
Mid-Fidelity Wireframes
After sketching out designs on paper, mid-fidelity wireframes and prototypes were created.
Once a clearer idea of how to design the screens emerged and using the paper sketches as a foundation, mid-fidelity wireframes and prototypes were created in Adobe XD. These versions included more details and interactivity to better communicate the form and function of the app.
High-Fidelity Prototype – Version 1
After selecting typography and designing a UI, high-fidelity wireframes and a clickable prototype were created.
Parts of the mid-fidelity wireframes used a smaller font size, which would have been difficult for legibility, especially for users with visual impairment. The high-fidelity wireframes were modified to solve this issue. Once the high-fidelity wireframes were completed, a high-fidelity clickable prototype was created in Adobe XD.
TESTING
Usability Testing
To start validating the usability of the app design, multiple rounds of moderated remote usability testing was conducted with real users.
A test plan was first generated to determine testing goals, objectives, schedule and evaluation metrics (Jakob Nielsen’s scale). Next, a test script was generated which focused on testing the core features of the app using a combination of open-ended and scenario-based task questions. The observations from the tests were organized in an Affinity Map and then analyzed and ranked by severity in a Rainbow Spreadsheet. This helped gain insights on improvements to the app.
Issue #1
Most users had difficulty locating the Set Custom Weather Alert feature.
Solution
After most participants could not initially find the Set Custom Weather Alert feature in Settings, a button was added to the home page for an additional access point.
Before
After
Issue #2
Participants had scrolled through the Hour-by-Hour temperature graph first before locating the precipitation graph. They also expressed confusion of the graph icon meanings.
Solution
Added graph icon labels and color to the hour-by-hour graph tab bar. This provided extra visibility and clarity.
Before
After
REFINING THE DESIGN
Visual System
After the usability testing, a design language system was created and applied to the Anglercast app.
Additional visual refinements included incorporating a grid system and applying gestalt design principles. Once the full visual system was in place, the app went through a round of peer review and additional improvements to the design were made based on feedback.
