Create a community for users in the UX/UI, Software and Tech industry

Growth Club App
UX/UI Design & Software Development

Growth Club is a web application with a community for users to retrieve and share information on UX/UI, Software and Tech.

happybean mockup

Project Overview

Role
  • ✓ User Research & 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

The objective of this project was to plan, design and develop a web application that allows users to view and share info on events, tools, articles and videos about UX, Software Development and Tech, using the CRUD operations of Create, Read, Update, and Delete for information. The goal of the web app was that users in the tech industry can get and share resources they find intresting.

The Solution

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.

happybean mockup banner

The Outcome

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.

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 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

maze case study observations

Sketches

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.

maze case study observations

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.

mid-fi growth club

Data Structure

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.

maze case study mid-fi wireframes

UI Design

Styles

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

maze case study mid-fi wireframes

High-Fidelity Designs

Figma was used to create high-fidelity wireframes. High-fidelity designs were utilised to start experimenting with colours, fonts and images.

maze case study mid-fi wireframes

Solution

This project uses GitHub for version control, GitPod as the cloud-based IDE and Heroku to deploy the site into production.

View website
View 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 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.

maze case study test