Scroll.

DESIGN, FRONTED, BACKEND

provider-vergelijker.nl

Provider-vergelijker.nl is my affiliate website where people can compare internet, phone, and sim-only subscriptions from all providers in The Netherlands.

The challenge

Standing out

There are a wide variety of comparison websites available to the general public. To stand out from these pre-existing websites, I decided to take on the challenge of designing and developing a unique comparison website.

MY ROLE

Connect all the dots and design

I took on this challenge quite happily. However, it knew that design wasn’t the only task was required to complete. I had to view this challenge from a range of perspectives; including a marketing view, business view, and user view.

  • Flowchart
  • User Journeys
  • Moodboard
  • Funnel
  • Wireframes
  • Prototypes
  • Visual Design

Flowchart

The navigation

Creating a flowchart for this particular design allowed me to have a clear overview of how the navigation should work and what each page required, such as page-specific CTA’s (Call To Action). The flowchart allows for other individuals involved such as marketers and developers to easily view the project. In this case: for myself and a developer.

USER JOURNEYS

Ensuring Needs Are Met

Below is a shortlist of user journeys. I referred to these when designing the website to ensure that their needs would be met with the proposed design. By creating the list, I can explore how a user would interpret the website and navigate their way through the website.

As a website visitor, I would like to see the top three deals at the moment
As a website visitor, I would like to compare deals in two steps
As a website visitor, I would like to compare deals in the first viewport
As a website visitor, I would like deals to be filtered based upon my current subscription(s)

MOODBOARD

Understanding User Experience and Hierarchy

I created a mood board, which is displayed below. Alongside several pictures are some notes which encompass how the website and associated hierarchy would be displayed.

FUNNEl

Designs That Have High Conversion Rates

Before developing the wireframes, I have made a list of how the funnel structure looks like. This helps me to create a high conversion ratable design while I jump into creating the wireframe process.

WIREFRAMES

Design that has high conversion rate

Do you know that most traffic comes from mobile devices? That’s why I started to design the website in mobile-first. That doesn’t mean that the desktop version could be a bit less nice. Also, 2 out of the 3 comparisons are focused on mobile devices. Based on that, I’ve decided to start with mobile. For the internet comparison will there probably more desktop visitors instead of mobile. Below is a brief explanation for the wireframe processing in conjunction with the funnel to get the highest conversions.

PROBLEM SOLVING

Three comparisons

When I started with designing the website, I faced an important marketing and design problem. As you may already know, the website provider-vergelijker.nl highlights 3 different comparisons: internet, phone, and sim only subscriptions.


That doesn't mean that every website visitor is interested in all three subscription types. Most of the time is the consumer only looking for internet, phone, or sim only.


We solved that problem to give each subscription type a color that matches with the provider-vergelijker.nl brand. That solution turns out into those colors:

Internet
Phone
Sim only

PROBLEM SOLVING

Make it alive

Below is the final design for the desktop version of this website. To view the mobile version, you can visit the website easily on provider-vergelijker.nl. Both the mobile and desktop version of this website radiates professionalism and trust.

Home

To represent the three individual comparisons, I’ve designed three blocks that are placed in the first viewport. The headline is eye-catching and draws users in, which can often lead to people to continue using the website and ultimately compare subscriptions.

Go to page to view mobile design

Internet comparison

Provider-vergelijker.nl has three different comparisons, as mentioned above. To portray the internet subscription comparisons, I have chosen a vibrant shade of blue. The remainder of this page, which also follows the same blue color scheme, allows for easy identification of internet subscription comparisons. The information displayed below has been devised to encourage individuals to compare their current internet provider to those suggested on the website.

Go to page to view mobile design

Internet comparison

Provider-vergelijker.nl has three different comparisons, as mentioned above. To portray the internet subscription comparisons, I have chosen a vibrant shade of blue. The remainder of this page, which also follows the same blue color scheme, allows for easy identification of internet subscription comparisons. The information displayed below has been devised to encourage individuals to compare their current internet provider to those suggested on the website.

Go to page to view mobile design

Phone comparison

This landing page was slightly smaller compared to the internet subscription comparison. This is due to the idea that individuals could choose their current mobile phone and then compare subscription service prices which included either the phone by itself or with a subscription to the phone. For example, the page states: “Choose phone and start comparing.”

Go to page to view mobile design

Sim Only comparison

The Sim-Only comparison uses a color scheme of both navy blue and orange. I felt there was a need for a complementary color that was bright so that the page remained eye-catching.

Go to page to view mobile design

Sim Only comparison

The Sim-Only comparison uses a color scheme of both navy blue and orange. I felt there was a need for a complementary color that was bright so that the page remained eye-catching.

Go to page to view mobile design

DESIGN SYSTEM

Design components

To ensure that the design remained simple and consistent, I devised a system that turned out in a range of design components. Here is a small showcase of the design system I used when developing the website:

FRONTEND

Tailwind

Despite this being my project, I felt the need to continue to expand my skills and attempt the front-end development. However, I was unable to do this by myself but decided to work alongside Robin Dirksen - a full stack developer who also works in The Netherlands. Together, we chose to work with a front-end framework, known as Tailwind. Tailwind highlights the importance of simplicity to designers. As Tailwind proved easy to use, I decided to redesign Tailwind’ s framework to fit the design system I had created previously. By doing this, I was able to see that the level of communication between the design system and the front-end framework was secure.

Besides Tailwind is nice to use, I’ve also decided to design tailwinds framework into the design system. After doing that, you can see that the design system matches with the front-end system. By doing that it will communicatie really easy to each other.

BACKEND

Laraval Nova

This is how the back-end of the website looks. As you may have noticed, we decided to work alongside Laraval (Nova). As Laraval (Nova) displays the CMS system, there is a range of features that can be created to gain a nice, affiliate site.

RESULT

Experience it Live

Are you curious to see what this website looks like? This website is online and ready to be viewed. This website is designed for the Dutch market, but hopefully, you understand the strategy and my design decisions behind it.

Provider-vergelijker.nl

Other work

contact

Say hello!

If you have any questions or comments about my work or you are interested in working with me - I would love to speak with you. Please feel free to schedule a call with me so we can begin our journey with a simple conversation.

Available

Currently available for projects