Identifying the goals

Comsave is a business internet provider in the Amsterdam region, famous for their super-reliable service and customer support. They recently refreshed their brand identity and planned to extend their business to neighbouring countries, but their outdated and generic website was standing in the way of their plans.

With a team of excelent developers, but no in-house designers, I was invited to jump on board and help take their website to the next level.

Before digging in to the design process, we had a few meetings were I learned about the services they offer, what their strong points are and about the clients they serve.

What doesn’t work in current website

  • Several major usability issues with the order forms
  • Given some of the target audience, typography is not very readable
  • Outdated visual style erodes trust
  • Heavy use of stock photos give the site a generic look
  • Navigation structure is confusing and overwhelming

What works in current website

  • Existing content provides extensive information to potential customers
  • Good search engine rankings
  • Existing brand identity has been recently professionally redesigned

User profile Pain points

  • Lack of knowledge about different internet types
  • Fear of commitment to long-term contracts
  • Confusing options, lack of helpful support
  • Usure what internet package size they need for their business

User profile Needs

  • Information to make an informed decision
  • Easy to reach support
  • Flexible contracts
  • Tools to calculate their montlhy necessary bandwidth

Designing the solution

To keep focus on the content and the user journey through the website, I always start the design process on paper with some basic wireframes. I then select the best ideas and turn them into greyscale digital wireframes which I share with the team. Because of the variety of the services offered, it took several tries until the final navigation patterns became clear.


To narrow down the design direction, I put together a moodboard – a collection of design snippets from various online sources. The common features are warm, bright colors, generous whitespace and rounded shapes.


Selecting the typography

For the headers and body text I used the Poppins font family, a geometric sans-serif typeface. The almost monoline letters matched the existing branding and the large x-height communicated the modern, open and friendly feel I was going for. To create extra dynamism in the layout, various weights were used.


Custom designed icons

I designed from skratch or reworked several existing icons to create a consistent set that’s used troughout the website to highlight different features and services.


Color scheme

The orange and dark-grey colors were already part of the existing brand identity. To the existing pallette, I added a blue hue to emphasize the corporate focus of the company’s services and some light grey tones to soften the design up a bit.


Finished design


Interactive prototypes

To help the development team successfuly implement the transitions and animations and also to tests several complex interactions, especially on the pages with forms, I created several interactive prototypes using Principle app.

“Comsave has experienced working together with Cristiana and 84colors as a delight. Cristiana is professional, punctual, always helpful and easy to communicate with through all the steps of the project. We are very happy with the end result which is our new website.”

Pieter Verhoyen Comsave


  • UX/UI Design
  • Interaction Design

Project type

  • Business website
  • Illustrations, icons


Visit website
(note: For this project I only provided design services)

Next project