Design & Develop a coffee and related products
E-commerce store

Happy Bean E-Commerce App
UX/UI Design & Software Development

Happy Bean is an e-commerce store for an artisanal coffee roasting company that specialises in roasting and selling coffee but also sells coffee equipment.

happybean mockup

Project Overview

Role
  • ✓ User Analysis
  • ✓ UX & UI Design
  • ✓ Software Development
  • ✓ Software Testing
  • ✓ Usability Testing
Tools
  • ✓ GitHub
  • ✓ Gitpod
  • ✓ Heroku
  • ✓ Figma
  • ✓ Balsamiq
Languages
  • ✓ HTML
  • ✓ CSS
  • ✓ Javascript
  • ✓ Python
Time Line
  • ✓ 3 months

The Project Brief

This project is part of my Code Institute Full Stack Software Development studies, specifically the Full Stack Frameworks with Django module. The objective for this milestone project is to plan, design and develop a project with all the functionalities to work as an e-commerce website.

The Solution

Happy Bean web app will targets users who are interested in purchasing coffee and coffee equipment that are of high quality. The primary focus is on providing an easy to navigate and responsive e-commerce web store that allows users to easily purchase products and also have access to resources such as articles, tools, videos and events related to coffee.

happybean mockup banner

The Outcome

After testing the Happy Bean product, it was clear that it had met all the user goal and business goals. Getting constant feedback on the designs and the code helped as I could make adjustments quicker if required to do so.

The Full Process

UX Analysis

To ensure the project had clear goals in mind, I set out goals for both for the user and the business. I also created the User Requirements and Expectations. The below analysis was used in the next step to create the user flows.

maze case study observations

Ideation

To avoid following the first idea, I conducted a series of ideation techniques. This allowed me to consider an array of solutions.

User Flows

In the planning phase, I created User flows to determine the main paths the user might take on the web application.

maze case study observations

Information Architecture

I then created the site structure by mapping the Information Architecture in FigJam to determine the pages, subpages and which pages are related.

maze case study observations

The Solution

Wireframes

Mid Fidelity Wireframes

Balsamiq was used to create mid-fidelity wireframes. Mid-fidelity designs were utilised to make the design process simple and test low-tech concepts. When designing a mid-fi wireframes, the font types and colours are ignored to focus on the design of the project itself. I used annotations to give more meaning and detail to the wireframes.

maze case study styles

Data Structure

A database structure was designed to be specifically suited for HappyBean. It was important to make sure the data structure was logical. Each product is linked to a category and these are identified by id (pk number). The products on the Coffee Group of Categories, are linked to an origin and are identified by id (pk number). Each order has a unique order number which is generated when the order is processed and orders have the users and product details.

maze case study mid-fi wireframes

UI Design

Styles

The sketches and mid-fi prototype helped us recognise frustrations with the experience that I improved at the hi-fi stage.

maze case study mid-fi wireframes

Solution

After all the planning, I started the coding process. This project uses GitHub for version control, GitPod as the cloud-based IDE and Heroku to deploy the site into production. Heroku Postgres is used for the database. AWS services, which is also a cloud-based platform, is used to store static files and images as Heroku has no files system to store new files.

View websiteView code repository →

Testing

With the web application created, I decided to do an in depth testing. I did manual testing by checking each feature but also did Testing and Validation through various tools such as W3C Markup & CSS Validation, JSHint, Pep8 Online and Lighthouse (Google dev tool).

Usability testing were done with two users to analyse the User Experience. The feedback from the users was very helpful to determine what works, what can be improved and determine future features. Fellow students, friends and family to look at the site on their devices and report any issues they find. All functionality and responsiveness were reviewed on different desktop browsers and the website displayed correctly in all browsers including Safari, Chrome, Edge, Firefox and Opera browsers.

maze case study test