Growth Club are aimed at users who are interested in viewing and sharing information about UX, Design, Software Development and Tech. The priority focus is on providing an easy to navigate and responsive website that allows users to be a part of a community with a collection of resources such as articles, tools, videos and events.
After testing the Growth Club 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 a User flows to determine the main paths the user might take on the web app. In addition to the high lever user flow, I also created a more detailed Login and Sign up flow to determine the main paths the user might take on the web app to manage their status on the website. The success and failure messages differ slightly on the deployed app as the copy was changed during testing with users to be more clear
After designing the user flows, I wanted to focus on how the content was to be organised, labelled and structured on the app. Sketches were part of this phase of the design for this project. Sketches with pen and paper are used to roughly draft the flow and the structure of the project without having to focus on colour, fonts and the correct layout.
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 The Growth Club. It was important to make sure the nesting relationships between the collections and the keys worked logically. The database was created as a usable non-relational database where data is stored in a consistent and well-organised manner. To maintain a database configuration in a single location where it can be changed easily, ObjectId's are used in several collections to ensure key values are more accurate by using the ObjectId's rather than strings. MongoDB is utilised to store data, which is a non-relational database-backed Flask web application that allows users to easily create, locate, display, edit and delete data records on the Growth Club web app.
The sketches and mid-fi prototype helped us recognise frustrations with the experience that we improved at the hi-fi stage.
Figma was used to create high-fidelity wireframes. High-fidelity designs were utilised to start experimenting with colours, fonts and images.
This project uses GitHub for version control, GitPod as the cloud-based IDE and Heroku to deploy the site into production.
View websiteWith 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 tests 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.
