top of page

Overview

hyperloop.jpg

I joined a design challenge with fellow designers. We all picked different project and my chosen one was "Controlling a hyperloop sled."

In just eight hours, I envisioned a user interface that aimed to simplify the complex task of managing this high-speed transportation system. It was a fast-paced, creative endeavor that sparked some exciting design ideas.

Hyperloop Concept

Project duration: 8 hours

 

My roles & responsibilities: In this project, I worked independently, handling the research phase, sketching, and design concept.

 

My Deliverables: Persona, sketches, GUI samples ​

 

Tools used: Photoshop

Project

Understand

The Context

Year 2030. Cities have begun building infrastructure for a 3D transportation grid. I’ve been hired to create the in-vehicle UI/UX for an hyperloop sled.

The Objective

Design 3-states of this concept UI

1. Launch: After inputting the destination, confirm and launch the sled

2. Speed Selector​: Ability to change speed and show how cost, ETA, and carbon footprint changes

3. System Intervention​: Make it clear to the user that they are no longer in control, and provide an explanation 

The Problem

This vehicle carries 1-4 passengers, but allows the passengers to control their speed of travel via a small embedded touchscreen. The system can override user preferences to speed up or slow down the sleds. Faster travel expends more energy, and thus increases the cost of the ride.

Define

Who?

daniel.jpg

Daniel

Age: 40

Work: Data Analyst

Family: Married

Location: Los Angeles, CA

Technology Exp: Tech Savvy

"I want to be able to get my whole family safely and in a timely manner to the destination of our choice."

Challenges

• Doesn’t have much personal time

• Always looks for ways to entertain his kids while driving

• Would like to use auto-pay feature to save time on transactions

Goals + Motivations

• Wants to optimise communiting time  

• Always looks for ways to entertain his kids while driving

• Would like to pay for services electronically and seamlessly whenever possible

How?

Users would scan their phone or membership card to unlock the ride. The ride would then welcome the user with their name and load the user’s information.

card_hyperloop.jpg

User’s Information loaded on scan

• Recent rides

• Favorites/Work/Home/Recent addresses

• Payments history and information

• Mood preferences with light, colors and music which would be pre-recorded in the app and would load on scan

• Co-riders list

Create

Ideation

• Enable the UI to be easily accessible from both the driver and passenger seats (centered UI)

• Implement a sliding menu that includes the user's settings, destination, and time

• Switch between dark and light UI themes based on outdoor lighting conditions

• Main features to be added: carbon footprint, speed, cost, optimal range (Cost/CO2)

hyperloop_sketches.jpg

Prototype

Launch

Once a user has input their intended destination, give the user a way to confirm their trip preferences and launch the sled.

hyperloop1.png

Speed Selector

Once the trip is underway, give the user a way to change their desired speed within a min/max range, and dynamically show how cost, ETA, and carbon footprint changes as they make adjustments.

hyperloop2.png

System Intervention

If the system must intervene to either accelerate or decelerate the sled, make it clear to the user that they are no longer in control, and provide an explanation for the system intervention.

hyperloop3.png

Other Steps

Testing Wireframes

Before finalizing the design, I would perform usability studies on the wireframes and the entire user flow. By involving users in this preliminary phase, we can gather invaluable feedback. That informs and refines the design's overall usability.

 

Iterations

Wireframe testing would allow for the iterative process not only to identifies potential pain points and usability issues but also to ensure that the final product aligns more closely with user expectations, ultimately leading to a more satisfying and effective user experience.

Implementation 

Upon finalizing the user flow and achieving the desired aesthetic for our UI, I would work on creating a meticulous design system. This comprehensive framework serves as the cornerstone for presenting the UI to our development teams, ensuring unwavering consistency and uniformity throughout the application. By encapsulating design elements, guidelines, and components within this unified system, we not only streamline the development process but also uphold a harmonious and refined user interface, thereby delivering a seamless and visually appealing experience to users across the application.

Graphical QA

Upon the completion of UI implementation, a critical step in my process involves conducting a meticulous graphical quality assurance (QA) assessment. This rigorous evaluation is essential to guarantee the precise execution of the design upon delivery. By scrutinizing every detail and comparing it against the established design standards, we ensure that the final product aligns perfectly with the intended visual aesthetics and user experience, thereby delivering a polished and error-free UI to our users.

Data Analysis 

After the product has been delivered to users, I would closely analyze user data and gather feedback to shape the product's evolution and refine future feature enhancements for our roadmap. This data-driven approach not only helps us understand user needs and preferences but also ensures that our product remains adaptive and responsive to changing demands, ultimately enhancing the overall user experience and driving continuous innovation.

bottom of page