ENVISION Research Competition (Migration)
Freelance — Jan '25
My Role
Product Developer — Front-End Development, Interface Design, Migration, Deployment
Team
Freelance
Tech Stack
Next.js, React, TypeScript, Node.js, Tailwind CSS, NextUI, Netlify
Timeline & Status
4 days (Jan '25), ...and we're live!
Overview
A migration for the ENVISION Research Competition website from HTML/CSS to Next.js with TypeScript to enhance scalability and maintainability.
The site, which serves as a hub for high school students worldwide to access competition rules and submit proposals, also underwent a subtle design refresh and a hosting provider transition.
This project was developed and deployed solo in four days, while working closely with the ENVISION team to meet their needs.
context
An annual research proposal competition for high school students around the globe.
Students find competition rules and submit their proposal through ENVISION's website.
ENVISION's original website consisted of static HTML and CSS files with a bit of JavaScript hosted on GoDaddy.
the problem
While functional, the original file structure made maintaining consistency across multiple webpages cumbersome.
Pain Points
Multi-page features were difficult to maintain
Changes to navigation links, for instance, required manually editing every single HTML file in GoDaddy's cPanel.
Manual SSL encryption
With limited budget, ENVISION's hosting plan with GoDaddy did not have automatic SSL encryption, meaning that the site's SSL certificate had to be manually renewed once every 3 months.
Prone to errors & inconsistencies
Page edits were made directly in cPanel, requiring changes to be duplicated and making it tedious to catch errors.
Additional Considerations
The core stakeholder for this project was the ENVISION team, many of whom don't write code regularly, making it crucial to deliver stable, easily understandable code.
The migration also needed to be seamless, as the site was in the midst of accepting submissions for the 2024 competition cycle.
approach
To address these challenges, I proposed migrating the website to Next.js with TypeScript...
Next.js, built on React, provides a component-based architecture that enables reusable elements like navigation menus, streamlining code maintenance. Its hybrid rendering optimizes performance and SEO, while TypeScript ensures type safety and future scalability.
...and onto Netlify instead of GoDaddy.
Netlify offers seamless CI/CD, GitHub integration, automated SSL, and easy rollbacks, all while reducing the cost for hosting.
Some technical choices
Once approved by the ENVISION team, the migration involved breaking down static HTML into modular React components, like the navigation menu and footer. Using Next.js dynamic routing, pages with similar layouts (e.g., 'Winners') and URLs were dynamically generated.
I also chose to incorporate Tailwind CSS for its speed and intuitiveness, and some components were built using NextUI for quicker development.
design refresh
But as with any switch-a-roo,
some elements could use a refresh.
Since the site represented a competition, maintaining professionalism was essential to building trust and increasing submissions. Minor visual changes and interactive components were added throughout the pages. Mobile breakpoints were also added.
Hover states
Added for improving the user experience.
External link icon
Included for clarity in navigation.
Collapsable Q&A
Implemented for interactivity.
Convenient side navigation
The side navigation was made sticky, allowing users to access different pages regardless of their scroll position.
Newly Improved
All side navigation menus were made sticky for easy navigation access.
Seamless visual appeal
The 'Organization Partners' and 'Corporate Partners' pages had their layouts improved through a subtle design refresh to the side navigation and removal of the body background, in addition to the inclusion of image popovers.
The Original
About Us — Organization Partners
Newly Improved
Image popovers were added to contain additional info to declutter and add interactivity, while the logo-first design promotes imagery to catch the eye.
Streamlined scroll directionality
The landing page featured a slideshow overview of ENVISION, initially embedded as a PDF. To streamline the experience, I replaced the PDF with a carousel, resolving the conflict of both the PDF and overall page have vertical scroll.
The Original
Landing — ENVISION Slideshow
Newly Improved
A carousel was added to streamline directionality, since the vertical scrolling of the PDF had clashed with the page's overall scroll direction.
retrospective
...and we're live at envisionrc.com!
After a seamless transition onto Netlify, the migrated site is now at envisionrc.com.
This migration from beginning to deployment only took four days in early January. The site now features a cleaner visual UI, a more convenient user experience, and enhanced accessibility on mobile devices.
Key Takeaways
User experience is paramount
Though this migration focused more on stakeholder needs, designing with the user in mind can enhance usability.
Leveraging the right tools
Choosing the right tools, such as Next.js for dynamic routing and Netlify for streamlined deployment, demonstrates how technology choices can simplify workflows.
Importance of scalability and maintainability
The modularity offered by modern frameworks highlights the value of reusable components and efficient architecture in reducing future maintenance overhead.
Future Plans
Of course, no project is ever completely finished. Future improvements include embedding the Competition Portal directly on the site for a more seamless user experience, rather than using a Google Form. However, since this year's competition was still live during the migration, this update would need to be implemented during the off-season.
Additionally, much of the content on the site is text, which could be condensed and enhanced to improve readability.