America Talks: Recording System

UX/UI, UX research, visual design

See Prototype

Overview

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.

The Challenges

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).

The Goal

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.

Responsibilities

UX research, user flow, wireframes, wireflow, hi-fidelity prototypes, visual design

Team Members

Abigail Mathews
Team Lead / Full-Stack Developer

Sandy Dai
Full-Stack Developer

Project Timeline

May 22–30, 2021

Process

1. Research

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.

Key Findings

  • 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.

Hypothesis

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.

2. Define

User Persona

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.

3. Ideate

Potential Solutions

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
  • accept or decline the terms of use
  • 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.

User Flow

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.

4. Design

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.

Next Steps

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