In my role for the Superorder project, I was entrusted with enhancing the website’s functionality and aesthetic coherence.
My responsibilities involved creating an engaging feature slider on the Home page to dynamically showcase key services and offerings. Additionally, I was tasked with constructing the Careers page, aimed at reflecting the company’s culture and attracting potential candidates.
Alongside these tasks, I conducted a thorough site review to ensure that all animations, copy, and embeds, aligned with the Figma design specifications. These efforts were crucial in elevating user engagement and maintaining visual and functional consistency throughout the website.
Achieving Responsive Design
While there weren't any major roadblocks during the development of the Superorder site, ensuring that both the feature slider on the Home page and the hero section of the Careers page were fully responsive posed a bit of a challenge.
The Home page, in particular, featured a specifically styled slider that needed to adapt seamlessly across various device sizes. This meant maintaining the integrity of animations and ensuring that all visual assets scaled correctly without losing their aesthetic appeal. This task of optimizing responsiveness was essential to providing a fluid user experience and maintaining design consistency across all devices.
Adapting and Scaling
Drawing from my previous experiences, particularly the lessons learned during the Steel Perlot project, I applied strategies to ensure the responsiveness of the Superorder site.
As I developed each section, I adapted and scaled the designs with the specifications outlined in Figma. This process involved creating mobile-optimized versions of the desktop animations and implementing a combination of media queries and JavaScript, leading to responsivity.
Additionally, I made sure that any modifications to the design that were necessary to ensure optimal functionality were quickly communicated to the client for approval. This ensured that any device-specific solutions were in line with their vision and expectations. These adjustments guaranteed that no matter the device, a responsive experience was achieved.
Maintenance and Organization
Working on one of the largest sites in my catalogue to date presented unique organizational challenges, especially as part of a broader agency effort with multiple ongoing site developments.
A critical aspect of my role involved ensuring that all site features, designs, and assets were consistently updated in Webflow to match the latest client-approved Figma documentation (and to ensure that everything was up to date with Figma designs).
Due to the scale of the site, the number of pages, and features per page, ensuring that Figma updates were reflected in the Webflow project became quite a challenge.
Task Management and Team Integration
Given the dynamic nature of design changes and the need for seamless integration across different teams, I developed a robust system to manage these updates effectively.
To remedy this challenge, I looked at how my collaborative coding projects in the past addressed similar issues - through a changelog. GitHub, for example, has an "issue" tab on projects, allowing collaborators to mark tasks and update their status with ease, so I decided to do the same for this project.
I established an internal changelog and a detailed checklist, which I used to track and document all changes made during the site review process. As I updated each page, I not only noted the modifications in Webflow but also communicated any potential issues or required changes to relevant team members, such as asset designers and copywriters. This approach ensured that all elements of the website were synchronized with the Figma plans before launch.
One of the most rewarding aspects of working on the Superorder project was the sheer scale of the task and how collaborative it was!. Being part of a dynamic team where each member played a crucial role in bringing the website to life was incredibly fulfilling (and relatively new, usually I was presented with all assets once they were done being made, and worked solo in the web development process for what I was assigned for).
The process of synchronizing our efforts, from aligning design updates with the Figma documentation to ensuring that every page reflected the latest client expectations, taught me amazing lessons in teamwork and communication. This project really deepened my appreciation for the nuances of team dynamics and project management in a large-scale digital environment. It was awesome to see how individual contributions melded into a cohesive and successful final product, reflecting our collective commitment and expertise.