Naam Agency '23. Preview

In 2022 we sat down to update our design philosophy, services, visual identity, and a brand new marketing website to fit these new updates. This new design is clean (it lets the work speak for itself), component-based, and developed using Webflow and the Webflow CMS.

Read more+

At the time of writing, the new website is still in production and scheduled to go live in 2023. During the entire process, I was responsible for strategy, design, and development. As this was one of the last projects at Naam Agency I worked on, unfortunately, I didn't get to see it finish. The team is currently putting the finishing touches on writing the case studies. In the meantime, you can get a sneak peek right here.

Introduction
Services
UX/UI Design
Webflow Development
Copywriting
Content-creation
Prototyping
Creative Direction
Multiple tablets on a dark background displaying the design of the new Naam Agency website
Various pages of the new design.
Homepage Scroll-through.
Full-page screenshot of the new Naam Agency homepage design
Full-page screenshot of the homepage.
Four phones displaying the responsive design of the new Naam Agency website
Responsive design.

Pofile.

The new profile page retains most of the information we presented in the old version, such as our values, workflows, and team. In addition, however, we added an FAQ section to help visitors better understand our services and address questions we got asked regularly.

The structure comprises various reusable blocks (organisms) and allows Naam to expand or shorten the page when necessary. At the time of the design, I mainly used dummy content or wrote text on the go. Some sections in the previews may still contain placeholder information or images.

Explore ↓
Two tablets on a grey background displaying the About Us page design of the new Naam Agency website
About us page.
About page scroll-through.
The new Naam Agency logo on a dark background
New Naam Agency logo.
The new Naam Agency wordmark on a dark background
New Naam Agency wordmark.
About page values color changing background.

Services

During an internal strategy session, we revised how we structured our services. From then on, we focused on presenting four main categories; E-Commerce, Websites, Apps, and Branding, with each having its subdivisions, such as; strategy, design, and development.

This change had a significant impact on the design of the service page. Within a few hours, I completely redesigned the original setup. The goal of this new design was to leave absolutely nothing to the imagination, as it was going to be all about making our services easier to find, understand and read for visitors.

Explore ↓
Service page scroll-through.
Full-page screenshot of the Services of the new Naam Agency website
Full-page screenshot of a section of the Service page.
A tablet on a grey background displaying the Services page design with an individual Service accordion folded open
Case Study Service accordion-item folded out.

Project Overview & Detail.

Presenting projects is always the most challenging part of a portfolio. If the pages are too varied, updating will be a nightmare. On the other hand, if the pages are too bland, it will be hard to show every project's full potential.

When designing the project pages, I focused on two primary ways of presenting; one would be the typical long scroll format, whereas the other would contain CSS scroll snapping for a more gallery-like experience. Of course, both had their upsides and downsides. But by creating a prototype for both, we could determine how these formats would behave with actual content and which would be the best fit for our purpose.

For the case studies, I also created a large set of components that we could use to build the case studies.

As a side note, we acknowledge that scroll snapping is still controversial. However, new technology now allows it to be a CSS-only functionality. This new feature brings a host of user-friendly options where the visitor can quickly 'scroll out' of the 'snap'; this makes the CSS scroll snapping feature very interesting.

Scroll snapping works by taking over the scroll and stopping the page at a particular position, for example, the top of a full-screen image. As a result, the page would feel more like a slider or carousel. Previously, we would use a Javascript library to achieve this, and there used to be no way to interrupt or prevent its actions, which sometimes would be annoying.

In the end, we decided to go with the traditional long-form design option. For the sake of this case study, I still included the scroll-snap design prototype video in the case study to show the idea and thought process behind our decision-making.

Explore ↓
A screenshot of Naam Agency's new Case Study overview
Case Study Overview page.
The CSS scroll-snapping feature in action.
Screenshot of a section of the new Naam Agency Case Study Detail page
Case Study Detail section.
Screenshot of a section of the new Naam Agency Case Study Detail page
Case Study Detail section.
Several wireframe components used to create a Case Study detail page on the new Naam Agency
Case Study modular components.

Contact

In short, the website's main goal is to help us find like-minded people and have them reach out to us, and, quite frankly, hire us for their projects. On our previous website, we used contact forms, thinking that would make getting in touch easier. However, our data showed the opposite, and potential leads would continually prefer to send a quick, direct e-mail or call. Therefore, they would never touch the forms.

Forms can be maintenance-heavy as they require monitoring in case of browser or CMS updates. So, in favor of the data, we ditched our forms and opted for a more timeless approach that required way less upkeep. You guessed it, a simple link on a dedicated contact page.

Somewhere in 2023, the new design is to be released. I'm still waiting to hear precisely when, but I will be excited when that happens.

Explore ↓
A screenshot of the Naam Agency's new contact page
Contact page.
Client
Naam Agency
Services
UX/UI Design
Webflow Development
Copywriting
Content-creation
Prototyping
Creative Direction
Sector
Creative Agencies
Year
2023
Details
Design
Timothy Maurer
Joris Spiertz
Development
Timothy Maurer
Strategy
Timothy Maurer
Joris Spiertz
Creative Direction
Timothy Maurer
Team
Agency