I’m a product designer based in Amsterdam, the Netherlands.
I’m passionate about helping people feel more confident in their day to day life
by building technology that is intuitive and accessible.
Currently working on..
Hi, I’m Robin Brands
I'm currently helping a company in the beauty industry which offers skin analysis to customers by making pictures of their skin with an ipad in combination with a photo device.
I helped analysing the problems at hand by making a customer journey map and optimised the flow of their app. I did this by first making sketches by hand, followed by mid fidelity wireframes made in Figma.
In a workshop I presented my ideas to various stakeholders as the company owner, the lead developer, and head of marketing. We're going to iterate on these ideas to make the customer journey as enjoyable as possible.
For a full testcase for the UX designinstitute see
0031619006797
RobinBrands.rb@gmail.com
LinkedIn.com/in/RobinBrands
UX Design
Hotel UX
A mobile application for booking a hotel room designed for a fictional hotel chain.
A case study for the UX Design Institute.
Credit rated by the Caledonian University.
the PROJECT
The challenge
The project goal
Team | My role
Tools used
Timeline
UX Techniques
Process summary
Design Process
- Search & Select
- Booking
- Entering details
My goal was to apply the UX Design process to find ways to streamline the booking experience for people wanting to book a hotel room, to create a customer journey with as less user friction as possible. This to increase the customer conversion rate.
- Solo role
- UX researcher
- UX/ UI designer
Figma
Illustrator
SurveyMonkey
Google Forms
Screen flow
Camtasia
Sept 2020 - April 2021
- Competitive benchmarking
- Online survey
- Note taking
- Usability test
- Affinity diagram
- Customer journey map & customer value curve
- Userflow
- Sketching wireframes
- Wireframe + annotations
- Prototyping
My initial approach was to understand similar digital products and, more importantly, to observe how real people use them and learn more about their mental model, behaviours, pain points and positive findings. I discovered many points of friction and opportunities for improvement. I defined and articulated the problems and gave structure to a large volume of raw data. This served as a framework to design effective flows and interactions, which later guided me to implement and test the solution.
This is an overview of the entire UX design process I went through:
UX Techniques
- Competitive benchmarking
- User research
- Affinity diagram
- Customer journey map
- Flow diagram
- Interaction design
- Prototype
- Usertest
Identify the problem:
Articulate the problem:
Solve the problem:
Test the solution:
Solve the problem:
Test the solution:
Identify the problem:
- Affinity diagram
- Customer journey map
- Competitive benchmarking
- User research
Articulate the problem:
my general findings
Good design starts with user research.
Interactions design should be simple yet
effective,
not overwhelming.
Software should be accessible to
makes the user
feel in control.
Information should be organised in a logical way
and reflect the users mental model.
Software should be perceivable, intuitive, forthcoming.
The language used should be humane and soft.
Quick skip to the section you are interested in..
In a hurry?
1. Competitive benchmarking
2. Online survey
3. Note taking
4. Usability test
5. Affinity diagram
6. Customer journey map
7. Flow diagram
8. Initial hand sketches
9. Wireframing
10. Prototype
Process examples
1.COMPETITIVE BENCHMARKING
HOW ARE OTHERS HOTEL APPS SOLVING THE SAME PROBLEM?
GOAL
SCOPE
The main goal of the competitive benchmarking analysis is to understand the competitive landscape of hotel booking apps. This means the first step was to review similar digital products. This allowed me to identify how others are solving the same problem.
I examined 4 mobile applications for booking a hotel
(3 hotel chains, 1 booking aggregator) and benchmarked
them to see what design frictions I should avoid and what
opportunities I could emulate.
I focussed especially on key features:
Homepage,
Search and select,
Booking a room and
Entering personal details.
I examined 4 mobile applications for booking a hotel (3 hotel chains, 1 booking aggregator) and benchmarked them to see what design frictions I should avoid and what opportunities I could emulate. I focussed especially on key features: Homepage, Search and select, Booking a room and Entering personal details.
1. Competitive benchmarking | Understanding the competitive landscape of mobile hotel booking applications
- What is standard and familiar?
- What are they doing right,
- and what are they doing wrong that I can emulate on?
Product related insights
Process related insights
How to consciously think from a users perspective.
The UX language: what should I write and how do I write it?
Writing complete descriptions of my findings: What I noticed, why this was, what result it has.
To look in depth to both different screens and screen states.
Additional: I had an in depth look into UI of different brands as well.
- A fullscreen enticing image/ video for immersive experience.
- User choses by content on homescreen.
- Homescreen existing solely of search bar to keep flow simple and intuitive.
CTA should be clearly and distinctly visible for users, by use of (accent) color, position of button, and possible by drop shadow (UI choice).
CTA’s on same screen should not conflict with each other. Order should be clear and intuitive to not confuse users.
Calendar should be simple and user friendly. Make sure to use colours that are enough contrasting and CTA is distinctly visible.
When choosing a carousel display make sure signifiers / digital affordances are clearly visible.
Entering personal details and creditcard details is easier
for users / makes for an easier flow when input fields are
used which are top aligned instead of single lines to type in text.
Pictures of hotel and rooms should be big enough for the user to see what he is booking and to motivate him to book.
Feature ‘Log in as guest’ can ensure a more pleasant booking.
Visible proof of VAT, city taxes and fees included in the total price can reduce mental stress for user by transparant communication. experience.
Prevent too cluttered screens and information overload by use of different fonts, font sizes and colours.
Decide on 1 brand identity and execute this throughout all the application.
2.ONLINE SURVEY
GATHERING MORE USER DATA
GOAL
SCOPE
The goal of this project is to learn how to create an online survey and learn more about the goals of people that use apps when booking a hotel room.
There was a total of 18 respondents.
There was a total of 9 questions of which
- 3 were structured
- 3 were unstructured
- 3 were both structured and unstructured
Structured questions
Unstructured questions
Both structured and unstructured questions
- Which age range do you fall into?
- When was the last time you visited a hotel website or app?
- What device did you use?
- What hotel booking website or app did you use? Why?
- Why did you visit the hotel website or app? What were you trying to do?
- What would you change about that website or app? What improvements would you make?
- Were you able to complete your task that day? If not, why not?
- Did you know where in the process you were at all times? If not, why not?
- Did the website or app meet your expectations? In what way?
2. Online survey | Gathering more user data.
What devices people are using when booking a hotel.
What websites or apps people are using when booking a hotel.
What are the main user painpoints.
What is preventing people to book a hotel.
What additional features people would like to see.
How to phrase my questions to prevent asking leading questions.
How to make an online survey using both SurveyMonkey and Google Forms.
Not every person you send your survey to will respond so it’s smart to send it to plenty of people.
User friendly: It's wise to mention a deadline in your request so people know exactly what you ask from them. Plus, its nice to mention how long the survey will take so people can make a risk-reward calculation.
- Which age range do you fall into?
- When was the last time you visited a hotel website or app?
- What device did you use?
Process related insights
Product related insights
3. NOTE TAKING
USER INTERVIEWS
GOAL & SCOPE
For this assignment I needed to watch the recordings of two mobile usability tests and take detailed notes while focussing on the goals, behaviours, context, positive interactions and painpoints of the users. This to realise the importance of conducting usability tests, and to create a bank of insights for all future projects.
Context: anything that grounds the work: user quotes. Behaviour: anything a user does, says or how they react.
3. Note taking | User interviews.
Product related insights
Process related insights
A homescreen with large enticing (moving) travel
images can please users.
A clearly visible option to search via Map can be convenient for users.
A calendar for selecting dates should be quick to handle. Check in and out dates preferably selected in one go instead of filling in information for both dates to prevent friction while booking.
Because of different behaviours users navigate an app in
different ways.
Users experience apps all in their own way. Which results in very different experiences, and thus in different painpoints and positive interactions.
User quotes portray the actual experience and emotions a user had while using your app so they are worth noting down.
Images of hotels and rooms can give users more insight, making booking a more informed and pleasant experience.
Description of hotel and rooms can give users more insight, making booking a more informed and pleasant experience.
Trip advisors ratings can give users social proof and relieve their mind, making booking a more pleasant experience
User quotes portray the actual experience and emotions a user had while using your app so they are worth noting down.
Using time stamps throughout your notes makes it easier for yourself and others to search in the user test movie for information that you need.
Keeping notes in traffic light system makes the document easy to understand, also if you were not the one taking notes.
4. USABILITY TEST
CONDUCTING A USER INTERVIEW AND MAKING HER PERFORM TASKS
GOAL & SCOPE
I asked a user to perform the task of booking a hotel room under a specific set of conditions to see how her experience and journey would be on both mobile applications of the hotel chain Hilton Hotels and booking aggregator Booking.com.
4. Usability test | Conducting a user interview and making her perform tasks.
What I learned doing a usability test
The importance of having a good script and
keeping to the script.
The importance of starting the test with an interview about general behaviour before asking the user to perform tasks.
To record this test so I could later re-watch it by using screen flow and Camtasia.
5. AFFINITY DIAGRAM
ANALYSING USER DATA
GOAL & SCOPE
To organise the raw data I had gathered via the competitive benchmarking, online survey, note taking and usability test, I decided to structure my findings by creating an affinity diagram together with my helper for this project. This had me learn how to collaborate on analysing all my data.
REVIEWING MY PROJECTS
I noted down the data of each project on a different color sticky note, one observation per post-it. Adding a happy smiley for a positive user experience, a sad smiley for a user painpoint.
Start of project - Step 1
Step 3
ORGANIZING BY MAKING GROUPS
Then we started to organise them by making groups. During which we realised groups could be made according to specific user touchpoints while using an app to book a hotel. We discovered user touchpoints:
STICKY NOTES PER PROJECT
All post-its go up on the wall. First we hung the sticky notes per project.
Step 2
NAMING EVERY GROUP
Groups are put up in chronological order of
when a user encounters them throughout their
journey. Some groups are not tied to a specific
touchpoint:
Prices: comments about prices were encountered
in various stages in process.
Add-ons: were encountered in various stages
in process.
UI: constant experience.
5. Affinity diagram | Analysing user data.
What I learned making my affinity diagram
Step 4
How to work in a small team while analysing data.
To think about various touchpoints users have while using an app.
The basic understanding of how to make an affinity diagram.
Orientation - Homescreen - Search results - Select hotel - Select room - Select rates - Enter details.
6. CUSTOMER JOURNEY MAP
TRANSLATING RESEARCH DATA INTO A STRUCTURED DOCUMENT
GOAL & SCOPE
By making a customer journey map I build on
the work I did in the affinity diagram by putting
even more structure on the analysis of my research
data.
I used the customer journey map to define the
high level steps in the journey and to document
- for each step - the goals, behaviour, context of the user.
Because positive interactions are highlighted in green and
negative interactions in red, the map shows positive
interactions and user painpoints in a quick and clear
way, as does the customer value curve.
What I learned making the customer journey map
I learned to think in depth about user touchpoints.
I learned to think in depth about user goals, behaviours, context.
I learned how to display positive and negative interactions.
I learned there is always subjectivity involved in making a customer journey map.
6. Customer journey map | Translating research data into a structured document.
7. FLOW DIAGRAM
THE START OF MY DESIGN
GOAL & SCOPE
My overall objective while making my flow diagram was to fix the issues I uncovered during my research, which are highlighted in my affinity map and customer journey map. My goal was to define a high level flow for my mobile app, focussing on the primary use case.
7. Flow diagram | The start of my design.
What I learned making the flow diagram
To really dive into the process when booking a stay,
defining every screen state instead of only every screen.
How to set up a User flow: the build up, the organisation and that you read them in rows, from left to right.
I gained a better understanding of Figma.
8. INITIAL HAND SKETCHES
GETTING READY TO GET INTO 'SOLUTION MODE'
GOAL & SCOPE
My goal doing this project was to continue the design process and to sketch the screens and screen states for users flowing through my mobile app, addressing all the issues and user goals identified in my research and analysis.
TRYING OUT DIFFERENT SOLUTIONS FOR A PROBLEM
While sketching I was motivated to try out different solutions for a problem/ screen / screen state.
Step 1
OVERVIEW OF NEEDED SCREENS
I made quick sketches of the screens needed for my flow.
Step 3
DOING THIS FOR ALL USER TOUCHPOINTS
I applied this to all user touchpoints, implementing as much real copy as possible.
8. Initial hand sketches | Getting ready to get into 'solution mode'.
Step 2
This project was a good way to learn that there are many different solutions for problems and that sketching is a quick and inexpensive way to explore these.
I learned to think in depth about all elements
needed on a screen. I feel like I vaguely had
an idea about it because I use apps all the time
but it’s different when you really need to define
every element that is needed.
I learned to define every screens plus screen state that is caused by a user interaction, and to make choices on how to solve these different screens.
Looking back, I think the sketches look a bit messy (especially for stakeholders) and still lack some useful information. In hindsight I better understand the importance of the accuracy of the solutions and copy used in the solutions. The better you think about the solutions while sketching by hand the easier it is to build them in Figma later on.
I learned what is my process/ what works for me: I like to quickly make lay out compositions and then try them with actual copy.
I learned it is important to work as much as you can already with actual copy so you get a more realistic idea of the screen.
I realise better now there are many solutions for a ‘problem’.
What I learned by making sketches by hand
What I would improve next time
GETTING READY FOR THE DEVELOPERS - ANNOTATING MY DESIGNS
GOAL & SCOPE
My goal was to define the extra details that developers need to build my product accurately. I did so by creating a set of annotations containing all these necessary details.
GETTING READY FOR THE DEVELOPERS
- ANNOTATING MY DESIGNS
9. WIREFRAMING
9. Wireframe | Getting ready for my developers - annotating my designs.
I learned how to write annotations correctly
so my work is as clear as possible for
the developers.
This assignment made me think from a developers perspective and made me realise the importance of good communication between designer and developers.
I gained again a better understanding of Figma.
When I started the course I had expected the order to be sketches on paper first, then prototyping, then wireframing. However, we were asked to do the wireframing before prototyping.
In hindsight I understand this request. Making the wireframe really motivated me to think deeply about what I wanted on every screen and screen state in terms of lay out and copy.
Having made the wireframe with annotations first prepared me for building my high fidelity prototype in the best way.
Examples of screens and screenstates:
What I learned annotating my design
ADDING MORE DETAIL TO MY PRODUCT IN THE FORM OF INTERACTIVITY
GOAL & SCOPE
My goal for this project was to build a mid-fidelity prototype containing enough detail and interaction to test the high level flow, screen lay outs, text and basic interactions.
10. PROTOTYPE
Visit my prototype here:
https://www.figma.com/file/On9YFHOkbRAqyr9rbf7yYI/Wireframe?node-id=225%3A1255
Some examples of final screens and screenstates..
10. Prototype | Adding more detail to my product in the form of interactivity.
In the end I made all the prototype using Figma.
I got an indepth idea about this program and
possibilities now, and learned to work within the
limits of the program.
I learned to think in depth about different screenstates and different solutions for a problem.
This assignment made me think from a developers perspective and made me realise the importance of good communication between designer and developers.
I realised while making this prototype that I’m not just designing to make things look pretty. That I should not sacrifice accessibility in order to make something look nice. That I always need to put the user first and think about their needs and how to fullfill their goals and not just having things look perfect. As I come from a design background I had to remind myself sometimes to get in this mindset.
Search & Select
Book a room
Entering details
https://www.figma.com/file/
On9YFHOkbRAqyr9rbf7yYI/
Wireframe?node-id=225%3A1255
What I learned making my prototype
Examples of the development of screens Homescreen and Hotel front page from low fidelity wireframe to interactive prototype:
PROCESS
Home screen
Wireframe by hand
Annotated wireframe
Interactive prototype
Take me back home