Does the below conversation sound familiar to you?
Some of us with food restrictions, whether it is due to our cultures or due to a restrictive diet, may relate to this issue. Likewise, a lot of Muslims find it difficult to find halal restaurants while traveling abroad, restraining them from having an immersive culinary experience. Have Halal, Will Travel (HHWT) is a travel blog designed for Muslim travelers that helps them find halal eateries and mosques around popular attraction spots.
We have teamed up with HHWT to provide their readers with a more wholesome and unforgettable travel experience and help them find interesting halal eateries while they’re abroad.
In order to provide a better experience for travelers, there were two things we wanted to achieve:
What is a better way to build empathy than to put ourselves in the user’s shoes?
The first step we do to build empathy is to analyze a typical user journey and go through each step in the process. When we use a product as a user, we get a better perspective of their pain points. To start with, let’s take a look at some of the major pain points on the Landing (Home) page of HHWT.
The first impression your product makes on the user is one of the most crucial parts of a design.
When you sell delicious noodles at a street food stall, you can expect the business of the stall to run well even though it looks old and traditional (probably even rundown) as long as the food served is delicious. A vintage look may even add to the credibility of the food served, since that would give the impression that the stall has been existing for a long time. It could be an indicator of the crowds that visit regularly, no matter what the place looks like.
However, you can’t expect the same experience for a website. An outdated look on a website would keep people away from it. Once your page loads, the user forms an opinion about it in 0.05 seconds.
The appearance of your website instantly communicates a lot about your brand to your visitors. Moreover, they are quick to make a judgment — nearly half the consumers base a brand’s credibility and trustworthiness solely on its website’s design.
First, we prioritize the elements that already exist on the home page. The criteria for prioritization is:
So here’s how we modified the information hierarchy:
We take these elements and place the important and communicative UI elements more prominently on the page.
We applied this same principle, of communicative and information importance, on UI elements across the rest of the website as well:
We tried to sign up from the home (landing) page, but… where is the sign-up button?
Once we did try to Log In, we were directed to a Sign Up flow. While signing up, after the user enters their name, email, and password, they’re directed to a ‘Create a Trip’ page, where the user is asked to create an upcoming trip. After which the user is again asked to create a past trip. This entire journey feels extremely lengthy and the user is unable to see the value they would receive after putting down all of this information.
Let’s start by defining the problem in the Sign Up journey:
When travelers start planning a future trip, they don’t always have a fixed travel date in mind. They start with a tentative month when they can travel, then maybe finalize a date based on reasonably priced airfares.
A typical trip planning scenario could go something like this:
On the other hand, travelers do decide the length of their trip quite early on in the planning process:
In order to reduce the amount of users opting out of the trip input step, we broke down the questions and asked them in smaller chunks. We placed past and future trip questions separately, while also explaining how we would reward the user after they add their trip details.
In the flow above, noticed how many times users are allowed to see their profile page? Users are learning the correlation between the information they give us to the reward they will receive, making the process of giving out their personal data shorter and less daunting.
Here’s how we ideated for the trip planning flow:
Instead of making the Sign Up flow extremely lengthy, we chose to ask the user about their upcoming trip in their profile. This way the user has to adapt less with the interface when they interact with it for the first time (user priming).
We’ve also kept in mind users who have not decided on their exact travel dates and broken down the upcoming trip into 2 categories.
However, we did want the user to enter an exact start date for their trip since that would give us the opportunity to prompt them with personalized content before or during their trip. On the Profile Trip screen, we added a CTA to ‘Set Date’ and also provided a countdown timer to their next trip.
When a user sees the intention clearly, they are most likely set to complete the task at hand.
The user is coming on this website for its content. And what use is a good-looking interface if it doesn’t let the user find the exact information that they’re looking for? We designed a search that allows users to quickly find articles and itineraries related to their search term. The challenge here was to help the user discover different types of content:
We also added tips or coach-marks for a new user in order to help them navigate easily while they’re getting onboarded on the website for the first time.
The goal is not to show how the product has changed, but rather how a user’s abilities have expanded.
Although 70% of users open the website from their mobile phones, we didn’t want to make the desktop site a forgotten child. There were some design adjustments we made for the desktop interface as well to make it consistent with mobile:
We believe a good product is a continuous series of feedbacks and iterations. Right now we are working to increase user retention on the platform and the number of articles read. We would also like to add more variations to the reward system in order to make the user journey more delightful.
We’ve learned so much while working on this project, and so much more while crystallizing the knowledge gathered and putting down design principles used along the way into writing this article. We hope it helps you with useful insights.
Thank you for reading!
If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.