Copyright © 2019 Xiaonan Ma.

e-Commerce Website Design

The current TCC website, tccrocks.com, is only basic website advertising promotions and store locations. Since TCC’s social media campaigns have brought so much more traffic to tccrocks.com, we considered upgrading tccrocks.com into a fully functional e-Commerce Website. The tccrocks.com redesign aims to provide online shopping experiences as well as encourage customers to visit physical TCC stores nearby.

My Role

 

I defined the draft style guide and pattern library for brand identity and visual consistency. I also came up design concepts, with wireframes, for major function flows.

Responsive Design and Layouts

 

Google Analytics shows that more than 60% of traffic going to tccrocks.com is from mobile devices. Responsive design is very important so I defined a grid system and responsive rules. Besides promotions, inventory and product pages are the main content of the website, I experimented with various screen layouts for them.

Main grid for desktop andt tablet landscape

Grid for tablet portrait

Grid for mobile

Visual Flow and Hierarchy: “F“ pattern

Visual Flow and Hierachy: line pattern

Home Page

Promotions

Inventory in list view

Inventory in grids view

Design Concepts and Examples