Annie Tung

An useful step by step how-to guide for users to follow and learn about the different products / tools needed for the job done. My role was the lead designer responsible for the brand consistency, overall design, and responsive content template. The site is responsive which graphic elements and UI are scaled / changed accordingly to the screen size.

Desktop + Tablet Version

01-CanTire_CategoryPage_Home_v2-1-feature

 

 

01. Landing page of the HOW-TO site which showcases all the seasonal relevant and newest HOW-TOs. The navigation provides different categories of jobs / guides for the user to select from.

site-design-howto-images-02-subcat

 

 

02. When the user selects a category within the navigation, a subcategory navigation drops to help filter the different HOW-TOs.

site-design-howto-images-03-hangaphoto-v2

 

03. This is the HOW-TO job content template which it showcases all the necessary steps and recommended products. Each step showcases the necessary product / tool and allows the user to add to their shopping list (for comparison, viewing purposes, later use) or to their purchasing cart.

Mobile Version

howto-mobile-01

 

 

01. Landing screen of the HOW-TO site. The background image is adapted based on the first listed HOW-TO’s category.

howto-mobile-02

 

 

02. As the user scrolls it fades to the back of the category navigation.

howto-mobile-03

 

 

 

03. This is the HOW-TO job content template which it showcases all the necessary steps and recommended products. All images are scaled proportionally from desktop version with live text.

howto-mobile-04

 

 

04. The content scrolls ontop of the fading title image.

howto-mobile-05

 

 

05. The list of “what you need” is expandable which allows users to view product details.

howto-mobile-06

 

 

06. Each step showcases the necessary product / tool and allows the user to add to their shopping list (for comparison, viewing purposes, later use) or to their purchasing cart.