Case Study:
frens | Design for Social Good
Responsive Design Concept
Project Overview
The Product:
frens is an online community project intended to educate people of all ages on emotion definitions and how to develop empathy. frens primary target is adult users like parents and teachers who are concerned with introducing and fostering empathic thinking in adolescents.
Project Duration: August 2021 to September 2021.
The Problem: Parents & Teachers need a educational activity that will help them illustrate concepts of emotions and empathy to their students.
The Goal: Design an app that will improve education on the topic of emotions and empathy, by creating an exercise that teachers and parents can use as a lesson plan.
My Role: UX designer leading the app and responsive website visual and product design from concept to delivery.
My Responsibilities: Designing with empathy and without bias. Planning & conducting user research, interviews, & surveys. Synthesizing & diagramming interview & usability study data to form insights. Composing wireframes, building design systems, & creating prototypes via Figma & Adobe Xd. Iterating on designs & progressing user research.
Understanding the User
• User Research
• Pain Points
• Personas
• User Journey Map
• Competitive Audit
• Ideation
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was: working parents who want to foster empathic thinking and encourage emotional intelligence and in their children. This user group confirmed initial assumptions about frens customers, but research also revealed that parents were not the only users looking for empathy teaching aids. Other users included teachers that were seeking out a way to have their students participate in empathy exercises in the classroom.
Pain Points
Time: Working Parents and Teachers need a way to teach concepts of emotions and empathy to adolescents.
Accessibility: Online teaching tools are not equipped with many assistive technologies
IA: Text-heavy educational websites with too many categories are often difficult to read.
Personas
Persona: Kevin
Problem Statement:
The user, Kevin, is a married father and electrician that lives in a major city, who needs a fun and engaging way to connect with his kids, because he wants to help develop their emotional vocabulary and foster their capacity for empathic thinking.
Persona: Julie
Problem Statement:
The user, Julie, is a married mother and real estate agent that lives in a major city, who needs a fun and engaging way to connect with her kids, because she wants to help develop their emotional vocabulary and foster their capacity for empathic thinking.
User Journey Map
Julie's Journey:
Mapping Julie’s user journey revealed how helpful it would be for users to have access to an easily sharable exercise to learn about feelings and emotions.
Competitive Audit
The Scope:
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the frens app. There were a few direct competitors but they were targeted at very young children, so I decided to skew my app’s exercise to appeal to teachers of older adolescents.
Click to view the full competitive audit and audit report
Ideation
Initial Ideas:
I did a quick ideation exercise to come up with concepts for a learning exercise to teach empathy and that incorporated my findings from the competitive audit. My focus was specifically on creating an interactive game or activity that encouraged expressing feelings.
Starting the Design
• Sitemap
• Digital Wireframes
• Low-fi Prototype
• Usability Studies
Sitemap
Organizing the Design:
With the initial designs completed, I started work on designing the responsive website. I used the App’s sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices. I made sure to consider the users journey when constructing the sitemap. My research suggested that most users would prefer to just browse and not have to sign in until they want to participate, so I structured the site around that option.
Digital Wireframes
Planning the Design:
After ideating and drafting some paper wireframes, I created the initial designs for the frens app. These designs focused on guiding users through the steps of the empathy exercise.
Low-fi Prototype
Connecting the Design:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was performing the empathy excercise, so the prototype could be used in a usability study.
View the frens low-fi prototype
Usability Study: Parameters
Study Type:
Unmoderated
Location:
USA, remote
Participants:
5 participants
Length:
30-60 minutes
Usability Study: Findings & Insights
Testing the App:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Useful
Parents want engaging ways to teach their kids about emotional intelligence and empathy.
Step Numbers
Users need numbered steps to follow the lesson in the correct order.
Customization
Users wanted lots of options for the design phase of the exercise.
Refining the Design
• Design System
• Mockups
• Hi-fi Prototype
• Responsive Design
• Accessibility
Design System
Creating the Design Assets:
The site utilizes an “education for all” business model, so I designed art assets and chose colors that leaned toward a friendly but also thoughtful and emotional aesthetic.
A main sans-serif font was chosen for instructional text, as well as a more charming font to appeal to adolescent audiences.
Mockups
Refining the Design:
Based on the insights from the usability studies, I applied design changes like providing clearer calls to action on the homepage, and removing the word “parent” and replacing it with “teacher”.
Mockups
Refining the Design:
Additional design changes included adding more illustrations to the emotion guide, as well as breaking up the definitions to read more clearly to the user.
Hi-fi Prototype
Finalizing the Design:
The final high-fidelity prototype presented cleaner user flows for performing the empathy teaching activity. It also met user needs for allowing more customization options for their personal fren portrait.
View the frens high-fi prototype
Responsive Designs
Diversifying the Design:
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Accessibility Considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier, and a chronological numbering system for step by step guidance through the empathy teaching exercise.
Used illustrations to help all users better understand the flow and allow them to better review their own profile.
Going Forward
• Takeaways
• Next Steps
Takeaways
Impact:
The Website makes users feel like frens really thinks about how to meet their needs. One quote from peer feedback:
“The site made it very easy to compare my emotions to the emotions of others. I would definitely use this to teach my kids about empathy and their feelings.”
What I learned:
While designing the frens website, I learned that the first ideas for the site really are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the site’s designs. I plan to continue testing the site and add features to eventually release frens as a free app onto the iOS and android mobile markets, and also publish the frens website.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine how the site will function on the side of the Teachers- can there be a separate process that they can use to plan more lessons on their end?
Conduct more user research to determine if users would like to be able to interact directly with one another more through the app.
Let's Connect!
I really appreciate your time reviewing my work on the frens app!
If you’d like to see more or get in touch, my contact information is below.
Thank You!