ListenFirst • AmericaTalks Testimonial Recording System
As the post-conversation survey, ListenFirst wanted the participants of America Talks, the two-day event connecting people on video across the political divides, to share their feelings, recommendations, and what they might do to support each other right after encountering someone from a different “world” (rural or urban life).
We devised a recording system that would record the testimonials, save them to the database, and be able to access and use them by ListenFirst and their partner organizations later. I led an effort to create a straightforward, easy-to-use, on-brand UI.
This project was part of the week-long hackathon organized by Equalithon, addressing inequality and social and environmental challenges.
Simple and Easy-to-Use Recording System Connected to Database
Deliverables
UX research
User flow
Wireframes
Prototypes
Design style guide
Stakeholder presentation
Timeline
One week
Tools
Figma
Team
Full-Stack Developers
My Role
UX/UI Designer
User Research
Gaining Better Understanding of Participants
At first, I looked into the data gathered and provided by ListenFirst to better understand the users’ demographics and any information that might help me understand them and their needs.
Key Findings
The highest number of male registrants were 18 years old (13%), and most lived in rural areas.
The highest number of female registrants was 64 years old (6%), and most lived in urban areas.
Hypothesis
We believe the online app will be accessed by various devices by a diverse group of users from multiple locations based on the data we have analyzed.
The online recording app must be straightforward, flexible, accessible, and scalable to accommodate many users.
Ideate
Developing straightforward solutions to simplify the recording experience
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 recording system should let users:
be able to identify the online app as part of America Talks by maintaining brand consistency
accept or decline the terms of use
have the 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
User Flow
The main focus was to ensure we had a functional online system by defining the MVP so that the organization could use it immediately after the hackathon.
The steps identified in the discovery phase were then organized into a rough journey map.
Wireframes and Wireflow
Based on the user flow, I designed a new user interface by sketching design ideas as wireframes. Then, using Figma, I translated them into low-fidelity workflows to present to the team and stakeholders.
I’ve made a few alterations and moved on to creating high-fidelity prototypes with better user flow and functionality based on the insight gained from 4 usability tests conducted.
UI Design
Design style guide
The style guide is based on the America Talks website to ensure brand consistency. However, it was updated to improve the accessibility and scalability of the product.
A straightforward interface for recording and submitting video and audio responses that won’t intimidate users.
A design 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.
Conclusion
Our solution was the winner of the challenge
At the end of the hackathon, we successfully implemented 75% of the designs and 100% of the core features for MVP, which we presented to a panel of judges for the presentation.
I am confident that this straightforward and easy-to-use recording system would help AmericaTalk participants participate in the testimonial activity whether they are on mobile or desktop.
Key takeaways from this hackathon
The best designs come from collaboration. It was inspiring to see how each person was able to bring a different perspective and expertise to develop the online app while ensuring the timely delivery of the functional system.
Design thinking is critical to practical products. This lean framework helped shape the workflow and discussions with the team, allowing me to stay focused and on track throughout the hackathon.
Nest step
As the next iteration phase, the team decided to include the following items to improve the app's user experience and usability.
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