HUDDL.

Huddl. was the culminating task of my Introduction to User Experience design course. Over the span of two months, my team of five worked to develop a solution to reclaim the social experiences people had lost to quarantine.

The Problem

How might we watch professional sports together in a safe and virtual environment?

After enduring the pandemic for nearly a year, being a sports fan was becoming a little stale. Even though we had post-game stats and fantasy leagues, there was nothing to fill the gap that watching sports together left behind. Even though games were being broadcast, what was the point if you couldn’t get rowdy with your friends after watching a buzzer-beater shot?

This was a sentiment that we found was reflected worldwide; USA Today reports that ratings for the Stanley Cup went down 61% from last year, averaging a measly 2.1 million viewers. That sparked a question in our heads: “How might we watch professional sports together in a safe and virtual environment?” We knew we had to try, so we began by doing some research.

The Team

Vedant Patel, Zoë Carbone, Aqil Pirani, Amy Schneiderbanger, Jonathan Law

My Roles

UI/UX Design, User-centric Design, User Research, Prototyping

Our Time Frame

2 months

Our Process

User Survey

First, we wrote a survey to collect responses and get an idea of the habits and workflows that people had developed during the quarantine. We wanted to know what kind of barriers to entry there were so that we could create a service that worked even for the lowest common denominator. Our results confirmed our suspicions:

image
Respondents mostly lived with their immediate family
image
Respondents used a computer or smartphone frequently
image
Respondents communicated primarily through text messaging

User Personas

After conducting our survey, we created some personas to get an idea of the kinds of users that had filled out our survey and understand where the problem was; of course, we knew that people couldn’t watch sports anymore. What we wanted to understand was what effect it was having. From the personas, we were able to land on two key takeaways:

  1. Communicating primarily through text wasn’t a fulfilling method of socialization.
  2. Losing community experiences such as Sunday night watch parties was demoralizing and made routines bland.
User persona created by Jonathan Law
User persona created by Jonathan Law
User persona created by Vedant Patel
User persona created by Vedant Patel

Product Requirements

Slowly, ideas were beginning to form in our heads. After a brainstorming session, our team decided that the service should aim to fulfill three key objectives:

Allow users to spend time together on the devices they already have
Refocus the time spent on those devices into a shared social experience
Serve as a robust platform for a rich, shared, social experience

Our next course of action was to define our product requirements and simulate a user’s journey through the service, by creating a scenario map. This allowed us to streamline users flows and focus our design efforts on the most important features.

Ideation + Creation

Wireframing

Now that we had the necessary data to build a design that could accommodate our users, we began by creating simple wireframes to brainstorm our ideas, then finalized wireframes in Figma.

An overview of all the mockup wireframes we made.
An overview of all the mockup wireframes we made.

These wireframes attempted to represent all the core screens and interactions our users would make and see; such as service onboarding or creating a watch party. During this phase, we also requested feedback from fellow students which we then implemented into our mock-ups.

The wireframes we created collaboratively in Figma.
The wireframes we created collaboratively in Figma.

Mockups

We proceeded to create mock-ups to bring the service the life. Conducting several focused design sprints, our team took screens from wireframe to high-fidelity mock-up, rapidly iterating and incorporating feedback from other team members, which allowed us to balance visual flair with practicality and usability.

Process, from left to right: Mockup, Wireframe, Low-Fidelity, High-Fidelity
Process, from left to right: Mockup, Wireframe, Low-Fidelity, High-Fidelity
Onboarding screen
Onboarding screen
Home page
Home page
Room creation screen step 1
Room creation screen step 1
Room
Room
Friends screen
Friends screen
Huddl. All Hi-Fid Mockups.png94136.4KB

Prototyping

Finally, we utilized Figma’s prototyping functions to help simulate user interaction and bring the service to life.

For the best experience, please open this link in a desktop browser.

Conclusion

After two months of hard work, we received a 92 on our prototype (and the presentation to our class). We also inspired our classmates to look for ways to share their experiences using software and services they already used; one of our professors like the idea so much they decided to introduce watch parties for their course in order to increase engagement and help promote creativity.

I learned a lot about user-centric design as an approach to UX design over the course of the project; more specifically, I learned to appreciate the insights that a designer can gain by casting away their preconceived notions and trusting involved research. However, I would have appreciated a chance to take our service beyond the prototyping stage, to implementation.

Without the opportunity for mass user feedback and real-world test conditions, this project remains mainly in the space of theory, even if that theory is based in years of applied research. In the future, I hope to continue applying user-centric design to my UX design projects, as well as figure out ways to streamline the workflow to make the process scalable to larger teams.

All Rights Reserved © Jonathan Law