Role

Prototyping, user
research, visual design

Timeline

3 weeks

Redesigning to reduce friction in the user journey

Redesigning to reduce friction in the user journey

Redesigning to reduce friction in the user journey

Project type

Role

University brief

Tools

Timeline

Figma, Miro

3 weeks

Redesigning to reduce friction in the user journey

Tools

Figma, Miro

Project type

University brief

First thoughts:

Discovery:

What are the implications of an unappealing design?

As a customer/consumer, the first impression of a site typically is what stirs you to continue further into it. This is especially important in a business-to-consumer site  (B2C) where the main objective is to gain and maintain customers, making sure that they complete the customer journey through a purchase.

Equally, BritishSupplements.net, a health food site’s shares the same objective. Further, due to the nature of their product, they must also garner trust and credibility within the design of the site to attract customers which also includes providing an overarching sense of the brands ethos – The site was dealing with the problem of the aesthetic usability effect and in my redesign concept I address this area.

As a customer/consumer, the first impression of a site typically is what stirs you to continue further into it.


This is especially important in a business to consumer site  (B2C) where the main objective is to gain and maintain customers, making sure that they complete the customer journey through a purchase.

Equally, BritishSupplements.net, a health food site’s shares the same objective.


Further, due to the nature of their product, they must also garner trust and credibility within the design of the site to attract customers which also includes providing an overarching sense of the brands ethos – The site was dealing with the problem of the aesthetic usability effect and in my redesign concept I address this area.

View Miro Board

View Miro Board

View Miro Board

The Problem:

The site's current design and structure alienate its customer base by causing friction in the customer journey.

The site's current design and structure alienate its customer base by causing friction in the customer journey.

The site's current design and structure alienate its customer base by causing friction in the customer journey.

Before

Sites current home and product page:

Before

Sites current home and product page:

Before

Sites current home and product page:

The Solution:

A streamlined navigation, an intuitive hero section, branding consistency, and more..

I began by designing an attractive homepage – the once text-heavy home page is reduced with succinct headings to make points, with special product options listed directly on the page as a call to action.

After

Home page redesign:

An approachable product page – My biggest priority in this page redesign was addressing the concerns raised within the usability test, because product pages are user-dominant and are key in completing the purchasing journey, it was important to prioritize the user even more so than the homepage and so, my goal to design a page that quick and efficient to navigate to get to the purchase sooner. I accomplished this through adding small details and features that would mimic the real world and provide users with familiarity in using the site.

A key feature that displayed this was the ‘see the back of pack’ button created from user feedback in the usability test, this would allow you to see the ingredients as you would when handling supplements in real life, which would aid in adding a layer of familiarity providing ease of use considering that the type of user to navigate this site would be overly conscious of ingredients and dosage amounts.

An approachable product page – My biggest priority in this page redesign was addressing the concerns raised within the usability test, because product pages are user-dominant and are key in completing the purchasing journey, it was important to prioritize the user even more so than the homepage and so, my goal to design a page that quick and efficient to navigate to get to the purchase sooner.


I accomplished this through adding small details and features that would mimic the real world and provide users with familiarity in using the site.


A key feature that displayed this was the ‘see the back of pack’ button created from user feedback in the usability test, this would allow you to see the ingredients as you would when handling supplements in real life, which would aid in adding a layer of familiarity providing ease of use considering that the type of user to navigate this site would be overly conscious of ingredients and dosage amounts.

An approachable product page – My biggest priority in this page redesign was addressing the concerns raised within the usability test, because product pages are user-dominant and are key in completing the purchasing journey, it was important to prioritize the user even more so than the homepage and so, my goal to design a page that quick and efficient to navigate to get to the purchase sooner. I accomplished this through adding small details and features that would mimic the real world and provide users with familiarity in using the site.


A key feature that displayed this was the ‘see the back of pack’ button created from user feedback in the usability test, this would allow you to see the ingredients as you would when handling supplements in real life, which would aid in adding a layer of familiarity providing ease of use considering that the type of user to navigate this site would be overly conscious of ingredients and dosage amounts.

Product page redesign:

Product page redesign:

Product page redesign:

Next steps:

Testing my redesign, do these features help or hinder when in real use?

I want to turn this concept into a fully working prototype and conduct another round of user tests on the redesign with tasks that focus on features such as the 'see back of the pack' button in order to ascertain whether they’ve had desirable results in mimicking real-life and thus smoothening the customer journey, I also want to look at the responsiveness of the site and how these features would work at at mobile breakpoint.


Next project

Next project

Next project