Re-designing NSE Tropicals

Screenshot — Homepage

Challenge: re-design the e-commerce website https://www.nsetropicals.com/

Timeline: 2 weeks

About NSE Tropicals:

An e-commerce website dedicated to bringing the odd, unusual, rare, or seemingly unobtainable plant to fellow collectors.

“You will find just about anything imaginable among our plants.” -Enid

Design Process

01. Explore — Heuristic Analysis

02. Organize — Navigation

03. Learn — Personas

04. Ideate — Sketch & Wireframe

05. Create — Prototype

06. Final — NSE Tropicals 1.0

Heuristic Analysis

I began my re-designing journey by utilizing Nielsen Norman Group’s: 10 Usability Heuristics for User Interface Design to determine possible pain points within the e-commerce website (these are my assumptions).

https://www.nngroup.com/articles/ten-usability-heuristics/

Heuristic Analysis

Usability Testing

I needed to validate my assumptions from my heuristic analysis. I performed usability testing with 5 participants:

  • 20 minutes per test
  • 2 Male | 3 Female
  • 4 New | 1 Collector
  • All in their 20’s

Task Analysis:

I had the participants share their screen as they performed these tasks on the website so I could validate my assumptions as well as understand further pain points:

Find information about the site

Pre-order her book

Purchase a gift card

Find reviews of products

Sort shop items by average rating

Affinity Map — Usability Test
Affinity Map — Usability Test

Pain Points

  • “About Us” information is scattered throughout the site
  • Took users ~55 seconds to find the book to pre-order
  • Users missed specifying gift card method during checkout
  • Testimonials are not credited leading to frustration
  • Sort feature created confusion

These are some of the things that users said…

Screenshot — “Sort” Drop Down

“There is no indication of reviews/ratings”

“I have no idea why this is a selection when there is no rating”

Screenshot — “Restocks”

“Gift cards should not belong in restocks since there is an unlimited amount”

Screenshot — “Testimonials”

“It’s not credible at all, there is no reference to who wrote the reviews — makes it pointless”

“Maybe associating a name to the quotes”

Screenshot — “Navigation Bar”

“I am going to try to find the book in shop”

“You wouldn’t even know she had a book available to pre-order unless you clicked through the navigation bar”

Card Sorting

Now that I have identified pain points the users are encountering within the website. I wanted to understand how users utilize the navigation bar with the goal of increasing efficiency for users to navigate through the website to complete tasks.

  1. ) Open card sorting to identify how users bucket elements within the navigation bar.
Dendrogram Results — Open Card Sorting
Affinity Mapping — Open Card Sorting Results

2.) Closed card sorting (with different people than initial sorting) to validate buckets created and organized from initial open card sorting.

Results Matrix — Closed Card Sorting

Site Mapping

Validation through card sorting helped me plan out the final navigation bar and footer for the website.

Site Map — Navigation Bar
Site Map — Footer
Final Navigation Bar Layout
Final Footer Layout

Personas

It’s important to learn about the users who are going onto the site.

Who are these people?

What do they want?

How do they use the site?

I sent out a Google survey and received 10 responses within the plant community. Below are real life personas I created with the information collected:

Jennifer Huang — “The Collector”

Emily Lee — “The Enthusiast”

Sketches & Wireframes

My re-design process started with sketches…

Sketch — Homepage
Sketches — Product Listing (left) & Product Detail (right) pages

From my sketches, I was able to bring my design to real life utilizing Figma.

Wireframes — Homepage, Product List, Product Detail pages

NSE Tropcials 1.0

I present to you my mid-high fidelity prototype of my NSE Tropicals re-design!

Clickable link to my prototype: NSE Tropicals 1.0

Figma — Homepage
Figma — Pre-Order Book page
Figma — Product page
Figma — Gift Card page
Figma — Shop drop down
Figma — Plants drop down
Figma — Check out page

Future

It was a rush to re-design this e-commerce website in a timeline of 2 weeks. I still have lots of work to do ahead in terms of refining. So here is my plan for the week to come:

  • Test my Figma prototype through usability testing (preferably with users who go on the website frequently)
  • Conduct interviews rather than surveys to continue to build out my real life personas and learn further pain points
  • Refine my prototype based on my findings

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hannah Yi

Hannah Yi

UX ♡ UI Designer based in Seattle, WA