Let’s redesign Krispy Kreme SG website

I wanted to redesign a website to train my thought process and UI skills. checked the Singapore Krispy Kreme website and it led me to this.

This is Krispy Kreme website that I took reference from.

Krispy Kreme SG old Website Home page design

logo

Pattern

Donuts 💜

Basic User Flow

This is the pretty simple user flow.

Home page → Learn more about Krisy Kreme via navigation → Browse donuts/packs/drinks and add to cart → Checkout

There are no details pages, sign up / sign in, and checkout designs for this case study :(

So, this is the mock-up of the redesign. Logo at left top as all people are familiar seeing logo there, pattern as a separation for donuts and beverages, cart and the copies.

Figma Mock-up

Logo : Krispy kreme logo (google)

Product Pictures are from http://krispykreme.sg/

Typeface & Font : Popular and good-looking Poppins (regular, semi bold , bold accordingly )

Colors : I use colors from the logo #CE0625 & #006935, easy on eyes color like #FFEEDE which also supports donuts display well and a type of yellow #FF922C which is known as a good color choice for food.

So, finally a little bit of prototyping !

Prototype

Learning

Whole experience of redesign was fun and motivated me. It helped me improve my thinking and skills. This is more of a UI design focus with modern twist. I believe the home page redesign has decent UX so that people can still use this as real site.