FAST Telefonica UX Revamp Design Challenge

Welcome to the “FAST Telefonica UX Revamp Design Challenge”! The scope of this challenge is to revamp the information architecture and navigation for our customer’s sites so their products can be found and sold more easily.

Our client is a leading telecommunication company in Germany, named Telefonica Deutschland, and its iconic premium brand is O2, a leading high-street and online brand providing mobile, TV and broadband services. Telefonica Germany also has value and related brands acquired over the years, such as Blau, Fonic, Netzclub and Ortel Mobile brand (Ortel Mobile is used to service customers from Turkey).

In case you see any issues with formatting of the specifications, you can check them here as well on a google doc:
https://docs.google.com/document/d/1M1EAN24zBUkrQxJn96Xu8fnLBgsOkqmYazKdPo5ktEo/edit?usp=sharing

Round 1

Submit your initial designs for O2 and Blau brands for checkpoint review.
1. Homepage
2. Rates
3. Shop/ Cell Phones (optional for this round, if you have time)

Round 2

Submit your final designs for O2 and Blau brands plus checkpoint feedback implemented.
1. Homepage
2. Rates
3. Shop/ Cell Phones
4. Phone Details
 

Web Application

• This is a concept challenge focused on updating the UX
• To improve the site information architecture and navigation of leading site and related brands
• To explore ideas around different layouts to help the customer to find the right products and make the decision to buy faster online without contacting sales advisor
• As deliverables, we would like to see how the O2 and Blau brands standardised user experience will look like, while keeping the brands personality and visual interactions as well

 

Application Overview

• The purpose of this challenge is to re-plan the information architecture so the customers can find the information they are looking for easy and buy it
• It’s important that the products information is streamlined
• Our customer has several related brands and we’d like to see how we can standardise and apply the information architecture and navigation across the different sites, while keeping the personality/ style of each brand and their respective product and service offerings as they are now.

 

Audience

• Users visiting the Telefonica’s premium site, O2 and related ones (Blau, Fonic, Netzclub and Ortel Mobile) who is interesting in buying their products

 

Persona

• Name: Maria
  • Occupation: any (can be any person who is interested in telecommunication products and services)
• Goals:
  • Find the products he is interested in from Telefonica’s brands
  • Have a consistent user experience across the different sites
  • Easily purchase a new product by placing an order online without having to contact a sales advisor
• Frustrations:
  • The sites O2, Blau and Fonic have different navigations and information architecture is not consistent so he is having issues to quickly adjusting to new layouts to find the product
• Wants:
  • A consistent user experience across all sites from finding a product, to getting more information about it and placing an order for that product

Note

We are only focusing in this challenge on the O2 and Blau websites, but the new standardized look and feel will apply to the other sites as well (Fonic and Netzclub).

 

User Story

Maria is looking to buy a new iPhone with a data plan. He heard that Telefonica brands offer the best products and he is visiting their main site O2, however the homepage contains lots of items and it is difficult for him to find what product he wishes to and buy it. He then goes to another site such as Blau, but the user experience is different and is confusing him.

She would like to be able to go to any of these sites and find the product he wishes quickly and place the order, all while having a consistent user experience, without needing to call a sales agent. (this is what we are focusing on this challenge)

 

Design Goals & Principles

• Standardise the information architecture/navigation and customer journeys of the different brands
• Keep the style of each of the sites as they now
• Content hierarchy - think about the priority of information. What are the most important things for the user?

 

Exploration Score

In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 7
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 8
  • 1: low-fidelity design, wireframe or plain sketch
  • 10: top-notch finished looking visual design
• Exploration: 9
  • 1: strictly follow an existing reference or production guideline
  • 10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 5
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

 

Glossary

The terms in this challenge might not be an issue, however accessing the websites and understanding what they are about could be, due to the fact that they are german sites.

• Telefonica: german | english version
• O2: german | english version
• Blau: german | english version
• Fonic: german | english* version
• Netzclub: german | english version
• Ortel Mobile: german | english version

You can notice that we used Google Translate for showing the english content for this site (*option that wasn’t working for Fonic site). A better alternative for this is to use Chrome as in this short video. Let us know in the forums if you have issues with accessing the sites in english.

 

Background

Each of the Telefonica brands also has respective mobile apps, for example: MeinO2 whichs help customers view/pay bills, top up their SIM cards and get exclusive offers from O2’s Priority brand. Germany is a highly competitive market with brands such as Vodafone, Deutsche Telekom providing 4G, 5G, broadbands/fibre and TV services. As such, what can Telefonica Deutschland do to acquire, engage and retain customers using its digital channels?

We are looking at ways to improve the digital brands and the overall experience. Bottom line: how to make the online brands work better/harder to help customers choose the right products and services and then to make it super easy to buy online instead of contacting O2 and Blau sales advisors?

We are also looking at ways to understand how common information architectures, navigation and customer journeys can be deployed across the O2, Blau and Fonic brands, whilst allowing the personality of each brand and respective products in the pre-paid (no contracts) and post-paid (12, 24 and 36 month contracts) markets. If we could reimagine the customer experience, what would be required for O2 and Blau, whilst allowing the brand personalities to remain? Why would your reimagined experiences boost sales for Telefonica?

If you could standardise the information architecture/navigation of the different brands, what would you suggest, again ensuring the brands still express their personalities and their respective product and service offerings.

Is there anything differentiating from Vodafone or Deutsche Telekom that is missing from O2, Blau, Fonic and other Telefonica brands including Netzclub.de and Ortel Mobile? Do your research on how the competition is standing up.

 

Screens Requirements

The navigation and new planning of the information architecture and customer journeys are up to you. Here are our recommendations for the pages to show the user flow, but feel free to come up with better suggestions for the customer.
For this challenge, we would like to see how the O2 and Blau brands standardised user experience will look like, while keeping the brands personality and visual interactions as well. Focus to show the pages below for for both these sites.
 

1.Homepage

This is the landing page the user comes to initially.

• Think about how the navigation will look here?
• How will the page be structured so that we can apply this layout toboth sites (O2 and Blau)?
• Think about hierarchy of information when designing this page

 

2.Rates

This page will show different rates the brands are offering.

• They usually have some predefined plans that are displaying here: example: O2 versus Blau
• A FAQ/ info section to help guide the user
• Any discounts a logged in user might have
• Anything else?

 

3.Shop / Cell Phones

This page is where the products are listed and the user can quickly search and filter them

• It will include a list of products (phones) to sell as seen on O2 versus Blau
• Each product will have some particular details about them to display (you can check the above sites and decide which ones are the most important ones to show)

 

4.Phone Details

Here the user can see more details about each phone such as:

• Cost
• Availability
• More photos
• Description
• Features (camera, display, storage, etc.)
• Colors  
• Plans options
• What other details should we show here? (up to you!)

The user has the option to add the product to the cart or go to check another product.
Here’s how this page looks in the different sites: O2 versus Blau (For Blau, you have to check the shop page, and click the link "+ All details about the offer" to see the details of a particular product)

 

Branding Guidelines

• Each of the site should keep its offerings and brandings

 

Size

• Desktop: width: 1200 px x height as much as needed

 

Stock Photos and Images

• Photos can be taken from the customer’ websites. We also allow photos to be used as per Topcoder’s Policy.
• Icons: can be taken from the customer’s websites. We also allow icons to be used as per Topcoder’s Policy.

 

Marvel Prototype

• Upload your screens to Marvel App.
• Send your marvel app request to keyla. blue1@gmail.com or ask in the forums
• Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.

 

Final Deliverables

• All original source files created in Adobe Photoshop, XD, Indesign, Figma or Sketch. Remember to keep your design black and white/ gray as this is a wireframe challenge.
• All your submission files
• Your declaration files to include any notes about fonts usage, photo and icon declaration and link to your marvel project