Wanderlust

Usability evaluation and site redesign

Karen Anne Lilje
6 min readMar 17, 2021
Great Wall of China

For this evaluation I have put myself in the shoes of a young couple living in Cape Town, South Africa. They want to enjoy a travel adventure and after saving up for the past year, and have decided to visit the Great Wall of China.

They both have corporate jobs and spend the week working hard but on the weekends they love to get out into nature. They are keen hikers and enjoy the outdoors. They don’t mind “roughing it” and prefer to spend their money on a travel experience over luxurious accommodation. Their idea of a good trip is to have everything on their backs so that they can embrace the adventure and go where it takes them.

An app to plan and book their trip

I did a quick web search for best apps to use when planning a trip to China and the results uncovered some interesting travel challenges that I hadn’t thought of. There are a number of great apps that will help them when “on the ground” in China and assist with language challenges (Waygo), getting around locally (Didi, China’s very own Uber), paying for stuff (WeChat Pay, the popular cashless payment app in China), maps (Baidu) and currency exchange rates (XE Currency). But the app that would be most useful to our travellers is Klook, which is an in-destination booking platform. When in China, this is the app they should use when booking their tour of the Great Wall.

But first we need to get to China. For this I looked at Trip Advisor, Kayak and Hopper as possible options.

Trip Advisor, Kayak and Hopper

To help me to decide which app to proceed with I used Nielsen’s heuristic evaluation. Some points to mention from this evaluation are that Trip Advisor requested user sign-in before allowing any access to the app. This can be off putting, as a user may not want to give their personal information before provided with sufficient incentive. This aspect effects flexibility, efficiency of use and user control and freedom. Kayak and Hopper both have a cluttered UI, packed with options which are distracting given that our users already know where they want to go. Travel is always associated with certain amount of anxiety and I felt that Hopper and Trip Advisor did very little to make me feel calm and secure. The user interfaces both felt very stiff and with no human friendliness. Hopper was also really slow to load search results which became annoying.

I chose to move forward with Kayak. It has a straight forward interface design and the user is given the option to book a flight from the home screen. The app doesn’t overwhelm the user with extraneous information, which made me feel in control and confident.

Other important travel information:

Airport: Cape Town International to Beijing International airport PEK
Currency: Chinese CNY
Medical needs: Up to date immunisations for Hep A, B and C as well as Japanese Encephalitis, Polio, tetanus and Typhoid
Wardrobe: It is hot in July so pack Summer clothes. Pack good walking shoes.
Days needed to explore Beijing and the Great Wall: Minimum 3 to 4 days

User testing

For the purposes of testing the Kayak app I interviewed users that matched the user profile described above, and gave them the tasks of booking a low budget (R50,000.00) round trip flight to Beijing for a 3 week holiday in July, as well as booking accommodation for the first 2 nights in Beijing.

They would be collected from their hotel by a tour guide for the 2 day hike of the Great Wall. Tours are not booked using Kayak, but rather by using an in-destination app such as Klook (mentioned above). Given this couple’s adventurous spirit they are likely do research from home and then make their tour booking when they reach Beijing and have had a chance to chat to the locals about options.

Results

I showed the home screen to the users for 5 seconds and then asked them what they remembered. Because the home page of the app is quite simple and uncluttered, they all remembered the flight, hotel and vehicle icons and unanimously recognised it as a travel app and knew to use the aeroplane icon to book a flight.

I then watched them each execute the set tasks. I told them to keep going until the point where they were asked to put in their credit card details and pay. No one wanted to book a trip to China by mistake!

The time it took each user to complete the task varied. I think that some people are more familiar with certain app functionality than others. But all of them managed to complete the tasks in less than 10 minutes.

Insights

What I have observed from the user behaviour is that recognisability is incredibly important. Users consistently look for a button that describes what they want to do in order to complete a task. This is learned behaviour and important to consider when designing a UI. In the absence of a prominent button the users I observed would click around looking for the right feature, sometimes making errors until they found what they were looking for.

The consistent error that I observed, which I think is worth addressing with my redesign, is the date selection on the “find a flight” and “find a hotel” screen. This was missed by 2 of the users testing the site, and while it was easy to go back and fix, it would be better if it was made more prominent to avoid the error and save the user time and minimise frustration. I also noticice a few issues with icons styled like buttons but not buttons which cause mistake clicks which I have addressed in my redesign

Redesign

I have shown screen grabs of the full user flow and annotated the elements that I am plan to focus on. They are features that appear in the first few steps/screens of the process. This user flow and UI design has he same features when booking a hotel stay.

User flow UI for finding a flight on Kayak which is much the same when booking a hotel. The elements that will be addressed in the redesign are annotated.

The low fidelity mock up show my proposed ideas and thinking. On the home page the options are presented as functional buttons incorporating the icon.

And the on the subsequent screens the elements that need to be filled in are highlighted until completed so that a user doesn’t skip past them by mistake. I have indicated the steps using green and and functional buttons that will take a user to the next screen elements using orange.

Lo-fi wireframes showing redesigned functionality

I then created wireframes of my idea in Figma showing the user flow with my suggested improvements.

You can take a look at the interactive prototype here

What I learnt

I found this project quite tough as it had many complex phases, but it was very rewarding to pin point design issues and come up with potential solutions. I have learnt that no matter how established a digital product may be it can always potentially be improved through user testing.

--

--

Karen Anne Lilje
Karen Anne Lilje

Written by Karen Anne Lilje

Designer illustrator, fascinated by user experience and how everyday decisions are influenced by the way that the world around us has been designed.

No responses yet