Scroll to:
OverviewChallengePersonaSolutionResultsProcess
Scroll to:
OverviewChallengePersonaSolutionResultsProcess

PROJECT
BRIEF

Project Type

Academic / Case Study
Website Redesign

Timeline

2 Weeks, July 2021

Contributors

Law Wai Hong

My Contribution

User Research
Information Architecture
Visual Design System
User Interface Design
Interaction Design
Prototyping
Google Slide Design

WEBSITE REDESIGN
‍

Imagine checking the in-store availability of an item online...

...which you remember exist but finds out it is not listed.

If you would feel frustrated,
so does Vera Wong...

We believe that by allowing Vera to determine stock availability through an automated chatbot and giving her the ability to request for new items, she would be able to save a trip from visiting or calling Art Friend’s physical store and use the site again in the future.

Solution Statement 01

"I constantly find myself needing to call Art Friend shops to check stock availability after a series of failed searches from their website."

User Persona 01

Vera Wong

Architecture Student
As an architecture student who is in constant need of urgent material supply, Vera tend to check their stock availability through Art Friend's website before making a visit to their physical shop to purchase. After finding out that most of the item she looked for does not show up in the online store despite knowing that it exist in the physical shops, she lost her trust in the functionality of website's inventory and never visit their website again.

Challenges

01

At the event where Vera find's missing item from the online store which she remember exist, how can we eliminate the need for her to visit or call Art Friend's physical store to determine stock availability?

02

If an item does not exist on both physical and online stores, How can we have Vera acquire the said item without her assuming it was stemmed from a mismatch of item's availability?

"If only there's a way I can conveniently make purchases without the need of signing up. Imagine all the sign-in from every store if you tend to purchase from more than one."

User Persona 02

Naomi Yen

Working Parent
Being a full-time working professional, Naomi is also married with a child and frequently finds herself lacking of time for her hobby in fine arts, which makes online delivery service valuable to her. She occasionally purchases art supplies for her children from different stationery store's including Art Friend. To her dismay, she finds out that she have to sign up as a member to commit to a purchase on top of navigating through the cluttered interface and unintuitive item categories.

Challenges

01

As she does not buy from Art Friend frequently, how can we allow Naomi to check out without a sign-up?

02

How can we let Naomi efficiently find the item's which she desire through the website's clutter?

We believe by clearing the clutter and allowing Naomi to check out as a guest, we would increase the chance of her proceeding with her purchase.

Solution Statement 02

Clickable Prototype

Tools used: Figma

Task 1

Check the availability of 120x180cm Foam Board in the online store

Task 2

Purchase a set of Daler Rowney's Graduate 5-Brush Wallet (5 Brushes)

Results

5 Participants

recruited for user testing

Before Redesign

After Redesign

8/10

3/10

6/10

4/5

4/5

5/5

User bounced from the website due to the lack of stock availability and would never use the site again for stock check.
Users bounced from the website from refusal to check out as member.
User finds the website had poor visibility due to a cluttered interface
Users managed to either request an item or find out the item’s availability on the physical stores and they are willing to use the website again in the future.
Users successfully checked out without hesitation.
User agreed the interface is less cluttered and more focused on the e-commerce experience

Next steps

4-Phased Approach

My future steps would include considerations for both end user and company owner in order to holistically cater the entire e-commerce experience.

Foundational Phase

Remedial phases where immediate solution is applied through foundational changes.

Phase 1

Regain base consumer by providing a convenient check out process via guest check out and create a chatbot which informs user on physical store's stock availability.

Phase 2

Perform an information architecture to match item's availability on both physical and online store.

Transformative Phase

Phases with changes that expands upon set foundations, targeted towards self-sustainability and community needs.

Phase 3

Allow stock keeper to conveniently update both website and physical store's item availability in real time and allow chatbot to access data from the new system.

Phase 4

Provide a section where a community can request and import rare items by sharing a bulk order.

Design Methodology

The Double-Diamond design process was used for this case study.

Timeline & Methodology

Timeline

Time given to accomplish the project was 2 weeks.

User Research

Demographics

The user research was conducted in the form of an interview. Out of 10 interviewees who were found to be frequently visiting Art Friend, 7 were design students and 3 are parents.

Stock Availability

8 out of 10 finds Art Friend’s website inventory were not up to date and hence, would bounce from it and never visit the site again.

Some of the user had used an earlier iteration of the website before 2021 redesign but had met an identical problem. Hence, they no longer trust Art Friend to perform any remedial changes in the future.

Some user resorted to purchase from international art supply merchants and share the shipping cost with fellow artists.

Check Out Process

Only 2 users were willing to check out from the website and registered user. The rest who were requested to purchase a mock item refuse to sign up for a new account as they consider it to be an inconvenience. They explained that they do not purchase from Art Friend frequent enough to warrant a sign up, despite being a frequent visitor.

User Flow

User Flow 1

The first user flow focuses on students who need to determine the stock availability in order to determine the need to visit the physical store. In case of the lack of the stock, the user can either request item or find out its availability from the chat bot.

User Flow 2

Second user flow focuses on users' need to purchase without the need to sign in or sign up.

User Flow 3

The third user flow combines both former user flows into a generic one. It includes the different possibilities of endpoints based on the decision made by the generic user. If user decided to purchase an item, they would be directed towards the horizontal flow. If they choose to discover the availability of a desired item, they would be following the diagonal flow.

Retrospective:
Given enough time, the user flow could include the possibility to interchange between the horizontal and the diagonal one after "Found desired product" (situated after the first decision point) process. User have the freedom to decide whether to purchase an item once they have learnt the details of the item, and the permutation which stemmed from the modification would allow user to end the process if they choose to either purchase from the physical store or leave the product altogether.

Information Architecture

Item List

All 35 items selected were sub-categories of their 12-category item list.

Previous website have 11 groups for art supplies excluding irrelevant group: vouchers

Similarity Matrix

In the similarity matrix, the items were divided into clusters for their relative similarity to other items based on user's sorting.

As shown in the similarity matrix, Palette Knifes & Others, Scrapbooking, Colour Charts, Aerosol Spray were widely divided into different categories, suggesting different sorters have widely varying definitions or purpose of the tools.

Participant-Centric
Analysis

Recommended groups by PCA was 8 or 6 groups based on 7 participants respectively.

IA for 8 groups were selected as it provides more context based on type of tools

Previous website have 11 groups for art supplies excluding irrelevant group: vouchers

IA with 6 groups is a combination of type of tools, purpose, and a dedicated group for unverified purpose

Platform & Demographics

The platform used to perform the sorting is Optimal Workshop.

The sorting of these items was meant to reduce the number of item categories and therefore, the overall website clutter, through user recommendations.

The sorting was an open card sort. There are a total 18 participants who successfully completed the sorting.

Results:

After performing IA, the number of item tabs have decreased from 12 to 8, which is 33% decrease in tabs and therefore, increasing visibility of landing page elements.

Visual Design System

The First Attempt

During the creation of these components, I did not realise the existence of visual design system - let alone its importance, due to sheer inexperience. One major takeaway from creating these components was mainly attributed to the significance of having a design system in place when the wireframe transitioned from mid-fi to hi-fi. Each component across different pages and its permutations have to be manually selected in order to have its attributes changed, and any stray components which does not belong have to be manually searched, re-designed and repurposed.

01

Some users prefer to use search as opposed to filters and they appreciate the convenience to access the feature at any given time.

02

Users find the brands displayed on the main page redundant and creates unnecessary clutter as they serve no navigational purpose. The brands logo were moved to a different page to remove clutter.

03

User expected the website to have a persistent global navigation for convenience.

04

User finds the layout for chatbot to be unintuitive and does not look like a normal chat box. They also prefer to have the convenience of persistent chatbot to be accessible at all times.

05

Users would rather have the button to keep the same status and have the cart updated instead.

Maintaining the status gives them the sense of freedom to choose if they wanted to add the same item to the cart again.

06

"Back to home" button to "Continue Shopping" as does not feel encouraged to shop more. User also need a sense of clarity to what happened to their order after they're placed.

Usability Test Changes

Want more?

Coming soon:
Respokare
Let's Connect!
Website & design © 2021 by Wai Hong