How to design UX for your website? End to End Guide

What is the customer journey?

Simply put, the customer journey is what a customer experiences throughout your website, right from landing on the website to completing the purchase and everything in-between.

How to map the customer journey of your website?

Let’s take an example of a hypothetical online store that sells t-shirts.

To understand the journey, let’s write down all the steps a user will go through while making a purchase.

Once we have a list, let’s evaluate every step and remove the ones that are not vital. So, for example; Do we need a user to sign up before the purchase?

Sign-ups can create a lot of friction for the user, especially for small online stores – who don’t have a brand like Flipkart or Amazon. Many sites have a process to confirm the email ID of a user. It requires tremendous effort from the user.

Step A: User enters email ID

Step 2: User enters a password ( Conditional passwords are a big headache for a user: Remember that your password must contain a capital letter,$@@## etc. and a number that must be 16 characters long ) Huh!

Step 3: Goes to the email providers website

Step 4: Provides login information

Step 5: Look for an email confirmation from us [ meanwhile got distracted by emails and abandons the purchase ], But just in case you are lucky, she opens the email you sent with the confirmation link.

Step 6: Clicks on the link [ many times – this doesn’t work and the link comes out broken, so the user may need to copy and paste the horrible looking long URL in the browser to confirm his email ]

Step 7: Email confirmation success page. Now what? Does she need to close this window and move back to the page she was on earlier on?

Step 8: Moves back to the earlier page. Refreshes the page. If the session is maintained long enough, her sign-up is completed. Otherwise, she gets redirected to the login page.

My point is, do we need our users to complete all this process before she becomes our customer ( purchases something from us ). If not, let’s remove them from the flow.

Now look at step 8, Clicks on Pay Now! She is now directed to a third party payment gateway to make a payment. If we didn’t pass all the mandatory data [ such as billing and shipping details etc.]

automatically, she would need to re-fill all the details. After that, she makes a payment.

Can’t we integrate the payment processing right into our website? So that she doesn’t need to switch windows and sites.

After these changes, let’s look at our list.

Much better from where we started. We managed to reduce the number of steps from twelve to six.

How to make a visual customer journey map?

Once we have our final list, use the diagraming tool of your choice to convert it into a flow chart. A visual map will help you understand the cross-linkages, failure points and user paths on a single screen. It will come in handy when we hand over the project to developers for coding.

Moving from visual journey map to wireframes

Once you have clarity on the user’s journey, it is time to start creating a wireframe for every screen. Again, try to include as many details as possible in your wireframes. For example: What will you write on your CTA? What kind of visual assets ( pictures, videos or illustrations ) will be used and how they will be placed on the page.

Reviewing customer journey map

Once you have wireframes in place, you need to evaluate and think through them for five essential elements.

All the elements need to be detailed for every page on your website.

• User’s emotional state: What will the user think when she lands on our page? Did she saw our Ad somewhere and clicked on it. Will she be excited, doubtful or looking for something. What emotions she will be experiencing.
• The action you want the user to complete: Think about what action you want the user to complete on this page. For example, click a button, type something, click a link etc.
• Data you want to capture: Data capture can happen explicitly by asking the user for some input such as name, email, password or can be done implicitly by recording user’s behaviour by analytics software such as Google Analytics, Crazy Egg, Hotjar etc.
• A goal you want the user to achieve: Think about what success will look like; sign up completion, registration, move to another page in the journey etc
• Problems or hurdles the user may face: Think about possible problem scenarios and limitations a user may face while completing the action you want them to achieve. For example, if you ask for a minimum 16 character password with special characters in it, how easy or difficult it is for the user to provide that. Can the user fail?

Moving from UX to UI

Congratulations! Once you have completed the above steps, you have created your user journey map.

Now you can move on to UI ( User Interface ) from UX ( User experience ) design.

As we have now completed the first part of the article, let’s move on to a couple of UX design best practices.

Best UX practices for goals and CTA

As far as possible, try to keep only one action item or CTA per page. More than one action item per page will increase cognitive load and can cause confusion and abandonment.

If your website has different use cases, you may want to achieve this is by splitting the user goals into chunks and using different landing pages for the different use cases connected via one.

As we have now completed the first part of the article, let’s move on to a couple of UX design best practices.

Improve user engagement by using interactive actions as soon as possible

Interactive actions such as typing, uploading a pic etc., can significantly improve user engagement. It may be hard to do for all the websites, but you may be able to come up with one if you think hard.

Examples: Get the user to start a POST (FB, LINKEDIN), Get the user to type the name of the business ( myraah.io ), Get the user to upload a photo ( Instagram ), Get the user to type ( Google )

Make your listing page similar to sites a user is familiar with

Listing pages are complex. They could be challenging to use. Do not try to reinvent the wheel here. Instead, make your listing page layout closer to more significant sites a user is customary to use. It will help the user save their cognitive bandwidth in figuring out how to use your design and move to the content.

Read our article, which explains this concept in detail here:

Does Familiarity Builds Trust With Users and Makes Them Stick

Build your content model before your product page

Your product detail page is vital as the user will make a buy or no buy decision on this page.

Thinking about the content model for your product page can significantly improve your conversion rates and SEO.

Suppose you are a salesman in the leather bag store. What information/domain knowledge do you wish to have before handling a customer? For example, you must know about the material, the dimensions of the bag, the colour of the bag, the use case of the bag: casual/formal/work/leisure/party etc.; you will possibly also know who built this bag.

Suppose you can capture these domain/ expert data-point systematically for all your products. Then, you will find it easier to put together an effective and high converting product page. These data points will also enable you to link between the pages rightly and create some SEO juice.

I hope this is helpful. Do share this article and leave comments/questions on our Linkedin page.

Myraah IO on LinkedIn