Training Tool — Courses

Fall 2022, Year-Long Spark Project

Introduction

Throughout the preceding CodeLab cohorts, new associates would be introduced to tools and technologies used extensively during the term through the week-long Notion-based bootcamps. This presented many issues some including cumbersome navigation and limited ability to track progress. The goal of our project was to develop a full-stack web application that aims to solve these problems.

The Team

Derek Ma — Project Manager

Divya Gautam — Designer

Jessica Park — Designer

Meleah Phillips — Designer

Alexis Lydon — Developer

Thea McCallie — Developer

Ibrahim Rizk — Developer

Sophia Tzonev — Developer

Kaitlyn Vo — Developer

Timeframe

Oct 2022 — Nov 2022 | 6 weeks

Tools

MongoDB

Express.js

Next.js

Node.js

AWS S3

Insomnia

Figma

FigJam

Design

User Research

Designers collectively created an elaborate and holistic survey that sought to collect feedback regarding the current Notion-based training system. In addition, they were also able to conduct one-on-one interviews with all types of associates in order to address pain points specific to a particular role’s training material. To organize their research findings, they’ve developed the following affinity map.

Competitive Analysis

Following user research, the designers conducted a thorough analysis of three different competitors that were consistently brought up in survey responses.

Problem Statement

After compiling the most common user pain points: troublesome navigation, difficulty of progress tracking, lack of skill variation, and lack of guidance, the designers established a problem statement as follows

💡 How might we build an intuitive and organized tool that is accommodating to each role and experience level of the CodeLab members?

User Personas

Based upon the problem statement, the designers were able to compile a brief list of user personas who might be inclined to utilize our product.

Mid-Fidelity Wireframes and Design System

Following weeks of iterating through sketches as well as settling upon a basic user flow, the designers created the following mid-fidelity wireframes as well as established the following design system that closely follows the current CodeLab branding identity.

Next Steps

Moving on, the designers aim to refine the mid-fidelity wireframes based upon feedback, finalize key features of the product, and iterate the Project Manager page. In addition, they also seek to work more closely along with the access team to create user flow for the admin page. After completing the mid-fidelity prototype, they will conduct usability testing to gather user feedback on the information architecture. They will continue to iterate the designs and create a fully-interactive hi-fidelity in the very near future.

Development

Tech Stack

The tech stack can be visualized as follows with MongoDB and the AWS S3 bucket holding user data as well as static files, an implementation of Express.js and Node.js on the backend to serve these files to the end user, as well as Next.js on the frontend.

Stages of Backend Development

Throughout the duration of the term, developers utilized the software development life cycle, specifically focusing on the design, implementation, as well as testing stages in their process to create backend routes. First, a schema for a course document was defined as seen below. Next, thorough design documentation of all routes and their corresponding CRUD operations were written down. Then, endpoints were implemented in three separate sections: courses , modules , and lessons . Finally, the developers conducted unit tests of all usable routes using an API client such as Insomnia.

AWS S3

S3 is a storage service offered by AWS that is high-scalable, cost-effective, and secure. In this project, an S3 bucket is utilized to store all images as well as static files and it communicates with both the Express.js server and MongoDB database in order to deliver the necessary course materials.

Takeaways & Challenges

Some challenges that the designers faced include eliminating bias when conducting user research and working along with stakeholders to design a range of new features and restraints. On the other hand, developers had initial troubles with getting familiar with the frameworks and technologies used. Some takeaways of the team include agile methodologies helps iterate the product quickly and efficiently and that frequent communication within the team fosters successful project development.

Closing

Looking back at all the progress the team has made during these short few weeks, we are confident that we have built a solid foundation for what this project is to become and we are looking forward to what we will accomplish during the upcoming Winter/Spring ’23 term.