UX / UI Design

Stakeholder’s information

1. Gerties’ Facebook, Instagram & Tripadvisor accounts.
2. Google reviews & questions and answers.
3. Competitor’s facebook account – @CindysBakeryRestaurant

Gatherings

1. A competitor possesses a website with a considerable follower count.
2. Queries from Gerties’ social media profiles and Google pertain to price lists and delivery.
3. Awareness of information is limited to a case-by-case enquiry, lacking a standardized template.

Scope

1. User Objectives:
   The users, comprising both new and existing customers, aim to access promotions, receive updates, and potentially book deliveries or catering services.
2. Owner’s Objectives:
   The owner seeks to retain current customers while also drawing in new ones.
3. Potential Features:
   The website should showcase product photos, menus, delivery options, and provide comprehensive information about the company.
4. User Engagement Goal:
   Guide users toward the delivery or contact page for inquiries.

Content Structure

Drawing insights from gathered research, I systematically organized and prioritized content, streamlining the creation of site information and wireframes. This categorization process, influenced by frequently asked questions on Google and Facebook, resulted in the creation of three distinct pages: Main (About), Menu, and Contact.

About

Who we are
1990 – Started selling homemade bread in front of their garage. In October, they opened their first store in Cut Cut 1, Tarlac city.

1995 – Opened their 2nd store with bigger space.

2020 – Relocated to a new space selling all-day meals where customers can dine in or take away

What we do
Cakes & Pastries, All-day meals, Delivery service

Menu

• Bakeshop = Cakes & Pastries
• Fastfood = All day meals
• Delivery

Low-fidelity mockup 

Medium-fidelity mockup

UI

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

1. For optimal readability, I’ve employed fonts like Open Sans, Helvetica, and a sans-serif font.
2. The landing page is designed with three distinct sections: Cakes and Pastries, All-Day Menu, and Delivery. Utilizing a 12-column layout allows for efficient use of space, incorporating 2-4 column images and texts.
3. A user-friendly form is integrated for inquiries and orders.
4. Each section features a 3-column layout of thumbnail product images and information. To guide users toward the delivery and contact pages, an ‘Order Here’ text with a link to the contact page will be added.
5. The website will include a carousel of images to showcase Gerties’ latest promotions.
6. Social media account links will be incorporated, and an Instagram feed will be placed at the bottom of the website after the contact page to boost follower engagement.
7. The design is responsive, ensuring easy accessibility across different devices.

The website will feature the following:

1. Main page will have responsive navigating buttons like Home, Menu, Delivery, and Contact pages
   1. About us – a paragraph form of their history and what they do.
   2. Carousel – showcase latet promotion
   3. Delivery – showing address, contact information and enquiry form.
2. Menu page – Hero image with short description on top of page. After that, there will be 3-col thumbnail photos and product details.
   1. Cakes and Pastries
   2. All day menu – breakfast, lunch, snacks, & dinner.
3. Delivery page – form will consist of name, contact, & a 3-row text area for enquiries and orders.
4. Contact page – includes location map, address, contact details and social media icons.
5. Carousel with Hero Images – will have a fade transition accompanied by a headline and subtext describing the photos.
6. Order now buttons – when hovered it will change to black and when clicked, it will change to white.

Future implementation

• Shopping cart – for users to place orders.
• Payment gateway – to support shopping cart.
• Modal showing detailed information of each product when they click the product image or *Order now button.
• Pop-up chat – for urgent response and faster enquiry.

Features Left to Implement

• Enhance animation
• Product gallery

Technologies Used

List of tools I used for this website:

• Getbootstrap
  • The project uses getbootstrap to make the site responsive.
• Fontawesome
  • The project uses fontawesome to add icons for contact and footer pages.
• Powr.io
  • The project uses powr.io to get more followers in shop’s instagram account.
• Bootstrap’sJavaScript
  • The project uses Bootstrap’s Javascript to make animation work in carousel.
• [JQuery]
• Markdown
  • The project uses MarkdownCheatsheet as quick reference for documenting readme file.
• [Keynote]
  • The project uses Keynote as UX research tool for documenting stakeholder’s background, information architecture and low-fidelity mock up.
• AdobeXD
  • The project uses AdobeXD as wireframing tool for creating medium-fidelity mock up and converting images for web.
• HTML5 For consistent rendering in every browser.
• LanguageAttribute For translation tools to determine what rules to use.
• CSS3
• MediaQuery Added breakpoints for parts of the different designs.
• Adobe Illustrator For tracing Gertie’s logo.