Works
Gerties Bakeshop

A front-end e-commerce website for customers to get updates on store's menus and able to send enquiries on take-outs and delivery orders

Live Implementation  Documentation
Intro image to Gerties
COMPANY
Gertie's Bakeshop
PROJECT DATE
July 2020
Objective
To expand take-out and delivery orders via an e-commerce website, reach out to potential and loyal customers, and increase audience social media engagement in existing Facebook and Instagram.
My role
  • UX Research
  • Wireframe and Prototype
  • UI Design
  • Front-end Development
THE PROCESS

Define

Problem statement

Gather data

User Journey Mapping

Ideate

Synthesise findings

Brainstorm on solutions

Wireframe

Prototype

Translate proposed solutions into prototype

Implementation

Developed prototype into UI

Research
I started my research by knowing the stakeholder's and competitor's background & online presence. Also studied how content information are handled in social media and google reviews. I found out that information awareness is limited to 'per enquiry basis' and no standard template existed.
gerties-main

Content Structure
From the data gathered, I organised the information based on common questions asked from google and facebook. It is categorised in 3 pages which are Main, Menu and Contact page.

  • Who are we

    • 1990 - Put up their first display rack in front of their garage selling bread. In October, they opened their first store in Cut Cut 1, Tarlac city.

    1995 - Opened up their 2nd store.

    2020 - Branched out for bigger space selling all day meals where customers can dine in or take away.

  • What we do

    • Cakes & Pastries

    All day meals

    Delivery

  • Address
  • Delivery
  • Contact details
  • Location map
  • Social media

UI
Based on their current logo, the colours are yellow, red and lime green. I wanted to propose a whole new look of Gerties by focusing on the name, toning down the red and limiting the colours to be just red and dark grey for simplicity and clean look.

For fonts, I used open sans, helvetica & sans-serif font for clear & easy readability.

Low-fidelity Wireframe

simple-component

Design system

simple-component

High-fidelity wireframes

simple-component

Main page

simple-component

Menu page

simple-component

Contact page