Back office design
Slerp is a London-based technology company specialising in eCommerce for hospitality brands. It enables direct-to-consumer online ordering for all order types – on-demand, pre-orders, nationwide delivery, click-and-collect and table ordering. They have a simple but bold vision: Be a digital business partner to hospitality brands, helping them sell more and manage better.
Company:
Slerp Unlimited
Role:
UX Researcher, UX Designer, UI designer
Time span:
12/04/2021 – 12/04/2022
Research
Product performance benchmarks
In my first days at Slerp, I spent most of the time getting to know the product, analysing the most common actions that the user makes daily. I was thinking about how we could optimise the same and what technical limitation sits behind how we are doing certain things.
Objectives
- Analyze the flow of the most common tasks
- Understand user goals
- Identify the technical constraints
- What are the most common clients requests
KEY CONSIDERATIONS
- Add and Edit product
- Manage product variants
- Manage stock counts
- Working with inventories
- Orders
Products
Discoveries:
- Variants are not editable
- Can’t upload image for each variant
- Can’t create the variants together with the product
- Can’t assign a price per order type
- Can’t assign allergens and nutrition info
- Can’t manage variants’ groups
Suggestions:
- Separate variants’ groups from the variants permutation
- Make the variant groups editable and regenerate the permutation after editing
- Add price property
- Inherit allergens from the base product or assign new
- Choose a layout for your variants – with photos or as pills/labels (eg. for different sizes)
Variants and Modifiers
Discoveries:
- Variants are not editable
- Can’t upload image for each variant
- Can’t create the variants together with the product
- Can’t assign a price per order type
- Can’t assign allergens and nutrition info
- Can’t manage variants’ groups
Suggestions:
- Separate variants’ groups from the variants permutation
- Make the variant groups editable and regenerate the permutation after editing
- Add price property
- Inherit allergens from the base product or assign new
- Choose a layout for your variants – with photos or as pills/labels (eg. for different sizes)
Online Survey
This is the easiest way to gather user requirements and depending on the question you put in the survey you can get both quantitative and qualitative data.
Objectives
- Learn more about the goals of people that use airline websites and apps: what they are trying to do, whether anything is preventing them from doing it, and what other features they would like to see
Summary
The answers in the survey clearly show that the main priority in the search for flights is the price, this is even stated as the number one reason to visit the site – to “Check prices”. The second conclusion we can make of the data gathered is that the steps in the process must be minimized and the user shouldn’t be forced to go through unnecessary steps like “Add-ons”. In addition, here are some of the answers to the question “What would you change or you think could be improved on the website or app that you were using for the booking process?”
Usability Test
Since there was no existing product I made a usability test on competitors websites. In the beginning, I explain the setup and how the session will be held. The first part includes a few personal questions and questions about travel website usage. I was trying to understand the context, user’s goals and user’s behaviour. In the second part, I ask the user to perform a few tasks on Qatar and Aer Lingus websites.
Objectives
- Learn about the context of the use of people that use airline websites or apps: what are they trying to do, who are they with, where are they, what devices are they using?
- Learn about the goals and behaviours of airline customers when booking flights
Pain Points
- Confusing price breakdown
- Couldn’t find the difference between the given fares
- Unclear labelling
- There was confusion in the user due to the speed of the site
- No option to change dates
Positive Experience
- Seeing the prices for other dates
- Easy to navigate
Analize
Affinity Diagram
It’s only through analysing all the data you can clearly articulate the problems you’re attempting to solve for the user. In order to create an affinity diagram, I reviewed all of the research from my previous work plus two more usability tests provided by the UX Design Institute. I wrote notes about anything I find relevant to describing the current user experience: goals, behaviours, pain points, mental models, and contextual information. After that, I organized the Post-its into relevant groups. Here is the result:
- Find the best connection
- Find the best deal
- Choose an airline
- Find flights for particular dates
- Goes straight to the “Search a flight” form
- Looking for “Book a flight” in the navigation
- Ignore all advertisement
- Prefer aggregators for comparing prices
- Mainly uses laptop
- Communicates the booking process with friends by sending screenshots and messages
- “Search a flight” form is not visible
- The carousel is taking too much space
- “I expected the search button to be below the form”
- “Selecting dates from the calendar is easier because you see the whole month”
- Can’t make the connection between the field and the suggestions given below
- It’s clear which dates are available and which are not
- “I don’t like that I can’t see the results for outbound and inbound flight in one place”
- “I want to have an easy way to refine the search parameters”
- “I don’t know how to sort the results by price”
- “I want to see only ‘Direct flights’”
- “Is this the outbound or the return flight?”
- Unclear labelling
- The need for selecting a fare must have a strong affordance
- Provide an easier way to compare the fares
- Don’t show fares that are not available
- “I need an easier way to add more baggage”
- “What will happen if I can’t take my hand luggage on board?”
- “I want to see more baggage options with the price”
- Can’t understand the baggage policy
- “I can’t book as a guest”
- “Is there a way to save my search?”
- I have no idea what ‘From £4 save your price‘ mean”
- I don’t understand what is ‘Adult1 – £0‘ in the breakdown
- “Why the ‘Admin fee‘ is not added to the total price?”
- “I can’t find the total price”
- “I’m not sure if the price is per person”
- “I want to see more clearly what’s included in the price and (what’s) not.”
- “The overview of flights and prices sometimes require additional clicking, going back and forth etc. The overview should be an overview.”
- “The site is running too slow”
- “Too much advertisement”
- “Got irritated with all the suggested extras”
- “I want to book in fewer steps”
- “When you are booking a ticket you want the process to be fast. The airline will always try to push other services on you. So you will spend more money. I just find it annoying as I want to be done quickly and don’t want to be clicking pass 4 different pages with services that I am not interested in.”
- “The mobile version is not optimized. They are just showing everything from the desktop version.”
- Confirmation dialogue for the home country is annoying
- “I like this earlier/later dates with the arrows because I don’t have to go back and fill in the search form again”.
- “I like that the airports were lister so I don’t have to type in the field”
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 defined the high-level steps in the journey which correspond to the high-level groupings (more or less) from my affinity diagram and assess whether each step of the experience was positive or negative. This image represents the user’s experience during the process.
User Flow
To highlight all the issues from the Customer Journey Map and the Affinity Diagram, a high-level flow needed to be defined for the new flight booking website. First, I sketched the flow diagram by hand before recreating the final document in a digital format. In the diagram, each screen is represented by a rectangular while the actions (such as clicking a button) are represented by a hexagon. The flow diagram will be a helpful guide for sketching the screens in the next stage.
Objectives
- Define the high-level flow for booking flights on the new airline website
- Address all the issues highlighted in the customer journey map
- Understand how users will flow through the design before starting to design
User Flow Diagram
Design
Interaction design
Now that I have researched and stated the problem, it is time to start designing the solution and sketching is a vital step before prototyping or digital wireframing.
Objectives
- Build on the flow diagram and sketch the screens and screen states for
users flowing through the Fly UX website - Address all the issues and user goals identified in research and analysis phases
Prototype
Medium-fidelity prototype
After the creation of the user flow diagram and the initial sketches of the screens, I felt more confident to start designing a medium level fidelity prototype. I took the time to design each screen with detail and made the prototype interactive so that I could have users use the prototype and get a realistic portrayal of how the flight booking experience would be.
Objectives
- Make sure the prototype contains enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions
Prototype
Develop
Wireframes
Part of the transition from design to development is to communicate clearly to the developers what exactly we are going to build. It includes annotated notes or system rules. Without this blueprint key parts of the product may fail to be developed properly.
Objectives
- Make sure the wireframes contain all the necessary detail a developer would need to build the application accurately
Wireframe
Conclusion
Although it was just an imaginary company the Fly UX was a huge opportunity for me to go through the whole UX process. I learnt about the importance of doing the research before starting to design, otherwise, you will work with nothing else than your own (or someone else) assumptions. All design and product decisions have to be based on research.
Organizing and analyzing a big amount of data was a challenge but thanks to some highly effective techniques like Affinity Diagram and Customer Journey Map it was easy to give a structure and see the user’s pain points in the process clearly.
I really enjoy the sketching and prototyping phase, I realize that my fine arts education and front-end experience are a valuable addition to this step of the UX process.
I’m sure that I didn’t solve all the issues that I address in the research phase, but hopefully, this project is just the beginning of many other opportunities.
If you have any comments I’d love to hear from you!