LikeHome C A S E S T U D Y
Travel App
1
2
Post-Covid Travel App
GOAL
Throughout my boot-camp I will be researching and creating designs for a fictional travel app designed to be used by traveller in a time post-Covid19
MY ROLE & RESPONSIBILITIES
I will be collaborating on conducting user research with my study peers, doing UI prototyping and reiterating on those designs as per the “Double Diamond” development method.
TIMELINE
4 weeks.
U S E R R E S E A R CH
Jake McKeown
3
Homework 1
I N T E R V I E W P L A N
The Interview plan phase was daunting, much like starting any new project, but like Lao Tzu once said “A journey of a thousand miles begins with a simple step”. There was a big focus on asking the right questions to get the qualitative data I was after. See the plan here and the transcripts on the next screen:
https://drive.google.com/file/d/1jHOORY4uy9dKvLl_PPfyPz7ohxrDr0Pe/view?usp=sharing
4
T R A N S C R I P T S
Interview transcripts below
https://drive.google.com/file/d/1XdWh0WPBqV02EGCXT6ec9_9wp5__a5YX/view?usp=sharing
https://drive.google.com/file/d/1q709NDOZEwjGsC5S4n-2yUfbX8lhIvKL/view?usp=sharing
5
A F F I N I T Y D I A G R A M
The Note wall and affinity diagram were a great way to organize the interview data from the interviews and categorising it into something useful, like potential features, see it below�https://miro.com/app/board/uXjVOGHPgEc=/?invite_link_id=561434777560
6
C O M P E T I T O R A N A L Y S I S:
The competitor analysis phase was super helpful in seeing what potential shortfalls may happen to the app and what features are sought after by users. By reading customer reviews and running the onboarding process through a phone emulator with 3 core competitors I did a spreadsheet and an onboarding and booking test, this is more than what was required but I see it as hugely beneficial.�See the Competitor spreadsheet here:�https://docs.google.com/spreadsheets/d/1olK2Bal5VAY8SDefmG2Zd82DIdL1qmawafFMe0GnL3Y/edit?usp=sharing��See the onboarding & booking test here: https://miro.com/app/board/uXjVOC1lx5A=/?invite_link_id=342390562077
7
E M P A T H Y M A P
The empathy map really helped in shaping my user persona and help put myself in the shoes of the person, see it here: �https://miro.com/app/board/uXjVOGFgcBc=/?invite_link_id=80307514006
8
U S E R P E R S O N A
User persona snipped below, see it here:�https://www.figma.com/file/7HHpHSZMlE3H8zGaULHRY9/User-Persona?node-id=0%3A1
9
D E F I N I T I O N�&
I D E A T I O N
Jake McKeown
10
Homework 2
U S E R I N S I G H T:
“Our users, 25-35 year old millenials need to quickly compare and book flights and accommodation because they are busy people and booking travel is usually not a fun experience.”
11
P R O B L E M S T A T E M E N T:
“Our competitors are failing to retain users because they are becoming frustrated with having to book and compare flights/accommodation in more than one place.”
12
I D E A T I O N - “I like, I wish, what if”
The ideation phase was super helpful as it allowed me to really hone in on what users required, the “I like, I wish, what if” method allowed me to really focus on what users may be after in the app. The “I wish” and “what if” sections allowed me to use my user research and user persona to imagine what they are like and what implementations they would appreciate.
The “I like, I wish, what if” diagram: https://www.figma.com/file/r9xwu6DmVueQXvcq0AjCpG/JM-Travel-app-I-Like%2C-I-wish%2C-What-if?node-id=0%3A1
13
I D E A T I O N - Feature Prioritization Matrix
The feature prioritisation matrix allowed me to to realise what features would require the least work but could have the biggest impact for our users in the real world, although this matrix may not be super in depth, I have some experience and knowledge in development so tried to be as realistic as possible. For example, Airbnb integration may seem complicated but there is actually an API for this feature.
See my feature prioritization matrix here: https://www.figma.com/file/77TQqEMfHdPiM33bEzr3kB/TRAVEL-APP-FPM?node-id=0%3A1
14
I D E A T I O N : VALUE PROPOSITION CANVAS
The value proposition portion of the research helped solidify how our users want to use the app and what benefits they will get out of it by breaking down their core needs, pains and gains. I believe the Airbnb integration and having a massive, but easily searchable range of options will help retain users and separate our app from the rest of the pack.
See the Value Proposition canvas below:
https://www.figma.com/file/ipS8gUx436YASKT9EOAcns/Value-proposition-for-LIKE-Home?node-id=3%3A2
15
S T O R Y T E L L I N G: USER SCENARIO
Using the value proposition matrix and the feature prioritization matrix I was able to create a good basic user scenario on how our prospective user may use the app.
See the user scenario here:
https://www.figma.com/file/fBeWcB5pxVPwFhaCB3izKj/USER-SCENARIO-TEMPLATE?node-id=0%3A1
16
S T O R Y T E L L I N G: STORYBOARD AND USER JOURNEY MAP
The Storyboarding and user journey map process were greatly beneficial as they allowed me to really flesh out what possible feature may have been missed during the feature prioritization process; for instance, Google/Facebook account integration wasn’t thought about until the user journey map process.�See my Storyboard below (please note I drew with a mouse):�https://www.figma.com/file/FtLlJ5sxMb4BttZKg0oSyI/STORY-BOARD?node-id=0%3A1
See my User Journey Map at the link below:�https://www.figma.com/file/mQCorhZ0w6NnzW52rPnKGO/User-Journey-Map?node-id=0%3A3
17
P R O T O T Y P I N G
Jake McKeown
18
Homework 3
U S E R F L O W:
The user flow was super helpful for mapping out my sketches and eventually my lo fi prototypes. After receiving feedback from my instructors and peers around the user flow chart I decided to strip it back to just the on boarding process but expand on what each screen contains and why it’s being included�See it here: https://www.figma.com/file/Va9MqB9eZDalFmRTDtXg6t/User-flow-v2?node-id=2%3A60\
19
USER FLOW
20
P A P E R P R O T O T Y P I N G: Sketches
The paper prototyping process was very easy to do after referencing the user flow diagram I did in the previous step, I’m finding throughout the process that as each previous step is done well it sets up the next step to be done better. Having a well thought out user flow set me up to have a well set out paper prototype. �The screenshots are in the next slide and you can view the high res files here:�https://drive.google.com/drive/folders/1apThE3iI7km17CQWe5Op6YcoA8t6JKES?usp=sharing
21
P A P E R P R O T O T Y P I N G: Sketches
22
My Paper prototypes
P R O T O T Y P E: Lo-Fi Wireframe
23
P R O T O T Y P E: Lo-Fi Wireframe
Using the paper prototype as a guide made making the Lo-Fi prototyping stage quite easy as I just had to recreate the what I had sketched on Figma.�See it at the link:�https://www.figma.com/file/0qXSLdIf0DzevYC75SX2YB/LOW-FI-PROTO?node-id=0%3A1
24
P R O T O T Y P E: Hi-Fi Figma Prototype
25
P R O T O T Y P E: Hi-Fi Figma Prototype
I really suckered myself with the clickable Hi-Fi prototype as I really wanted to make it looks functional, it was easy to set out but creating a hover function for each button made the process a bit of a pain but worth the outcome!�See the boards here:�https://www.figma.com/file/XuXJWecy4J9qXgMORkh0uZ/Clickable-prototype-Jake-McKeown?node-id=8%3A108
Run the prototype here:�https://www.figma.com/proto/XuXJWecy4J9qXgMORkh0uZ/Clickable-prototype-Jake-McKeown?page-id=0%3A1&node-id=1%3A2&viewport=241%2C48%2C0.44&scaling=scale-down&starting-point-node-id=1%3A2
26
T E S T I NG
&
I T E R A T I N G
Jake McKeown
27
Homework 4
U S E R T E S T I N G
The user testing phase helped bring the whole project together and helped highlight the things I missed when I was initially making the prototype as well as establishing more cohesive design patterns
28
U S E R T E S T I N G: R E S U L T S
From the user tests that were carried out I was able to figure out what to iterate using a 2x2 matrix, this allowed me to effectively map out what would was worth iterating on while maximising my time and user impact. The matrix is on the next slide but both can be seen at the link below:
https://miro.com/app/board/uXjVO_vKN-A=/?invite_link_id=881638261881
29
2 X 2 M A T R I X
30
U S E R T E S T I T E R A T I O N S
The changes made based on the user testing where as follows: .
Luckily the people I tested where happy with the prototype and said it was fairly intuitive.
31
iOS M O C K U P
Adding the iOS features to the prototype made it feel a lot more real, even though they were small changes like adding the top status bar and the home bar I felt it really helped sell the idea and vision so much better.
32
iOS P R O T O T Y P E
Making the clickable iOS prototype was by far the fun and most rewarding part of the process, made all the late nights and stress worth it!
33
F I N A L T H O U G H T S
This is my first ever case study project but found it to be so much fun and learned a lot about the design process and how having a good base in the ideation phase creates a strong finisher in the prototype phase at the end, every process helps strengthen the next one has left me motivated to do more in my own time and keep furthering my skills!
34