Select Page

Website Redesign: GongFu Tea

modernizing small business e-commerce through visual storytelling

The Premise

Client:  GongFu Tea is a small independent tea shop in Des Moines, IA. The physical shop itself is lovely; the website is… antique.

Objective:  Bring the vibe of the physical shop to the web. Focus on the quality of the tea and its faraway origins. Infuse every page with visual storytelling, but without sacrificing usability.

The Process

I began with visual research on common tea branding trends, sketches, and then a rough draft for a header image. The brick-and-mortar shop’s interior is styled with pastel tones and dark wood, so I incorporated a similar style into the key image that would set the tone for the rest of the UI style.

The wireframes served as layout guidelines and as a checklist to make sure I included all the features an e-commerce site requires, such as a search function, featured customer reviews, clear prices, and product size options.

One feature of the original site that I really loved was their product photos: flat-lays of loose-leaf tea in little circles. So I set up a basic white surface, got out my own tea collection, and photographed my own loose-leaf tea flat-lays for use in the design. All of the tea pictured is my own photography.

unedited original

ready for display

in context

I brought in additional visuals evocative of global travel—a world map, photos of tea plantations, a dotted travel path—and worked them in to every page, from obvious center-stage placements on the home page, to more subtle decorations on the checkout page.

The Product

The final redesign features a home page with a carousel slider, a product category page, a product detail page, and a cart page. On every page, the user is part of a visual journey representing the actual physical travel and shipping involved in importing fine teas. The elegant type and tea flat-lays advertise a high level of quality in GongFu Tea’s curated collection. And the soft greens and gradient fades evoke the shop’s calming atmosphere. Taken together, the redesigned site brings the GongFu Tea in-person shopping experience online.

home page with secondary carousel image advertising a close-up photo of spiced cider tea
pale green "cart" page showing two teas in cart; decorative tea leaves bordering bottom edge