USABILITY EVALUATION & SITE REDESIGN │Hopper
At the very beguinning of my training at Iron Hack, one of the challenge to complete was about conducting an usability evaluation and redesign the Hopper app. Here is my work, I hope you’ll enjoy it !
KEY INFORMATION
THE SCOPE
- The mobile App : Hopper
- The tested product parts : the navigation, the content and the final product purchase.
THE USER TYPE
Young group — 20 to 40 y/o
- User is part of a group who’s planning for holidays : these friends have decided to invest and spend some quality time together.
- The trip is planned six months in advance
- The holidays goal : to share as much time together and plan for a lot of fun (interested in a mix of culture and leisure).
- They are still price-conscious, but this is also the opportunity to spoil themselves.
SCENARIO
- User’s story & goal
You want to buy a flight ticket to go to Jordan, to visit the famous tourist site of Petra.
You know you have 3 weeks available in July 2021, so you are still flexible for the departure and return dates. You are looking for a balance in between a reasonable flight price and a satisfying flight quality (it means you will prefer to fly at 11am than 6am even if the ticket is 50€ more expensive).
- How user encountered the website
By searching in Google “flights to Jordan”, than by clicking on one of the first research results, which provide a link to download the mobile application.
- User’s goal
To buy a return flight ticket to Jordan, and to book an hotel.
USABILITY TASKS
- TASK 1 — To book a return flight ticket from Paris to Jordan for him/herself
- TASK 2 — To book a house for its own friends group (10 people)
USABILITY TESTING
- Metrics : Quantitative measure : scenario completion rate, time on task (TOT), error-free rate, critical errors rate, non-critical errors │ Subjective measures : participants evaluate the overall system and rate their satisfaction (5 stars)
- Schedule & Location : 3 sessions on Wednesday 6th of January
- Sessions length : 20/30 minutes
- Equipment : One laptop for any notes to be taken, one smartphone for filming their hands and recording their voice.
- Participants : Total number of 3 participants │ Selection : people in my relations that I know they are often travelling as a group with the same characteristics as the user type. │Participant 1 : gender = male ; age = 30, Participant 2 : gender = female ; age = 27, Participant 3 : gender = female ; age = 26
INTERVIEWS FINDINGS
MAIN PROBLEMS FOUND
TASK 1
- There is too much text for the options to choose (frezze, buy automatically, insurance…) and also for the price advices : the user would prefer to reduce the text and the size of the screens (especially for the options or the itinerary information check)
- The price advices are not useful (for example : advising booking in June after that the user already saw in the date calendar the green color for low prices at this same period)
- The subtask 3 is very confusing, as the user don’t know where to click to see the flight offers
- The lack of consistency in between the first page design and the rest of the app design
- The price advices are appearing to early in the user flow
- The options “freezing” and “watch the price” are appearing too early in the user flow (as the user don’t know which flight/price these options are refering to)
- The bags informations are coming too late in the process
- The bags choice option isn’t available
- A feature allowing to easily go out from the flight research would be appreciated
TASK 2
- The app offers at first some hotels (but the house option also exists). It is confusing for the user who think that only hotel options are available.
- The carrot system isn’t useful, and it is even confusing
- The option for adding the number of guests do not exist
- The different parts of the screens are not separated enough
- There is too much text and the topics appeared as mixed-up
- A feature allowing to easily go out from the flight research would be appreciated
SELECTED MAIN PROBLEM TO SOLVE
TASK 1
- There is too much text for the options to choose (frezze, buy automatically, insurance…) and also for the price advices : the user would prefer to reduce the text and the size of the screens (especially for the options or the itinerary information check)
- The options “freezing” and “watch the price” are appearing too early in the user flow (as the user don’t know which flight/price these options are refering to)
- A feature allowing to easily go out from the flight research would be appreciated
- The subtask 3 is very confusing, as the user don’t know where to click to see the flight offers
TASK 2
- The different parts of the screens are not separated enough
- The “ carrot money ” system isn’t useful, and it is even confusing
- The option for adding the number of guests do not exist
- For each steps, the content isn’t enough clear, logic and “tidy”
- A feature allowing to easily go out from the flight research would be appreciated
REDESIGN PROCESS
1│ Results
Combine both results from the heuristic analysis and from the usability test.
2│ Create a redesign roadmap
- Isolate each subtask by a screenshot and compile all screenshots on an organised word document
- For each subtask, create a subtask diagram to clearly understand and identify the user flow
- For each subtask, list its corresponding findings from the heuristic analysis and the usability test. In another hand, list all the best design ideas and select te best to get a solution to these pain points (For exemple : there is a lack of visibility regarding a subtask part. The solution here would be to reduce the content, add more spacing in between the different UI elements and bring forward the most important information to impulse an user action.)
- Directly draw and write on each subtask screenshot the modification to be made
3 │ Realise low-fi wireframes
Take back all the results from the heuristic analysis and the usability test, and analyse if the newly designed wireframes solve these problems
4 │ Realise high-fi wireframes
Take back all the results from the heuristic analysis and the usability test, and analyse if the newly designed wireframes solve these problems
LOW-FI WIREFRAME I TASK 1
LOW-FI WIREFRAME I TASK 2
HIGH-FI WIREFRAME I TASK 1
HIGH-FI WIREFRAME I TASK 2
MY TAKEAWAYS
My UX UI critical mind
As I was advised, I insisted on analysing both positive and negative characteristics of the application. In another hand, this exercise also allowed me to focus on the user’s needs and expectations, as I selected pain points to solve what he/she identified.
My interview skills
During the interview, I payed attention and I tried to balance my “ being neutral ” behaviour with investigation skills by asking the right questions at critical moments. But I am deeply convinced I am still not able to get all the observation the user has in mind, or I still don’t have the ability to help the user to develop his analysis. Maybe the solution would be different questions or a better environment.
My Figma know-hows
It was also another greater opportunity to work on my Figma skills as this project represent around 30 screens to re-create. I felt more comfortable than for the previous projects, even if I still have to greatly develop my skills.
