Rapport: App and Responsive Website
Rapport was created to help teens learn empathetic communication by utilizing gameplay, storytelling, and emotional skills to encourage and empower youth.
The Problem:
Our users struggle with empathetic communication which causes stress, anger, and shame. This creates difficulties for them in their family and interpersonal relationships.
The Goal:
My goal was to create an app and responsive website that could help teens learn empathetic communication in an easy, low stress way.
Role:
Lead UX and Visual Designer
Audience:
Kids age 11-17
Duration:
8/14/23-8/21/23
Conducting Research
-
The competitive audit indicated that while there were a few apps for kids and teens to learn emotional skills, most were geared for parents teaching kids, or for kids under age 12. Some incorporated stories and some incorporated games, but none incorporated both.
-
The personas created were based on real users. The two types of pain points users experienced were a) struggling getting along with family due to empathetic communication issues and b) struggling making meaningful friendships due to lack of skills in emotional communication
-
The first usability showed that users wanted easier transitions between user journey flows, and more accessibility options.
-
After the high fidelity prototype was created, a second usability study highlighted some missing call to action buttons for users to rely on in case of user error. It indicated a need for multiple ways of accessing different user flows.
Ideation Phase
Lo-Fi Paper and Digital Wireframs
Final Designs
-
![]()
Immediate access to accessibility preferences at sign up was important to make all users have a positive experience.
-
![]()
-
![]()
-
![]()
Images for the games were created using AI technology.
-
![]()
Other elements of the app, such as story images, were hand drawn.
-
![]()
Responsive Web Design
Mockups and prototypes were created for mobile phones, tablets, and desktop computers.
Takeaways
This app was a challenge in responsive web design. I learned how to create visual design elements that would work across multiple platforms, considering the location and time when users were most likely to use each device. I also learned more about accessible design, and making sure my mockups had continuity and consistency.