ElbertDecember 2013 – may 2018
From december 2013 till may 2018 I’ve worked for Drukwerkdeal.nl. The biggest online printing company in The Netherlands and Benelux.
In this company I’ve learned to really get in touch with customers. Not only see them as numbers in some analytics system, but visit them and hear their stories. Talking to end-users is I think one of the most important things in UX. In the end your doing it for them.
In this case I will give several recent examples of projects where parts of the website or external websites were improved.
1. The groundwork
For users, I think, it’s important to get a consistent experience throughout the whole website. This way users know what to expext from certain interactions. At Drukwerkdeal there already was a offline brand guide. But a online guide, an UX guide, didn’t exist yet.
Therefore me and my teammates created an extensive guide for all particles of the digital applications of Drukwerkdeal. From the smallest ones: Atoms. To the bigger ones: Organisms. This way we could assemble templates and pages.
The first and also the best example where the guide was used first is the blog section of Drukwerkdeal: https://www.drukwerkdeal.nl/nl/blog/show/tutorials/freebie-friyay-zo-maak-je-zelf-een-cinemagraph
Right now the guide is rolled out to all new applications and step by step integrated into allthe digital communication platforms.
2. Navigation
In many user tests we head with customers and potential customers we saw that they had problems using our navigation header. Problems finding the right products but also the right information. At the same time we knew through analytics that the people that did found their wanted product via our header converted better than the ones that found products in another way.
In the new header we created more space and more brought more focus to the search by making the height bigger and by adding some shadow backdrop. Also the product navigation was better visible now. The USP’s were brought to the top to attract less attention. What we also knew is that users need our customer service and like the fact we are a personal company. So the telephone number and customer service links were also given a prominent place.
The complete new header was tested through user tests and A/B-testing and the results were quite positive. The conversion rates throughout the whole website increased with 2%. So the header was implemented in the months after.
3. A new register form
Registering as a customer. In the webshop of Drukwerkdeal this is an unavoidable step for users in order to buy a product. Therefore it’s really important. Everybody that gets blocked in registering will not buy a product. In analytics and in hotjar we saw that to many users left the form and had troubles with it. We decided to improve it.
What we essentially did was remove redundant overload. Removing fields if it wasn’t needed to show them, making fields as long as the expected input and moving the form hints to the left of the form inputs. This way the form seemed less longer and also made it clearer for users.
We tested all the different changes in user tests and also in A/B tests and as a result conversion of form successes increased with a staggering 5% also orders increased with 2%.
4. Making the website responsive
The biggest challenge in my whole time at Drukwerkdeal: making the website responsive, updating the style according to the new brand guide, but still keep the interactions on the site as much the same as possible.
When I just arrived at Drukwerkdeal (in the end of 2013) the website was still not responsive. It was not possible to order products with a phone. While most users were ordering via desktop this was still a big problem. At the same time there was a rebranding going on and the back end system was renewed.
What we did is compose a project group and by a lot of sketching and wireframing we came to a design that was both updated in style according to the new brand and also keeping the functionalities and the structure of the old website.
5. And then some…
Offcourse there were many, many more other projects:
- A totally new backoffice environment (sadly I can’t show any of this)
- Creating a new blog – https://www.drukwerkdeal.nl/nl/blog
- Updating the product pages and category pages – https://www.drukwerkdeal.nl/nl/producten/huisstijl/visitekaartjes
- Creating a separate help section – https://www.drukwerkdeal.nl/nl/klantenservice
- Updating the footer
- Testing & tweaking the checkout proces
- A lot of tweaks to small parts and interactions of the website
- Designed and introduced a new icon set
- And many more other projects
