top of page
screens.png
UX
Case Study 3

Graduate Trainee at UBC's Designing for People Research Cluster

HarrietGo:
an End-to-End Digital Solution to Empower Citizen Science

Project length: 4 months

​

Client: Howe Sound Marine Stewardship Initiative

Sector: Non-Profit, Citizen Science

My role: UX/UI Designer

Team members: one data scientist, one database designer, one engineer, one ux designer & researcher

Platform: Mobile (iOS)

Tools used: Miro, Figma, Python

​

Utilized skills: ​​

  • Design Thinking 

  • Observation, semi-structured interviews, affinity diagram

  • Design needs assessment and requirement generation

  • Competitor Analysis

  • Branding and logo design

  • Design ideation exercises (Crazy 8s)

  • Application UI design (using Figma)

  • Cognitive walkthrough and usability testing 

  • Project video creation

Project Video:

​​

Introduction:

Herring is a key species of the region’s ecology, yet much of their life cycle is still a mystery. To fill these knowledge gaps, my DFP project sponsor Átl’k ̄a7tsem/Howe Sound Marine Stewardship Initiative (MSI) recruits volunteers to scout the Squamish shoreline to develop a comprehensive dataset on herring life history through their rare spawn events, which are significant as they mark the end of winter, akin to spring blooms under the waves. Aligned with MSI’s mission, my team presents HarrietGo, a citizen science data collection app that fosters input from the community.

​

Design Space: 

Citizen science tools that allow users to collect geographical position data and field data describing research objects. These tools often incorporate a geographic information system (GIS), which is a system that “creates, manages, analyzes, and maps all types of data."

​

Users of citizen science tools include expert scientists, GIS analysts, and citizen scientists (who are often without specialized GIS training, making them “GIS laypeople").

​

Problem Space: 

There exists a need for a need for a cost-effective citizen science solution to improve the data collection, management and communication of herring spawning data with the goal of increasing data utilization and education for Howe Sound Marine Stewardship Initiative.

​

Project Contribution:

  • Front-end app UI design (and my main contribution as UX designer and researcher): A unique citizen science tool (HarrietGo) for effective and efficient data collection.

  • Proof-of-concept for back-end app functionality: We validated the core functionalities with Python.

  • Consideration for server design: We designed back-end data keys for a remote server.

​

Quick Snapshot of the Hi-Fi Prototype: 

Competitor Analysis:

  • Current tools MSI is using: the free version of Gaia GPS and Google Sheets. However, such tools are neither efficient nor effective enough for their complex data collection process.

  • Competitors on the market: I conducted a competitive analysis and segmented citizen science tools based on their target users and whether they are paid or free apps (Figure 1). 

​​

Competitive analysis.png

Figure 1: Competitor Analysis of GIS Apps for Citizen Scientists

User Research:

  1. My team participated in MSI's volunteer information event to obtain information to craft initial interview questions and conduct observation on the organization's atmosphere (Photo 1 and 2).

  2. My tea conducted one-on-one semi-structured interviews with five key stakeholders of MSI, including: 

  • MSI founder

  • DFP partner and MSI Project Director

  • Volunteer coordinator and citizen scientist

  • Veteran volunteer and citizen scientist.

  • Veteran GIS data analyst​

​

MSIsession1.png
MSIsession2.png

Photo 1: My Team and I at the Event
(I'm in the middle!)

Photo 2: Explanation of Survey Trips
at the Event

​Data Analysis and Sponsor Organization Stakeholder Analysis: 

My team used an affinity diagram with seven key grounded theory codes to analyze the data and identify the underlying goals and needs of MSI (Figure 2-1). We also identified the multiple modes of transport for survey trips (Figure 2-2).

affinity-diagram.png

Figure 2-1: Affinity Diagram Using Seven Key Grounded Theory Codes

MSI modes of transport.png

Figure 2-2: Multiple Modes of Transport for Survey Trips

Personas, As-Is Scenarios and Prioritized Pain Points:​​

I then developed 3 personas, each resembling a critical role in MSI's herring survey project - the Volunteer, the Project Director, and the Volunteer Coordinator - to inform our construction of the as-is scenarios and voted on the pain points that our team will prioritize (Figure 3).

Figure 3: Personas, As-Is Scenarios and Prioritized Pain Points (Circled in Red)

Conceptual Model: ​​

My team choose 3 apps to form the conceptual model of HarrietGo to help our users quickly familiarize themselves with our app by alluding to their affordances (Figure 4):

  1. Pokemon Go: exploratory geo-caching aspect

  2. Strava: GPS-based path tracking

  3. Smart widget graphical interfaces: one-handed usability

conceptual_model.png

Figure 4: Conceptual Model

Style Ideation: ​​

I explored the brand styles of MSI, Squamish Nation - a vital collaborator that works closely with our sponsor - as well as adventure apps and marine apps to identify styles that fit MSI's needs using Moodboards (Figure 5).

Figure 5: Moodboards
(pictures from MSI and Squamish Nation website, and Pinterest)

Back-End Funcationality Design with State Machine Diagram: ​​

My team created a state machine diagram illustrating the back-end funcationalities of our app (Figure 6). Our data scientist built a Python prototype and tested it out on UBC campus to validate this state machine diagram. Our database designer also designed a database structure around the back-end data keys in the server design.

State machine (Figjam).png

Figure 6: State Machine Diagram

Front-End Structure with Information Architecture: ​​

I created the information architecture of the app based on the functionalities in the state machine diagram to lay out the application screens (Figure 7).

InformationArch.png

Figure 7: Information Architecture of Our App

Front-End Design with Design Sketches: ​​

We ideated on designs and drew design sketches of key app screens using Crazy8's method (Figure 8).

crazy8s.png

Figure 8: Our Crazy 8's Sketches

Branding and Logo Design:​​

  • I designed a cartoonish version of Harriet the Herring (mascot of MSI) with spawn as the logo, and titled our tool “HarrietGo” with the slogan “Empowering Citizen Science” to solidify its goal (Figure 9).

  • I designed our app with a geometric and fashionable style for a younger user base (i.e. MSI volunteers and Squamish Nation youth).

  • I chose navy blue as our primary colour and orange as our secondary colour to reflect the ocean-related theme of the design (see our style guide in Figure 10).

Figure 9: Logo, Slogan, App Icon Design

StyleGuide.png

Figure 10: App Style Guide

Front-End Design with Med-Fi Figma Prototype:​​

​Based on our Crazy8's design sketches, I led my team to create the med-fi prototype (select screens in Figure 11).

Figure 11: Med-Fi Prototype App Screens

Testing Med-Fi Prototype: ​​

  • Cognitive walkthrough with UX and HCI experts (N=2) to discover big pain points in our app. 

  • Usability testing with novice users and GIS laypeople (N=4) to investigate the overall usability of our app with 3 task scenarios done using a think-aloud protocol.

Testing Findings: ​​

  • Major pain points were found in the cognitive walkthrough, and general usability issues were identified in the usability testing sessions. The prototype was then iterated based on the findings. ​​

Final Iteration and High-Fi Prototype: 

​

​

​

​

​

​

​

​

​

​​​

screens.png

Figure 12: High-Fi Prototype App Screens

Future work:​​

  • ​Our app received favorable and positive feedback from our sponsor MSI 

  • Next steps will include designing the app for smartwatch and fitbit interfaces to support volunteers' snorkel and kayaking surveys.

References:

​

Research presentation:

Poster and project video presented at 2023 UBC's Designing for People Research Cluster Design Showcase​

bottom of page