Sir Richard Branson Chooses You
To design a responsive e-commerce site selling travel packages to the past.
Role
UX Research
UX/ UI Design
Branding
Tools
Figma
OptimalSort
Miro
Photoshop
Timeline
Feb - Mar 2021
Problem
A new technology, Time Travel, requires an extra step of booking a flight to the Time headquarters in Berlin. This additional step must be clearly communicated, while convincing users to book travel packages.
Solution
A responsive e-commerce website that follows Virgin Group branding guidelines & business values, taking the user through a seamless journey from learning about a new technology to booking a travel package.
Discovery
Understanding Brand Values & Goals
Communicating Expectations
Reviewed Virgin's values and goals (through articles because fictional project) to understand brand values and visual guidelines. Determined existing audience from user reviews & reports. Collected potential collaborator expectations, putting them all into an easy-to-understand venn diagram.
.png)
Comparative Analysis & Persona Archetypes
Discovering Opportunities:​
​
-
Video for hero with inspirational story?
-
Clear CTAs & navigation?
-
Visuals with purpose of education & communicating safety?
Research & Empathize
User Interviews
Need Finding, Uncovering Motivations & Pain Points
​
I interviewed 4 people with differing backgrounds to find out their travel habits, pain points, & their initial attitudes & questions about time travel.
Patrick, 36
Travels 3-4 times/yr
Motivated by:
-
New technology
-
Time with family.
​
Pain Points:
-
"When information is hard to find."
-
"When I can't get answers to my questions."
​
Time travel:
-
"Cool! Can I save time by time traveling?"
Jay, 26
Travels 5-8 times/yr
Motivated by:
-
Adventure
-
Making memories with friends
​
Pain Points:
-
"Bad customer service when emergencies happen."
​
Time travel:
-
"Is it safe? I like adventure, but that sounds dangerous."
Lucy, 43
Travels 8-10 times/yr
Motivated by:
-
Wine-tasting
-
Shopping
-
Convenience
​
Pain Points:
-
"When there's too much planning involved."
-
"When information is ambiguous."
​
Time travel:
-
"How does it work? I want to know the logistics."
MaryAnne, 65
Travels 8-10 times/yr
Motivated by:
-
Leisurely exploring new places
-
Meeting new people
​
Pain Points:
-
"When lodging doesn't offer what I want or I can't clearly find what they offer."
​
Time travel:
-
"Time travel? How romantic, but do I get modern amenities?"
Persona Design
Summarizing the research into The Early Adopter​
I created this persona, choosing the early adopter because this persona would be first to arrive to try a new technology, but also want to find out everything about it.
Define & Learn
How Might We's
Key Design Challenges that Emerged
How might we anticipate user questions & answer in a way that is not overwhelming, but invites exploration?
How might we best showcase all 289 trips in an easily navigable way?
How might we integrate satisfying & immediate customer service?
Continuous Research
Learning from Existing Models & Why They Work
Card Sorting
Learning How People Label & Categorize
I recruited 7 participants to categorize 20 different trips into categories of their own making. All 7 participants categorized the trips in completely different ways.
At first, I thought, well, this isn't helpful. BUT THEN, I realized that this was the purpose behind having both the search AND filter options. People are different and view things differently, so they should have the freedom to enter in keywords or look at offered keywords and narrow down their preferences that way.
What's in a Name?
Sticking to the Brand & Reducing Cognitive Load
Instead of ZEIT (the name given on the project brief), I decided to go with VIRGIN TIME TRAVEL. It didn't make business sense that Virgin wouldn't want its name on such a landmark subsidiary. Plus, 'time travel' is easier to translate into different languages, whereas Zeit takes an extra step of thinking & learning. The simple 'Virgin Time Travel' name reduces a bit of cognitive load as there's already a whole new technology to learn about.
Ideate
Sitemap & Task Flow
Information Architecture & the Journey Ahead
​
In order to get a clearer view of what information I wanted to present to the user at what point in their journey, I created a sitemap to see the overall information architecture then a task flow and user flow to see how a user might go through that information.
.png)
.png)
User Flow
Designing for the Early Adopter
With limited time, I chose to focus on the Early Adopter persona for the user flow as this persona would be the first to hear about this site, the first to come to explore, and most likely to explore everything the site has to offer with the end goal of booking a time travel trip.
Initial Sketches
Taking inspiration from existing models
I took existing popular sites as inspiration for my initial sketches because of Jakob's Law:
-
Users will transfer expectations they have built around one familiar product to another that appears similar.
-
By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.
Nat Geo Expeditions
AirBnB
Virgin Hyperloop & Galactic
Prototype
Annotated Lo-fi Wireframes
Lesson #1: Get feedback early & often.
In retrospect, I would've benefitted from pausing here to see if my lo-fi wireframes answered the "how might we" questions. I ended up making quite a few changes after the usability testing. Changes might've happened anyway, but I will seek feedback early & often for future projects.
Lesson #2: Designing for USERS.
At this point, I went through a mentor change, so I felt like I couldn't get proper & timely feedback. However, looking back, I realize that I'm designing for users, not a single mentor, & would've greatly benefitted from simply reaching out to friends & testing a booking task or doing some A/B testing.
Lesson #3: Sometimes, inspiration strikes unexpectedly, but most times, you have to search for it.
After the lo-fi wireframes, I ran out of steam & got hung up on all the bad things that happened in the past. So, I took a walk & talked to myself (as one does). What about the time travel would inspire you to keep going? I landed on my favorite, Ella Fitzgerald. Ladybird gave me the boost I needed & also made me think of Virgin Time Travel's value proposition: Anyone can see present-day renditions or reenactments, but who in the present can say that they're going to experience the exact moment when Ladybird opened her mouth & everyone in the room stopped & turned to listen in awe?
Moodboard
Virgin Atlantic's Strategic Collaboration &
Virgin Galactic's Inspiration
I looked at several existing Virgin Branding Styleguides, basing many of my decisions off of already existing models, including key words & tone of voice.
UI, Logo, & Branding Design
Designing for Package Deals with Virgin Atlantic
For colors, I decided on the purple to red gradient as it was reminiscent of Virgin Airlines' bright red primary color because, within the checkout flow, I planned for an option to book the flight to Berlin HQ via Virgin Atlantic without ever leaving the Time Travel site. It would all be part of a package deal to drive more business to all things Virgin. Color can be a subtle, but powerful cue to users for both brand recognitions, building trust, and differentiating steps during a process.
The logo was inspired by Virgin Galactic's logo to keep consistency across Virgin subsidiaries, but different enough to stand as its own brand.
Test & Iterate
Usability Test Results
The Search Bar Conundrum & Providing Context
After conducting 5 Usability Tests, I collected all the data into an Affinity Map & pulled out these actionable insights:
-
5/5 users wanted more context on the landing page instead of a search bar because it's a new product and they don't know what's offered yet.
-
5/5 users wanted to know how time travel works.
-
5/5 users found the steps to time travel helpful, but wanted a bit more clarification.
-
5/5 users enjoyed the Trip Details page because it felt familiar, had all the information they wanted, and felt inviting of exploration because of the photos, reviews, and access to information about time travel experts.
.jpg)
Insight into another Law of UX
​Peak-End Rule: "People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
-
Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end user.
-
Remember that people recall negative experiences more vividly than positive ones."
Final Designs
Providing Context & Keeping on Brand
"Cool video goes here."
Since 5/5 testers wanted more context instead of a search bar from the start, I decided to go with my original video idea. Plus, it would match the other Virgin subsidiaries, as well as, provide a great marketing opportunity.
.png)
Color as Cues
Changing the Background to Highlight Important Info
The gradient background in the previous version didn't give enough cues to users that a different section was happening, so I changed it to a light background to make it clear, keeping the gradient on CTA's instead.
.png)
No Changes Here
Some Things are Done Right, so They Stay
This page and the Trip Details page were everyone's favorites, so they stayed as is. I annotated for the developer and that was the end of this project. Yay.
.png)
Reflections
Applying My Own Creative Process to the Design Process
Working through a Creative Rut
As mentioned earlier, I had to look for inspiration in the middle of this project. Instead of getting caught up in the technicalities of time travel, I had to learn to search for what inspired me to keep going in this project because there were no actual users that I was designing for. This is valuable for me to know about myself, so that if I hit another rut or burn out, I can remember to take a walk and seek out inspiration.
.png)