Website Design
Project
Link to website:
https://agitated-swartz-6c88f5.netlify.app/index.html
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.
Case Summary
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.
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 get new customers and retain my current customer base.
OUTCOME
A responsive brochure website to capture initial user feedback in order to build a strong case study for future development.
This is an ongoing project and I am working towards making the site an e-commerce website where real life transactions can take place.
Project Plan
Team
Solo Project
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. I was able to see the cafe’s Facebook page for to gather some info such as the company’s ethos and goals, as well who the customers are and what do they need.
I then researched similar competitor cafes of a comparable reach and scale. I analysed the information architecture of these existing sites such as layout, call to actions, pages / tabs, aesthetic and media as well as typical user flow. I conducted this research before I met with the business owner to discuss his vision for this project.
2. Define
I met with the business owner to discuss the creative strategy and goals for the website. I asked what problem are we trying to solve? To which he responded, ‘‘I need new customers and to retain my current customers.’’
We discussed typical customers and their needs / motivations
I researched the Cafe’s Facebook page to get an idea of it’s users. I identified user’s complaints, needs and motivations.
I gathered information on the typical user demographic and used this information to build a persona.
3. Ideate
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)
I tested out different layouts to see which made the most sense in terms of good / intuitive user flow. I kept design components such as information hierarchy, balance, colour and space at the forefront of my mind.
I experimented with the placement of different important features like the call to action ‘order now’ and ‘read more’ buttons, keeping in mind HCI’s like visibility and constraints to establish the most user friendly design plan.
I sent my sketches to the business owner and together we decided on the best layout design for each of the pages.
User Stories
- As a busy individual, I need to find what I am looking for easily and intuitively.
- As a mobile user, I need to be able to order my lunch online.
- As a cost conscious customer, I need to see that I am getting value for my money.
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.
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.
Read my critical evaluation
v
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
v
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
v
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
v
Outcomes
As this project was for college, this is the stage at which it ended.
If this were a real life project, my next step would be to conduct user testing on the website.
I received positive feedback during class presentation of my website from module co-ordinator on data synthesis and UX considerations in design process.