Project

Metro PCS

[ UI ] User Interface
Take a journey with me
Client
Metro PCS
Project

Website

Year

2015-2016

Role
Art Director/Lead UI
Supported
  • Product Team
  • Creative Director
  • Metro Brand/Marketing Team
  • UX Director
  • Designers

Metro PCS

Redesign & Revamp

Overview

The main goal of this initiative was to improve the customer shopping experience on MetroPCS.com. Customers should have the ability to checkout on MetroPCS.com with a phone, accessories, plan, and add-on services as a part of the bundle while requiring payment for hard goods only. The other aspect of this project was to give the live current website a facelift to the home page, mega menus, and ad space for ongoing marketing campaigns for each quarter. Both the live and redesign sites running simultaneously while doing this overhaul and quarterly campaigns.

ORDINARY TO EXTRAORDINARY

Managing UI Revolution

Kyle came into this project when they didn’t have a creative director, nor an art director, and in process of building a second team to fulfill the plans in this redesign. Kyle had to jump in and hit the ground running in fulfilling these gaps while jumping in and supporting teams.

Worked closely with the UX team and other designers within the UI team in helping direct and help the fulfillment of streamlining the new branding and look in feel of MetroPCS user interface design and helping to fulfill ongoing quarterly campaigns.

All pages had been condensed, better hierarchy/priorities on pages, while simplifying the overall look in feel of each page.  We focused on their products while adding white label sections for their supplier/manufacture pages, cross ad campaigns to mobile plans, bundle plans, phone comparisons, and ordering/fulfillment of ordering phones off their current website within this redesign.

User Interface Delivery
  • Substitute Director
  • Art Director & Lead UI Designer
  • Research & Discovery – Design/Platforms
  • Consistent Design Across Platforms
  • Experimental & Testing designs
  • Design Strategy
  • Style Guides Web/Tablet/Mobile Templates
  • UX/UI Merged Practices, Content, Features
  • Hi-Fidelity Mocks and Flows

Pixel Perfect

Guides, Styles, & Branding

Worked with a small team of designers in collaboration by breaking down patterns and styles in annotated books. Kyle helped direct these guides & styles while setting up templates, test designs, to final output.  Below are examples of breaking these down on whiteboards for the team and annotated tests across major pages to our final result.

Establishing Grids

Grids for mobile, tablet, and desktop

Styles

Color, patterns, buttons, H tags, sizing, padding, & content flow.

Iconography

Establishing all new icons and patterns.

Brand & Web Style Guide Standards

Created a few web guides lines and branding guidelines for the internal & external teams for MetroPCS.

Highlighted areas of

Shopping Experiences

Kyle worked closely with the UX team and client workshops, creating an impact,  human centered buying
and bundling process off MetroPCS. The results, check out below.

Minimise &

Consolodate

Worked with UX Team on redesigning the shopping experience. Reorganized and consolidated menus, tags along with the display of products.

White Label

Product Details

Easy swappable template detail product pages were created for marketing, specs, updated quickly, promos, and upsells.

Plan &

Product Comparisons

Redesigned mobile plans comparison and ways to compare products in helping better make decisions.

Supported Marketing

& Design Teams

Streamline Design

Kyle helped by finalizing designs into templates for teams to work off of. Minimized error and streamlined production times.

MKT Templates

Helped with production flow by separating design components throughout the original live site vs the redesigned marketing areas for Metros products for production.

Quarterly Campaigns

Kyle juggled new ad campaigns for Metros live updated site and for the redesigned Metro pcs throughout each quarter.

Team Workshops

Contributed to presentations, tool kits, component libraries, annotated designs, and versions for feedback and discussions as a team.

A VIBRANT WORK CULTURE THAT

Flowed with Creativity
Project Outcome

WE SMASHED IT

As a small guru team of individuals playing their part with this project, we accomplished all of our goals along with quarterly updates and marketing for the current live site.

Simultaneously redesigning of MetroPCS, ad campaigns, production workflows, to all new features was a huge improvement and a successful launch within a 1 year and a half.

Shortly after launched the Metro PCS site T-Mobile acquired them…

Scaleable Foundation

You can compare how our team’s work held up over the years through transitions and buyouts of Metro PCS to TMobile owned. I personally found it great to see how our product pages and comparisons of phones had help up.

Visit Live Site
Team's Recognitions of Kyle

28

Recognition's Received

27,050

Points received from team members

9

Raving reviews

15

Driven

25

Versatile

10

Innovative

Don't take it from me,

Here's what team members had to say...

”Thanks for all the hard work on this roller coaster of a project MetroPCS, as you've been a huge help, many thanks!

Christian HoyleCreative Director

”Q1 isnt over yet, but all the work that you've put into AOR Side on Metro Pcs has been phenomenal! Thanks for the hard work!

Bonnie SnipesProduct Owner

”You always see things in ways that force me to do better! Thanks for that and all your hard work!

Gorden ClinesLead UX Designer