7Factor Corporate Website

Role

Front End Developer

Timeline

August 2020 - April 2021

Team

3 Developers, 1 Project Manager

Objective

7Factor is a SaaS company focused on DevOps, cloud technology, and custom software solutions. They serve clients from startups to enterprises, emphasizing high-quality, reliable software. Our project aimed to design and build an interactive, visually engaging website that reflects 7Factor’s standards and values. With guidance from our advisor Joshua Cuneo and collaboration with 7Factor, we delivered a fully functional React-based site that showcases their brand identity.

Project Goals

The core objectives were to create a site that aligns with 7Factor’s design and functionality requirements:


  • Design Fidelity: Match the provided design comps with precision, maintaining brand consistency through color schemes, layouts, and animations.

  • Responsive and Cross-Compatible: The site needed to scale across various screen sizes and perform well on both mobile and desktop browsers.

  • Scalability: We set up the codebase for easy extensibility, enabling 7Factor’s developers to integrate dynamic content or additional features post-launch.

  • Continuous Integration/Deployment: All code is managed within 7Factor’s CI/CD pipeline to streamline testing and deployment.

Design and Technologies

UI/UX Design: 7Factor provided detailed design comps with specifications for animations, hover effects, and page layouts. Each page, from the Home to the Case Studies, was crafted to serve as both an informative resource and a dynamic, visually appealing user experience. We used a hybrid single-page layout with intuitive navigation, a floating menu, and clean animations that engage users without overwhelming them.


Technology Stack:

  • React.js for the frontend framework, chosen for its flexibility and robust component-based structure, making it ideal for a single-page, responsive site.

  • SCSS to facilitate consistent styling across pages with dynamic elements.

  • Node.js for minimal backend support, combined with Create React App for smooth development and deployment.

We also leveraged SVG assets and optimized images for faster load times and better SEO performance.

UI/UX Design: 7Factor provided detailed design comps with specifications for animations, hover effects, and page layouts. Each page, from the Home to the Case Studies, was crafted to serve as both an informative resource and a dynamic, visually appealing user experience. We used a hybrid single-page layout with intuitive navigation, a floating menu, and clean animations that engage users without overwhelming them.


Technology Stack:

  • React.js for the frontend framework, chosen for its flexibility and robust component-based structure, making it ideal for a single-page, responsive site.

  • SCSS to facilitate consistent styling across pages with dynamic elements.

  • Node.js for minimal backend support, combined with Create React App for smooth development and deployment.


We also leveraged SVG assets and optimized images for faster load times and better SEO performance.

Methodology

Our Agile-inspired workflow consisted of weekly team check-ins, bi-weekly advisor meetings, and regular demos with 7Factor to review progress and adjust the scope as needed. Major milestones included:


  1. Technology Setup: Defined workflow, environments, and backend.

  2. Core Components: Developed shared components like the header, footer, and floating menu.

  3. Page Structure: Created foundational pages (Home, Solutions, Work with Us) with placeholder content.

  4. Detailed Design Implementation: Added animations, transitions, and interactive elements.

  5. Final Integration: Integrated all components into a cohesive single-page format and applied finishing touches.

Challenges

Scope Adjustments: The case studies page required several rounds of clarification, leading us to limit the feature scope while meeting core requirements.


Remote Collaboration: With team members in varying time zones and working during the COVID-19 pandemic, we adapted to fully remote project management.


Learning Curve: Our team needed to quickly master new technologies, including React’s development ecosystem and CI/CD workflows with Concourse, which we achieved through intensive research and hands-on experience.

Results

Despite shifting priorities and some unfinished lower-priority objectives, we successfully delivered a polished, responsive website that met 7Factor’s design expectations. Key achievements included:


  • Design Consistency: Matched the design comps’ look, feel, and interactive behavior across all pages.

  • Responsive Scaling: Used viewport width scaling to ensure the site adapts smoothly to various screen sizes.

  • Cross-Browser Compatibility: Tested extensively on major browsers and mobile devices to ensure a consistent experience for all users.

  • DevOps Integration: Developed using 7Factor’s CI/CD system, which allowed efficient code testing and deployment.

Designed by Danya Baron. 2024.