Basic First Aid
for social good
Responsive Site Design
Project Overview
The Kalo Wellness site offers basic first aid remedies and health tips. Kalo means "to proclaim" in Latin. The UX design system guided the process, teaching me to create a product with intent.
THE GOAL
Create a dedicated app and mobile first responsive site design in Figma, instructing users in basic first aid treatments.
THE PROBLEM
Must impact social good in a meaningful way.
MY ROLE
Generalist / Team of 1
Brand concept and logo design, User Research, UI/UX Responsive Design, Product Research & Editing, Wireframing, Testing, Prototyping, Figma
TARGET AUDIENCE
Men and Women over age 35
CHALLENGE
Manage textual information and maintain standards through responsive site design.
Research Summary
I interviewed nine men and women, ages 30s - 70s, unmoderated online. I used the data to create an affinity map, develop personas and select topics.
INTERVIEW TOPICS
Why is a first aid app purposeful? What topics would be of interest? How do you respond to the use of illustration and/or photography as teaching aids?
FIELD WORK
Online research, affinity map, empathy map, crazy 8s, competitive audit
FINDINGS
Online research and the competitive audit influenced a simple and bold UI. Participants expressed anxiousness around first aid topics; therefore, I included a section on calming and wellbeing. They confirmed the app is useful as a quick study guide.
Understanding the User
"Why would you use a basic first aid app?"
“Learning, knowledge, a lot of people including myself do not have basic first aid knowledge”
- Noelle L -
Software Engineer
AFFINITY MAP
The affinity map was built based on the interview question data. Participants expressed frustration when searching online for health or first aid information. They were also asked their preferences on topics, visuals and ideas.
PERSONA 1
Problem Statement: Mila is a professional who needs a first aid dedicated app on her phone because she wants to access information and study reference study no matter where she is.
PERSONA 2
Problem Statement: Wes is retired who needs a reliable, first aid desktop website to reference because he wants accurate information to apply treatment in the event of a medical situation.
WES JOURNEY MAP
CRAZY 8
COMPETITIVE AUDIT
After analyzing data from the apps below, I developed the FA7 brand.
Starting the Design
DIGITAL WIREFRAMES
LO-FIDELITY PROTOTYPE
Please test below and return to the site.
LO-FIDELITY USABILITY STUDY
Six men and women (30's to 70's) commented on the prototype in an online, unmoderated study. The observations are summarized.
HOME PAGE
1 out of 5 participants did not understand icons, 1 out of 5 did not understand
FA7 logo.
USE OF VIDEO
4 out of 6 participants do not see the need for video instruction.
PURPOSEFUL
6 out of 6 feel the app concept is purposeful.
4 out of 6 think the topics are good choices. 3 out 6 were confident using the app.
Finalizing Design
MOBILE FIRST RESPONSIVE DESIGN
MOCKUP VER 1
MOBILE FIRST RESPONSIVE DESIGN
MOCKUP VER 2
HI-FIDELITY PROTOTYPE
Please test below and return to the site.
HI-FIDELITY SCREENSHOT
ACCESSIBILITY
VISIBILITY
-
Bold graphics
-
Generous white space
-
Large images
-
Simple navigation
INFORMATION
-
Simple navigation
-
Concise treatment info
-
Use of photography and art
-
Drop down menu
-
Lessons in calm, how to
assess, home first aid kit
REAL WORLD
-
Accredited approval
-
ADA site compliance
-
Text to speech tool
-
Search engine with
extended information
INFORMATION ARCHITECTURE
TABLET PROTOTYPE
Please test below and return to the site.
DESKTOP PROTOTYPE
Please test below and return to the site.
Conclusion
I was thrilled to find out through testing, the final prototype was effective in inspiring future study and providing treatment for basic first aid in a clear and direct manner.
I have some concerns about the UI design and I understand the value of iteration and pushing the boundaries for improvement on all UX design going forward.
The entire experience was very valuable. I am interested in developing work that improves well-being, educates and supports our lives. I want to continue to understand how design can inspire all users to take good care of themselves.
I appreciate your support throughout this journey and look forward to hearing from you. Thank you so much.