Archives

Overview

The mobile team located in Amsterdam (actually, Hoofddorp) consisted of a Product Owner, UX/UI designer (me!), iOS and Android developers and a tester. Our team followed an Agile development approach and collaborated with teams located in Memphis and Dallas on new feature development and overall improvements for the app.

Design concept

The screens below show a concept flow for the recipient experience. Based on the existing functionalities, these designs show how the app would look like after applying the recent brand guidelines and improving the main navigation by using a tabbar (iOS) and side navigation (Android).

The Tracking Summary Screen

The Tracking Summary Screen is one of the most used areas of the app. The screens below show different iterations and options created with input from a varied set of stakeholders, brand guidelines and a complex set of business rules. These designs were validated in several usability tests and adjusted based on user feedback, resulting in a final design that ensures an optimal user experience while, at the same time, covering all business requirements and backend limitations.

FedEx Delivery Manager®

The FedEx Delivery Manager® is a functionality on the Tracking Summary Screen with which users can manage their delivery. For example, users can choose another day or location to get their shipments delivered should they not be at home at the scheduled day and time.

This functionality was quite complex given differences in logistics processes in the US and across the world, as well as many backend and legacy system limitations.

In the US, users can configure delivery options independently from each other. For example, a user can simultaneously request a vacation hold and add a delivery instruction. For this reason, the interaction design allows all options to be visible at the tracking summary screen at the same time.

For international markets, users can only choose one delivery option at time. To avoid options disappearing from the action list, the options are placed in a modal that overlays the tracking summary screen.

In this way, the interaction design is created for each specific market, ensuring the best contextual user experience, while still keeping the same FedEx look and feel and brand guidelines throughout the app.

Overview

This project was a proof of concept for a bike courier application aiming to explore the opportunities and capabilities of having such an application being used by FedEx bike couriers in the main European capitals. This proof of concept was designed for Amsterdam, but was intended to be expanded to Berlin and other capitals in Europe.

At the beginning of the day, the courier would scan the packages in the depo, which would generate an optimal route. The courier has the option to edit the order, and by confirming it, the app would display an estimated time of delivery for each address. Clients would be notified about these times, and any changes that would happen along the way, reducing the time window they would have to be home waiting for the courier.

Duration

This project took place between August and October 2019.

Overview

The goal of this proof of concept was to get the teams in Amsterdam and Dallas to get to know each other better and collaborate on a project for the first time, getting familiar with coding, designing and worming in a team from different sides of the world.

The result was a connected experience for filling in the File a Claim form on FedEx.com easily by using the mobile phone as a second screen.

Duration

From concept creation to final development and demo to stakeholders, this whole project was done in only one week, in September 2018.

STEP 1

The user opens the File a Claim form on the web, which has 3 steps – Shipment information, Claim details and Your information.

STEP 2

In the Shipment information section, the user has to enter the Tracking number to get started, which can be done manually, or by scanning the QR code with the mobile app. Scanning the QR code will connect the app with the website.

STEP 3
Now the app is connected, the user is asked to scan the package label on the damaged package, which will automatically fill in all shipment information on the website.

STEP 4

On the Claim details section, the user can upload photos of the damaged package. Since the app is connected to the website, the user can take photos with the phone, and they will be uploaded to the website in real time.

STEP 5

The last section containing personal information will be automatically filled in with the information used when the label was created, and doesn’t take any further action from the user. With only one click, the user can submit the claim with no effort.

Overview

In only two years, the TNT digital products – dotCOM, myTNT, Track&Trace and mobile apps – grew apart from each other in terms of interaction and visual design, resulting in an inconsistent and fragmented user experience across the different TNT touchpoints. There was no central place for designers to understand how they should create new components and apply consistently the TNT brand and existing interaction patterns. The developers also had to create their own style guide and component library. That created inefficiencies and led to increasing fragmentation and inconsistency. To address these gaps, we built a team responsible for the TNT Unified Guidelines – an online platform with visual guidelines, style principles, components and interaction patterns to be used by all designers and (frontend) developers in the company.

Mapping the fragmentation and downscaling

The first step was create an inventory of the differences across the TNT digital touchpoints (dotCOM, myTNT, Track&Trace, mobile), and assess channel-specific situations and needs. This inventory helped define situations in which the differences among touchpoints should be kept, as well as determine instances that had to be aligned in a way to remove unnecessary differences.

In terms of visual design, there were 85 different colors being used. Even the application of the main brand color was often slightly different than the one defined in the brand guidelines. There were 62 different font sizes, and 41 different button styles. By capturing design and interaction patterns, we could downscale these elements to a color palette of 17 colors and a selection of nine font sizes to create intentional flows, user focus and progressive emphasis. We also could narrow down the 41 different button styles to six, thus simplifying and standardizing the user experience.

Creating an unified TNT Design System

In order to break down the brand guidelines into its basic components and work up towards a unified language, we relied on the Atomic Design Methodology (by Brad Frost). This methodology helped us compare and simplify design elements and bring back consistency.

After redefining the brand values and visual components, I create a Solid UI kit (Sketch file) with building blocks. This kit could be used as a Sketch Library, from which designers could select symbols and create new designs using the same components and interaction patterns, resulting in a unified and easily accessible language.

In collaboration with a frontend developer, we created an online platform for designers and developers, documenting these components and interaction patterns, and providing developers with code snippets in order to bring more efficiency in their workflow, and guarantee consistency.

Overview

The UPC app was designed to allow UPC users to manage their subscriptions, keep track of their data usage and add extra bundles, download and pay bills, and manage notifications.

Navigation

We created and tested two different options for navigation – one using a native tabbar component, and the second using an in-app contextual navigation.

Messages and notifications

Reaching out to the users and keeping them updated on their bills, orders and payments was one of the most important functionalities of the app. For this reason, the interaction design of this feature had to be explained and visualised thoroughly for both stakeholders and developers.

Overview

The mobile team consisted of a Product Owner, Scrum Master, UX designer, UI designer (me!), iOS and Android developers and tester, guided by an Agile development approach: continuous fast development, validated by users and stakeholders, allowing us to dynamically adjust to customer demands in delivering features.

The first release of the app included only basic functionalities, such as Track&Trace and an FAQ section, initially to a limited group of users in four countries. This allowed us to start learning from our customers immediately and at an early stage, gathering feedback and tracking usage and KPI’s from the very beginning. This first release was available to iOS and Android mobile phones. The next releases continuously added new functionalities – such as Get a Quote – as well as new device options, such as iOS and Android tablets and Apple WatchOS and Android Wear support, rolling out in 33 different languages (including right-to-left).

One of the challenges we faced in this project was the fact that the shipment numbers were not unique, which represented an issue in our vision on creating an easy-to-use app. A provisory solution would consist on displaying a list of results, on which the user would have to find his shipment quick and easily. This list would have to consist of compact rows, displaying only information users need to recognise their shipments. Therefore, a set of options was created in order to validate which information was relevant for each persona in order to recognise the shipment, once this elements would define the visual hierarchy of the design of this row.

Below a few design variations for shipment rows used to validate which information was necessary to quickly identify a shipment.

Overview

Sjaak is an application that helps groups of friends splitting and settling bills  in a fun and easy manner. This helps users who regularly make expenses in a group where someone pays the bill upfront, and then splits the bill calculating who pays what, and follows up on who has already paid and who still has to pay. The idea behind the app is that it is better if “Sjaak” is chasing the money, sending reminders to your friends after 3 days the amount owed has not been paid, instead of you having to do it yourself.

My role

I was responsible for the user experience for the iOS and Android phones e tablets applications, creating interaction proposals, wireframes and prototypes to be used in user testing, validating results and adjusting designs. Working together with stakeholders and developers following a scrum method, I was also responsible for the visual interface design, creating the visual style and designing all screens and components for the whole application. This also included creating interaction and visual interface documents and deliverables to discuss the interaction with the stakeholders and provide the assets needed to build the app.

Overview

VGZ Mindfulness coach app is an initiative of VGZ for people who wants to have more control over their lives, increase self-awareness and live more here and now. It’s a free application, that contains exercises that teach you how to relax and meditate. Platforms: iOS and Android phones and tablets.

Duration

This project took place between June 2013 and January 2014.

THE INTERACTION DESIGN

In order to define the overall structure of the experience, I started sketching and storyboarding on paper, visualizing ideas about the arrangement of UI, functional and data elements, and interactive behaviours. After that, I create wireframes to quickly test different options of information architecture and layout without the distraction of visual design and illustrate existing steps required to complete a user action.

NAVIGATION
The use of drawers for the navigation became very popular in this time with Facebook adopting it in it’s app. On my first sketches, I choose to create one button on the main screen through which the user could navigate to other sections, keeping the interface clean and the navigation intuitive in case the user is listening to an exercise and practicing a meditation exercise. However, it was one of the requirements of the client that sections such as about the app, share the app and give feedback shouldn’t be hidden under one “more” section, but visible in a drawer as in Facebook. 

Prototype_v1
Tapping the main screen shows the track name, audio and volume controllers. After 5 seconds they slide back. Tapping the hamburger button opens the drawer, though which the user can navigate to the other sections of the app. The heart button on the top right opens the favourite list.

Prototype_v2
The track name, audio and volume controllers are always visible in the main screen. Tapping the hamburger button animates the icons though which the user can navigate to the other sections of the app, including the favourite list. Sections such as ‘about this app’ and ‘give feedback’ could be placed under the ‘more’ section.

Overview

The application helps monitoring and managing a Victron Energy system, allowing the user to see all his sites in a list. Platforms: iOS and Android phones and tablets.

Duration

This project took place between Februari and March 2014.

Overview

‘Follow the Money’ (aka Money Tour) is an audio tour that guides you through the financial history of Amsterdam. The tour bridges a period of 400 years, from the Golden Age up until today. Mercurius, the Roman God of commerce, guides you to spots in Amsterdam that played a crucial role in history. The audio tour provides background information of historical buildings and spots that are inextricably linked with the financial history of the city. Platforms: iOS and Android phones.

Duration

This project took place between September and October 2013.

Overview

Boodschapp is an application that allows you to compare, quickly and easily, the ingredients and price of products in supermarkets. By simply scanning barcodes, it helps you make the healthiest choice for the lowest price. It is an initiative of Lab1111 and is developed in collaboration with dietitians and nutritionists. Platforms: iOS and Android phones and tablets.

Duration

This project took place between September 2012 and April 2013.

The app

For the release 1.5 of the app (on April 4th, 2013), I was responsible for creating new interface elements to integrate new flows, such as signing in and logging in with an account. I also worked on the new ‘favorite’ feature, and created all the visual components needed to indicate which products are marked as favorite on a list, and for adding and removing a favorite product in a product detail screen.

Download the app

Facebook images

The Facebook page of Boodschapp is a space for announcements and small campaigns. I created some of the images for this page, using elements of the app to instigate the user to download it and make use of it to check what they eat.

Check the Facebook page

The Boodschapp blog

The Boodschapp Blog was created using a WordPress template. I used my modest front-end skills to edit the CSS stylesheet and remove some PHP code to bring the visual identity of Boodchapp to the blog and give it the same look and feel of the app and of the website.

Visit the Boodschapp blog

Overview

Superdirect is an application that aims at helping people to order groceries online and pick them up by simply scanning a QR code in a registered pick-up point.

Duration

This project took place between October 2012 and March 2013.

Overview

During my internship at TomTom, I helped apply the new corporate identity to the website, especially the route planner and support pages.

Duration

The internship program took place between September 2011 and February 2012.

Live Traffic update message

One of the features I helped implement in the new release of the website was the Live Traffic toggle panel, displaying updates about traffic information. As TomTom has an international website, a certain flexibility in relation to word lengths in different languages must be considered in the design, which was one of the challenges of this feature and a lesson on creating safe design solutions.