The Boring Company
The Summary:
Elon Musk’s The Boring Company is looking to disrupt and improve the public transportation industry with autonomous vehicles used in a network of tunnels under cities. Our task was to design a mobile app to facilitate the experience of reserving a ride in one of these cars.
Since this was a novel concept with no currently-existing app, we leaned heavily on our user research, borrowing design patterns from competing transit apps, and focused on creating the most fluid experience possible. In the end, the product feels like a cross between Uber/Lyft and your city’s subway.
The Team & My Role:
3-Person Team; Lead UX Researcher & Designer
The Timeframe:
2-Week Sprint
The Tools:
Figma, Miro, Asana, Trello, SmartSheet, good ol’ pen and paper
The Process:
The “Double-Diamond” Methodology — Discover, Define, Design, Deliver
The Challenge:
Not only is there no existing app for The Boring Company, there isn’t an existing process or infrastructure for how the service works/would work. Far beyond just designing an app, we had to design the entire end-to-end experience for a user trying to catch a ride with The Boring Company.
User Interviews
Goals of user interviews
Discover what users use public transportation for
Uncover main frustrations with existing forms of public transportation
Find out what existing technology users use for their commuting needs
Learn users’ thoughts about transit safety and Autonomous Electric Vehicles
Participant demographics
4 participants
All tech-savvy daily transit users outside of pandemic
All male, ages 23, 28, 29, 64
User interviews produced a healthy variety of responses, but we were able to distill them into 3 core user needs that we needed to address as we designed The Boring Company app:
More Control over commute schedule and surroundings
Users all mentioned frustrations about inconsistent transit schedules, lack of information, long waits, and stressful environmental factors
A convenient and inexpensive form of transportation
Users expressed that travel modes like the ride-sharing, subway, bus, bike share were good because they were cheap and convenient due to proximity
Assured safety while commuting
Due to this being a novel concept involving autonomous cars and tunnels, users were understandably apprehensive due to safety concerns
Competitive and Comparative Analysis
Due to the fact that there is no existing app for this new service, we had to conduct an extensive C&C analysis of other transit apps. We painted with as broad a brush as possible, looking across the apps associated with many different modes of transit.
After performing a task analysis on these mobile transit apps, we found that they all followed a similar ride reservation process:
Choose a starting point
Choose a destination
Choose trip time
Select desired ride
Pay and receive confirmation
We decided that because The Boring Company was so new and potentially unnerving that we would follow a similar flow to share design patterns with these apps to create the sense of ease that comes with familiarity.
User Persona
Gabriel quickly became a valuable member of our team. After hours of deliberating on which direction to take this app, we came to a breakthrough in what Gabriel’s true goals and needs were.
We realized that we were not just designing a transit experience, but we were doing so to mitigate the stress that comes with the daily commute. The missed trains, being elbow-to-elbow with strangers (especially during a pandemic), the traffic, the anxiety over being late – we were creating this app and service to solve all those issues and improve our users’ overall quality of life.
With Gabriel’s needs and goals in mind, we knew to stay committed to delivering the most seamless, usable, and safe experience possible for our users.
After this turning point, we were able to properly frame the remainder of the design sprint and stay focused on exactly who we were designing for. The lens in which we looked through from here on out always looked to our users’ best interests by trying to maximize the safety, comfort, and efficiency of the end product. Our Problem and How Might We Statements reflect that.
Problem Statement:
Public transportation commuters need to be able to rely on up-to-date schedule information and feel comfortable in their surroundings when traveling because they are already giving up a good deal of control when using public transportation.
How Might We Statement:
How might we alleviate stress from the commuter by eliminating traffic, safety concerns, and lack of control while normally using public transportation?
User Flow
Knowing that Gabriel wants to remove as much stress as possible from his commute, we looked to make our user flow simple, intuitive, and swift to keep him on that happy path. He would likely be using this in-transit and with a time crunch, and we had to keep that in mind.
This flow helped us envision what this process would look like once we eventually started designing wireframes.
Information Architecture
We recruited 4 participants to complete a card sort to figure out what our IA would look like. I decided to borrow from our C&C analysis again to create an inventory of features and options one might typically see in a transit app.
It was a challenge to develop the information architecture for an app that is process-oriented without a ton of inventory.
In the end, because this app was likely going to be used on the go, I decided to keep the navigation simple like the user flow and allow for quick access to essential functions like trip management and account preferences.
Design Studio
With our user persona, user flow, and information architecture figured out, it was time to see what this thing would look like!
Our team launched a design studio to rapidly generate some UI ideas, come together to pick the best parts of them, and then separate again to iterate some more.
This led to some great exchanges of ideas (and some late nights) as we tried to piece all the best components of our sketches together before digitizing our wireframes.
Mid-Fidelity Wireframes
As we digitized our screens, we made sure to pay special attention to our user persona and purpose of the app itself.
Because the app is task-oriented, time sensitive, and potentially used on-the-go by someone in a rush, we chose to emphasize maximum usability to reduce stress caused by cognitive overload. To achieve this, we:
Followed Fitts’ law of size and proximity, making buttons as big and easy to click as possible
Designed related elements on the page to be close in proximity to one another
Spread the process across multiple screens (but not too many!) for visual rest
Gave the user the consistent option to edit their inputs to avoid feeling overwhelmed by having to restart the process
High-Fidelity Wireframes
After a round of usability testing (we’ll get to that in a moment), we bumped the frames up to high fidelity.
Points of emphasis and why:
4 C’s: Clear, Concise, Consistent, and Communicative design choices to relate back to our persona and enhance the ease of commuting and quality of life goal of the user
UX Writing Best Practices: Use of second person speech and active verbs to clearly address the user and guide experience
Visual Design:
Selected a primary blue color for the main CTA button for consistency, but also because it’s a calm and secure color for users to feel a sense of safety in
Use of color to direct user attention in key moments ike selecting a station or following the ride’s progress
Electric purples and blues to add delight in the right places and reflect the brand’s style
Purposefully not adding many images across the screens as to not distract the user from reserving the correct ride
Style guide we created for consistency across our high-fidelity screens
Image from The Boring Company station under the Las Vegas Convention Center that served as inspiration for our color scheme
Usability Testing
Two rounds – One after the mid-fi wireframes, one after the first iteration of the hi-fi prototype
Iterations made between mid-fi and hi-fi wireframes based on feedback:
Changed opacity on card on home screen to not see map behind it
Clarified car selection screen to say “Seats x” instead of just a number
Made entire field clickable in car selection screen as opposed to a button
Created field on passcode screen for user to see the digits typed
Added screen indicating passcode entry was successful
Added info of car location in station
Added “Enter” button on passcode screen
Rearranged icons on in-ride screen to mitigate confusion and prioritize features
Added text under each icon in bottom nav
Usability test script I crafted
After iterating on the mid-fi frames and building out our hi-fi prototype, we conducted six usability tests, continuing to test out the functionality of our app’s happy path.
We measured time to complete each task and any errors across the tests, along with qualitative feedback.
We achieved an average time of 1 minute and 27 seconds for users to find and reserve a ride with only 1-2 errors across each test.
Following testing and feedback, the major iterations made to the prototype were:
Add in already-populated “Current Location” to first step of home page and simplify instructions
This better follows established design patterns in similar apps that our users will be familiar with and will reduce confusion we previously observed
Visibly show maps changing as stations are selected
This gave the user feedback that the information they are entering is indeed correct and being recorded
Revise trip confirmation screen to bring “Reserve Ride” above the fold
This was the place our users most often got tripped up and needed addressing
Before this iteration, users did not know they had to scroll down to click the “Reserve Ride” button
We solved that by eliminating a redundant section and making the button easily accessible on one screen without needing to scroll
The Final Prototype
If you would like to click through the prototype, just click the expand button in the upper right of the frame below. You can also take a trip through the prototype here. You can watch a walkthrough on the video below as well.
The Takeaways
Designing an app for a brand-new concept was a challenge. I truly appreciated my team’s dynamic and willingness to listen to new ideas when the direction of the app could have gone in so many different directions. I’m proud of the work we put in to design something out of thin air and to stay committed to achieving our users’ goals throughout the design process.
It was great to learn that you can be handed a design brief with no existing product and a strange concept, and still come together with the right team to design something that you’re proud of and can help people. To me, that’s what it’s all about.