Design Challenge

KLM & Paypal

Redesign Sprint

As a design challenge for Bunq, I was given 2 weeks to redesign and create mockups for the intro screens to KLM's mobile app. and primary home screen (cross-platform) for Paypal.

Mobile/Web Design UX/UI Prototyping Research

Specs

IN A NUTSHELL

Context

Design sprint exercise for Bunq | Summer 2016

Creative(s)

Victoria Flores

Process

Concept Dev. > Company Branding Research > User Research (app. store reviews) > Design Research > Mockups & Iteration

Tools

Illustrator, Photoshop, Google Material Design Guide & Apple App Store Reviews

Approach

With only 1 week to redesign such high-traffic apps I spent a bulk of the time researching the products' performance and user experience and identifying UX/UI hiccups and possible solutions to target in their improvement; connecting the product and brand purpose more closely with endeavored impact performance.

Contribution

I created all visual assets for mockups following relevant company identity guidelines and in some cases expanding the brand langauge.

Deliverable(s)

KLM: 3 screens in succession for mobile app; PayPal, homepage cross-platform (Android, iPhone, and Desktop)

Intro Screen Pipeline

At a Glance

Birds-Eye

KLM: Overview

Design Foundation

I chose to do the first three screens for KLM (since I do fly KLM). I felt in general that the design was a little withdrawn for a brand that pronounces 'user friendliness' as one of its guiding principles. For this redesign I focused on giving the UI more breathing space, omitting unnecessary words, and creating a more intuitive visual and structural hierarchy that matches the general user’s model of the flying process at the airport.

Approach

From my brand research into KLM’s vision, I found they were/are struggling with staying traditional and professional while updating. I sought to first, align their UI with brand values and pivot the app's UX towards a user's in-airport experience. I added an abstract geometric cloud theme to the app. using circles (to match their crown logo design), with a white gradient. Though clouds might normally be considered cliché, here it feels subtle and feminine (as KLM indicated they desire), calming for first-time flyers, and youthful in the sense that they do not take themselves too seriously as to use clouds.

Goal(s)

Energize KLM UI while maintaining a hint of its traditional aesthetic.

Branding should maintain KLM style of class, allure and confidence.

App. Needs (according to users and KLM)

To be: Open, pragmatic, progressive, lively, fresh & maintain a feminine touch.

Look & Feel

Clean, Punctual, Hospitable, Friendly, Capable, Modern, Feminine, Dutch

Special Sauce

I added 3 colors to the KLM palette to help distinguish important content within the UI. KLM had an April Fools’ Joke in 2016 about adding 'orange' to their palette, which the public loved to which they replied “just kidding!” I found that Rietveld had actually been consulted to design the interior of the planes but that his work was never implemented. I decided to add Rietveld’s colors back to the UI to use as secondary and highlight tones; they are the blue-green, yellow-orange, and green (hardly used). The blue is in the cloud gradient, which actually has the current KLM blue hue within its gradient! I also kept their Danish type NoaLT for headlines and used Roboto for all other informative text.

Details and Comparison

Launch Screen

Behind the Design

I focused on expressing brand and clarifying actions for the user: to check in, log in for changes, and create an account.

I added ‘Check-in’ for the in-transit user who, while at the airport, is tired, rushed, and needs to find their itinerary quickly.

I removed the duplicate logo atop to better follow Material design (Google recommends not having company branding within the app). I also felt the homescreen was a great chance to shine in terms of look and feel, for this reason I brought their one-liner forward, added a cloud background theme, created a symbol for 'booking' (airplane with a '+'), and surfaced actions from indirect links (such as flight browsing).

Look & Feel

Calm, Collected, Quick-linking

Interaction

Introduces brand and maintains visual cues to log in screen.

Details and Comparison

Log in Screen

Behind the Design

For the log in screen, again I maximised the directive quote atop. Made it clear that the user needs to have a 'Flying Blue' account or PIN in order to log in while making it more apparent for them to create such an account as well.

I wanted this screen to be a little more colorful so I adopted the social log in trend from other applications that were popular at the time to bring out the quick access buttons.

This screen features a new top bar following material design guidelines and 'active' yellow fromt the expanded Rietveld brand hues.

Look & Feel

Minimal & Intuitive

Interaction

Introduces brand and maintains visual cues from launch screen.

Details and Comparison

Booking Screen

Behind the Design

The 'booking' screen is my dream version of a more informative but minimal itinerary view. Their old screen is a bit confusing in the sense that it shows round-trips as if they are one ticket, which creates confusion if you have already taken the first flight. At a minimum, it should have ‘to’ and ‘from’ and flight times readily visible.

Clicking on this screen can serve as a drill-down to more information about detailed times and transfers, since we look up dates and time often but not so much transfer time etc. I kept their theme of ‘destination city picture in the background’ here, since it makes it more exciting for the traveler to see where they are going.

Look & Feel

Detailed, Actionable, Uncluttered

Optimization

Surfaces important information, in particular the booking code and visually communicates the trip with the added details of check-in time and flight status.

Cross-Platform

At a Glance

Birds-Eye

PayPal: Overview

Design Foundation

In general, I chose to approach PayPal with a faithful vision of their user base. From my network, most use PayPal because they need to transfer large sums of money, usually a few times in their life, or rarely on sites like eBay. A large amount of their users are older professionals and attached to the tradition of PayPal, but also entrepreneurs/venture capitalists/business owners. I felt the target audience was accustumed to the dark gender-neutral blues of PayPal with its old-school financial aesthetic.

Approach

For this reason, my redesign is conservative in making large scale aesthetic shifts. However, I did try to add some youthful connotation by slanting the Material of the top sections in the app designs to add some flair to the layout; in addition, this connotes our mental model of a wallet. I also took out the gradients since those they fall outside Material design..

Goal(s)

Maintain professional decorum, brighten the colors to be less neutral, and create an air of excitement for engaging in a more social and positive p2p platform.

Introduce: Budget/Goal Setting, summary of financial health, and on-the-go ease.

App. Needs (according to users and PayPal)

P2P Transactions, Payment Activity (pending vs. completed), recent contacts, and Friends/Family requests.

Look & Feel

Endeavoring, Elegant, Contemporary

Details and Comparison

Desktop: On-boarding

Behind the Design

I had a PayPal account that never linked properly from years ago, so I chose to focus on user retention in the on-boarding phase. Here, I sought to make the info gathering process more approachable by adding personalization to direction, reinforcing brand values (tagline), maximising the rewarding feeling of completing a step and reducing visually heaviness (softer hues/simpler symbols).

I also chose to hint in the desktop version at what PayPal can do for the user aside from the task they originally came to the site for-- I added a “quick send/request” feature toolbar. Overall I addressed two user personas, the businessman and the social tech-y. I built in the budget finance function since PayPal says they want to eventually do this, but also made it easier to send/receive money for the user in a hurry from one social event to another.

Look & Feel

Youthful, Transparent, Quick-linking

Details and Comparison

Android & iPhone

Behind the Design

I tweaked their light and dark blues, added yellow for ‘pending’, green for ‘positive/gain’, and magenta for ‘spent’ (magenta because red is perceived as more negative). I clumped the send/request transaction into one task (the action button) since a transaction in code and in life is the same thing whether it is leaving or coming; I hope this analogy helps create a more positive mental model for the user about how their money flows. I also created new icons/symbols for the toolbar as well as one for the action button (fused card/dollar symbol).

Look & Feel

Informative & Intuitive

Inspiration

Abstract wallet design that immediately surfaces acciontable information with an organized information hierarchy.

Wrap-up

Remarks

TBD