Visual App Design

Capturing Health Insights: A User-Centered Design Process for a Data Collection Application for Teenage Girls

Role: UX Researcher and Writer
Team: 3 UX Designers (Master's Program at the University of St Andrews) and 2 Project Advisors
Client: Dr. Andrew Williams from the School of Medicine at the University of St Andrews
Timeline: May 2023 - August 2023
Tools: Figma, Miro, Balsamiq, JavaScript, HTML/CSS

Project Overview

This project took place over the summer of 2023 as part of my dissertation for my Master's Program in Human-Computer Interaction from the University of St. Andrews in Scotland, UK. My dissertation is attached in full below; although it is 60 pages and just under 15,000 words, it can be a lengthy read. Below, the Abstract highlights the key aspects of this project and how the User-Centered Design approach was fully utilized to bring the final design to fruition.

Abstract

This paper presents a comprehensive exploration into the design and development of a health-focused application tailored for adolescents, with a particular emphasis on addressing the needs and preferences of teenage girls. Guided by a User-Centered Design (UCD) approach, the study unfolded through a series of iterative user studies, unveiling insights that contribute to both the specific application and the broader understanding of adolescent engagement. The paper's journey began with a meticulous literature review, delving into studies concerning teenage girls' health, physical activity levels, and the efficacy of gamification as a tool for promoting healthier lifestyles. Building upon this foundation, the project embarked on a three-phase user study process, each strategically timed to synchronize with the distinct phases of the UCD process: data collection, sketching, and prototyping. This approach enabled the team to synthesize user feedback, iteratively refine design elements, and ultimately culminate in the development of a functioning prototype. Through the journey of the three user studies, the application's design was refined and aligned with the users' preferences and needs, particularly those of teenage girls. The iterative approach of the UCD process facilitated the evolution of the design, ensuring a user-centric interface. The culminating prototype not only provided valuable insights into health data collection for adolescents but also offered a foundation for future developers.The study emphasizes the potency of combining rigorous user engagement with a systematic UCD framework, fostering innovation in health-related applications while centering the needs and experiences of adolescent users.

Click the image above to read my dissertation in full

Designing an App to Display Maps for a Client

Currently Under Construction; pardon the Appearance!

Role: UX Lead & Researcher
Team: 4 UX Designers (Master's Program at the University of St Andrews)
Client: Doctor M. from the University of St Andrews
Timeline: September 2022 - December 2022
Tools: Figma, Miro, Balsamiq

1. Project Overview

Between 2009 and 2011, Dr. M conducted research on political motivations and violence, collecting data through surveys that combined questionnaires with participant-drawn maps. These maps offered unique insights into individuals' “psycho-geographies”—how different groups perceive and navigate shared physical spaces based on political or social affiliations.

While the research culminated in a published paper, all the data existed only on paper maps, making it difficult to compare, analyze, or build upon. Dr. M approached our team to help digitize this data and create a system for visualizing and comparing the maps more interactively.

Concept Statement:
- No existing system currently allows for qualitative map comparison tied to participant affiliations. Our solution explores how digital tools can reveal patterns in how different groups perceive space.

Goal Statement:
- Design a system that allows Dr. M to digitize and compare participant-generated maps, visualize affiliation-based patterns, and provide contextual background on the original research—enabling deeper, more scalable analysis.

2. Challenges

Going into this project, we recognized that there would be certain areas of concern that we needed to keep in mind throughout the design process. As we continued to gather information and shape our final prototypes, we made sure we continued to address the following areas that presented more unique challenges:

  • Data Complexity:

    • The research involved nuanced, qualitative data such as personal interviews, narratives, and hand-drawn maps—rich in meaning but difficult to visualize or compare systematically.

    • Digitizing this data was going to present a rather large issue with this project

  • Geospatial Context:

    • All responses were tied to specific geographic areas, meaning the system needed to incorporate spatial visualization in a way that preserved the context of place.

    • Maps are complex and choosing how to display a variety of information on one map would become a constant problem we work workshop through; how much is too much information? How much is too little? What becomes cluttered? What colors are associated with certain geographical features?

  • Audience Diversity:

    • The client’s end goal was to allow this map not only to be an aid for fellow academic researchers and graduate students but also to the general public. The interface needed to accommodate varying levels of technical and subject-matter expertise.

    • This tool needed to convey a lot of complex information, but also be user-friendly; this introduces the idea of ‘hiding’ features to allow users to build their own experience on the platform. We would continue to build on this throughout the project

  • Neutral Presentation:

    • Given the politically sensitive nature of the research, it was critical that the system present data impartially and avoid reinforcing biases or overgeneralizing individual responses. We designed with transparency and neutrality in mind to respect the integrity of both the research and the participants.

3. My Role: Team Leader

As the team leader, I took on a central role in coordinating and driving the project forward. With the strongest English skills in the group and a naturally organized approach, I was responsible for managing internal communication, delegating tasks, and ensuring our team met deadlines—despite the added complexity of balancing this work alongside a full semester of graduate coursework.

I helped coordinate the project, by assigning and tracking tasks across team members, adjusting for schedule conflicts, and keeping the project on track through weekly planning. We had several papers to turn in throughout the course of this project to track our progress and I ensured these were completed on time.

I was also in charge of communicating with both the client and the interview candidates. I was the main point of contact with our client and provided regular updates via email and occasionally video call.

4. Research and Interviews

To ground our design decisions in real user needs, we conducted qualitative interviews with individuals who were representative of our target user base: fellow researchers and academics who regularly work with complex qualitative data.

We interviewed a total of 7 individuals who were all colleagues and professional contacts of Dr. Murer:

  • 3 Master's students

  • 2 PhD candidates

  • 2 Professors from different universities

To prepare for the interviews, we began by crafting a thoughtful interview guide, reviewing best practices in interview etiquette to ensure we created a respectful and productive space for open-ended responses. Our questions focused on:

  • How researchers currently analyze qualitative and geospatial data

  • What tools or methods they use

  • Ideal features in a digital visualization tool

Brainstorming Interview Questions and Topics

I took the lead as primary interviewer while my group mates took notes. The conversations provided rich, firsthand insights into the workflows, frustrations, and aspirations of our end users.

From our research, we were able to begin crafting user stories for two key personas:

  • The Doctoral Researcher: Needs a way to explore participant narratives by theme and affiliation, ideally overlaid onto a map to observe spatial patterns.

  • The Fellow Academic: Wants to explore and compare findings from related research but requires sufficient background information to understand the context of each map entry.

These findings shaped how we structured the interface, prioritized features (like filtering by theme or affiliation), and thought about the data display hierarchy.

5. Synthesis & Insights

WAAD Diagram

Miro for organizing data points from interview

user personas/stories created

6. Ideation & Design

Sketch-a-thon : basically we met for two hours and just sketched different ideas and parts of the app and potential needs for it etc.

Design critique with another group

7. Prototyping & Testing

Balsamiq and then Figma: In the end we had two main prototypes with certain parts of the groups specializing on one or the other

8. Outcome & Reflection

Presentation with teachers and client. Client was happy wiht the ideas and prototypes and the team was able to answer questions raised. a solid design was presented at the end. No build stage