VERIZON: Mobile Design System (2017)

Overview

The My Verizon app has met the needs of 110 million subscribers for the Verizon—the America's largest wireless provider. As the company revamped their brand identity in 2016, the Verizon Wireless mobile app needed to follow the path by refreshing the visual language.

I was a lead UX designer of the team who developed the design strategy for the migration and executed the new branded design while keeping the functionalities. 

Results

• Successfully completed redesigning of 5,500+ screens collaborating with Verizon’s engineering team
• The new My Verizon App has the average rating of 4.6 out of 5.0, based on 733.300 ratings (as of May 2018).
• It is also ranked #5 in the utilities category on the Apple App Store. 

The asks & Challenges

In fall 2015, Verizon released the new logo designed by Michael Bierut. It was naturally the next movement for the business to update the existing digital platforms accordingly to provide the synchronous experience. AKQA was tasked to be in charge of updating the mobile app experience.

But here was the tricky part: the existing app was designed with the minimum set of the UI kit at start. As the product grew, the inconsistency in UI components and page layout followed. The brand refresh was not only to facelift the experience to match the brand, but also was an opportunity to pay the design debt on inconsistency.

 The initial brand guidelines (above) given to my team was heavily focused on Desktop experience.

The initial brand guidelines (above) given to my team was heavily focused on Desktop experience.

Process

Sun Tzu (孫子,  6th century Chinese general who is well known with his book <The Art of War>) once said, "If you know your enemies and know yourself, you will not be imperiled in a hundred battles".  To tackle the assignment, I really need to know who is my "enemies"... or my tasks. It was an audit of 5,000+ page app screens to identify the current UI patterns.

 This is a few example of the old Verizon app screens (0.008% of the total screen numbers, specifically). Can you notice it uses more vibrant colors and illustrations?

This is a few example of the old Verizon app screens (0.008% of the total screen numbers, specifically). Can you notice it uses more vibrant colors and illustrations?

After the vigorous week, I was able to identify that there are 43 key screen-level patterns to cover. To build the robust design system that is easily scalable, the team decided to use the Brad Frost's Atomic Design, which the clients were quite familiar with.

 It all started with whiteboarding, as always.

It all started with whiteboarding, as always.

 The fundamental concept of Atomic Design was borrowed from the original, but here you can see the example with the new Verizon app experience.

The fundamental concept of Atomic Design was borrowed from the original, but here you can see the example with the new Verizon app experience.

 

Sample UI Pattern Library

After identifying the key template to start, extracting the visual UI elements to consolidate became easier.

 Here are the core UI components of the new mobile app. Verizon Up (second to right) had its own visual identity keep apart from the main experience, and grouped separately.

Here are the core UI components of the new mobile app. Verizon Up (second to right) had its own visual identity keep apart from the main experience, and grouped separately.

Sample templates

Since the new styleguide was to be used by all mobile engineering team at Verizon, it was important to prevent the potential guessing game on how to assemble the components correctly. Alongside with the documentation, the core template were given to the engineers as an example so they have a starting point instead of reading through the component library until they find the one to use.



Take a look on the new Verizon App introduction here at the website, App Store or Play Store.

 New Verizon App on Apple’s App Store

New Verizon App on Apple’s App Store

 New Verizon App on Google Play website

New Verizon App on Google Play website


Credit

Agency: AKQA
Client: Verizon
Senior UX designer: Hiye Shin
UX Designers: Bryan Farrell, Mor Weizman
Associate UX director: Brad Donnelley