Project: BankGiro Loterij VIP Card.

Together with a scrum team of developers, product owner we set up a new responsive website with a multi-select search engine for VIP Card Members to find the perfect thing to do. As a freelancer I was hired to work on the UX-Design, Prototyping, Usability test and Visual Design.

Multi Select Search Engine

BankGiro Loterij asked to think about a new design for the VIP-Card members. The system was really outdated. Users couldn’t find what they were looking for. Lot of bugs and back-end problems with the tags en CMS system. We worked Agile with the Kanban method. With a weekly stand-up.

Briefing:

- Improving the search / filter functionality

- SEO Friendly

- Easier usage of CMS

- New responsive design

We started this project on mobile first. Mobile users rising. And because of a complex search engine it is more easier to design on desktop but hard to translate to mobile. Feedback from the users was that they want to search fast and easy. On date and on subject. So to search on both or separate is possible.

Filter

When it comes to site search, the very last step of the customer journey is the results page, making it core to whether a user makes a choice. This means UX has to be perfect to drive conversions, with too many results just as bad as too few. After searching the user has the option to specify their wishes with the filter option. The sticky button under shows how much results are left. So the user never left with “No results matching your search.”

Prototyping with Invision

To make a clickable prototype I used Invision. It is very easy to use and fast prototyping. Here on the right I made a screen grab of the prototype. Press the play button to see the prototype.

Testing

The think-aloud test involve participants thinking aloud as they are performing a set of specified tasks. 3 Participants are asked to say whatever comes into their mind as they complete the task. I asked them to search for a specific subjects and I had also some question’s about the look and feel. This gives me insight into the participant's cognitive processes, to make thought processes as explicit as possible during task performance.

Visual Design

With this visual design I tried to ensure that content remains central to the page or function, and enhances it by engaging users and helping to find the product they looking for. I used the brand design elements. There were some design problems with the old website. It was not designed for a management system. I solved those problems with less work for the developers. I handed over the designs with the program Zeplin. The designs I made in Sketch.

Project: Vandebron EV

Together with a scrum team of developers, designers, product owner and one of the founders of Vandebron we set up a new division at Vandebron for the EV drivers.

As a freelancer I was involved in different projects:

EV Charge Card system (landing, onboard process, “my Vandebron” environment)
EV Charging solutions (landing, quotation request)
Mobile app where you can find a spot to charge your Electric Vehicle
Pilot program together with Tennet for a smart EV charge system

EV Charge Card system (landing, onboard process, “my” environment dashboard)

My role: Research, prototyping, testing, visual design.

Results: EV Charge Card Landingpage, on boarding process and addition to “my Vandebron” within the online brand design of Vandebron.

Prototyping

Responsive Design dashboard “my Vandebron”

The Design process starts with user research.

First we did online research on our competitors. We looked at some start-up company’s in the EV business (like new motion) and some energy providers who also have an EV Department (like Eneco). We learned a lot from target audience feedback on their products. So we can do better :-)

With the team we did a Brainstorm on possible solution ideas and determine what to build.

Prototype and testing

Together with the team we developed the wireframe and I used Sketch and Invision to make the prototype. I made a clickable prototype to test it to the users. We used the “thinking aloud test”. We asked the participants to do some tasks and to use the system while continuously thinking out loud. We made screencrabs and recorded their voices to learn and optimize the designs.

Vandebron Charge Card (UX design)

“My Vandebron” Card replace / block process

Vandebron Charge solutions

Landing and quotation page

My role: UX Design and Visual Design of the landingspage, quotation page.

Vandebron EV Mobile App

My role: Research, UX Design, prototyping and testing

This app shows the location of charging stations in the Netherlands. You can also find important details like what kind of plugs the stations support and activate you favorite station. To stand out with this app I came with additional ideas like:

You can choose if you want to charge with energy of Vandebron. Because not all charging stations are 100% green. But it is one of the USP’s of Vandebron
The app has a collaboration with parkmobile. To pay easily for your parking tickets.

If you want to see more of my work of je have any questions please send me an email or call +31 6 27027465