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.
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.
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.
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.
To avoid following the first idea, I conducted a series of ideation techniques. This allowed me to consider an array of solutions.
In the planning phase, I created User flows to determine the main paths the user might take on the web application.
I then created the site structure by mapping the Information Architecture in FigJam to determine the pages, subpages and which pages are related.
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.
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.
The sketches and mid-fi prototype helped us recognise frustrations with the experience that I improved at the hi-fi stage.
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 →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.
