Copyright © 2019 Xiaonan Ma.

e-Commerce Website Design

The current TCC website,, is only basic website advertising promotions and store locations. Since TCC’s social media campaigns have brought so much more traffic to, we considered upgrading into a fully functional e-Commerce Website. The 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 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


Inventory in list view

Inventory in grids view

Design Concepts and Examples