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.
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
Inventory in list view
Inventory in grids view
Design Concepts and Examples