Overhauling Marketing Website for SigmaNV code design

Summary

Sigma Engineering Solutions, Inc is a consulting engineering firm that provides consultation services that involve aviation infrastructure, bridge design, construction engineering, engineered demolition, transportation planning, design, and more. Their goal is to attract more customers through a new website. My job was to design and build a new marketing website that has an improved user flow to getting the information customers need regarding the company's services while still being faithful to the original website.

Live demo

Technologies

Some of the tech that were used.

React

TypeScript

GatsbyJS

TailwindCSS

react-spring

Google Maps API

Lodash

Testing Library

Jest

@use-gesture

axios

CSS Modules

LESS

Flexbox

SendGrid

Handlebars

Node.js

ExpressJS

Tools

Some of the tools that were used.

Penpot

Sizzy Browser

Project goals & Challenges

1. Design a marketing website that's faithful to the original Wix website.

2. Incorporate existing assets from the original site.

3. The company aims to attract more customers to their site, which means that they would need SEO optimization to appear more often in search results and provide necessary information when the site is shared in social media.

4. Figure out a better user experience and flow that will draw customers to the company's accomplishments and services that are provided.

5. Build a responsive website. The current one had breaking elements on certain desktop screens and only changes to mobile UI when the site detects it is opened in a mobile phone.

6. Implement a custom contact form because the original site uses Wix widget for its form.

The biggest obstacle I've felt during this work was designing the website's landing page that would impress visitors and ease them in to navigate to the additional information on the company's completed projects and consultation services. The first step I did was break down the original website's pages and map them out on Penpot (an open-source alternative to Figma). Because of this approach, I was able to find issues such as one-way navigation, few broken elements, and non-descriptive URL addresses.

Then I began creating my moodboard, I've made scans of many construction and engineering firm websites mostly from Nevada and California. From there, I began to block out the pages and moved certain information wherever it's more relevant and started designing a modern UI for them. As I iterated on the designs and began coding the website, I also made sure to get feedback from the manager and implement the requested changes.

Because the company's aim is to attract more clients. I specifically chose GatsbyJS to maximize SEO optimization and other performance benefits that come with it. I use intersection observer and react-spring to trigger animations when screens are in view. Finally, I created a simple Express server that uses the Sendgrid API to send email messages for the contact form.

You have a project or job opportunity?

Let's talk and see if we're a good fit for each other!

Reach out