Noah Garden Centre

Noah Garden Centre

A proposed redesign of an ecommerce website to improve the information architecture and the purchasing experience for the target users. Improved on the aesthetics of the website to add a more personal and homely touch.

A proposed redesign of an ecommerce website to improve the information architecture and the purchasing experience for the target users. Improved on the aesthetics of the website to add a more personal and homely touch.

Project:

Project:

Website Redesign

Website Redesign

Role:

Role:

UX Researcher

UX Researcher

Product Designer

Product Designer

Team:

Team:

Aries, Martyn

Aries, Martyn

Year:

Year:

2023

2023

Problem & Context

Problem & Context

Noah Garden Centre website is one of the largest marketplace platforms in Singapore that provides a wide range of plant products and services. The primary usability issues identified were:

  • Overwhelming interface with inconsistent visual hierarchy

  • Long product list with repetitive information

  • Confusing navigation & disorganized filters

  • Complex purchasing steps results in a poor purchasing experience


Noah Garden Centre website is one of the largest marketplace platforms in Singapore that provides a wide range of plant products and services. The primary usability issues identified were:

  • Overwhelming interface with inconsistent visual hierarchy

  • Long product list with repetitive information

  • Confusing navigation & disorganized filters

  • Complex purchasing steps results in a poor purchasing experience


Methodology & Timeline

Methodology & Timeline

  • Heuristic evaluations

  • Comparative & competitive analysis

  • 7 user interview

  • 7 usability testing

  • Heuristic evaluations

  • Comparative & competitive analysis

  • 7 user interview

  • 7 usability testing

  • Heuristic evaluations

  • Comparative & competitive analysis

  • 7 user interview

  • 7 usability testing

  • Affinity mapping

  • Persona

  • Problem statements

  • How might we?

  • User flows

  • Affinity mapping

  • Persona

  • Problem statements

  • How might we?

  • User flows

  • Affinity mapping

  • Persona

  • Problem statements

  • How might we?

  • User flows

  • Stylescape

  • Wireframing

  • Prototyping

  • Usability testing

  • Iterations

  • Stylescape

  • Wireframing

  • Prototyping

  • Usability testing

  • Iterations

  • Stylescape

  • Wireframing

  • Prototyping

  • Usability testing

  • Iterations

Research & Analysis

Research & Analysis

  1. Heuristic Evaluation

  1. Heuristic Evaluation

Filter poorly organised

Flexibility & efficiency of use

Filter poorly organised

Flexibility & efficiency of use

Filter poorly organised

Flexibility & efficiency of use

Inconsistent namings

Consistency & standards

Inconsistent namings

Consistency and standards

Inconsistent namings

Consistency & standards

Drop down covers 'Filter By'

Visibility of system status

Drop down covers 'Filter By'

Visibility of system status

Drop down covers 'Filter By'

Visibility of system status

Unintuitive plant name

Match btw system & the real world

Unintuitive plant name with scientific namings

Match btw system & the reality

Unintuitive plant name

Match btw system & the real world

Manual repotting instructions

Help & documentation

Manual repotting instructions

Help and documentation steps

Manual repotting instructions

Help & documentation

Product information overload

Aesthetic & minimalistic design

Product information overload

Aesthetic & minimalistic design

Product information overload

Aesthetic & minimalistic design

  1. Competitive & Comparative Analysis

  1. Competitive & Comparative Analysis

COMPETITIVE

Ban Nee Chen

Singapore

Intuitive navigation with clear product categories

Collapsible filters parked on the left of the page, prominent to be noticed

Consistent & efficient way of displaying product names, eliminates redundancy on multiple scientific names of the same plant

COMPETITIVE

Ban Nee Chen

Singapore

Intuitive navigation with clear product categories

Collapsible filters parked on the left of the page, prominent to be noticed

Consistent & efficient way of displaying product names, eliminates redundancy on multiple scientific names of the same plant

COMPETITIVE

Ban Nee Chen

Singapore

Intuitive navigation with clear product categories

Collapsible filters parked on the left of the page, prominent to be noticed

Consistent & efficient way of displaying product names, eliminates redundancy on multiple scientific names of the same plant

COMPARATIVE

Horti

USA

More personal tone to create a more intimate purchase experience

Aesthetically appealing with minimalistic design, high quality product images

Curated categories appeal to both experienced and inexperienced plant lovers

COMPARATIVE

Horti

USA

More personal tone to create a more intimate purchase experience

Aesthetically appealing with minimalistic design, high quality product images

Curated categories appeal to both experienced and inexperienced plant lovers

COMPARATIVE

Horti

USA

More personal tone to create a more intimate purchase experience

Aesthetically appealing with minimalistic design, high quality product images

Curated categories appeal to both experienced and inexperienced plant lovers

COMPARATIVE

Amazon | Plants

USA

Comprehensive filters and sorts applicable for website with huge amount of products

Customer ratings & reviews useful for marketplace platforms

Recommended related product lists are on point

COMPARATIVE

Amazon | Plants

USA

Comprehensive filters and sorts applicable for website with huge amount of products

Customer ratings & reviews useful for marketplace platforms

Recommended related product lists are on point

COMPARATIVE

Amazon | Plants

USA

Comprehensive filters and sorts applicable for website with huge amount of products

Customer ratings & reviews useful for marketplace platforms

Recommended related product lists are on point

  1. User Interview & Usability Testing

  1. User Interview & Usability Testing

To validate the research analysis and assumption, user interview and usability testing among general plant buyers and the website users of Noah Garden Centre. The following insights were reflective of the most common trend among 7 interviewees through affinity mapping and prioritisation matrix.

User Interview Main Insights

"I feel confused using Noah's website because I can’t find filters that meet my requirements."

"I feel confused using Noah's website because I can’t find filters that meet my requirements."

"I find it hard to navigate around the website because their category grouping confuses me."

"I find it hard to navigate around the website because their category grouping confuses me."

"I need to know the plant dimensions & light requirements because I have space limitations."

"I need to know the plant dimensions & light requirements because I have space limitations."

"I need to visualise if the plants are suitable to my home style because plants are part of my home decoration."

"I need to visualise if the plants are suitable to my home style because plants are part of my home decoration."

Usability Testing Summary

72%

couldn't locate the filter directly

100%

felt frustrated more than once during the purchase process

Define the Problem

Define the Problem

  1. Persona

  1. Persona

  1. User Flows

  1. User Flows

User Flow 1

User has a clear purchase goal in mind

User Flow 2

User would like to browse the website before making the purchase decisions

Prototype

Prototype

  1. Design Stylescape

  1. Design Stylescape

Introduce a more homely and personal style with a modern touch to the website, which appeals to Heather's need through developing a design stylescape.

Bird of Paradise

The leaves of the Bird of Paradise are large and paddle-shaped, with a leathery texture and a glossy finish. They are arranged in a fan-like pattern and grow up to 18 inches long and 6 inches wide.

[Josefin Sans]

[Open Sans]

8D9F5F

E19E5B

F6EEDB

D7C9AD

A9947A

Bird of Paradise

The leaves of the Bird of Paradise are large and paddle-shaped, with a leathery texture and a glossy finish. They are arranged in a fan-like pattern and grow up to 18 inches long and 6 inches wide.

[Josefin Sans]

[Open Sans]

8D9F5F

E19E5B

F6EEDB

D7C9AD

A9947A

Bird of Paradise

The leaves of the Bird of Paradise are large and paddle-shaped, with a leathery texture and a glossy finish. They are arranged in a fan-like pattern and grow up to 18 inches long and 6 inches wide.

[Josefin Sans]

[Open Sans]

8D9F5F

E19E5B

F6EEDB

D7C9AD

A9947A

2. Design Iterations

2. Design Iterations

By listening to the users' feedbacks through 3 rounds of usability testing, design decisions were made to the respective feedbacks. As a result, the time spent on the 3 testing tasks were significantly decreased.

Usability Testing Overview

Task 1

Task 1

Add a Monstera Deliciosa (Swiss cheese plant) to your shopping cart

Add a Monstera Deliciosa (Swiss cheese plant) to your shopping cart

Average Time Taken

Average Time Taken

Average Time Taken

1’ 17’’

1’ 17’’

Average Time Taken

Average Time Taken

Average Time Taken

63.7’’

63.7’’

Average Time Taken

Average Time Taken

Average Time Taken

47.5’’

47.5’’

Task 2

Task 2

Find out a list of plants that only need partial sunlight

Find out a list of plants that only need partial sunlight

Average Time Taken

Average Time Taken

Average Time Taken

1’ 25’’

1’ 25’’

Average Time Taken

Average Time Taken

Average Time Taken

41.3’’

41.3’’

Average Time Taken

Average Time Taken

Average Time Taken

40.5’’

40.5’’

Task 3

Task 3

Find out a list of plants that are pet-friendly and 30 cm tall

Find out a list of plants that are pet-friendly and 30 cm tall

Average Time Taken

Average Time Taken

Average Time Taken

1’ 07’’

1’ 07’’

Average Time Taken

Average Time Taken

Average Time Taken

22.3’’

22.3’’

Average Time Taken

Average Time Taken

Average Time Taken

14.0’’

14.0’’

Scenario

Scenario

You want to buy some plants to decorate your home.

You want to buy some plants to decorate your home.

1st Round

1st Round

On Existing Website

On Existing Website

On Existing Website

7 usability testing

7 usability testing

7 usability testing

2nd Round

2nd Round

1st Design Iteration

1st Design Iteration

1st Design Iteration

3 usability testing

3 usability testing

3 usability testing

3rd Round

3rd Round

2nd Design Iteration

2nd Design Iteration

2nd Design Iteration

3 usability testing

3 usability testing

3 usability testing

Outcomes: There was an average of 56% less time spent to complete the tasks designed to target the user pain points. The overall feedback also reflects a significant drop on difficulty levels & times of users feeling frustrated.

Outcomes: There was an average of 56% less time spent to complete the tasks designed to target the user pain points. The overall feedback also reflects a significant drop on difficulty levels & times of users feeling frustrated.

There was an average of 56% less time spent to complete the tasks targeting the pain points.

Homepage Iteration

1

2

3

Original

" The top bar has so much to go through…"

" I don't understand what 'Plant Parents Club' is…"

1

1

2

2

3

3

The navigation bar has too much information that compels the users to skip it at the first glance.

The main button is not prominent nor direct enough to call for the action of joining the membership programme.

The key information about point redemption is not legible.

3

1

4

5

2

3

1

4

5

2

3

1

4

5

2

3

1

4

5

2

Version 1.0

" I like the clear categories of the navigation bar."

" I think I need a direct entry to the shop."

" This image gives me the impression that this

website sells those cute mini plants."

4

4

5

5

Adding a direct entry to the shop would enable the users to start browsing products immediately upon entering the website.

The hero image could be more impactful and represent the type of the products the website sells more accurately.

Version 2.0

" I love this plant on the homepage. It grabs my attention first."

" The information is easy to grasp here."


Product List Page Iteration

1

Original

" The filter list is so long and the headings don't make sense to me. "

1

1

The filter does not have a logical categorization to aid the users to find the filters that fulfil their needs.

1

3

2

1

3

2

1

3

2

1

3

2

Version 1.0

" The filter is easy to find."

" The clear category is really helpful but some headings could be more succinct."

" I'm not sure which category I'm at on this page."

1

1

2

2

3

3

The filter headings could be more intuitive.

Breadcrumb & page title are necessary for better navigation.

Clear filter button has a higher visual priority than its actual function priority.

Version 2.0

" The filter is at a prominent location, love that."

" The filter categories are effective."

Product Display Card Iteration

Original

1

1

2

2

3

3

Unintuitive product naming.

Lack of information on pot radius which is essential for repotting.

The category 'plant' is not providing any extra information about the product.

Sansevieria

$30

M

new arrival!

Version 1.0

1

1

2

2

3

3

Product name is simplified.

The strategy of providing the size alphabet and a size guide at the side is not efficient to inform the measurement of each plant.

Adding tags for plants showcases the unique characteristics, but the position of the tags could not tolerate for more than one tag.

new arrival!

low-light

new arrival!

low-light

Sansevieria

$30

M

[0.9mh, pot Ø30cm]

Version 2.0

Clear visual hierarchy with just enough key information.

Adding like button for logged in users to save their favourite plants.

Add to Cart Page Iteration

1

2

Original

" I find it exhausting to figure out what each extra service is about."

" The description is too long to read."

1

1

2

2

Poor layout of the choices prevents the users from making the informed decisions. Important information such as other pot & saucer choices, repotting service is missing.

The description is long-winded, users have to dig out the information themselves.

2

1

Version 1.0

" The tags are very useful for me to know about the water and light requirements."

" I didn't realise the pot and saucer are under the same step. "

1

1

The pot and saucer choices should be separate steps as horizontal scrolling could grow so long that the users need to scroll a lot to find the saucers.

Version 2.0

" The steps of purchase are very intuitive."

" I would love to buy plants at this website. "

Future Steps

Future Steps

Search Results

Search Results

To improve on the display method of search results to reduce the information overlapping among same plants with different accessories.

To improve on the display method of search results to reduce the information overlapping among same plants with different accessories.

Mobile Responsive

Mobile Responsive

To enhance the mobile responsiveness of NGC website, ensuring a seamless and user-friendly experience for visitors accessing the site on smartphones and tablets.

To enhance the mobile responsiveness of NGC website, ensuring a seamless and user-friendly experience for visitors accessing the site on smartphones and tablets.

Business Goal

Business Goal

To engage Noah Garden Centre to ensure the website design aligned with their business goal by balancing the showcasing of both partners' and their own products.

To engage Noah Garden Centre to ensure the website design aligned with their business goal by balancing the showcasing of both partners' and their own products.

zhiqing | porfolio