My Verizon Brand Refresh
Opportunity
When Verizon updated the look and the feel of their branding, we were faced with the task of creating a modular to simplify the conversion of 5000 existing My Verizon App screens from the old branding to the new.
We decided to create a system inspired by Brad Frost's book Atomic Design.
The internal teams at Verizon, including design, UX and IT, continue to use this system to create new screens in a unified and streamlined way of working.
Tasks
– System design research
– IT + stakeholder collaboration
– Audit all existing screens
– Create a Sketch file with elements, modules and template variations
Explanation of Brad Frost's atomic design process
Elements are broken down into their smallest forms and are pieced together to create a final page.
Atoms are elements that can't be broken down any further in the design system. For example. labels, input fields and buttons.
Putting together these atoms creates a functional molecule.
Combining molecules creates a template.
Adding content creates a final page.
Mapping exercises to convert old designs to new designs
The new designs are seen on the left, mapping each content piece to the original screen on the right.
Organizing the modules
Once we mapped each necessary module and component, we translated them to the new brand guidelines, and created a Sketch file to organize each unique variant.
Our audit was incredible comprehensive, noting every variation possible. We continued this exercise for all sections of the app, and then organized the file.
Our file was organized in four sections:
1. Elements
The building blocks of any module, such as CTAs and icons.
Example of Elements
2. List Modules
Any module that was typically stacked, such as lists, text blocks, toggles or a radio buttons.
Broken out into two sections (2a) Ubiquitous (2b) Section specific. This allowed us to organize modules that could occur anywhere within the app (ubiquitous) vs modules that can only be found in specific sections.
Example of List Modules
3. Header Modules
Any module that was found only at the top of a page, such as unique data hub modules or header text.
Also broken out into (3a) Ubiquitous (3b) Section specific.
Example of Header Modules
4. Modules
Any modules that make up the rest of the app.
Also broken out into (4a) Ubiquitous (4b) Section specific.
Example of Modules
Below, you can see an example of what the modules section looked like at a high level.
Result
- Streamlined ways of working for developers and designers
- Consistency across designs
- Provide a shared vocabulary that each member of the team can use to refer to the designs and the process
- Create a system to create speedier designs for the future, and make sure any future redesigns will be controlled and simple to implement
Team
UX Mor Weizman | Design 1 Jennifer Son | Design 2 Eric Ku | Design 3 Riley Werner
Project Manager Amir Aziz | Design Director Craig Wong | UX Director Brad Donnelley
25+ Stakeholders