How Companies Can Successfully Transform Digitally With In-House Creative Teams — A Case Study
by Sander Crombach
As a freelance UX / Visual designer I am being hired by all sorts of different companies and institutes in different industries. I’ve worked within the finance, fashion, agriculture, advertising, food & beverage, real estate, hotel industry… and the list keeps going.
Nowadays when you start a company, you start immediately online. But for companies that have existed for a longer time, it’s different. They have to adept and have to take part of a digital transformation.
I never worked for a government institute before, until recently. I worked on a project for a couple of months for the Dutch government, at the Dutch Chamber of Commerce. I was part of an in-house scrum team and we designed and developed a new web app called KvK Krachtmeting.
This web app is now three months live and we noticed that the conversion rate of 57,11% (while the target was 25%) and the positive feedback rate of 84,99% of this product are extremely high. It’s the most successful online app this institute has ever created.
In this case study I will show how the in-house team designed and developed this specific successful web app.
Pre, during and post stage
There are three stages how users experience a digital product; the pre, during and post stage. Companies should take all of these stages into account from the very beginning, not only the digital product itself, when designing applications.
In the pre stage the user stumbles upon the digital product on social media (or via other promotion ways / marketing). The during stage is when the user is using the product (the digital product itself). And the post stage is when they’ve finished using it and they can continue their ‘relationship’ with the client, for example by subscribing to their newsletter.
Let’s start with the middle one, the during stage. How we designed and developed the web app itself.
—
User centric
KvK Krachtmeting is a web app teaching potential entrepreneurs how to improve their entrepreneurship skills and offering knowledge for setting up their businesses.
It is created for entrepreneurs, but also with entrepreneurs. They were involved in every aspect of developing the app — creating the content, choosing the name and advising how to improve the user experience of the tool — which makes this web app truly user centric.
Users should be involved in the creation process of quality products. After all, quality produces quantity. Something that has quality is simply worth sharing.
“Users should be involved in the creation process of quality products.”
Content
The tool consists of 23 statements, divided into 4 categories: entrepeneurship, marketing, networking and finance. The questions are meant for new users, but they were also answered by a ‘panel of entrepreneurs’. In total 1.500 entrepreneurs from Holland answered the exact same questions. The purpose was to create a benchmark.
With this benchmark you as a user can compete against the average entrepreneur in Holland. You can find out how good you are in these 4 categories compared to others. When you’ve finished the test you’ll see your score compared to the benchmark and receive personalised advice on how to upgrade your own skills.
The questions were tested by prof. Marco van Gelderen (VU Amsterdam). Additionally a research paper was consulted, written by Eva Kyndt and Herman Baert (both connected to the University of Leuven, Belgium) discussing “Entrepreneurial competencies: Assessment and predictive value for entrepreneurship”.
Agile
This digital product is being built with the help of the scrum methodology. Scrum is a flexible way of developing (software) products.
A scrum team is a multidisciplinary team that works in so called sprints, taking 2 or 3 weeks each. A team consists of an interaction and (visual) user experience designer, a front-end and back-end develope and a tester. And sometimes a marketer, information or business analyst, a copywriter or a legal expert also joins the team temporarily.
To keep all of the activities organised the team participates in all sorts of sessions.
First there is a sprint planning, in which the entire sprint is being planned.
There is a backlog refinement in which the team goes deeper into the exact activities of the whole team, to make sure all the details are clear. It allows to estimate the time that is needed to realise all of the activities.
Each morning the team starts with a daily scrum. The team members will tell what he/she did the previous day and what he/she is going to do next. That way everybody knows what everybody else is working on.
At the end of a sprint there is a so called sprint review. The team looks back at all of the activities and demonstrates what they’ve been working on towards the stakeholders. Together the team is being reviewed to see if they are still on track of the whole project.
And after a sprint review there is a retrospective. The team evaluates (without the stakeholders) the past sprint and looks if there can be any improvements to the process.
Designing = problem solving
The reason why any product should be realised is because the target audience has an issue that can be solved.
To get started, first you have to empathise. Learn what the real issues are that need to be solved. You have to think like a user to better understand it.
Brainstorm and think of possible solutions which could solve these issues, followed by developing these ideas into a concept.
When developed a digital concept, create and test a prototype and seek feedback from the target audience.
Validate the outcome and you have useful information with which you can develop this concept into a real product. The best ideas are worthless, until they’ve been tested in the ‘real world’. So you have to validate your assumptions.
“You have to empathise. Learn what the real issues are that need to be solved.”
Design process
First step of the design process is making a flowchart of all the screens the user needs in order to use this digital product and to experience the content.
When the flowchart is complete you make wireframes by zooming in and making sketches of all the screens separately. Where will all the components be placed? Where do you position the logo, the call-to-action, the texts, titles and images / animations?
Once you’ve done that you’re ready to start working on the visual design. The brand probably already has an online branding with components you can use. Always try to add 20% new modern components, otherwise the visual design will feel outdated when it’s being launched.
“Always try to add 20% new modern components, otherwise the visual design will feel outdated when it’s being launched.”
When all the screens are designed you are ready to create a click demo. You can link all the screens you’ve designed with so called hotspots, so you can ‘use’ the product without it being actually technically build. A click demo is also very helpful to give stakeholders a good impression what the product will look like when finished. This way they get a clear example of where they are investing in.
This click demo can be used as a prototype. But there are several ways to create one. You can also make non visual designed prototype to quickly see how users interact with just a couple of technically working components.
Usability testing
Like said before, users should be involved in the creation process. Therefore usability tests are very important in creating a qualitative digital product.
You can do qualitative and quantitive tests. An example of quantitative test is if you analyse Google Analytics statistics or Hotjar heat- and click maps (or even analyse brain waves). You will see how a big number of users is interacting with your product. Very useful and highly recommendable.
But you can also do qualitative tests by testing with 8 to 10 ‘real’ people, who are part of your target audience. There are several tools with which you can record these sessions. With these sessions you can discover improvements which you can apply to your product.
Below you’ll see 4 real recordings of 4 different users, using the web app in different ways and speeds.
We tested the tool with ‘real’ entrepreneurs who we met at several front offices of the Dutch Chamber of Commerce. And at several ‘workshops for starters’ gatherings, where a lot of potential new entrepreneurs come together. In total 10 entrepreneurs tested the prototype in 5 different cities across the Netherlands.
All sessions were recorded so we could investigate how they’ve experienced it. We created a must-have and a nice-to-have list in which we collected the findings we discovered. The team discussed these findings during the next Sprint Planning.
Letting the users choose a name
We also wanted to let the target audience decide what the name should be of the tool.
To do so we created a Google Survey in which we asked 57 ‘real’ entrepreneurs which name they thought would fit best. This resulted in a top 2 of names which were almost equally popular, namely KvK Krachtmeting and KvK Insights. Because these two names were almost equally popular, we were fortunate to be able to choose one of them. In the end the Dutch version was chosen and our tool had a new name which we were certain about the target audience thinks fits.
Key visual
The talented illustrator/animator Rueben Millenaar was asked to make several animations for this tool. A storyboard was created to share the concept with him. The animations are shown in the introduction page in the background and on the result page they are being displayed in each category.
“The tool also has several micro-animations, which adds value to the user experience.”
Features
The tool has several micro-animations, which adds value to the user experience.
For example, on the result page after you’ve finished all of your questions, a ReactJS animation appears. You’re receiving your score in the shape of an animated bar chart with the benchmark on top. This way suspense is being build which makes the user experience more exciting.
Now we go to the post stage. We build the possibility to save your results in your email inbox. This way they don’t get lost and you can go view them, together with all the links, whenever you want. The style of the email template is the same as the digital product (during stage).
When you receive your results in your email inbox additional links of other products this institute has to offer and could be of value to you are presented. So here the beginning of a ‘relationship’ with the users starts.
Marketing
When the product is optimised and the key visual is implemented, it’s time to let the world know of it’s existence. This is when the pre stage kicks in, also called a marketing launch.
In case of the KvK Krachtmeting posters, cards, all kinds of banners and interactive videos were made with the same look ‘n feel. The product has a concept that is also being used in promotion, so when you’re in the during stage the style is the same — recognisable.
The print promotion was spread in sub-offices across the country. Banners and videos were placed on several websites and social media accounts.
And finally we created interactive videos we could use on several social media channels. There are 4 interactive videos and they consist of one statement (like a light version of the web app, which consists of 23 statements). They are interactive, so in these videos you can agree with this statement or be against. These videos are mini versions of the complete KvK Krachtmeting web app and are teasers for the big test.
So there you have it. The complete ‘making off’ how this web app is created, showing that the Dutch government is right in the middle of a digital transformation process and is creating meaningful digital products. The analytics show that the conversion of this product is very high and people want to share it.
This case study also shows that a digital product is more then just an application. It’s a concept with consistency throughout different stages. You want your users to have the same experience while discovering it on social media, actually using it and also while experiencing email after care. When designing a digital product, make sure you create a solid concept in an early stage of the design process, so it can be used in all these different stages.
Want to try KvK Krachtmeting yourself? Surf to www.kvk.nl/krachtmeting (sorry, this web app is in Dutch only…)
This is the first article on Medium that I wrote. If you enjoyed this post and would like to read more articles like this in the future, don’t forget to click the 👏
Sander Crombach is an award winning Senior Digital Art Director and UX / Visual Designer. He designs user centric brand identities, digital products and virtual experiences. Visit his portfolio, follow him on Instagram and connect with him on LinkedIn.
