UI patterns

User interaction flow

Brand identity

Redesign: Chemist Warehouse

*The following case study is conceptual work and is not affiliated with Chemist Warehouse Australia

The 2023 Chemist Warehouse website faces a number of UX problems including a busy interface and ineffective visual hierarchy. In particular, the low findability of important elements on the website results in users finding difficulty in successfully completing tasks such as a click-and-collect order.

I endeavoured to provide a solution to this major problem through a conceptual redesign, including visual structure, UI, and a major user task flow interaction, so that completing customer-based tasks becomes a more efficient and enjoyable process.

Read the highlights‎‎ ‎

Read full case study‎ ‎

Case study conducted by Elisha Fitri

THE CHALLENGE

PROBLEM DEFINITION

How does low findability affect users?

A busy interface and ineffective visual hierarchy both contribute to the findability of important functional elements that may be easily missed, which slows the process of task completion and may lead to increased feelings of frustration in the user.

This is particularly evident on the checkout page, where the “Select Delivery Method & Location” section gets lost in the midst of other similar-looking sections and the “Customers also bought” list, making it more challenging for users to find their options for delivery.

Current checkout page - 2023 Chemist Warehouse Australia website

The problem is exacerbated by the misleading page heading that reads: “Online Delivery”, particularly if users are seeking alternative delivery methods. The small text and radio button is hardly noticeable and is defaulted to a delivery option which, if unintentionally missed by the user, may result in an error and adds another unnecessary step to their task.

Buttons that are fixed underneath the menu bar leads to other pages that explain the processes of delivery methods. While this feature may be helpful to users who are new to these processes, it is a less efficient way of conveying information or providing instructions that should be self-evident or self-explanatory (Steve Krug's first law of usability.) The button has high visibility, yet it is not clear that it is a fixed element attached to the header, which may lead users to thinking it is a part of the order process instead.

TESTING CLICKS

FIRST-CLICK TEST

What is the first thing users look for?

A first-click test was conducted to determine the level of difficulty of successfully completing the simple, yet significant task of a click-and-collect order. User participants were presented with an image of the checkout page and were asked: “Where would you click to complete a click and collect?”

Heatmap of first-clicks by test participants

Majority of participants clicked on the “Free Click and Collect” link that would lead them to the information/instruction page rather than select the click and collect option. This result highlighted a need to implement a better hierarchical system and adopt a more minimal layout in the redesign to increase findability of important functional elements.

NAVIGATION TEST

Where do the users go?

An additional navigation test was conducted to further observe user interaction with the checkout page involving click-and-collect processes. Starting at the product page where users were prompted to find their way to the checkout page, many users did not make it to the end of the task as they were misled to another button or simply missed the next step and attempted to skip ahead instead.

Heatmap results from navigation test

Many participants passed the first and second step, but the results were mixed in the third. It was predicted that participants would be misled by the “Free Click and Collect” link (like in the first-click test) however, this mistake was only made by one participant. Instead, during the third step, a number of participants went straight to checkout or otherwise failed to select the option for Click and Collect, as the page showed to have been defaulted to “Door delivery” instead. This proved that users were more prone to make the mistake of missing the small radio button.

Clickmap results from navigation test

RESULTS

What did we learn from these tests?

1 out of 15

users successfully clicked the correct button

40%

of users clicked on the misleading heading "free click and collect"

26%

of users skipped ahead to checkout, missing the delivery option altogether

Both the quantitative and qualitative data derived from initial user tests verified the hypothesis of low visibility, leading to difficulties in finding and identifying key functional elements. Results highlighted a need for clearer and prioritised labelling, with better positioning of these functions. The results also made evident a discrepancy between users’ mental model and the current process, as users were unaware of their errors when attempting to complete the task.

Thanks for reading!

Interested in learning more about this project? Read about the extended process here.

INITIAL PROTOTYPE

PRODUCT PAGE

Creating a digestible page of information

The product page was redesigned with the users’ common actions in mind. A clear visual layout and ample amount of white space allows users to scan and digest information easily.

Breadcrumbs act as an indicator of the site's information hierarchy and navigational element. The back button provides users with flexibility of use, particularly if they make an error

Scale is utilised in typography and interface elements to prioritise and provide relative context for key components

On-click dropdowns for detailed categorised information

Providing feedback messages to inform and validate user action

Conditional elements appear when users interact with certain elements, such as when they add a product to their cart and the option to view delivery methods pops up. The delivery method buttons are accompanied by recognisable icons to help users choose the right option. A green tick appears when the user has successfully found an available location for click and collect; this semantic colouring assists in providing users with the recognition that they correctly and successfully achieved a part of their task.

Product page: step process of adding a product to cart for click-and-collect

CHECKOUT PAGE

Breaking down the checkout process

A three-stage process in the checkout section guides users through the process of purchasing their product/s. I felt it was necessary to segment the process so that users would not be confused about their next step and consequently muddle through, particularly as this may cause customer service issues further down the line if the process is not clear enough.

The current website has a separate page that provides instructions on how to successfully complete the task of purchasing products online- as a time-consuming and unnecessary feature, I aimed for the solution to eliminate the need for this by making the actual process as clear and self-evident or explanatory as possible.

The use of breadcrumbs assists in identifying which stage the user is in, and reduces their need to think about the next/previous step. The delivery methods are large in scale to distinctly show the user their options for purchase and reduce the risk of missing this step.

leeshfitri@gmail.com

Home
User Experience & Interface
Visual Design
Motion Design
Creative Coding
About
Contact

CONCEPT DEVELOPMENT

USER FLOW

Understanding flow of interaction

Based on the findings, the redesign needed to consider features that supported natural user flow in line with the steps of the Chemist Warehouse click-and-collect process. To better understand the flow of interaction, I drew up a user flow following the step-by-step process of completing this task. Visualising this flow not only consolidated the individual actions required to reach the end goal, but also helped to demonstrate which webpages were involved in the process, as well as the potential conceptual features that would improve user experience.

User flow: Purchasing a product for click-and-collect

Evidently, the click-and-collect process did not start at the checkout page but rather at the product page, to confirm to customers that the product of interest would be available for pick-up in the first place. In the interface, highly visible and recognisable elements would support user’s flow of interaction without the need to consciously think of the next step.

WIREFRAMING

Visualisation of concepts

The concept development stage also involved producing wireframes from early sketches to mid-fidelity wireframes that represented potential concepts for the redesigned website. After narrowing down the solution ideas that best catered to user needs and aligned with initial test results, users were asked to choose their preference between the wireframes presented to them. The purpose of these preference tests was to allow actual users of the website to compare different systems and designs and conclude which would be most optimal for their experiences.

Concept A

Sectioned layout to view full process of purchase
Numbered sections for clear order of steps
Drop-down elements to reduce clutter and maintain relevant content

Concept B

Titled sections with clear heading scales
Tab pattern for quick access
Separate page for payment/checkout details allows for more space on one page

Concept C

Navigational breadcrumbs to indicate where the user's current place
Clear large buttons for delivery methods
Back and continue buttons for change of mind or user error

MOCKUPS

Solution design

The UI mock-ups and initial prototype were informed by the final preferences and feedback from test participants. The mock-ups follow a cohesive, clean, and light look, and a consistent layout from page to page. Producing a minimum viable prototype (MVP) in Figma with basic interactions ensured that the most important needs were taken care of, while structuring the basis of the product that would be further refined through the iterative design process.

Product page: click-and-collect availability

Checkout page: order summary

Checkout page: selecting delivery method

SOLUTION

A/B TESTING

Re-testing the solution

A/B testing was conducted to validate the solution features and ultimately determine whether the conceptual redesign was a more effective solution than the current website. The performance of the redesign (Test B) was tested with the same methods used in the earlier testing stage and with a new group of test participants. This was to ensure that the redesign, or variation, was tested on a group who did not have any expectations or biases towards the redesign that would change the accuracy of the results.

Click results testing redesigned click-and-collect flow

REFLECTION

What could we do better?

While adding an extra step in the redesign may seem to initially slow users down in the completion of a click-and-collect task, overall this has come to help improve the efficiency of the task, which has been validated by a boost in the test results.

Looking at the ways in which the new test participants failed the tests in this round, it was noted that one of the potential reasons for this may have been a misinterpretation in the labelling of certain buttons or headings. This can easily be fixed through relabelling, as well as trying different ways of questioning users to complete tasks. For example, the redesign may include tooltips on hover, or additional icons to better represent functional elements. In addition, the next stage in the iterative design process would require a higher fidelity and more moderated testing to ensure results are better accurately recorded.