Source: https://alfonsmelander.se/studio-hackspett

# Studio Hackspett · Case study by Alfons Melander

![Studio Hackspett](https://alfonsmelander.se/assets/Hackspett_logo-CwnJWkhj.svg)

A modern website for my company that provides web services to businesses.

Role
UX Designer · Front-end Developer
Timeline
Feb 2026-Mar 2026
Team
2 people

![Studio Hackspett mockup](https://alfonsmelander.se/assets/hs-hero-mockup-Byv5hMux.png)

Problem & Goal

## Building from scratch

This was not a redesign but a complete development from scratch. We had to research our target demographic, people who need help with their website or need a website of their own.

The goal was to create a brand website that felt modern, trustworthy and clear, while also being flexible enough to grow with the business.

![Research and planning](https://alfonsmelander.se/assets/hs-research-vDz0nkBs.jpg)

Ideation

## Exploring the design

Figma

We experimented with various layouts and directions to find the right design for our users and business goals.

![Early Concepts](https://alfonsmelander.se/assets/hs-concept-iEqqb9L2.jpg)

### Early Concepts

![Visual Direction](https://alfonsmelander.se/assets/hs-direction-DYVuNu8z.jpg)

### Visual Direction

![Getting more refined..](https://alfonsmelander.se/assets/hs-refined-ZYd0MAd0.jpg)

### Getting more refined..

Implementation

## From design to code

HTMLCSSJavaScript

When we had all the Figma files for every page of the website we started to code. This project involved coding in basic HTML, CSS and JavaScript.

![Implementation and code](https://alfonsmelander.se/assets/hs-code-Dxvcvik2.jpg)

Framework migration

## Converted to Next.js

Next.js

After the first version was built with HTML, CSS and JavaScript, we converted the website into a Next.js framework. The goal was to keep the same visual design while making the project easier to scale, update and maintain.

The work involved restructuring the static code into reusable React components, setting up page-based routing and preparing the site for a more production-ready workflow.

### Reusable sections

The original static pages were divided into smaller React components so recurring sections, buttons and content blocks could be reused across the website.

### Clearer routing

Each page was moved into the Next.js app structure, making the site easier to maintain as the service offer and company content grows.

### Better foundation

The migration created a stronger base for performance, SEO metadata and future features without changing the visual identity of the brand.

## View the live website

Studio Hackspett is live as a clear, responsive website for the studio's brand and services.

[Visit Studio Hackspett](https://studiohackspett.se/)

[Next project](https://alfonsmelander.se/golfgo)

Alfons Melander

UX Designer · UX Engineer · Front-end Developer

[alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander)
© 2026 Alfons Melander