SNOW JOE - ONLINE SHOPPING

E-commerce Website

Year:

2019

Role:

UI & UX

Platform:

Responsive Web across mobile and desktop

Project Overview

Snow Joe wants to improve its website on Navigation Bar, Sub-navigation and Product Page to make the user have a better online shopping experience and increase its website sales.

The goal is to create more long-term partnerships versus one-time experiences.


I collaborated with a UX Researcher and a Marketing Specialist to achieve this goal with the following concepts: 

  1. Optimize the old navigation bar to help customers find the product and service quickly and precisely. 
  2. Optimize the product card and help customers shorten their purchasing process.
  3. Maximize graphic efforts for product information. 
  4. Based on interviewing and testing our target group, try to recommend the most relevant content for the specific user.

 

Responsibilites In this project, I worked on research, wireframe, UI design and motion prototype. 

Problems:

From our user interviews and customer feedback, I identified four pain points of their online shopping experience:

​

  1. Users have trouble navigating on Snow Joe sites due to the unclear site structure & duplicated menus.
  2. Users have trouble understanding the outdated pattern and interaction model.
  3. The Product Card doesn't show essential information to help users make a purchasing decision quickly.
  4. The Product Page's information is very heavy and chaos, users have trouble to locate themselves, and they didn't have enough freedom to control the page.  

 

Due to the tight timeline, we prioritized the tasks to mainly focus on solving pain points 1, 3, 4 to provide better browsing and purchasing experience.

-Problem #1:

Unclear site structure & duplicated menus.

The home page navigation bar's content is very disorder, Signup/Login/ Register could all under My Account. Some Cordless Tools and Garden Tools are duplicated in both the Collection Section and different Branding sections. Also, long text content hardly could help users know about SJ Products.  

-Problem #3:

The Product Card doesn't show essential information.

The Product Card is missing Add to Card Button for customers' convenience. Also, the product's description is too long, which makes the product's essential specifications hide from the page. This will cause customers to take two more steps before they finish the purchase.

-Problem #4:

The Product Page's information is very heavy and chaotic.

When the user scrolls down the Product Page, the Navigation Bar and the Product Hero Image will disappear. In this case, users will get lost easily in the product page's long descriptions unless they scroll up to get the Navigation Bar again, which extends the purchase process and make users lost their freedom to control the page.

Persona & User Journey:

We created a persona to reflect the target user - 25 to 55 years-old Snow Joe fans who are looking for innovative, and affordable outdoor tools to keep their home looking beautiful. They are medium tech-savvy. They need an easy-to-use website to explore the products they need and finish the purchasing process.

Wireframe

The templates are scalable, modular and flexible across devices. They can also be customized to meet the specific needs of each section.

  • Templates are built in an open and modular way. 
  • Content providers can customize units to accommodate the need of each individual market & promotion needs.
  • A responsive grid system lets content scale across devices.

UI Design

When user lands on Home Page

1. Promo Bar & Free shipping:

Show the Promo Bar and Free Shipping info on the top of the Navigation Bar to avoid being covered by the drop-down menu.

  1. Navigation Bar:

Organizing Navigation Structure and scale the height of the Navigation Bar to apply different pages' needs. Improved Cart Icon will help customers know about their shopping status better.

3. Search Bar:

Users can find content more quickly by adding Trending Search, Featured Collections, Quick links, and Suggestions.

4. Drop-down Menu:

Users can know more about SJ tools with their lifestyle images.

5. Product Tiles in different states:

Users can know more about SJ tools with their lifestyle images.

6. Product Image + Video Gallery: 

The extra product images and action/assembling videos are helpful in the decision process.

7. Sub-Navigation:

With a long content page, the sub-navigation bar always shows product info at the top, which helps users to control the page better.

8. Features:

Showing the key features with Tools' lifestyle images to help users read the content more understandable.

9. Customer Reviews:

New Reviews feature effectively avoid unverified buyers' unreasonable low reviews, which will help the potential customers to have a more accurate understanding of the product.

10. Q&A: 

Users can use the category filters to find the answers to the products more quickly.

Style Guide:

Other Works

Scout Nav - Safer Route

HMI

Android Mobile

Scout Nav - Safer Route

Mobile

Novo - Driver Board

Mobile

Interested in working together?

Contact me:

pohu.interactive@gmail.com

Copyright @ Po Hu. All Rights Reserved

SNOW JOE - ONLINE

SHOPPING

E-commerce Website

Year:

2019

Role:

UI & UX

Product Type:

Responsive Web across mobile and desktop

Project Overview

Snow Joe wants to improve its website on Navigation Bar, Sub-navigation and Product Page to make the user have a better online shopping experience and increase its website sales.

The goal is to create more long-term partnerships versus one-time experiences.


I collaborated with a UX Researcher and a Marketing Specialist to achieve this goal with the following concepts: 

  1. Optimize the old navigation bar to help customers find the product and service quickly and precisely. 
  2. Optimize the product card and help customers shorten their purchasing process.
  3. Maximize graphic efforts for product information. 
  4. Based on interviewing and testing our target group, try to recommend the most relevant content for the specific user.

 

In this project, I worked on research, wireframe, UI design and motion prototype. 

Problems:

From our user interviews and customer feedback, I identified four pain points of their online shopping experience:

​

  1. Users have trouble navigating on Snow Joe sites due to the unclear site structure & duplicated menus.
  2. Users have trouble understanding the outdated pattern and interaction model.
  3. The Product Card doesn't show essential information to help users make a purchasing decision quickly.
  4. The Product Page's information is very heavy and chaos, users have trouble to locate themselves, and they didn't have enough freedom to control the page.  

 

Due to the tight timeline, we prioritized the tasks to mainly focus on solving pain points 1, 3, 4 to provide better browsing and purchasing experience.

-Problem #1:

Unclear site structure & duplicated menus.

The home page navigation bar's content is very disorder, Signup/Login/ Register could all under My Account. Some Cordless Tools and Garden Tools are duplicated in both the Collection Section and different Branding sections. Also, long text content hardly could help users know about SJ Products.  

-Problem #3:

The Product Card doesn't show essential information.

The Product Card is missing Add to Card Button for customers' convenience. Also, the product's description is too long, which makes the product's essential specifications hide from the page. This will cause customers to take two more steps before they finish the purchase.

-Problem #4:

The Product Page's information is very heavy and chaotic.

When the user scrolls down the Product Page, the Navigation Bar and the Product Hero Image will disappear. In this case, users will get lost easily in the product page's long descriptions unless they scroll up to get the Navigation Bar again, which extends the purchase process and make users lost their freedom to control the page.

Persona & User Journey:

We created a persona to reflect the target user - 25 to 55 years-old Snow Joe fans who are looking for innovative, and affordable outdoor tools to keep their home looking beautiful. They are medium tech-savvy. They need an easy-to-use website to explore the products they need and finish the purchasing process.

Wireframe

The templates are scalable, modular and flexible across devices. They can also be customized to meet the specific needs of each section.

  • Templates are built in an open and modular way. 
  • Content providers can customize units to accommodate the need of each individual market & promotion needs.
  • A responsive grid system lets content scale across devices.

UI Design

When user lands on Home Page

1. Promo Bar & Free shipping:

Show the Promo Bar and Free Shipping info on the top of the Navigation Bar to avoid being covered by the drop-down menu.

  1. Navigation Bar:

Organizing Navigation Structure and scale the height of the Navigation Bar to apply different pages' needs. Improved Cart Icon will help customers know about their shopping status better.

3. Search Bar:

Users can know more about SJ tools with their lifestyle images.

4. Drop-down Menu:

Users can know more about SJ tools with their lifestyle images.

5. Product Tiles in different states:

The improved Product Tiles help customers know about SJ product more quickly and directly, which shortens their purchasing process.

6. Product Image + Video Gallery: 

The extra product images and action/assembling videos are helpful in the decision process.

7. Sub-Navigation:

With a long content page, the sub-navigation bar always shows product info at the top, which helps users to control the page better.

8. Features:

Showing the key features with Tools' lifestyle images to help users read the content more understandable.

9. Customer Reviews:

New Reviews feature effectively avoid unverified buyers' unreasonable low reviews, which will help the potential customers to have a more accurate understanding of the product.

10. Q&A: 

Users can use the category filters to find the answers to the products more quickly.

Style Guide:

Other Works

Scout Nav - Safer Route

HMI

Android Mobile

Scout Nav - Safer Route

Mobile

Novo - Driver Board

Mobile

Interested in working together?

Contact me:

pohu.interactive@gmail.com

Copyright @ Po Hu. All Rights Reserved

SNOW JOE - ONLINE SHOPPING

E-commerce Website

Year:

2019

Role:

UI & UX

Platform:

Responsive Web across mobile and desktop

Project Overview

Snow Joe wants to improve its website on Navigation Bar, Sub-navigation and Product Page to make the user have a better online shopping experience and increase its website sales.

The goal is to create more long-term partnerships versus one-time experiences.


I collaborated with a UX Researcher and a Marketing Specialist to achieve this goal with the following concepts: 

  1. Optimize the old navigation bar to help customers find the product and service quickly and precisely. 
  2. Optimize the product card and help customers shorten their purchasing process.
  3. Maximize graphic efforts for product information. 
  4. Based on interviewing and testing our target group, try to recommend the most relevant content for the specific user.

 

In this project, I worked on research, wireframe, UI design and motion prototype. 

Problems:

From our user interviews and customer feedback, I identified four pain points of their online shopping experience:

​

  1. Users have trouble navigating on Snow Joe sites due to the unclear site structure & duplicated menus.
  2. Users have trouble understanding the outdated pattern and interaction model.
  3. The Product Card doesn't show essential information to help users make a purchasing decision quickly.
  4. The Product Page's information is very heavy and chaos, users have trouble to locate themselves, and they didn't have enough freedom to control the page.  

 

Due to the tight timeline, we prioritized the tasks to mainly focus on solving pain points 1, 3, 4 to provide better browsing and purchasing experience.

-Problem #1:

Unclear site structure & duplicated menus.

The home page navigation bar's content is very disorder, Signup/Login/ Register could all under My Account. Some Cordless Tools and Garden Tools are duplicated in both the Collection Section and different Branding sections. Also, long text content hardly could help users know about SJ Products.  

-Problem #3:

The Product Card doesn't show essential information.

The Product Card is missing Add to Card Button for customers' convenience. Also, the product's description is too long, which makes the product's essential specifications hide from the page. This will cause customers to take two more steps before they finish the purchase.

-Problem #4:

The Product Page's information is very heavy and chaotic.

When the user scrolls down the Product Page, the Navigation Bar and the Product Hero Image will disappear. In this case, users will get lost easily in the product page's long descriptions unless they scroll up to get the Navigation Bar again, which extends the purchase process and make users lost their freedom to control the page.

Persona & User Journey:

We created a persona to reflect the target user - 25 to 55 years-old Snow Joe fans who are looking for innovative, and affordable outdoor tools to keep their home looking beautiful. They are medium tech-savvy. They need an easy-to-use website to explore the products they need and finish the purchasing process.

Wireframe

The templates are scalable, modular and flexible across devices. They can also be customized to meet the specific needs of each section.

  • Templates are built in an open and modular way. 
  • Content providers can customize units to accommodate the need of each individual market & promotion needs.
  • A responsive grid system lets content scale across devices.

UI Design

When user lands on Home Page

1. Promo Bar & Free shipping:

Show the Promo Bar and Free Shipping info on the top of the Navigation Bar to avoid being covered by the drop-down menu.

  1. Navigation Bar:

Organizing Navigation Structure and scale the height of the Navigation Bar to apply different pages' needs. Improved Cart Icon will help customers know about their shopping status better.

3. Search Bar:

Users can find content more quickly by adding Trending Search, Featured Collections, Quick links, and Suggestions.

4. Drop-down Menu:

Users can know more about SJ tools with their lifestyle images.

5. Product Tiles in different states:

The improved Product Tiles help customers know about SJ product more quickly and directly, which shortens their purchasing process.

6. Product Image + Video Gallery: 

The extra product images and action/assembling videos are helpful in the decision process.

7. Sub-Navigation:

With a long content page, the sub-navigation bar always shows product info at the top, which helps users to control the page better.

8. Features:

Showing the key features with Tools' lifestyle images to help users read the content more understandable.

9. Customer Reviews:

New Reviews feature effectively avoid unverified buyers' unreasonable low reviews, which will help the potential customers to have a more accurate understanding of the product.

10. Q&A: 

Users can use the category filters to find the answers to the products more quickly.

Style Guide:

Other Works

Scout Nav - Safer Route

HMI

Android Mobile

Scout Nav - Safer Route

Mobile

Novo - Driver Board

Mobile

Interested in working together?

Contact me:

pohu.interactive@gmail.com

Copyright @ Po Hu. All Rights Reserved