An-lam - business website

Problem

Before I started work, I met with a business owner to understand his needs. After some questions and discussion, we’ve agreed. He needed a convincing business-card-style website with an offer that transforms a boat owner into a client. The website needs to look professional, work efficiently, display past repairs, and underline the long-term experience of the owner to achieve this goal.

Inspiration

Before I started designing, I had done some research. I visited many competitors’ websites - from local boatbuilders to yacht charters. I shared some links with the owner to recognize his aesthetic taste. Marine projects on Behance and Dribbble were also helpful. Using them, I’ve created an extensive mood board that I’ve been using during designing.

Wireframes

I started the design process by creating several drafts of sections and the renovations subpage. Then I fastly moved on to experimenting with fonts and colors. Based on drafts and experiments, I created some wireframes. I shared them with the entrepreneur. His decisions influenced the following work.

Content

Knowing the structure of the pages, I started creating content. For every section, I made short text. Similarly, I’ve done the same for every chosen repair. It required constant contact with the business owner. I also helped him with choosing and editing photos. “People don’t read websites - they scan them” - I was guided by this principle during content creation. I wanted the user to recognize the business profile by skimming the headings. I was also creating content with keywords and SEO in mind.

People don’t read websites - they scan them.

Design System

For this project, I created a simple but formal design system. I divided it into five levels of Atomic Design. The base of every design system is typography and colors. I and the owner both liked classical font - Old Standard TT. I paired it with the simple, geometrical font - Questrial - for contrast. I think this combination emphasizes the owner’s love for classical items, his long-term experience, and the local character of the business.

The color palette consisted of grays, whites, and navy blue. It refers to the sea, yachts, and minimalism. The accessibility of a website is significant, so I tested the color contrast ratios.

Architecture

Having design and content, I could start coding (actually, different project stages were intertwined, but I present everything sequentially). The website will be mostly static, won’t be often updated, and need to have good performance. Because of that, I’ve chosen Jamstack architecture.

Gatsby

Gatsby is one of the most feature-rich static site generators out there. It offers code and image optimization. There are many starters, themes, and plugins, which improve the speed of software development. I’ve started the project using the default starter. Then I added some plugins:

• gatsby-source-filesystem for handling local files.
• gatsby-transformer-JSON to parse data from JSON files. It allows me to add new repairs easily in the future.
• gatsby-plugin-sharp to transform images. It has a noticeable effect on website performance (especially on the subpage with repairs).
• gatsby-plugin-helmet to add website meta tags. Important for SEO.
• gatsby-plugin-styled-components for styling react components.
• and few more

I’ve chosen mainly official and supported plugins. I also tried to add only the necessary ones.

Testing

Gatsby doesn’t support unit tests out of the box. I’ve added a config to be able to write them.

In the project, I used the framework Jest with React Testing Library. It enforces good practices like finding elements by ARIA roles. There was not too much logic - usually covered by unit tests. But they were still helpful - I used them to test if the components rendered everything correctly.

JSX
1import React from "react"
2import { render } from "@testing-library/react"
3import { ThemeProvider } from "styled-components"
4
5import Light from "../../themes/light"
6import { Services } from "../Services"
7
8describe("Services", () => {
9  it("has caption", () => {
10    const { getByText } = render(
11      <ThemeProvider theme={Light}>
12        <Services></Services>
13      </ThemeProvider>
14    )
15    expect(getByText(/oferta/i)).toBeDefined()
16  })
17  it("has title", () => {
18    const { getByRole } = render(
19      <ThemeProvider theme={Light}>
20        <Services></Services>
21      </ThemeProvider>
22    )
23    expect(getByRole("heading", { level: 2 })).toBeDefined()
24  })
25  it("has categories and corresponding lists of services", () => {
26    const { getAllByRole } = render(
27      <ThemeProvider theme={Light}>
28        <Services></Services>
29      </ThemeProvider>
30    )
31    const categories = getAllByRole("heading", { level: 3 })
32    const services = getAllByRole("list")
33    services.forEach(service => {
34      expect(service.children.length).toBeGreaterThan(1)
35    })
36    expect(categories.length).toBeGreaterThan(1)
37    expect(services.length).toBeGreaterThan(1)
38    expect(categories.length).toBe(services.length)
39  })
40})

Besides unit tests, I also created some e2e tests. To achieve that, I added Cypress with Cypress Testing Library. In this way, I unified searching for DOM elements. I simulated users’ behavior with e2e tests: scrolling through sections, clicking links, etc. Cypress-axe library turned out to be very handy. It detected some problems with accessibility and helped me fix them.

GitHub

I used Git as a version control system. I was formatting commits using Angular convention. Before every commit, the husky package was starting git scripts. I put the whole codebase in the GitHub repository. I linked the repository with Netlify.

Netlify

Netlify is a platform that combines CDN, serverless functions, and build automation. It works well with Git and improves implementation time. I saved some time not worrying too much about DevOps configuration. The free plan is enough for a new website that won’t have too many visitors. The lack of additional hosting costs is beneficial for a small, local business. After linking Netlify to the repository, I launched continuous integration. Then I configured DNS servers and set personalized domain.

Summary

The effect of my work is a minimalistic, responsive, aesthetic, and performant website that scores high in lighthouse audits.