HyperEx Conpanion App

The Hyperloop is one step closer to becoming a reality. If it works, the new form of transportation could mean a journey from LA to San Francisco city would take just 50 minutes. UI/UX    |    Interaction Design    |    Branding    |    Information Architecture
About Project

In 2013, tech entrepreneur Elon Musk proposed a supersonic, express transportation system running between major cities that would create a faster, greener, cheaper alternative to existing modes of transportation. Now when you think of futuristic transportation, you can think about the Hyperloop. It's not as cool as teleportation, but it's still revolutionizing mass transit, and shortening travel time a lot. It's excellent for reducing environmental damage in the process which can help the world we live in today. So we aimed to create a mobile experience that will augment the experience of using Elon Musk’s Hyperloop transportation system between Los Angeles and San Francisco.

My Role

As the designer in the team, I worked collaboratively with the whole team to develop HyperEx. I conducted extensive research into the users in the form of surveys, focus group, and interviews. According to are research results, personas and user journey map were created to display the main opportunities. As we defined our main features, I designed a logo for the HyperEx app and wireframes for credits mode and trivia feature. In the end, I participated in creating the online manual and finishing the final touches.

The Kickoff
Brainstorming & Project Selection

During our brainstorming session, we came up with seven ideas. So to decide on are ideas we voted, and Hyperloop Companion App won.

Initial Research
Online Survey & Competitor Analysis

To start thing off we made an online survey with a number of questions asking users general questions regarding our idea on the Hyperloop App. When asked would they use a Hyperloop app 91% respondent they would use the app. The next set of questions asked what they wanted on the app. The top five were pricing, departure time, arrival time, current location, and list of stops. This survey provided the team with a starting point for the development of the focus of the project.

We performed a competitor analysis and learned about the potential useful features that would help the HyperEx.

Customer Insights
Personas, Scenarios, Storyboards

Dr. Sophia Allen an HCI research scientist who lives in Pasadena, California with her husband, two kids, and pets. The company she works for is currently collaborating with a lab at UC Berkeley. As a result, Dr. Allen must frequently travel to the Bay Area for work and conferences. She depends on the Hyperloop for a quick and affordable way to travel between Los Angeles and San Francisco.

Frank Kennet graduated from the University of Southern California two years ago as an art major. He wants to break into the entertainment industry as either an actor, singer, or songwriter. Since jobs are scarce in this industry, Frank relies on the Hyperloop to travel quickly between Los Angeles and San Francisco for different gigs.

Design Phase
Sketch & Wireframe

Based on the main features and information architecture of our platform, we created sketches of our main pages and designed initial wireframes.

Final Design
Introducing HyperEx App

HyperEx is an app that uses education and rewards to increase the interactivity of the Hyperloop experience. HyperEx is not a ticketing system. HyperEx has the following sections:

Revolutionizing Transportation
Online Video
Last Thoughts

As a final evaluation of the project, we got feedback from the professors that taught us about user experience. They gave us valuable feedbacks and insights which were highly valuable for our team. Overall I’ve learned three things that can help me on my next project. First one is to define early your product before moving into the design phase. Second is to be flexible to change, but justify your actions. This will help make sure you are making sound design decisions. And last is to be consistent when designing as a team, having a clear information architecture and style guide helps bring everyone’s work together.