Case Study 1
Graduate Trainee at UBC's Designing for People Research Cluster
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
Observation, semi-structured interviews, affinity diagram
Design needs assessment and requirement generation
Branding and logo design
Design ideation exercises (Crazy 8s)
Application UI design (using Figma)
Cognitive walkthrough and usability testing
Project video creation
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.
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").
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.
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:
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).
Figure 1: Competitor Analysis of GIS Apps for Citizen Scientists
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).
My tea conducted one-on-one semi-structured interviews with five key stakeholders of MSI, including:
DFP partner and MSI Project Director
Volunteer coordinator and citizen scientist
Veteran volunteer and citizen scientist.
Veteran GIS data analyst
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).
Figure 2-1: Affinity Diagram Using Seven Key Grounded Theory Codes
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)
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):
Pokemon Go: exploratory geo-caching aspect
Strava: GPS-based path tracking
Smart widget graphical interfaces: one-handed usability
Figure 4: Conceptual Model
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.
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).
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).
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
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).