UX & UI Design - Jim de Vlieger

UX & UI Designer


Hi, I'm Jim de Vlieger and welcome to my User Experience Design portfolio.

I am a passionate UX & UI Designer from the Netherlands with 10+ years of experience.

I've had the privilege of working on various interesting projects in different settings (agency, client-side and freelance).

View my work
Adobe
Gemeente Den Haag
Reed Business
Sky Radio Group
Veneta.com
Atos Origin

About

Designing and optimizing online services and applications that work effectively, without complicating the life of the user. That's what I love to do.


I don’t make big plans upfront, but create and test to validate the assumptions. From business objectives to user research, from requirements to flowcharts and wireframes, and from functional design to user interface design and prototypes. I love each part of my work.


  • I'm passionate about UX and driven to design functional and usable interfaces.
  • I have a solid understanding of data-driven design, mobile strategy and web development.
  • I enjoy working in Scrum teams with experts on well-defined goals.
  • I have a deep sense of empathy, which fuels my passion to craft honest and meaningful experiences for people.
  • I embrace experimentation and I'm not afraid to be wrong.
  • I'm a creative, big-picture thinker obsessed with crafting the details.
  • I speak the language of the frontend and backend developer (to a certain degree).
  • I have a solid foundation in design principles and typography.

Jim de Vlieger

Skills

Design Thinking   ·   Agile   ·   Scrum   ·   Lean UX   ·   User Interface Design   ·   Responsive Design   ·   Rapid Prototyping   ·   Usability Testing   ·   User Research   ·   Data Analysis   ·   Interaction Design   ·   Information Architecture   ·   Surveys   ·   Interviewing   ·   Content Analysis   ·   Competitive Analysis   ·   Experience Mapping   ·   Storyboards   ·   User Flows   ·   Scenarios   ·   Wireframing   ·   Design System   ·   Frontend   ·   HTML   ·   CSS   ·   A/B Testing   ·   Heuristic Evaluation   ·   Accessibility   ·   UML   ·   Stakeholder Management

Successes

  1. Increased conversion on all devices, with the redesigned Shopping basket & Checkout funnel for Veneta.com.
  2. Increased efficiency of the planning department, with a custom-built planning application for Veneta.com. More incoming calls were handled and more advisor and installation appointments could be scheduled without hardly any errors.
  3. Increased conversion (168%) of applications from international students in 3 months time, with the redesigned application process and Saxion.edu website.

Tools

Sketch   ·   InVision   ·   Jira   ·   Slack   ·   Post-its   ·   Pen & Paper   ·   Brown Paper   ·   Hotjar   ·   Photoshop   ·   Illustrator   ·   OmniGraffle   ·   Google Analytics   ·   Google Optimize   ·   Google Search Console   ·   Lighthouse   ·   DSM   ·   Craft   ·   Pingdom   ·   ImageOptim   ·   Skype   ·   Wacom Tablet   ·   Mac Pro


For more information about me feel free to view my LinkedIn.

View my work

Recent work

In just a few years Veneta.com has become the largest and fastest growing online retailer in window decoration in the Netherlands.


The Veneta.com ecommerce platform is being fully renewed by evolutionary redesign and various new (internal) tools are being built.


Some recent projects I have worked on are:


Case study

Product Configurators

This project started in Q2 of 2019.

Product Configurator
Impression of the redesigned Configurator for Pleated blinds

My Role

I led the UX work and was responsible for the Research, Interaction Design, UI Design, Prototyping, Testing and Stakeholder Management.


I worked alongside a Data Scientist, Content Manager, Product Manager, SEO- and SEA Specialists, two Product Owners and a Development team.

The challenge

Veneta.com wanted to further boost conversions and optimize the user experience. Together with my team I made an analysis of all interesting projects for the Q2 Scrum planning 2019.

The bounce- & exit rates were high on all Product Detail pages.

I was convinced that a redesign of the Product Detail page for all our product categories would directly increase the overall shop conversion (as well as other soft conversions).


The Product Detail page includes a product configurator, where customers can configure their unique product (window decoration). Each product category and their underlying collections have configurable options, which can be very different from one product category to another.


Of course all Product Detail pages, including the product configurators, had to work consistent and have the same look and feel.

The approach

In addition to my standard Design Thinking methodology, I also opted for a Lean UX approach which emphasized rapid sketching, prototyping and user feedback. This created early team‐wide alignment, sparked new ideas and created a sense of ownership across different disciplines within the organization.

Data Informed

I partnered with our Data Scientist and Product Specialist to track down specific data regarding some of the configurator options.


I wanted to keep the configurators as simple as possible for our customers. So I asked myself how often these options were used and if I was confident enough to leave some of them out based on the data we had. Striving to have as little options as possible. Because I knew that the more options we had the higher the dropoff (bounce and exit rates) would be.


We came to the conclusion that it was too early to make any decisions, so I left all options in. The data did not convince us enough at this point and it seemed better to wait for later testing (usability testing and A/B testing).


I watched recordings of clients using the product configurators, and I analyzed their click, tap and scroll behavior.
This revealed that a lot of the configurators (micro) copy wasn’t all that clear and self explanatory. Customers were going back and forward, looking for information about what to do next.


There was also an ongoing team discussion about what was easier for the customer to use; cm or mm? My hypothesis was that using cm would lead to higher conversions because customers seemed to think in cm’s (more than in mm's). Using cm would also mean that customers needed to enter a comma and decimal, which could cause problems. But could also work well, if done right (due to good design). The data looked in favor of cm but I still didn’t find it decisive enough.

Competitive Analysis

Looking at our direct competitors and analyzing other big ecommerce players, helped in numerous ways. Besides that it was a lot of fun, it resulted in new ideas and insights about how I could make the product even better.

Testing with Users

I wanted to test the current Product Detail page. So I scheduled user tests with 5 participants. The participants were asked to do different tasks based on a couple of scenarios.

Users wanted to be in control and were looking for 'overview'.

A desktop computer and multiple mobile devices were used for the tests. I made screen recordings on all devices during the tests for later playback and reference.

User Test
Testing the current (old) Product Detail page / Configurator

The user tests revealed that:

  • Errors and vage error-messages would certainly drive users away. This is not what they expected nor would accept.
  • During orientation users would often fill in the width and height to quickly calculate their price.
  • Filling in the width and height was surprisingly difficult for some users. Users prefered using cm over mm.
  • Users wanted to be in control and were looking for 'overview'. This especially became clear during the test in which I let the participants land directly on the Product Detail page (for example from Google Shopping). They were already on the correct page but went back to the home page and/or lister page.
    At first this seemed strange, but after asking about this I learned that they wanted to be sure they hadn't missed anything (had chosen the correct product, color etc.).

Communicating with Stakeholders

I always try to keep the stakeholders involved in the loop as much as possible, so everyone stays aligned. Although it can be difficult to set up these meetings because of full agendas, I find hearing their opinions and receiving their feedback essential.


We had some interesting discussions during kickoff and different follow-up meetings. And yes there was (the expected) feedback, now from our Product Manager.


In the old configurator there was no option to change the color of a product (for in the new configurators I of course had added this option).
The problem was that different colors could have a different fabric. When a customer would switch to a different color, it could well be that he or she was unaware of ordering a different fabric.

Colors Drawer
Impression of the Colors Drawer

To tackle the problem I changed my early designs. I wanted to give the customer a good sense of how both the color and fabric looked like, without adding extra labels or messages. I would later on do usability testing to make sure I had made the right design choices.

Sketching & User Interface Design

My process involved sketching and wireframing and then translating these directly into hi‐fidelity mobile, tablet and desktop designs. I used Sketch for this, and went through cycles of requirements, feedback, consensus, adjusting my designs, and approvals.

Sketch

My next step involved making prototypes in InVision.

Prototyping

I wanted to quickly build prototypes for two of our eleven configurators (product categories). Prototyping was the most effective way to gain meaningful feedback from the team, consensus from stakeholders and approval from management.


I made a prototype for Roller blinds in Sketch and InVision. I also made an extensive prototype for Pleated blinds, including extra functionalities, but consistent with what I designed for Roller blinds.
My plan was to do (another) usability test, this time with the Pleated blinds prototype.


Although it looked easy, it was hard to make a fully functional prototype in InVision. The configurator had various options, which resulted in a lot of possible combinations I had to work out during build.


I decided to focus on the 3 main configurator flows, and make these flows fully clickable. The final result was a prototype built out of more than 60 screens. It wasn’t perfect but it worked. It was good enough to start usability testing!

Usability Testing

Because of the limitations in the prototype I had to do things a bit different this time. There was a big risk that the participants would get frustrated when links did not work as expected. This could ruin the test.


My solution was to write out a few scenarios based on the 3 main configurator flows, which I had worked out in the prototype. Simple, but would it work?


After explaining the test to the participants I went through the scenarios and criteria with them. It were clear tasks for them to accomplish.
I used the Retrospective Think Aloud technique. A desktop computer and multiple mobile devices were used for the test. During the tests the screens of all devices were recorded.


The usability test was a success and resulted in 9 clear focus points for further improvement. Overall the participants were very enthusiastic about the new product, because it was ‘user-friendly’ they said.

Detailed Specs

I created documentation to communicate requirements to the development team and support my colleagues in writing functional test cases. These deliverables consisted of acceptance criteria, specs for front- and backend development, and notes regarding content management. Everything was documented in InVision.

Detailed Specs
Notes in InVision for the development team

I held an extra handover meeting to further clarify my deliverables to the development team. Together we went through the project and I answered any questions they had.

Functional & Visual Testing

Once the first version of the product was built, I wanted to put it in the hands of our customers as quickly as possible. Before we could do this, extensive testing was needed on the functional as well as the visual UI side.


I concluded that we weren’t fully there yet. So I worked together with the development team, and iterated to get the project to meet our quality standards.

Final Thoughts

At this moment the project is still work in progress. Of course I'm are excited to get the reactions and feedback from our customers, and see what the conversions will do. After going live we will start A/B testing. I’ll be analyzing the data for further design improvements.


Because we have eleven configurators (product categories) I plan on making a blueprint for the development of all the configurators. The results of feature testing will also serve as important input for this blueprint.


Case study

Shopping basket & Checkout

This case study is a brief description of the project and the steps I took as a UX & UI Designer.

Shopping basket & Checkout funnel
Impression of the redesigned Shopping basket & Checkout

The project & My Role

The project started off in Q4 of 2018. Deployment to live was in Q1 of 2019, after which we held the A/B tests to see what the results were and to make optimizations.


I was responsible for the full redesign of the Shopping basket and Checkout funnel. I worked alongside a Content Manager, Data Scientist, SEO Specialist, Product Owner and multiple Developers.


My hypothesis and belief was that conversions could do much better, and that a better user experience was the key factor.


A few of the things I saw right away which could directly have positive impact, were:

  • Remove all distractions.
  • Design a clean and functional user interface; this communicates trust.
  • Group elements that work together (Interaction design and Gestalt principles).
  • Give customers a clear indication where they are in the funnel.
  • Design a faster checkout for customers.
  • Ask the right user feedback at the right moment.
  • Develop for speed (faster page load).


Research, data analysis and user testing would later on reveal a lot of other important input for my designs and prototypes.

Process & Methodology

Although I often rely on, and come back to a certain way of working (my process), I also fully believe in a situational approach when executing UX Design. Each project is different and can benefit from different techniques used.


In general my way of working exists out of a mix of Design Thinking and Lean UX, in an Agile / Scrum environment.


I often employ a few primary research methods such as contextual inquiry, user interviews, experience mapping and usability testing, along with a few secondary research methods such as data analysis and heuristics analysis.

Intake & Scope Definition

I defined the product with the stakeholders during a kickoff meeting.

Converge & Deverge
Divergence & Convergence (image dthsg.nl)

I evangelized customer goals, evaluated business goals, and prioritized and planned all involved stories.

Data Analysis & User Research

I did competitive analysis, talked to customers, watched recordings and studied the online behavior of customers. I analyzed our analytics data and together with a Data Specialist I defined the metrics to measure success.

Design Execution & Prototyping

I made wireframes, mockups and designed up from mobile, to tablet and desktop using Sketch. I went through cycles of receiving feedback, consensus, adjusting my designs, and approvals. Clickable prototypes were made using Sketch and InVision.

Customer Insights & Iteration

I partnered with our Content Manager and held user tests with 5 participants to test and verify my designs and assumptions. For the tests I used my prototypes in InVision. All findings served as valuable input to further optimize the prototypes (mobile, tablet & desktop).

Documentation & Collaboration

I collaborated with, and wrote acceptance criteria and documentation for the developers (mainly frontend). I supported my colleagues in writing functional test cases and creating the content.

Results & Impact

The new redesigned Shopping basket & Checkout funnel performed much better than the old funnel. The tests showed that the ecommerce conversion rate was increased by a significant percentage overall, on all devices. The usability of the Shopping basket & Checkout funnel was much improved. It certainly had impact.


Interaction & UI Design

Claim module

I started working on the project in 2017 and was responsible for the research, interaction design and UI design.


Below you find an impression of some of the deliverables.

Claim module
UI Design for the Claim module
Claim module
Interaction Overview Diagram
- To comply with my non-disclosure agreement, I have obfuscated confidential information.
Claim module
Wireframes for the Claim module (Mobile First)
- To comply with my non-disclosure agreement, I have obfuscated confidential information.

UX & UI Design

Homepage

I was responsible for the full redesign of the homepage and executed all the UX and UI work. Deployment to live was in Q1 of 2019.


This is a design impression of the new homepage.

Homepage
The redesigned Homepage

Previous work

Inspirational

Jim is an experienced UX Designer. He goes to great lengths in designing the best experience for the user.
- Mark Sprenger, SEO Specialist

I'm always interested in new opportunities so let's get in touch!
For more information about me feel free to view my LinkedIn.
Or...