Comparison Website

Affiliate website for internet, phone, and sim-only subscriptions from all providers in The Netherlands.

Summary

Provider-vergelijker.nl was my affiliate website where people can compare internet, phone, and sim-only subscriptions from all providers in The Netherlands. I sold that website in Q1 2023 to another company because of having another priorities.

Frontend

Backend

Web Design

CRO

Challenge

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.

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

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 stories

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.

wireframes

Page Structure

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.

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:

Result

Experience it Live

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.

Homepage

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.

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.”

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.

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.

Backend

Laravel 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.