Kimspiratie.nl UX/UI re-design – Case Study

Client

Kimspiratie

Kim van den Wijngaard needed a new website. She has had her Kimspiratie.nl website for five years and build it herself in Wordpress. Our kids attent the same school and we collaborated on a different project earlier. Once that project was completed, Kim asked if I wanted to redesign her website.

Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 02Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 01

Tools used

Sketch
Invision
Adobe Photoshop
Adobe Illustrator
Wordpress
Elementor

Involvement

UX/UI Design
Art Direction
Brand Identity Design
Wordpress

Challenge

In the five years that Kim has been a Freelance Event Manager and Communications Consultant, she had grown professionally. That professionalism did not reflect in her online communication. Furthermore, the projects / cases on her website were outdated and not presented properly. 

The need for a re-design of her website was clear.

Solution

But, because her self-designed brand identity also needed a re-design, this was addressed first. After all, a website is just a means of communication. And a fresh new website design should always be based on a well-designed corporate identity. This made the need for a re-design of her corporate identity also clear.

Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 03Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 04

A roadmap was defined

Everything in the right order

The order in which the several parts of an online identity are designed, is very important. So, only when the renewed corporate identity of Kimspiratie was finished, it could be developed towards an online identity. Which, in turn, could then become the basis of a website design.

Roadmap

Step 1New brand identity
Step 2 – Further development of corporate identity in an online variant
Step 3 – UX Design – Flow Chart and wireframes
Step 4 – UI Design – Visual Design
Step 5 – Build website in Wordpress

Step 1/5 – Design a new brand identity

Kim’s corporate / brand identity was developed based on extensive conversations about her personal motives, her company, her target group and her services. View the result of that improved brand identity here.

Step 2/5 – Design the online identity

The online brand identity was strongly based on the previously designed overall brand identity. In particular, the online typography and the way in which the website interacts with users, were closely examined.

Step 3/5 – UX Design – Flow Chart and wireframes

As with many other activities, Mr. Upside likes to work from large to small.

First of all, we looked at exactly what information needed to be communicated by Kimspiratie. Then we examined how that information could be divided into “bite-sized” chunks on the various pages. This resulted in the flowchart shown.

With the flowchart in mind, we looked closely at how each page could present the information. The result of that research is shown in a set of wireframes. Often the wireframes are translated into a clickable prototype. Because this project was relatively limited in scope, the prototype was not opted for.

Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 06Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 07

Defining the main purpose of the website

Inform

Together with Kimspiratie, Mr. Upside determined the main purpose of the website would be to “inform”. Kim receives the vast majority of her assignments through word of mouth in her human network. Not via her website. It was also not necessary for the website to replace any of those brand ambassadors.

Kim’s customers will mainly use the website as a reference. To see which projects she did before. And what her role was in those projects. The cases where therefore the most important and had to form the core of the Kimspiratie website.

Flowchart and wireframes

When designing a website, Mr. Upside always starts with wireframes and flowcharts (User Experience Design (UX)). Even with a relatively small website, such as this one. The information structure is presented and well documented in these wireframes. In other words, which information resides where on the website? And where exactly on the page?

Mr. Upside Dutch Freelance UX-UI Designer Case Study - Kimspiratie - 08

Final steps

Step 4/5 – UI Design – Visual Design

Soon after Kim agreed on the wireframes, the User Interface (UI) Design process started. In fact, this phase was a combination between the previously determined online identity and the wireframes. In several rounds of feedback we arrived at a final UI Design.

Step 5/5 – Build a website

Kimspiratie’s new responsive website was built in Wordpress, based on the UI Design and using the Visual Builder software Elementor.

Need an UX/UI Design for your website or app?

Feel free to connect! I am currently available for new UX/UI Design projects.