End-to-End App Design

ORBIT: Sync Up, Jam Out

Product

Mobile users: Please click on prototype to view in Figma.

My role

UX/UI Design, UX research, information architecture, wireframing, prototyping, usability testing.

Timeline

80 hours

Tools

Figma, Figjam, Maze

Client

DesignLab Capstone

Introduction

Billboard states, "32 million people attend music festivals in the United States yearly." That is a heck of a lot of people. That makes what I will say next a lot less shocking: 100% of users I interviewed experienced network congestion while attending major music festivals.

Identifying the Problem

I experienced network congestion firsthand when I went to EDC Orlando a couple of years ago. About 99.9% of the time, my friends and I did not have cellular service. Therefore, we all had a hard time using technology to help navigate the significant event, especially with thousands of people around.

Before we dive in, here is the focus

Having a clear understanding of the user's needs, I used simplicity and usability as my guiding principles for my design process for ORBIT. The key focus was to ensure that every interaction was intuitive, minimizing cognitive load and enabling users to accomplish tasks with minimal effort.

  • A user-friendly design that focuses on simplicity as people will need to solve a problem as fast as possible to get back to the festival.

  • Ensure a seamless flow of usability.

  • Focus on user accessibility.

Time to Gather Insights!

Time to Gather Insights!

Time to Gather Insights!

What do we want to find?

Before I began collecting data and conducting research, I wanted to ensure that I had framed the direction I wanted the research to take. I sometimes have trouble starting the research process because there are many factors to consider. It's like beginning a 1000-piece puzzle: You start by separating the colors that match and analyzing the different fittings to see how you can connect the dots.

Here are some of my thoughts and questions:

  • How do users like to organize and coordinate their plans for the music festival?

  • It will be essential to learn if users had any issues with cellular service at a festival.

  • Understand any other challenges and frustrations attending music festivals. 

  • What are users' expectations?

How are we going to collect the data?

A product cannot be user-centric and hold up in the market if we don't understand two things: the users and the competition.

Here are the methods we are going to use to collect the data:

  • Competitive Analysis

  • User interviews

  • Usability testing

Competitive Analysis

Competitive Analysis

Competitive Analysis

As a naturally competitive person, I enjoy researching other companies to find opportunities that the market lacks. I searched for companies that help solve network congestion issues for huge events and came across Bridgefy, Briar, and Berty. I also learned about Whova, a popular event-planning app for conferences and professional events.

Key Findings

The private messaging apps utilize Bluetooth to achieve connection to other users.

Private messaging apps encrypt messages and prevent data issues from falling through.

It seems like a limited number of people who know Bluetooth Low-Energy technology exists.

Click to view full analysis

User Interviews

User Interviews

User Interviews

User interviews have always been my favorite because they allow me to put a face to the product. I love talking to users and learning from their experiences. Prospective users make the research process more meaningful and allow me, as a designer, to focus on the user's needs and pain points.

Here is an overview of who was interviewed:

  • I interviewed three people between the ages of 26-30 years old who have been to at least one music festival

  • All of the interviews were conducted through video call via Zoom or Google Meet.

Key Findings

100%

of interviewees named cell phone service issues was one of their biggest challenges

3 out of 3

interviewees believe that having a map feature will be very helpful to find amenities, stages, and friends.

all interviewees think festival updates and communication is important

Click to view full data

Affinity Map Themes

Affinity Map Themes

Affinity Map Themes

Now that we have all this wonderful data from the user interviews, what do we do with this information? A great way to sort through all the data is by categorizing the insights into themes. This process has a fancy name called Affinity mapping. I like to have fun with the themes, making the process feel less like post-it hell and more like a game.

Featured are the top-level themes that were the main focus when making design decisions:

Challenges

Check out those features!

What's the plan?

Click to view full data

Understanding the user

Understanding the user

Understanding the user

Beckham the Frequent Festival Goer

After conducting user research, developing a user persona aims to bring more empathy and understanding to the user's goals, pain points, and behaviors. Ultimately, this helps me stay focused and help better align my design decisions. I am not a huge fan of user personas as they cannot capture the complexities of all human nature, but I have met some Beckhams in my life.

Click to enlarge

How can I help?

How can I help?

How can I help?

To better understand the user's needs, I created POV statements and How Might We questions. This helped me develop a deeper understanding of the problem and present opportunities for innovation to generate possible solutions. I often think about the story of Goldilocks in this context, as there is never a one-size-fits-all solution.

POV Statements

POV Statements

POV Statements

  • J desires to stay connected with their friends at music festivals, but with the lack of cell phone service, he needs an effective way to communicate with friends without cellular service or WI-FI.

  • H quickly gets lost in a new environment and, therefore, requires a straightforward way to navigate around large crowds to find specific amenities.

  • R loves to be prepared, but until the festival, a lot can get lost in translation; therefore desires a way to have accessible information and updates even in cases where they don’t have internet or cell phone service.

How Might We Questions

How Might We Questions

How Might We Questions

  • How might we help J stay in contact with their friends when they don’t have service or a WI-FI connection?

  • How might we help H easily navigate the festival grounds?

  • How might we help R access information about the festival at the tip of their fingers and give them peace of mind with real-time updates?

Go With the Flow

Go With the Flow

Go With the Flow

Task Flows

Task Flows

Task Flows

Now that we better understand the market, pain points, and users' needs. The next goal is determining the best steps to introduce solutions to help users achieve their goals. Flows are about mapping out the most efficient pathways to implement solutions, ensuring seamless navigation and user satisfaction.

Sign up

Create an event

Add a festival to your list

Nudge your friend Andrew

Who is ORBIT?

Who is ORBIT?

Who is ORBIT?

Logo Design

Style Guide

Sketches

High Fidelity Designs

Dashboard features

  • A countdown timer to add excitement for users' future events.

  • Ensuring uninterrupted connectivity, a Bluetooth sync toggle stands ready.

  • Dive deeper into the music scene with featured artist integration, seamlessly bridging the festival to other music apps for exploration.

  • Festival schedule at their fingertips, users can effortlessly navigate the lineup, ensuring they catch every beat of their favorite sets.

  • An interactive map becomes their trusty guide, leading them to amenities, friends, and stages with ease

Message features

  • Seamlessly transitioning from lively chats to your contact list.

  • Discovering new connections is a delightful journey for ORBIT's intuitive friend finder.

  • The Bluetooth connection remains steadfastly in view, ensuring uninterrupted communication throughout the festival grounds.

  • Need to grab a friend's attention? A gentle nudge feature lets you do just that.

Festival listing features

  • Discovering festivals to explore or seamlessly adding the ones you're attending, instantly updating your personalized dashboard with every addition.

  • Users can find peace of mind by accessing festival details to help them stay informed.

  • Explore the lineup with featured artists, offering a glimpse into the events for the night.

  • A map of the festival to guide attendees to stages, amenities, and other resources.

Event planning features

  • Creating events and adding all the necessary details ensures your friends are in the loop.

  • The ability to add the festival you're attending

  • Easily extend friend invitations with just a few taps.

Nothing Without Feedback

Nothing Without Feedback

Nothing Without Feedback

Hi-Fidelity Solutions

Usability testing

Usability testing

Now is the time to test the design. The prototype will allow us to show perspective users an example of the product and gain valuable feedback to improve the product if necessary.

Research goals

Research goals

Research goals

  1. Determine if users have a good understanding of the purpose of the app.

  2. Understand usability and accessibility through user feedback.

  3. Gain clarity and feedback on task flows.

Success metrics

Success metrics

Success metrics

  1. Successful completion rates

  2. Ease of use

  3. A positive gauge of usefulness

  4. Limited to zero accessibility issues

Task flow user completed

Task flow user completed

Task flow user completed

  1. Sign up

  2. Create an event

  3. Add a festival to the list

  4. Nudge your friend, Andrew

Results

Results

Results

  • 6 participants completed the usability test

Successful completion rate

1

100%

2

57.1%

3

100%

4

66.7%

Ease of use

Determined by the number of misclicks and time spent on the task.

Misclicks

Task 3

35.1%

Task 4

50.0%

Task 2

41.4%

Task 1

68.9%

Time

Task 3

42.7 sec

Task 4

21.1 sec

Task 2

46.3 sec

Task 1

128.1 sec

Time

Task 3

42.7 sec

Task 4

21.1 sec

Task 2

46.3 sec

Task 1

128.1 sec

Misclicks

Task 3

35.1%

Task 4

50.0%

Task 2

41.4%

Task 1

68.9%

Time

Task 3

42.7 sec

Task 4

21.1 sec

Task 2

46.3 sec

Task 1

128.1 sec

Misclicks

Task 3

35.1%

Task 4

50.0%

Task 2

41.4%

Task 1

68.9%

Positive gauge of usefulness

All tested users said they would use this app

Limited to zero accessibility issues

Rate the accessibility of the app from 1 - 5

4

50%

5

50%

Additional Feedback

  1. The header font Nico Moji was deemed hard to read by one user. 

  2. The sign-up onboarding process was too long

Listen to the User

Listen to the User

Iterating on the Design

Listen to the User

Issue: Sign up feels too lengthy


Solution: Meatball progression to give the user information of how long onboarding is

Issue: Sign up feels too lengthy


Solution: Meatball progression to give the user information of how long onboarding is

Issue: Sign up feels too lengthy


Solution: Meatball progression to give the user information of how long onboarding is

Issue: Further condense oboarding


Solution: Combine two screens into one

Issue: Further condense oboarding


Solution: Combine two screens into one

Issue: Further condense oboarding


Solution: Combine two screens into one

Issue: The headings was hard to read


Solution: Changed all the heading fonts to the same font as the body (Montserrat)

Issue: The headings was hard to read


Solution: Changed all the heading fonts to the same font as the body (Montserrat)

Issue: The headings was hard to read


Solution: Changed all the heading fonts to the same font as the body (Montserrat)

Issue: Users had a hard time finding the nudge


Solution: Restructure the layout and expose the nudge feature. Delete the meatball menu and replace it with a contact photo as the menu.

Issue: Users had a hard time finding the nudge


Solution: Restructure the layout and expose the nudge feature. Delete the meatball menu and replace it with a contact photo as the menu.

Issue: Users had a hard time finding the nudge


Solution: Restructure the layout and expose the nudge feature. Delete the meatball menu and replace it with a contact photo as the menu.

Issue: Users performed poorly with “Creating an event” task flow during UT.


Solution: Add a tooltip to provide more info to users.

Issue: Users performed poorly with “Creating an event” task flow during UT.


Solution: Add a tooltip to provide more info to users.

Issue: Users performed poorly with “Creating an event” task flow during UT.


Solution: Add a tooltip to provide more info to users.

Conclusion

Conclusion

Conclusion

ORBIT has been such a joy to design. I truly embraced the challenge of designing an End-to-End app and I loved putting everything that I have learned throughout my time in DesignLab to the test.

My goal with this design was to keep the UI simple. Users backed up my design decisions, calling it "user-friendly" and "easy to use." I also learned a lot about accessibility. Something that didn't necessarily cross my mind was the readability of the heading of the app. Originally, Nico Moji was the heading I chose to give off that music festival vibe, yet through my usability test, a user having trouble reading the copy on the app would 100% tarnish the accessibility of the interface. It reminded me that accessibility should never be sacrificed for aesthetics.

Moving forward, I would love to continue to build out safety features, more robust event planning features, a festival ticket e-commerce store, and more. The online and offline capabilities of this app have a lot of potential. In addition, I loved learning more about Bluetooth Low-Energy technology and how it can be used to help others in network-congested areas. One of my favorite things about UX/UI/Products is how many new things you learn and dive into.

1

100%

2

57.1%

3

100%

4

66.7%

Misclicks

Task 3

35.1%

Task 4

50.0%

Task 2

41.4%

Task 1

68.9%

Time

Task 3

42.7 sec

Task 4

21.1 sec

Task 2

46.3 sec

Task 1

128.1 sec

Rate the accessibility of the app from 1 - 5

4

50%

5

50%

4

50%

5

50%

Mobile users: Please click on prototype to view in Figma.

View more of my work

Premium UX Template for Framer

Responsive Website Design

Driftwood Ceramics

View case study

Add-on a Feature

MyPal on MyFitnessPal

View case study

Don't leave without saying hello :)

© Kenny Nguyen 2024

Don't leave without saying hello :)

© Kenny Nguyen 2024

Don't leave without saying hello :)

© Kenny Nguyen 2024