Todays UI challenge was an usability evaluation and site redesign,
following these steps:
- Decision of persona
2. Heuristics evaluation of three different apps
3. Usability Test with three users
4. Findings summary, identify pain points
5. Redesign wireframes (low and mid-fi)
→ 1. Decide on and create more specific persona
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. Yo 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.
To make the persona more specific and get a better grasp of his or her expectations towards the trip, I created the following information:
Anna, 24 y/o, from Stuttgart/Germany.
- She’ll finish her studies in six months and is excited about her first backpacking trip, it’s her first time outside of Europe (!)
- Saved up some money but hey, you ever heard of a rich student?
- Will stay in Peru for a month to really get to know the country and also have time to make memories with new friends
- wants to be adventurous but still see the famous sights; only wants to pre-book the first two days around Machu Picchu at the beginning of her trip
→ Flight from Stuttgart to Cuzco; free visa for 90 days; local currency is Sol (S/) and 1 Sol is around 30 cents; hot weather
→ 2. Do a Heuristics evaluation of three different apps
As Anna wants to travel low-cost, there will be various apps to compare data from in order to find the cheapest option namely Skyscanner, Kayak and Tripadvisor.
The following Heuristics evaluation (based on Jakob Nielsen’s Heuristics) evaluates the options of comparing flights and finding a cheap accommodation.
After this evaluation I conducted a Usability test on Kayak, as it was outstanding on its simple design and usability, easily guiding a new user through the screens. Note: all three apps are redirecting the user to external platforms in order to book the flights, they don’t provide the service on the app.
→ 3. Do a Usability Test with three users
Usability Test on mobile screen; After conducting interviews with three users I got the following results: All three interviewees did not know that the app shown is Kayak, as the logo is missing from the home screen. Besides that all three users identified the app as being related to travels (specifically booking a hotel, a flight and a rental car). Two of them commented on the catchy orange color in which the app is designed. One specifically pointed out the simplicity of the app.
Next step: I gave the interviewees the persona information. After observing them clicking through the app I recognized that each of them started their search on the “search” rubric. None of the three tried using the “trips” or “explore” tap. When I asked them afterwards for the reasons, they did not see the need to have a closer lock at the options at the bottom of the screen.
Summarizing the results from the usability test I identified the following pain points:
- No home button /home screen
- Filter for flights is hard to recognize
- Pre-view of hotels on the bottom of the “search” tap are confusing instead of helpful. The “backpacker” users did not see the match between their needs (living on a budget) and the options displayed
- When searching for accommodation, the users did not know what Kayak’s “recommendations” are based upon
As a result, I redesigned some screens to make them more suitable for the persona and came up with the following prototype. Now, Anna is able to start her search on a home screen. The displayed categories show a link to the new home bar (so Anna can recognize it later and use the app more efficiently). On every screen the user can always reset the search and go back to the home screen. Also when looking up flights or accommodation, the user can (but does not have to) chose from categories as “cheapest” etc. When having the overview of accommodation or flights, filters can be found on the top of the screen now. The “for inspiration” category links to a map with cheap flight options (incl. filters etc).
To complete the search, Anna can chose from the following:
- Start at home screen, click “For those with a plan”, click the search button
- Start at home screen, click “flights”, click the search button
- Start at home screen, click “For inspiration”
Thank you for taking your time to walk through this experience with me! I really enjoyed the exercise as I could get a grasp of what future work as a UI Designer could look like :)