Role: UX/UI Designer, UX Writer

Company: Sharp Hue

Timeline: ~4 weeks (2021)

Tools: Adobe XD

E-commerce Implementation
Website Redesign
e-commerce-implementation.png

PROBLEM

The client's old site had documentation for each product, but customers weren't able to buy the product online. Instead, they would have to contact a sales representative directly to purchase a product.

GOALS

  • Implement e-commerce capabilities and use Stripe for the checkout process.

  • Update the style of the old website.

1. DISCOVERY

HEATMAP​​

For this project, we wanted to focus on creating an easy way to search through the catalog of products since the site provides documentation and helpful information about each product. We implemented and evaluated heatmaps on the old site's Product Documents page to better understand how users navigated through the site.

heatmap-8189668-click-desktop.jpg

SKETCHING

We wanted to focus on improving the search feature, as the heatmap showed that users would primarily search for products using the search input.

Updated Category Page Sketch.jpg
Product Page Sketch.jpg
2. INTERACTION DESIGN

WIREFRAMES - PRODUCT AND CART PAGES

After sketching out initial concepts, we moved on to creating the wireframes for the Product page and Cart. We wanted to create a design that was intuitive and easy to use. We added breadcrumbs on the product pages to make it easier to navigate between products.

Frame 1.png
Frame 4.png

WIREFRAMES - CATEGORY PAGE HOMEPAGE

While the heatmap showed that most users did scroll through the long page, we wanted to allow users to easily navigate the page and find products. In order to accomplish this, we added a search input and a dropdown for quick searching.

Frame 4.png
Frame 3.png
3. PROTOTYPING

HIGH-FIDELITY PROTOTYPE

A crucial detail that emerged during the design process was the need to denote products that require a license or a prescription. We added reminders on the product page, cart, and when a product is added to the cart to ensure that users would be aware that they would need to provide documentation.

Additionally, the categories of products can be searched by scrolling through the page, using a dropdown, or using the search bar. We decided to keep the search bar since the heatmap showed that users would consistently use it to search for products.

Click here to view the prototype

Frame 3.png
4. NEXT STEPS

The next step I would take to continue improving on my design would be to create another round of heatmaps to understand how users are navigating through the new product page. While users would scroll through the long pages on the old site, I would like to ensure that the product category page is as easy as possible to navigate while reducing the number of clicks necessary.