Back to selected workCreative · Marketing website · 2022

DryWest Design

A website for an audio software design studio, with one door for people who want to hire it and another for people who only need the parts.

Role
UI/UX Designer
Project
Audio software design agency website
Team
DryWest Design studio and development team
Scope
User flow, sketches, wireframes, visual design
Year
2022
Tools
Figma
Website
drywestdesign.com
Twenty-five seconds, five stages: the same home page from a flow diagram to the live site

DryWest Design is a studio that designs and builds interfaces for audio software: Kontakt instruments, VST plugins, standalone and mobile apps. It also makes ready-made UI kits. I designed the website that has to do both jobs, winning custom projects and offering kits off the shelf.

The problem

DryWest serves two different types of customer: clients looking for custom design work, and designers and developers looking for ready-made UI kits and digital assets.

Serving both through a single linear journey made the experience unclear for each of them. And this audience looks at interfaces all day, so they judge a design studio by its own site before they read a word of it. They arrive with three questions:

  • Do they understand audio software?
  • Can I see what they have made?
  • Do I hire them, or just pick up a kit?

The challenge was to give each audience a direct path to what they need, without splitting the website into two disconnected experiences.

The approach

The structure was settled before anything was styled. The work ran in five passes, each closing one question before the next began: the routes a visitor can take, three pages on paper, the same pages in grey, the visual language, and the site as it runs today. The film above shows the same home page at each stage.

Starting with the flow meant the hardest decision, how two audiences share one site, was made first and on a single diagram, where it was cheap to change.

Two ways in

The risk: visitors with different goals share one path, and each has to read past content meant for the other.

The flow starts with a single decision, asked right after the hero: does this visitor have a project in mind?

  • ServicesI have a product to build
  • Kits & AssetsI only need the parts

So the hero says what the studio does in one line and puts both answers side by side as two buttons. The first path runs through the portfolio, the services and the FAQ to a brief. The second runs through the kits: filter by format, read what is inside, download.

The two paths also meet. Someone who picks up a kit and wants it tailored is handed to the contact page, so the smaller door leads into the larger one.

Letting the work make the pitch

The risk: an expert audience does not trust a studio's description of itself.

The portfolio comes straight after the hero, before a single service is described. For this audience a shipped plugin is the strongest argument there is.

The largest project sits first at full width, with the plugin's own interface as the picture. Two smaller cards follow, sharing one layout and differing only in colour. Each one links to the product's own site, so the work can be checked, not just admired.

Services come next, kept to three: UI/UX design, branding, and scripting and development. The FAQ then answers the questions that usually slow down a first email, such as rates, process and what to send.

A brief that is easy to send

The risk: a visitor is convinced, then hesitates at the form because they do not know what happens next.

On paper, the contact page was drawn as two halves: reassurance on the left, the form on the right. The reasoning went into the margins of the sketch. The message box is the largest thing in the form, because the brief is the point. There is one button, at full width. Beside it, three short steps say what happens after sending: a reply by email, a discovery call, then scope, quote and timeline.

The navigation follows the same thinking: three links, and one way to reach the studio that is always in the same corner.

Visual direction

The risk: the site's own styling competes with the plugin interfaces it is there to show.

The site is dark, close to the interfaces in the portfolio, so the work feels at home on the page. One purple accent marks the words that matter in each heading and the actions worth taking. Headings are set in Clash Grotesk.

Each project brings its own gradient, in blue, violet and amber, and those are the only saturated colours besides the accent. Behind the headline, a row of soft vertical bars rises and falls like a level meter: a quiet nod to sound, on a site with no audio of its own.

The result

The final site gives both audiences a clear path through one cohesive experience. Clients looking for custom work can quickly understand the studio’s services and portfolio, while designers looking for ready-made resources have a dedicated path toward kits and assets.

The two journeys stay connected, giving DryWest a flexible structure that can grow as new products and services are added.