HONEY BEAN CAFE

Front-End Website Development Project

Front-End Web Development Project

Link to mock website I built using HTML/CSS and Javascript under the Bootstrap 5 framework:

https://agitated-swartz-6c88f5.netlify.app/index.html

*Read my critical evaluation of how I would improve it below

Project Brief

As part of my User Experience Design Fundamentals module, I was tasked with designing a responsive website for mobile first for a real small business. I was required to use HTML / CSS and javascript to build the site under the Bootstrap 5 framework. I decided to build a site for a local cafe named Honey Bean which offers coffees and a small food menu.

Project Overview

PROJECT VISION

 

A responsive website for a small local business which looks good but also has the necessary features to promote the business well.

The website is for regular and new customers to be able to interact with the cafe online.

PROBLEM

Problem statement: I am a small business owner of a cafe and I do not have a website to promote my business. I need to serve the needs of my existing customers and attract new customers. 

OUTCOME

 

A responsive website to capture initial user feedback and act as a proof of concept in order to build a strong case study for future development.

Project Plan

My Role

  • UX researcher
  • UX /UI designer

Methodology

  • Market research
  • Collaboration with business owner

Project Plan

  • Two weeks of discovery and ideation followed by coding of the site over 3 weeks.

1. Empathise

I began researching the business online. The business did not have an existing website but I was able to see the cafe’s Facebook page to gather some info such as the company’s ethos and goals, as well who the customers are and what they need via comments.

I then researched similar competitor cafes of a comparable scale. I analysed the information architecture of these sites to understand how they typically organise and structure content. I looked at their UI design & branding to understand how they approach aesthetics like colour scheme, layout, calls to action, forms etc.

Next I analysed the Jobs To Be Done and journeys which enable these such as:

  • Understand options on the menu
  • Ordering online
  • Finding opening hours/location/contact info
  • Read reviews/testimonials

I conducted this research before I met with the business owner to understand his goals/vision for his businesses’ website such as:

  • Increasing his businesses online presence / discoverability of his cafe
  • Enabling customers to order online

2. Define

I met with the business owner to discuss the strategy and goals for the business and it’s website.

I asked what problem(s) would you like the website to solve?

To which he responded, ‘‘I’d like to be able to serve my existing customers needs online and to attract new customers to the cafe.” 

We discussed typical customers and their needs/motivations.

This discussion combined with a review of the Facebook comments enabled me to understand customer needs and pain-points, for example:

  • Unable to order online
  • Unclear on opening days/hours
  • Unclear what gluten free options are on the menu
  • Lack of price clarity

This information was used to build a primary persona.

User Stories

 

  • As a non-tech savvy person, I need a simple and intuitive interface that is mobile friendly so that I can use it with ease when I am on the go. 
  • As a busy person who works full time, I need to be able to order my lunch online, so that I don’t waste time waiting around on my lunch break.
  • As a person with specific dietary requirements, I need full clarity on what options on the menu are safe for me to consume, so that I don’t consume something that is harmful to me.

3. Ideate

Site Map

I decided to keep the site simple. This decision was informed by the business owner and the user persona.

Not including too many pages and external links with simple navigation ensured an easy, intuitive user experience.

Paper Mockups

Taking pen to paper, I created mock ups of the site and it’s pages. I decided upon a four page website (homepage, contact, about, social) in line with conventions and competitor websites.

I tested these paper mockups with friends/family and iterated the designs in line with user expectations.

I sent my sketches to the business owner and together we decided on the best layout for the designs of each of the pages.

4. Prototype

For the purposes of this project, I built my prototype in the form of an interactive website which I designed and coded myself using HTML, CSS & Javascript in the Visual Studio Code desktop application. This allowed me to view my changes in real time on a live mock website.

I will discuss a critical evaluation of the design and development work in the next section.

Design Choices

Carousel

I added a carousel as it was a popular feature across other sites I had seen during my research phase. The choice to add the carousel at the top of the homepage also informed by my user persona, older, busier, middle aged business person. The user may not be very tech savvy so making it clear and visible what the site is for / what the service offers is important. Having the carousel with the large, evident images of coffees makes it clear to the user what the site is for, as well as the ‘Order Now’ call to action being prominent at the top of the page.

Read my critical evaluation     >

Design Choices

Three Column Grid

I added the three column grid on the homepage, highlighting all of the most important info about the business that the user might want to know, for example, ‘our story’ and ‘our beans’. The fact that the business is local and has a good story is a big selling point that users find interesting and want to support. An explanation of the sustainability of the beans is also a selling point for this specific target audience as well as information on competitive pricing. I added ‘read more’ buttons to each of the columns to redirect the users to other pages within the site such as ‘contact’ and ‘about’.

Read my critical evaluation     >

Design Choices

Contact Page Layout

I added a large map on the ‘Contact’ page of the website. This choice is, again, informed by the user persona. A lot of older persons may not have the best eye sight so the location of the cafe is made very clear once you click this page. Older persons may be less tech savvy and may struggle to use apps like Google Maps so this was another consideration for this large map feature for our specific target market audience. Other important information is stored in an easy to use drop down accordion feature such as the number, email and again the location of the cafe. The user doesn’t need to be tech savvy to locate the most important info.

Read my critical evaluation     >

Design Choices

 

About Page Layout

This page contained more specific food / drink related information about the cafe such as a description of the options and a ‘see menu’ option below each column. I decided upon this layout as I know a lot of older persons like to have an exact idea of what is on the menu according to price and dietary requirements prior to going to a place to eat. This often can be because of health and being motivated by competitive pricing.

Read my critical evaluation     >

5. Test

As this project was academic in nature, it ended at the proof of concept stage as demonstrated.

If this were a real life project, my next step would be to implement the changes as listed in my critical evaluation and then to conduct customer testing on the website.

Outcomes

In the absecne of usability testing feedback with customers, it is not possible to understand how users would perceive the website.

I received positive feedback from my module co-ordinator and classmates when I presented this case study, particularly for my data synthesis and UX considerations in the design process.