Metro PCS

[ UI ] User Interface
MetroPCS Visual Design
MetroPCS Responsive Website
MetroPCS UI Designs
MetroPCS Mobile UI Design
MetroPCS Visual Design
MetroPCS Responsive Website
MetroPCS UI Designs
MetroPCS Mobile UI Design

Metro PCS

[ UI ] User Interface

CLIENT

Metro PCS

PROJECT

Responsive
E-Commerce
Website

YEAR

15-2016

ROLE

Art Director
Lead UI / Visual Designer

SUPPORT

  • Product Team
  • Creative Director
  • Metro Brand/Marketing Team
  • UX Director
  • x4 Designers

Metro PCS Website

Redesign & Revamp

INTRODUCTION

Kyle Vena embraced the Metro PCS project, aiming to revolutionize the customer shopping journey on MetroPCS.com. The mission was to facilitate effortless checkouts for phones, accessories, plans, and add-on services. Simultaneously, a revamp of the live website was initiated to seamlessly integrate quarterly marketing campaigns, all while overhauling the platform to support e-commerce for ordering phones and accessories.

CLIENT

Metro PCS

PROJECT

Responsive
E-Commerce
Website

YEAR

15-2016

ROLE

Art Director
Lead UI / Visual Designer

SUPPORT

  • Product Team
  • Creative Director
  • Metro Brand/Marketing Team
  • UX Director
  • x4 Designers

Metro PCS Website

Redesign & Revamp

INTRODUCTION

Kyle Vena embraced the Metro PCS project, aiming to revolutionize the customer shopping journey on MetroPCS.com. The mission was to facilitate effortless checkouts for phones, accessories, plans, and add-on services. Simultaneously, a revamp of the live website was initiated to seamlessly integrate quarterly marketing campaigns, all while overhauling the platform to support e-commerce for ordering phones and accessories.

PROBLEM

Metro PCS faced challenges with an outdated website and disjointed customer shopping experiences. The absence of a creative and art director further complicated ongoing redesign plans..

PROBLEM

Metro PCS faced challenges with an outdated website and disjointed customer shopping experiences. The absence of a creative and art director further complicated ongoing redesign plans..

OBJECTIVE

Kyle took on the role of Substitute Director and Lead UI Designer, working collaboratively to streamline the new branding and enhance the overall UI design. The goal was to create a visually appealing, user-friendly interface while supporting ongoing quarterly marketing campaigns.

OBJECTIVE

Kyle took on the role of Substitute Director and Lead UI Designer, working collaboratively to streamline the new branding and enhance the overall UI design. The goal was to create a visually appealing, user-friendly interface while supporting ongoing quarterly marketing campaigns.

Navigating UX/UI Brilliance

A Four-Stage Design Odyssey
Research & Discovery

Streamlined the shopping experience with a human-centered approach in collaboration with the UX team.

Consistent Design

Establishing unified design grids, Kyle covered styles, colors, buttons, and content flow across platforms.

Workshops & Test Designs

The team experimented with design patterns, using annotated books and whiteboards for pixel-perfect outcomes.

Delivery & Seasonal Designs

Finalizing designs into templates ensured streamlined production, maintaining harmony between live and redesigned sites during quarterly campaigns.

Consistent Design

Insuring Consistent Design Across Platforms

Crafting a Seamless Visual Symphony

Establishing a cohesive and consistent design language across various platforms. Witness how he meticulously defined grids, styles, colors, buttons, and content flow to orchestrate a unified visual experience that transcends device boundaries. Explore the harmonious integration of these elements through compelling work examples that showcase the magic of a consistent design narrative.

Exemplifying Optimized Process Examples Below

Consistent Design

Insuring Consistent Design Across Platforms

Crafting a Seamless Visual Symphony

Establishing a cohesive and consistent design language across various platforms. Witness how he meticulously defined grids, styles, colors, buttons, and content flow to orchestrate a unified visual experience that transcends device boundaries. Explore the harmonious integration of these elements through compelling work examples that showcase the magic of a consistent design narrative.

Exemplifying Optimized Process Examples Below

Revolutionizing Shopping Journeys

Collaborating closely with the UX team, Kyle spearheaded impactful client workshops, shaping a human-centered buying and bundling process for MetroPCS.

Optimizing Shopping Experience

Collaborating with the UX team, Kyle revamped menus and tags, streamlining product displays for a more efficient shopping journey.

Versatile White Label Product page

Effortlessly interchangeable template detail pages designed for marketing, specs, swift updates, promotions, and upsells.

Revamped Plan & Product Comparisons

Enhanced mobile plans comparison and product comparison methods to facilitate informed decision-making.

Delivery & Seasonal Designs

Strategic Support for Marketing & Design

Collaborating seamlessly with cross-functional teams, Kyle contributed significantly to the refinement of designs into templates, reducing errors, and optimizing production workflows.

  • Marketing Templates (MKT):Facilitating efficient production, Kyle strategically organized design components, distinguishing between the original live site and redesigned marketing areas for MetroPCS products.
  • Quarterly Campaign Management: In a dynamic role, Kyle adeptly managed new ad campaigns for both Metro’s live site updates and the redesigned MetroPCS throughout each quarter.
  • Team Collaboration Workshops: Active participation in team workshops involved contributions to presentations, toolkits, component libraries, annotated designs, and version management, fostering a collaborative and innovative work environment.

View UI Scenario examples below:

Delivery & Seasonal Designs

Strategic Support for Marketing & Design

Collaborating seamlessly with cross-functional teams, Kyle contributed significantly to the refinement of designs into templates, reducing errors, and optimizing production workflows.

  • Marketing Templates (MKT):Facilitating efficient production, Kyle strategically organized design components, distinguishing between the original live site and redesigned marketing areas for MetroPCS products.
  • Quarterly Campaign Management: In a dynamic role, Kyle adeptly managed new ad campaigns for both Metro’s live site updates and the redesigned MetroPCS throughout each quarter.
  • Team Collaboration Workshops: Active participation in team workshops involved contributions to presentations, toolkits, component libraries, annotated designs, and version management, fostering a collaborative and innovative work environment.

View UI Scenario examples below:

VIBRANT Shopping

The collaborative efforts of the team resulted in vibrant, creative designs that brought MetroPCS.com
to life with a fresh and engaging appeal.

DELIVERED

Elevating Experiences: Redefining MetroPCS Shopping

The small, dedicated team successfully accomplished the goals of the project, including quarterly updates and marketing for the live site. The redesigned MetroPCS site, featuring new features and improved workflows, experienced a successful launch within a year and a half.

DELIVERED

Elevating Experiences: Redefining MetroPCS Shopping

The small, dedicated team successfully accomplished the goals of the project, including quarterly updates and marketing for the live site. The redesigned MetroPCS site, featuring new features and improved workflows, experienced a successful launch within a year and a half.

Readability Boost

Expanded viewable areas for enhanced readability

Faster Shopping

Improved efficiency with enhanced filtering, searching, and comparisons.

Surge in Sales

Optimized buying process, leading to a significant increase in new phone activations.

Elevated Product Visibility

Seasonal ads and custom phone landing pages drove more product engagement.

Reduced Q/A Load

Enhanced customer service and documentation, cutting repeated inquiries in half.

RESULT

Transforming MetroPCS’s website was
more than design; it was a journey of
simplicity meeting sophistication,
creating a seamless shopping
experience.

Delivery of a Scalable Foundation

The enduring success of the project was evident as MetroPCS acquired by T-Mobile shortly after Launch. The scalable foundation laid by the team endured transitions and acquisitions, showcasing the resilience and effectiveness of the design choices.

RESULT

Transforming MetroPCS’s website was
more than design; it was a journey of
simplicity meeting sophistication,
creating a seamless shopping
experience.

Delivery of a Scalable Foundation

The enduring success of the project was evident as MetroPCS acquired by T-Mobile shortly after Launch. The scalable foundation laid by the team endured transitions and acquisitions, showcasing the resilience and effectiveness of the design choices.

Grateful for your unwavering dedication throughout the MetroPCS project—it's been a true roller coaster. Your immense contributions have made a significant impact. Many thanks!

Christian HoyleCreative Director

Even though Q1 isn't over, your phenomenal work on the AOR Side for MetroPCS is already making a significant impact. Thank you for your dedication!

Bonnie SnipesProduct Owner

Your unique perspective always challenges me to strive for excellence. Thank you for pushing me to do better and for all your hard work!

Gorden ClinesLead UX Designer