User Experience Design & Research

The items below have been approved for display under their respective NDA (Google, deltamethod), so you may see blurs or white spots where sensitive data was removed.

deltamethod

As the single UX Designer at deltamethod, I helped create tools to manage massive online text ad portfolios. I performed tasks across the whole spectrum of UX Research and UX Design, ranging from contextual enquiries and persona workshops to organising UCD/UX sprints with brain storm session, building and testing prototypes; and embedding Design Thinking into the company’s development process.

Making programmatic input visual

  • dm-wf-tokeninteraction-1
  • dm-wf-tokeninteraction-2
  • dm-screen-tokensyntax
  • dm-screen-tokeninteraction

One of the most important parts of the tool is the ability to create templates for text ads. To create text ads programmatically the user needs to combine data from various tables. This was previously done with a tricky syntax that was error prone. More than just providing syntax highlighting I wanted to move away from the syntax completely and enable the user to work on data that resembled the final output as closely as possible.

Replacing ‘freeform’ with a form

Another part of the tool was dealing with freeform MySQL input to do large scal search and replace. This often lead to queries that broke the system. After having analysed the types of queries that were actually done I was able to unify them into a single form that abstracted away from direct input.

  • dm-wf-dynrules-1
  • dm-wf-dynrules-2

Tweaks

  • dm-wf-globalvariables
  • dm-wf-addkeyword
  • dm-wf-exporttemplate-1
  • dm-wf-exporttemplate-2

During the development and optimisation of the tool there were numerous ways in which the interaction got tweaked. Here you see a few examples of these: automatically creating an empty input upon creation of an element (x2); combining similar toolbar functionality using dropdown buttons; and removing non-critical loading modals by using in-button timers.

Google

At Google, I worked on internal tools in my 20%-time. I helped out by applying my UX knowledge, designing the flows, doing heuristic analyses of- and usability studies for our tools.

Availability Metrics Tool

At the start of a major overhaul of one of the metrics tools serving a whole global department, I was asked to identify the significant use cases and current issues with the current tool. In a small-scale user testing project I identified three missing functionalities and a large amount of usability issues. I documented all the found issues, proposed new flows and functionalities and sketched out potential solutions.

  • av-1-loader-modal
  • av-2-layout
  • av-3-settings
  • av-4-menu-tree

Troubleshooter Tool

  • mm-collapse-issues-1
  • mm-collapse-issues-2
  • mm-collapse-issues-3

For a troubleshooter creation tool that served more than four teams across three different departments, I took on the role of frontend developer. Apart from improving the codebase significantly, we looked at how to improve flow throughout the tool a getting users to a solution of their issue quicker, while enabling them to maintain overview of their location within the tool.

Monitoring Tool

In this project I took on the role of Lead Frontend Engineer and UX designer. The tool was an innovation for the global team. We developed a tool from scratch that would keep track of collections of records and rank these according to external changes affecting these records, aggregating meta- and historical data. Users were then able to monitor and export this data for further processing.

  • wq-sketch-1-add-edit-queryset
  • wq-icons
  • wq-sketch-2-queryoverview-v1-slider
  • wq-sketch-2-queryoverview-v2-jogdial
  • wq-add-form-1
  • wq-add-form-2
  • wq-add-form-3
  • wq-main-menu-1
  • wq-main-menu-2
  • wq-select-urls
  • wq-bridge-to-yeoman