HyperEx Conpanion App

Portfolio

Role

UX + Visual Designer

Date

Janury, 2017

School

UC Irvine

Overview

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 created a logo for the app and wireframes credits and trivia feature. In the end, I participated in creating the online manual.


Brainstorming

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

Portfolio

Project Selection & Justification

How we decided on the final project topic.

Scope: A mobile app, we can focus on creating essential features with a high amount of usability.
- Plentiful references available
- Connected to a very innovative form of transportation, which opens many design opportunities:

  • It cross-pollinates economies with its faster than airplane speed

  • It is green and emits zero emissions

  • It is cheap, costing - $20 to travel between Los Angeles and San Francisco

- Access to the right tools
The software we are using for wireframes and prototypes handle mobile experiences very well: Balsamiq Mockups and Sketch 3.


Design Process

1. Product Analysis

Online Survey

The set of questions on the survey asked 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.

Portfolio

Competitor Analysis

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

Portfolio

2. Personas, Scenarios, Storyboards

Portfolio Portfolio

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.

4. Sketch & Wireframe

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


Portfolio Portfolio Portfolio

5. Logo & Style

Logo

After researching the Hyperloop, I find out the most popular and user-friendly visual design. We finalized the logo, color, and style and started to design the user interface. After iterations, sketching, feedback sessions, and design iterations, the final product and main features will be shown in details.

Final Product

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:
• SavingsMode
• CreditsMode
• RewardsMode
• FactCards
• SettingsMenu

Main Features

1. Saving Mode

shows how much a user is saving monthly (e.g. money, time, and environment) from riding the Hyperloop versus other forms of transportation. The first thing to note is that the mode is structured like a funnel: It shows high-level information first, and allows users to break down that information into granular details. The entire experience is maintained in a single screen. As data is broken down from high-level to granular, the screen shift to show the new information.

Logo

2. Credits Mode

This mode shows the user’s total earnings including:
Credits - Currency for purchasing real world rewards in Reward Mode. Users earn by riding the Hyperloop.
Experience Points - Points used for leveling up and gaining badges.
Experience points are visualized as a progress bar. Users earn experience points by riding the Hyperloop.

Credits

3. Rewards Mode

This mode shows a list of rewards that can be purchased using credits and badges. Each reward is related to the Hyperloop’s mission of environmentally-conscious travel. For example, one reward may be admission to a national park. Rewards are displayed as a card with the following information: image, title, and description. However, the actual layout may differ based on the reward type.

Rewards

4. Facts Mode

These are cards at the top of every mode that show Hyperloop facts.

Facts

Reflection

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.





Next Project: