This project was part of the hackathon organized by Equalithon, a week-long, remote hackathon dedicated to addressing issues related to inequality, social and environmental challenges.
ListenFirst is a non-partisan non-profit organization that organized America Talks, a two-day event that invites Americans to connect one-on-one, face-to-face on video across the political divides.
As the post-conversation survey, ListenFirst wanted the participants to share their feelings, recommendations, and what they might do to support each other, right after they had an encounter with someone from the other “world” (rural or urban life).
To come up with a recording system that would record the testimonials, save them to the database, and be able to access and use them by Listen First and their partner organizations later.
UX research, user flow, wireframes, wireflow, hi-fidelity prototypes, visual design
Abigail Mathews Team Lead / Full-Stack Developer
Sandy Dai Full-Stack Developer
May 22–30, 2021
At first, I looked into the data gathered and provided by ListenFirst to get a better picture of the users’ demographics and any information that might be beneficial to understand the users.
The highest numbers of male registrants were 18 years old (13%) and the majority lived in rural areas.
The highest numbers of female registrants were 64 years old (6%) and the majority lived in urban areas.
No data regarding the users’ devices.
We have the belief that the online app will be accessed by various devices by a diverse group of users from various locations based on the data we have analyzed.
The online recording app needs to be easy and simple to use, flexible, accessible, and scalable to accommodate a wide range of users.
Based on the data analyzed, the following user personas were created to get better and clear ideas about who are the users of this recording system.
Keep the online recording app simple, straightforward, and focus on MVP.
The recording system should let users:
be able to identify the online app as the part of America Talks by maintaining the brand consistency
have an option to choose the recording method between video and voice and input devices
answer a prompt to facilitate their testimonial
submit the recording and answer another prompt
The primary goal of the UX design portion was to create an online app that is brand consistent, feasible, and scalable for the diverse end-users that will be accessing the app with various devices from everywhere in the U.S.
The main focus was to make sure that we have a functional online system, by defining the MVP, so that the organization can use it right away at the end of the hackathon.
Wireframes & Wireflow
Based on the user flow, I designed a new user interface by starting with sketching out design ideas and wireframes before moving on to designing digital prototypes.
UI Style Guide
The style guide is created based on the America Talks website to ensure brand consistency but slightly updated to improve the accessibility and scalability of the design for the responsible design.
A straightforward interface for recording and submitting video and audio responses that won’t intimidate users.
A design that is integrated with the America Talks brand, so that users don’t experience confusion when they arrive on the page.
Consistent branding means America Talks could use this application without major modifications.
5. Results and Takeaways
We were able to successfully implement 75% of the designs and 100% of the core features for MVP at the end of the hackathon to a panel of judges for the presentation. Our team was selected as a winner for the challenge.
Some key takeaways from this hackathon are that:
The best designs come from collaboration. It was inspiring to see how each person was able to bring to the table a different perspective and expertise to develop the online app while making sure of the delivery of the functional system on time.
Design thinking is key to effective products. This lean framework really helped to shape the workflow and discussions with the team as it allowed me to stay focused and on track throughout the entire hackathon.
As the next iteration phase, the team decided to include the following items to improve the user experience and usability of the app if possible.
Allowing for two users to record their answers together in the same session
Integrating a count-up timer to place a subtle time limit on the user’s answers
Incorporating additional prompts for users
Include an option for users to submit written testimonials instead of recordings