For my first co-op experience at Northeastern, I had the opportunity to work as a Web Developer at Mabl, a Boston-based Test Automation startup. I worked under the Brand and Design Lead and my multidisciplinary skillset helped me gain a cross-functional position between the Marketing and Product Design teams.
This was an amazing hands-on experience where I was able to observe and learn from industry professionals beyond the bounds of an academic classroom setting, and helped shape the foundations of the software industry for me.
My Contribtions!
As a part of the Marketing team, my primary responsibilities at Mabl involved improving Mabl.com by optimising the performance, SEO and user experience. Additionally, thanks to my awesome manager, I was able to sit on on Product Design meetings, and contribute to discussions about the Product UI/UX as well.
Learn about these in more detail at this Mabl blog post published at the end of my co-op.
The Problem
The most impactful project I worked on during my co-op was modularising the CSS codebase. Mabl's website was hosted on HubSpot, a modern CMS platform. 90% of the website's CSS was stored on a single stylesheet file which was over 10,000 lines of code long. While this approach had worked out fine in the early days of the startup, it was beginning to hinder future web development and making the whole codebase hard to maintain and modify. This monolithic codebase was also hindering the page load and speed.
According to Google Lighthouse metrics, the Mabl.com desktop site had been optimised to maintain a near-perfect performance score of 100/100, but the mobile version was 58/100, which wasn't ideal.
The Solution
Modularising this codebase took me about 2 months of sifting through CSS code to find redundant classes, clean-up duplicates and manually break down the stylesheet into bite-sized components that only rendered as and when they were needed.
This intensive effort was extremely fruitful in the end, and helped condense the codebase. It directly impacted the performance metrics and boosted up the mobile score to 97/100. The average page load speed also reduced to 2.8 seconds. These improvements ensured that future development was clean and hassle-free. It also made sure that the Mabl team can manage performance more efficiently in the long-run and helped archive any unused components.
In addition to my core reponsibilities, I had the fantastic opportunity to sit in on several Product Design stand-ups. Motivated by my own personal interest in UX Design, I offered to help the team brainstorm new ideas and colour palettes for the dark mode of the Mabl product.
I also worked on creating wireframes for potential new pages that could be added to enhance Mabl.com.
Mabl's Japanese community has been actively growing since 2019. To support this community and enhance their web user experience, I helped improve the functionality and design of the Japanese version of Mabl.com. I added custom logic to the CSS to support switching fonts on a language-switch, and brainstormed which typeface would both compliment the company's standard English branding, as well as support all standard Japanese characters.
Additionally, I helped fix an issue with the language switcher's hover effect on the website, and added Japanese formatting for dates on the Events page, so that viewers would have a seamless experience using the website, no matter which side of the globe they were viewing it from!
I also worked with the wonderful Japan team to expand the website's pages which needed translating.
To improve the filters and search on the Library page, I added functionality that rendered the top 10 most popular posts at the top of the infinite scroll of Library posts. As the website is built using HubSpot, I spent time learning HubL (HubSpot's native coding language), and designed a module that would allow non-technical content writers in the Marketing team to easily find and pick those top 10 posts, if they wanted to highlight or customise the feed in any way, without requiring to stare at any code (and cry internally).
