Ironhack Prework Challenge 3: Usability Evaluation and Site Redesign
This is the 3rd Challenge of the UX/UI Bootcamp Prework. As the title says, it’s about the usability and redesign of an app or website. So let’s take a trip to Rome and visit the Colosseum from the eyes of a future UX/UI Designer.
Rome is the capital city of Italy and if you like sightseeing, there are so many places you can visit like the Colosseum, Petersdom or the Pantheon, the list is endless.
Start your day with a cappuccino and panino, take a ride through the city on a Vespa, visit one of the seven world wonders and enjoy the famous nightlife in Rome.
Let´s go…
1. USER TYPE
But first things first. For this challenge I have to jump in the shoes of a special user type that corresponds with my audience. That is very important, because I have to interview them later on.
There were several types of user types, e. g. young couples, families with children, small groups and so on.
I decided to go with this one:
Worldtrotter, Backpacker — 18–38 y/o (1)
You’ve decided to finally go visit that wonder that has been sitting in your dreams for a long time now. You don’t have a long time to plan but also you don’t need it. You’ll be traveling in 6 months and are open to almost any possibility but have a budget constraint. You are price-cautious and prefer experiences where you have a chance to meet people and make acquaintances to enjoy the wonder together. You are not picky and you can accommodate the most affordable, adventurous, genuine experience.
2. DESTINATION ROME
Nearest Airports — Rome-Fiumicino / Rom-Ciampino
Currency — EUR
Medical needs — Not mandatory
Wardrobe recommendations — Summer/Night could be cold
Days needed to visit attraction — 1–3 days
3. BENCHMARKING
We were given the following apps to choose, which would perform better with our selected user type.
- KAYAK
- Skyscanner
- Tripadvisor
- Hopper
My decision, with which app to test the scenario is based on Nielsen’s heuristic evaluation tests:
#1: Visibility of system status
#2: Match between system and the real world
#3: User control and freedom
#4: Consistency and standards
#5: Error prevention
#6: Recognition rather than recall
#7: Flexibility and efficiency of use
#8: Aesthetic and minimalist design
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
After comparing all the apps, my decision was to go on with KAYAK. The app has a clear structure on the start screen, many options, features and a comprehensible design. It seemed more suited for my user type than the others.
4. USERS / INTERVIEWEES
5. FIVE SECOND TEST
Now it was time to make the first test. I have shown the users the start screen of the Kayak app only for 5 seconds and ask them the following questions:
- What did you see?
- What can this app do for you
- Where would you search a flight
The answers were very clear and everybody has nearly answered the same. A search engine for comparing flights and booking trips. They also recognised the flight symbol and search button.
5. THE TASK
I have shown them the task with a little sketch, just to make it a little more fun for them.
They would have an 800 € budget for a trip to Rome. They have to book a flight and hotel for 3–5 days. Hotel should be near the colosseum and they should check for train options.
While they were clicking through the app, I made some notes on their search behavior and how they use the tools and features of KAYAK.
6. INSIGHTS
After analyzing my notes of every of my users and their feedback, I recognized that they had problems finding the right filters. They seemed confused from time to time, when one of them wanted to adjust flight dates, she was redirected to the start screen. While finding a hotel near the colosseum, the map seemed to be overloaded. One user even left the app and searched on Google, which is not a good sign. Train was no option for both, it was simply to expensive (could be left out of the test).
I know there is a lot more which can be improved. But for now, I want to focus on “tidy up the Navigation Bar” and add a “pop up screen for flight dates” on the flight booking flow. Hotel booking flow — map should get a slicker look with less options, but with highlighted offers and call to actions.
Overall, I recognized a lack of consistency with the icons (menu, filter) used in KAYAK. Logo changes from start screen to second level, I think this could be easily fixed, while leaving out the K logo and adding corporate identity colors in the navigation bar.
Doing this paper prototype helped me to concentrate my ideas around the solutions that I have found. It is really good for my own understanding of probem solving. This step has helped me a lot.
7. MID-FI WIREFRAMES
After having done all the steps, it was time to redesign my solutions in Figma:
8. PROTOTYPE
Here you can check the adjustments that I have made on the navigation bar and flight search (changing dates) using Figma prototype:
Flight Booking
Hotel Booking
In this prototype I have added new navigation bar as well and designed the map a bit slicker with reduced options, but highlight offers with call to actions:
9. THOUGHTS ON THE PROCESS
This was by far the most challenging project in the prework for me, because there are so many things to keep an eye on. From design principles, site audits over redesign and how to write case studies & reports. But this challenge showed me that products are never finished, they always have to be updated and need improvement to a certain level. I really look forward to the next projects and to deepen my knowledge about UX/UI Design.
