The Back Story
Wieden + Kennedy (W+K) is the largest independent advertising agency on the planet. Best known for producing work like Nike’s “Just Do It” as well as the Old Spice campaign, “Smell like a man”, W+K has established itself as a global leader in the world of advertising.
In 2012, American Express put its digital business up for review and awarded W+K the agency-of-record contract. After our recent success with the launch of Flud and our expertise and understanding of digital innovation and design, W+K reached out and asked us to collaborate with them on their efforts to change the way American Express approaches digital.
As part of their overarching brand and digital strategy, W+K proposed rethinking AMEX’s digital business by redeveloping the OPEN App in an effort to make it the always-on, active connection that small business owners rely on to improve their business.
This is where we came into play, our challenge was to help them rethink and redesign the visual language and user interface of the American Express Open App that would be used as a standard across all devices and operating systems.
Collaborating with W+K
We weren’t the client facing agency on this project, so we adapted our process and workflow to align with the internal structure at W+K. Through our collaboration process, we wanted it to feel like we were working internally as an extension of their team.
Our vision is for the Mercury Mobile App to become the most powerful time-saving weapon in a small business owner’s arsenal. A simple, but verging-on-addictive tool to minimize the mundane, unearth unexpected insights and empower employees from anywhere.
The project had a very tight timeline so we dedicated a digital team consisting of a creative director, two designers and a project manager to the effort. As we do with most projects, we worked in agile sprints focused on specific tasks from week to week.
To ensure we were aligned throughout the process, we would meet three times a week for design reviews with the product owners as well as the Creative Director at W+K. We managed things the old-school way... email, lots of phone calls and video conferencing.
Design Strategy & Concepts
Once we established the relationship we immediately began immersing ourselves in the vision W+K had for American Express. They provided us with various strategic documents, early wireframes as well as existing design standards for us to evolve as we approached our redesign of the visual language.
Because we were working in tandem on visual design while the UX strategy team at W+K was working on the apps information architecture and wireframes, we were able to provide feedback regarding their strategic approach and how we felt some features could be improved.
Our early concepts from a UI design perspective were focused on expressing the brand in a clean and more simplistic manner. We focused on the dashboard, login-screen and activity screens to ensure our approaches were flexible enough to accommodate varying content types.
Establishing a Finalized Design Strategy
As we went through various sprints and reviews with W+K and American Express, we started to establish some key design principles that would later define our final design direction. The principles helped us stay true to our objectives and ensured our design solutions were consistent.
THE PRINCIPLES WE ESTABLISHED INCLUDED
- Make it legible... AMEX users are on the go, make it easy to read so they can quickly read the information that is relevant to them.
- Make it inviting... Working within (or near) the AMEX color palette, err on the side of more contrast and warmer hues.
- Make it simple... Business owners want simplicity and efficiency. The app must reflect this through clear features, contextual information and easy navigation.
We learned a lot during our early concepts, and realized that if we want the app to be active, the design language should be as well. With this in-mind, implemented a bit of flexibility around a warmer color palette, while still maintaining the white, grey and blue base of the brand.
We also came to the realization that although our designs looked great, we felt we could improve our typographic hierarchy to assist the user in differentiating content while reviewing information. To solve for this, we leveraged larger headlines which provided us more flexibility and legibility within our design language.
The biggest transformation from our early design concepts to our final design direction was around our approach to device specific design. Our initial concepts were heavily influenced by IOS (Apple’s mobile operating system) and didn’t feel device agnostic. So, we adapted our designs to a more natural and less themed stage, making them fit both Apple and Android devices.
Wireframes Influence Visual Design
As we approached establishing our final design directions, we heavily relied on wireframes to inform our UX and design decisions.
Improved Legibility & Feature Clarity
Our initial comps (shown on the left) looked great but lacked the typographical hierarchy a mobile user desires. The final design explored larger fonts making the entire app easier to scan and clearer to digest information.
Device Agnostic Design
Because we were designing a standard for American Express to launch across all devices and platforms, we opted for a design solution that was neutral and would work great across iOS and Android.