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.
Brand Identity Design
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.
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.
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.
Step 1 – New 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
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.
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.
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.
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.
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?
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.