I redesigned a local cupcake shop's homepage

This is a redesign I did for Flux Academy's Instagram stories last year.

Background

Toronto Cupcake Co. is a Toronto-based business that delivers delicious gourmet cupcakes. They've been operating for 11 years and mainly target business meetings, birthdays, and weddings.

Toronto Cupcake was created by Michelle Harrison. You can learn more here.

Before

✅ Attractive offer

These cupcakes look mouthwateringly AMAZING. The website should match the cupcakes, wouldn't you agree?

✅ First in search!

They are search result #1 when I search “Toronto cupcakes”!

In fact, they rank on the first page for a lot of great keywords.

❌ Are you selling packaging or cupcakes?

A nice close-up shot of any of your cupcakes would be more effective than showing the packaging. Show, don't tell.

❌ Never say "welcome"

Truth is, users don't really care about greetings and small talk.

As a user, I would have 2 major questions when I get to this page:

Where are the cupcakes?
How much is delivery and how long does it take?

❌ Low-res imagery

Poor image quality hurts credibility. Users assume that the quality of your digital presence and your offer are directly proportional.

Do your offer justice by ensuring it is well represented as well as big and prominent.

❌ Where's the mood?

Every layout has an informational message and a feeling message. This layout lacks a feeling message which is created with typography, balance, color and visual interest.

❌ Inconsistent alignment

Consistent alignment creates order (which is visually satisfying for users) and provides viewers with consistent visual reference points making scannability and content consumption much easier.

❌ Make important information visually prominent

Out of sight, out of mind. Users know that their options are endless. They will not hesitate to abandon the page if what they need isn't immediately visible.

❌ Next steps?

How do you want users to take action? What do you want them to do next?

❌ Weak first impression

They should take advantage of all this organic traffic (undoubtedly bringing in lots of new users) by leveraging the Aesthetic-Usability effect. This is especially important given the fact that the purchasing experience happens exclusively on the website (this is not a brick and mortar business).

An aesthetic layout is one that communicates what users need to know in a scannable manner and makes users feel something through visual language.

The Redesign

🎯 Goals

Make access to the cupcakes visually prominent
Make learning more about delivery visually prominent
Strengthen the informational message
Make the information scannable
Higher quality prominent imagery of the offer
Give the layout a mood

1) Cupcakes previewed and accessible

Users can either quickly cycle through some featured cupcakes using this slider or hit the "Cupcakes" call-to-action to view all cupcakes and obtain more details.