MOUTH HOMEPAGE RE-DESIGN
The goal of this project was to shift the focus of Mouth's homepage at first glance from an a la carte product site, to a lead retailer in craft curated food gifts.
Some main issues I wanted to address in the re-design were:
- Overall over-crowding of content - find ways to say more with less and give our colorful photos more room to breathe.
- A tight navigation center - The nav and header is the first thing a visitor can see on a homepage. How do we make shopping and discovery easier from the start?
- A tight left side bar - an image heavy side bar that isn't navigation is limiting to the other real estate on the page.
- Hierarchy of type to image - Mouth has such clever and creative copy, the humor in collection titles can get lost when they're the same size as lesser elements.
- Small mailing list sign-up box - How can we grow our email list through design?
Below are some designs that didn't make the final cut, but I'm proud to share:
RE-DESIGN MOCKUP #1
The new navigation design features categories on a white background, giving each link more room to breathe and to be read more successfully. The logo is also in the center, more symmetrical and prominent for site branding. Login and Cart status is also more prominent, to remind shoppers about their order.
WHY GET RID OF CAROUSELS? Here's Why
To help the shopper easily find special collections for holidays and seasonal sales.
Buttons that feature specific gifts, partnership collections, and themes now have more white space and a bigger visual footprint to shine colorfully. Bigger images with HTML display text makes the offerings more appetizing and make it clear what you get upon click-through.
This gallery of individual products Lets shoppers get a peek at the variety of the Mouth collection, without dedicating the whole homepage to individual products.
The gallery can be changed to feature any collection based on the season or marketing push.
Mouth recently launched "Mouthpiece", an online magazine of original food media content written by the Mouth Team. This section highlights the latest articles, to generate more traffic to the blog, and give customers incite into how to take what they buy at Mouth and bring it to life through recipes, gifts, and more.
Many of our most loyal customers have been proven to come from our weekly email newsletters. Giving a sign-up section and discount incentive importance on the homepage can give a shopper a feeling of F.O.M.O, and will increase conversion as we pop up in their email inbox with sales and exclusive deals.
Bring it back full-circle with the navigation bar, in case visitors had a long trip scrolling down to the bottom.
RE-DESIGN MOCKUP #2
THOUSANDS OF PRODUCTS
Mouth has one the biggest selection of artisanal food and spirits I've ever seen one online small-batch food retailer to have. The homepage of any website is the first impression a visitor has on a brand. We can open with showcasing the breadth of products we carry, along with the main brand mission/motto and an abbreviated navigation section to give that colorful overview.
Similar to design #1, this design features three fresh collections that visitors can jump to right away.
Similar to design #1, this section features a la carte shopping.
Design #1 has a gallery style blog section. This one is more straight forward, a content block to guide you to the brand's blog.
Mouth has a brick and mortar store in Dumbo, Brooklyn. This content block gives that shop importance to give visitors to option to shop in-store and online.
This block was inspired by my research on Nike store webpages; I love how they gave a quick look into how the store looked as well as the address and how to get there.
A mailing list design, similar to design #1
This footer design has more white space, and is listed in organized categories, so that navigation and customer service inquiries is more clear for the shopper.
RE-DESIGN MOCKUP #3
A little different than nav. bar #1, This design has two rows of links, for categories of different priority. The links are on white for more breathing room, and the logo and search bar sit on the sides for support.
THOUSANDS OF PRODUCTS
Similar to the concept of design #2, This hero image highlights the huge Mouth product collection, and entices you to shop for all these colorful eats.
A two row section designed a-symmetrically for a dynamic page flow, focused on specific categories and collections.
This content block can be swapped out whenever there is a flash sale or urgent retail message to advertise (Holiday collection navigation, free shipping day, order now ship later, etc.)
BRICK AND MORTAR STORE
Similar to design #2, this block features the brick and mortar store, plus a ticker to show when the store will open, to help shoppers plan their trip better.
ABOUT SECTION + EMAIL LIST
After scrolling through the offerings, the footer can help bring you back to the "why," with this about page section. It is also connected to the mailing list and new footer navigation.