My Role
UX and UI
User Research
Persona Development
Wireframing
Prototyping
Information Architecture
Team
Solo Project
Timeline
8weeks
Challenge
Flashback is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with Elon Musk, Virgin has been able to make time travel tourism available to all of us. Flashback is looking for designing their new brand and set up an e-commerce responsive website so they can sell travel packages and tickets to different times.
Outcome
To design a responsive e-commerce website that will allow users to book time travel packages. To design a brand aesthetic and visual language that is trustworth, reliable, and will speak to the futuristic yet historical nature of time travel.
Immersion
Market Research
74% of travelers use social media while traveling.
85% of travelers use mobile devices to book travel activities.
97% of Millennials share photos on social media while traveling, compared to 60% of all travelers.
Why Americans travel:
85% to see my child excited about the experience
82% to relax/reduce stress
81% to make memories
78% for fun, excitement, and adventure
73% to see or do something new
Millennial's are 13% more likely to travel to a destination with cultural or historical significance.
20% of all travelers are Millennials, and they take an average 7 trips per year.
Roughly 35% of Millennial travelers prefer upscale and luxury hotels/resorts.
25% of families went on a family vacation that was 1-3 nights in duration.
Four in ten U.S. adults are planning to take a family vacation in 2019. Baby Boomers expect to take 4-5 lesiure trips in 2019 Women book tours and activities 67% of the time
After market research was complete, I performed a competitive analysis to find strengths and weaknesses of companies in the travel industry. This allowed me to determine strengths to focus on and weaknesses to avoid while building Flashback.
User Interviews
To gain a better understanding of fears, goals, needs and motivations in respect to traveling, I conducted a series of user interviews. I found five frequent travelers and asked open ended questions regarding their travel and online booking experience. These interviews allowed me to dive deeper and better understand Zeit's users. Moving forward, I created an empathy map in order to synthesize the results of the user interviews.
Research Synthesis
I recorded all the observations from the user interviews onto sticky notes and assigned each interviewee a color. Next, I placed these sticky notes into quadrants of "say", "do", "feel" and "think". Once all the sticky notes were on a wall I looked for patterns and grouped similar sticky notes together. Sticky notes started dropping off the wall like crazy! Next time I know to use the extra sticky ones. After using scotch tape for some adhesive help, I was left with different clusterings of sticky notes. From these clusterings I came to the three prominent insights and corresponding needs.
Patterns gained through the research. Of all the participants interviewed, all of them shared common responses.
1. Transit and flight limitations
2. Budget, flights, and plans
3. Exploring the culture, and whatever city has to offer
4. Reserving and planning in advance is good on
pocket and travel plans.
5. I use multiple platforms, research, price match
and then make my reservations
6. I need a balance of peaceful moments and
adventure activities on my trip
7. I find my next travel destination through social media.
Needs
1. Finding the shortest and most affordable transit options.
2. Reserving and planning in advance such that I can save.
3. Learning more about the culture, people and the city.
4. I need to find the best deals.
5. I need to feel safe and secure about my plans.
6. Finding the right destinations, such that I can enjoy my trip fully.
User Persona
Based on the secondary and primary research conducted, the following user persona was developed. This user persona was used as a guide throughout the following design process.
Define
Project Goals
After identifying user goals, overall goals can be drawn by taking into account business goals and technical considerations, and comparing the three categories to narrow down key features to be considered for the product.
Card Sort
Once I knew who I am designing the website for, and why, it was time to sort the content. In order to sort the content in most efficient and understandable way, card sorting is a super easy and cheap method to get users eyes on very early on in the process.
I particularly needed idea on how the travel and time will work in a time travel website. Thus I wrote down iconic dates and times from history, and used Optimal sort for conducting the exercise with 8 participants. The results allowed me to further build out the site map for the website.
Ideate
Site Map
Using categories derived from card sorting, an overall structure for the product can be drawn identifying main pages, sub-pages, and features throughout the website. This will assist in creating task flows and locating features to be designed
Wireframes
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Style Tile
A visual document was created to further define brand image by specifying fonts, colors, logo usage, and imagery based on brand attributors and inspiration gathered from moodboards. This guide will assist in designing the user interface for the product.
Prototype
Features and interactions were mapped out in Figma using the high-fidelity wireframes to provide a functioning mockup of the product for users to interact with during usability testing.
Test
Usability Testing and
Affinitization
This usability test was conducted with 5 participants in person and remitely. The process is important to determine data insights, and create data points and eventually spot patterns. The usability testing helped figure the Task Completion rate and Error Free Percentage.
After usability testing was complete, I created a usability test findings document. In this document I noted the error free rate, task completion rate and time it took participants to complete each task. I also transcribed what my participants said and did while moving through each task.
In order to synthesize the test findings I created an affinity map. To begin, I assigned each participant a sticky note color. Next, I recorded the usability test findings onto sticky notes and placed them on a wall. I then looked for common themes and grouped similar sticky notes. Using the following insights, I reiterated Flashback's UI.
Final UI KIT and Logo
Final Prototype
Reflection/Next Steps
This project truly helped me understand how important it is to back up your design decisions at every step. Either by leveraging design patterns or going back to the artboard and taking it to the users and testing it, we always need of data backing up design decisions. For example by following design patterns for booking experience, I was able to create error free experience, with a task completion rate of 100%. Moving forward I will continue to conduct test with my persona, and further iterate it.
1. Handoff design specs to engineers using Zeplin.
2. Build more pages that will allow users to tailor their trip.
2. Validate design through website analytics.
3. Continue to iterate using the design thinking process.