BillionMinds
Fall 2023 Client Project
Introduction
BillionMinds is a startup building a learning platform to teach workforces soft skills in a hybrid office/work-from-home environment. They have a lot of performance metrics, but not a centralized place to view their data. CodeLab is building a dashboard for BillionMinds admins and clients to view their organization’s adaptability and resilience measurements.
Timeframe
October — December 2023 | 7 weeks
The Team
Kristin Ly: 🎨 Designer
Kaitlyn Lam: 🎨 Designer
Borna Niknahad: 💻 Developer
Daksh Jain: 💻 Developer
Etienne Rousseau: 💻 Developer
Kaushal Marimuthu: 💻 Developer
Dylan Ang: 👔 Project Manager
Tools
Figma: Wireframing
Next.js: Full-stack framework for React frontend
Vercel: Cloud host + CI/CD Pipeline
MongoDB: Serverless Document Database
Postman: Workspace for sending HTTP Requests
Tool Purpose Figma Wireframing Next.js Full-stack framework for React frontend Vercel Cloud host + CI/CD Pipeline MongoDB Serverless Document Database Postman Workspace for sending HTTP Requests
The Project
The Dashboard has two views, the admin view and the employer view. The admins at BillionMinds can use the admin page to view summary statistics for all of their clients, while employers can view their own organization’s statistics.
Design
Initially, we had very little info on what the exact form of the data would be, so our first designs were very low fidelity. Some elements did make their way into the next phase of the design. In particular, the page is designed around widgets — reusable components with self-contained data.
Once we got more information on our data sources, we worked on making a single page that could show all the data. While it’s all here, we struggled with what the best way to display the data would be, so we used mostly tables.
This stage solidified our design language and UI components. We liked the colors and gradients used, as they fit our client’s existing platform well.
Finally, we worked around our developer constraints by using the charting library that the Development team selected. In addition, we collapsed the height of the page by using tabs in our design to hide/show data when needed.
Development
Our frontend is built in React with Next.js for routing and data fetching. Rather than fetching the chart data from a database and loading it into a charting library, we used the new MongoDB Charts API instead to embed charts on our page using iframes. This simplified the process of using several charts on one page, and enabled higher performance on large datasets.
The MongoDB Database contains data collected from four different APIs, each of which has unique querying methods. So, we used node scripts to pull data and update fields in MongoDB, and from there other scripts run aggregations to simplify the querying for the frontend.
When these scripts get deployed, they should be deployed as serverless functions running on a cron trigger, set to expire once a day.
Database
We use MongoDB Atlas, the fully managed document database. The JSON format of documents helped us iterate quickly since we could add new fields on the fly. Using the fully-managed Atlas platform helped us get started quickly, since we could avoid setting up a hosting configuration.
The Database contains several collections: employers, employees, and ar_scores. The employees collection holds raw unprocessed data from the Active Campaign API. This data is aggregated into a structured format and placed into the employer’s database. This allows for simplified access patterns on the frontend since all the data is in a standardized format.
The ar_scores collection holds companies’ AR Scores over time. When a new AR score is calculated, it’s appended to the collection with a date of calculation. The frontend can aggregate the entire history of a company’s score, or simply get the latest calculated score.
Challenges
APIs
Much of the data was in an unstructured format, which made it difficult to extract the fields we needed for calculating AR scores. Unfortunately, this is simply a limitation of external platforms which we don’t control, and there wasn’t anything we could do to get the data systematically. But, we didn’t let that stop us: we generated artificial random data so that we could still set up our queries and charts on the frontend. Now, the only task will be to write scripts that know how to access the data we need and update the fields in MongoDB (which already exist).
Scheduling
When 8 full-time college students need to meet with a client in two different time zones, it gets very difficult to find a time that works for everyone. The only time that all 8 members of the team were available to meet was 6 pm on Thursdays, which was 9 pm and midnight for our client. The solution we settled on was to simply hold meetings with a subset of our members in a rotating fashion. Meetings primarily regarding developers only ensured that all developers were available, and design meetings only checked the schedules of designers. For all-hands meetings when members had conflicts, we simply made sure to take notes for the missing members. We also set meetings for different times each week so no member would be forced to miss several meetings in a row.
Takeaways
This project has been a transformative journey for us, both developers and designers alike. From creating full-stack applications with Next.js and MongoDB, to communicating with clients, and the agile design process, we learned a lot this Fall Quarter. The real magic was seeing people become friends through collaboration.
We’d like to thank BillionMinds for giving us this opportunity and mentorship, especially Ryan Tubbs, whose help was invaluable on this project.
