My first duty when hired by SystemSoft Technologies was to help turn around a large web project that was already months underway but was not progressing smoothly at the time. The client had rejected many of our design proposals and chose to complete the designs themselves in-house out of a desire to be able to observe and manage every step of the process internally. We would then build the website based upon their own design rather than being involved with the design process ourselves.
Unfortunately, their in-house design team did not have any experience with web applications which led to overly complicated mockup files in PSDs with unique layer filters where it was not easy to extract assets. They also did not have a cohesive design language to follow – every page was unique with varying font sizes and rules and multiple complex features included throughout for show. The scope-of-work had not been clearly defined or restricted during the initial project planning either which led to bloating of requirements long before development could even begin.
Our method of solving these problems was to maintain constant communication and provide shared documentation of issues reported and their statuses as we worked to meet every expectation. This was not one of our core projects but rather a side project for which there was no project manager, and many discussions had been taken on good faith. I’d be the only full-time developer, but the UI Manager would take on the PM role to help triage the workload and delivery schedule. We held weekly client video meetings to address any additional concerns until the website met their needs. I then hosted live video training sessions as new phases were launched so they would be comfortable maintaining their content moving forward.
Some of the development challenges included a Mega Menu with items placed arbitrarily around the screen in ways that no off-the-shelf plugin could facilitate requiring considerable DOM manipulation. The homepage also featured two different animated timelines and three different post sliders all of which needed easy user editability. Various additional sliders were utilized throughout the website in different ways, from the team member profiles to careers job postings to horizontal scrolling rows of flip cards on the ESG page and more. Most of these were designed to be managed using ACF in the dashboard and then its repeaters or content sections would be run through either Flickity or Slick for slider services (each plugin offering features the other did not).
All data tables had to be responsive, and may contain a mix of API-driven or manually-input data. There were two separate data APIs, one updated daily with the latest ticker results and one updated quarterly. Our UI manager had already established the API connections prior to my joining the project, but continual changes in the data feed required constant revisions. Their API provider also had spotty uptime requiring the ability to quickly override the API with manual data in case of outage to ensure SEC compliance with the numbers they advertised.
On pages for individual funds we also needed to be able to turn numeric data into charts, which was handled using ChartJS. The mockups showed a polar area chart as the original concept, but considering many of their funds would sometimes have sectors allocated to very small numbers the polar area charts were determined to not be the best visual representation if they wanted to keep things to scale. A donut chart style was selected instead. Initially, the client also wanted to have live data chart tickers powered by HighCharts, but the licensing proved too expensive for the project budget, so a quick, open source solution from TradingView was used instead.
Other features included multiple custom post types for videos, press articles, webinars, job postings, team members, entrepreneur profiles, and gated peer-reviewed publications requiring form submission before viewing.
After we’d gone through lists of revisions and tweaks there was a second phase of the project where we then converted the final designs into custom Elementor blocks so that they could use the page builder to construct additional pages themselves going forward.
