Responsive Website & App UX Case Study
BetterAid Hi-FI Mockup

Project Overview

Project Duration

2 Months: July – September 2022

The Problem

Design a mobile app and a responsive website to help people learn First-Aid.

The Goal

Designing a mobile app and a responsive website for social good.

My Role

All UX Design Roles in a product design process.


Empathizing, Research, Wireframing, & Prototyping.


Adobe XD


The primary user group identified through the research conducted ended up being adults who need easy access to First-Aid learning. I performed usability tests on the target user group with 5 different websites & apps that offered to teach First-Aid.

These were some of the findings:

• 4 of 5 users found that it took too long to complete a First-Aid course.

• 3 of 5 users got confused over instructions.

• 1 of 5 users felt left out because of the lack of Accessibility options.

Research revealed that to make a First-Aid platform more user friendly, the users would need better accessibility options, clear instructions in different mediums as well as short, but concise courses.

During this process I created an empathy map to understand the user’s I’m designing for and their needs.
BetterAid - Empathy Map Aksel

User Research Revealed Four Major Pain Points..


Users that need to learn first-aid are often in dire situations and are short of time.


Users need a way of quickly accessing already-viewed courses in-case they need to view them again in dire situations.

Confusing instructions

Users that are short of time also need clear instructions, especially in dire situations.

Contrast & accessibility

Users need text & color combinations that aren’t hard to read. Many first-aid platforms seem to not match WCAG (Web Content Accessibility Guidelines.)

Persona: Aksel

BetterAid Persona - Aksel

Persona: Guri

BetterAid Persona - Guri


“Guri is a dentist with children who needs a first-aid learning platform with easily understandable videos & pictures because of her reading comprehension disorder in order to learn first-aid for her children’s safety.”

BetterAid User Journey Map - Guri

Site Map

Starting the design of a website with creating a sitemap is effective in order to get an overview over the website’s navigation and the relationship the pages have to each other.

 The sitemap of the fictional ‘BetterAid’ was designed with the thought of users having as few screens as possible to click through when completing the main user flow.

This was also important because of the users identified had to have access to courses quick & easy in dire situations.

SiteMap BetterAid

Paper Wireframes

BetterAid - Paper Wireframes


BetterAid LO-FI Wireframes

With accessibility in-mind

When designing the mockups, accessibility was a big priority. These were some of the measures taken for better accessibility:

1. Contrast. Checked that all the colors used had a good contrast that matched Web-Content Accessibility Guidelines (AA+).

2. Created a button that reads all text on screen when pressed.

3. Difficult language. Made sure all text was easy to understand & didn’t use too difficult language or long text segments.

Design system - BetterAid


BetterAid Website Mobile Mockups



The impact this app would have if it would’ve been made would’ve been very good. User feedback of the final app was mostly that they wanted the app to be real, which is a sign that an app like this one is needed on the market and would benefit the people.

What I Learned

What I learned from this project is how UX can be used for social good. The Accessibility options used in this project is a sign of self-improvement and truly getting to empathize with the user and how that directly benefirs the projects! I can’t wait to see what’s next & how I can improve on my designs!

Thank you for reading my case study!