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.

Design Goals

In order to provide a better experience for travelers, there were two things we wanted to achieve:

• To increase the number of sign-ups on the HHWT website in order to re-target users to come back to the platform often.
• To encourage users to enter information about their past and upcoming trips in order to deliver personalized content for them.

Empathetical Analysis: Home Page Teardown

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.

Problem: Uninformative homepage

• Article titles are difficult to read against hero images
• It’s difficult to find the Sign Up CTA
• Information hierarchy is incorrect with respect to CTAs

Rearranging the Hierarchy of Visible Elements

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.

How do we build credibility?

First, we prioritize the elements that already exist on the home page. The criteria for prioritization is:

1. Importance of the information presented and
2. Ability to communicate maximum value to the user as quickly as possible.

So here’s how we modified the information hierarchy:

1. Hero image (though the article title is more important, an image communicates value and catches user’s attention more quickly)
2. Article title
3. Article category (Room for improvement room — should we restrict ourselves to just categories or should we add tags as well?)
4. Ability to view or browse more relevant articles (Currently, it’s that big ‘what else’ button)

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:

• Sticky navigation bar
• Article cards
• Article page

Empathetical Analysis: Sign Up Journey Teardown

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.

Problem: Lengthy sign-up journey

• A lengthy sign-up journey makes users give up and drop off during the process
• The value proposition after submitting the trip data is unclear to the user

Asking Data, the Right Way

Let’s start by defining the problem in the Sign Up journey:

1. We require user’s data in order to provide them with personalized content (and therefore, a better experience) across the website. However, there is a fine line between providing helpful personalization and invading user’s privacy. Asking for personal information in multiple consecutive questions without providing any clear intentions, will most likely cause users to skip answering the questions altogether.
2. We need to earn the user’s trust if we need them to provide us with information about themselves. Why do we need a particular piece of information? And is there any way we could do without it? Or probably ask the question in a way that the user clearly sees some benefit from it?
3. How far along in the past or future can a user’s memory go is quite limited, making it difficult to fill in any detailed information about their past and upcoming trips.

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:

How do we put the user in context?

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:

Implementation: Redesigned Sign Up 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.

1. We ask the users if they already know their travel dates.
2. If they don’t, we ask them for the length of the trip instead.

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.

Cherry (or rather Cherries) on Top

Search

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:

• Destinations
• Itineraries
• Listings
• Articles
• Ad space

Onboarding

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.

Responsive Pages

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:

• Replacing swipe gestures with clicks
• On a mobile device, the user intuitively swipes. However on desktop, a user relies heavily on mouse clicks.
• Hover states are a good signifier for users who are navigating through the site. They also add an element of delight

Takeaways and Conclusions

• Communication matters
  Whether we’re asking a user for their data, or welcoming a new visitor, or getting them to sign up — designing for delight is all about establishing an emotional connection with your users and reminding them that there are real humans behind the design. It will always take time for users to build trust with your platform.
• Don’t make them think!
  Providing data should be as easy and as intuitive as possible. Give users the flexibility and provide them with enough options as they are getting familiar with your platform.
• Reward Users
  Reminiscing the days where I rewarded myself with a treat after completing a tiring workout, the same principle applies here as well. Mini rewards motivate users to complete certain tasks. Break down lengthy steps into smaller chunks and add rewards along the way.

Further Improvements

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!