VERIZON: Mobile Design System (2017)
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.
• 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.
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.
Sample UI Pattern Library
After identifying the key template to start, extracting the visual UI elements to consolidate became easier.
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.