Role: UX/UI Designer, UX Writer
Company: Sharp Hue
Timeline: ~4 weeks (2021)
Tools: Adobe XD
E-commerce Implementation
Website Redesign
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.
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.
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.
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.
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
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.
Next
Netflix Case Study