Telecom website user experience redesign case study: Cosmote.ro

Redesigning Cosmote.ro

  • Business
  • Design
  • Technology

You think you know a story, but you only know how it ends. To get to the heart of the story, you have to go back to the beginning. (King Henry VIII, The Tudors TV Series)

The Tudors Intro
Image taken from http://www.bbcamerica.com/the-tudors/

Now that the telekom.ro website is up and running, the mobile account app is in the store and things are running smoothly, we can finally take the time and tell you quite a story. A happy-ending digital story about following a clear development process, hard work and collaboration behind this adventurous project.

Change starts when someone sees the next step. Willian Dryton

Let’s go a little bit back in time, November 2012 to be more specific, when Cosmote decided to make a radical change in the way it approached the online services.

 

Old Cosmote
The 2012 version of the Cosmote website.

 

We all wanted that Cosmote.ro website better reflect the brand values and provide users the information they needed.

Great things come to those who care

But, first let’s make some introductions and meet the main characters of our story.

  • The eBusiness Department AKA the driving force of the project, the most demanding people we’ve ever team up with;
  • IT Department, the magic worker who stood by us even when adding more developments than ever anticipated;
  • The Platform Integrator, the army that implemented ATG e-commerce platform and customized it so that it would support all our workflows and crazy ideas (such as the Slot Machine);
  • The lieutenants, these were all the people in various departments – from Customer Care to Product Marketing, Communication, Sales, Public Relations, Human Resources etc, who put a lot of hours in reviewing and testing the flows, providing, writing or correcting content;
  • The Research Agency, who spent weeks in testing the several user journeys and analyzing the results;
  • The Payment Integrator, who made possible online payments on the website;
  • Us, a bunch of passionate people, geeks, mastering all kinds of digital disciplines, from business strategy, information architecture, user experience, content strategy, online copywriting, system architecture, front-end and back-end development, SEO
  • 4421 reported hours on Agency side, not to mention the ones left out and at least as much on Client-side team;
  • 423 wireframes;
  • Around 50 main user journeys and many more secondary;
  • Around 370 html files in total;
  • An almost 900 pages Functional Design Document reviewed by tens of people;
  • Tens of internal procedures defined and put in place on the Client side.

 

You wouldn’t have the big picture if would leave out some details such as:

  • At some point we’ve worked on 5 time zones in 6 cities, and it turned out to be very helpful although at first many concerns were raised;
  • The sweetest baby boy was born, but not even that kept the new dad from working while the little one was asleep;
  • The first layouts with all design elements were shown to the managers after few good months of work just to make sure everyone will focus on functionality, user context, objectives and not on whether that the girl in the banner smiles or the corner of the box is rounded enough;
  • Lebanese and other homemade delicious cookies, ice cream, Coke, Redbull, and lots, lots of good coffee were excellent incentives.

 

Even so, we pulled it through quite well and today we know for sure that what kept us together and united, despite of long hours and weekends, were five things: passion, knowledge-sharing, fun, hard-work and a common dream that willingly forced us to give the best of us.

 

User Persona

We all knew from the beginning that this assignment was going to become one of the most challenging we would ever do, but we knew we had good reasons to be confident we could do it and do it well. The right team (you already know now) and a clear process were just two of them.

The planning - All major user journeys were spread on a weekly timeline and divided into two main activities: UX/Design and Frontend Development.

User Persona – we had a great start because thanks to our client, we knew exactly who are we going to work for – Roxana, Miron, Ciprian, Iulian, George. They all had a job, an active life, long list of habits and preferences and needs to fulfill.

 

The Cosmote Personas
Meet Roxana, Miron, Ciprian, Iulian and George.

 

Stakeholder Workshops & Business Analysis

The real work started with the workshops at Cosmote HQ and tens of people across all departments brainstormed, gave feedback, approved and moved on to others tasks. We knew we were dealing with a strong and determined team as they already prepared drafts of the site’s architecture and wireframe design. These meetings were vital to understand the client’s objectives, its customers, the problems we had to solve, the constraints of the project.

 

Cosmote envisioned in Balsamiq
The first version of the homepage as viewed by the client team.

 

The room we worked together was like a scene from Prison Break: full of iterations, sketches, ideas, personas, concepts and only a few tattoos. And yes, we also had fun!

 

Prison Break Scene
Image taken from http://www.everyjoe.com/2008/12/01/entertainment/prison-break-episode-415-going-under-more-promo-pictures/

 

Prototyping and design

With all the information gathered, we moved to the next phase: the design itself. Based on the workshops we traced the flows for the main site components (e-shop, myAccount and corporate section) and after the Client validation, we started creating the main wireframes.

 

Client Workshop findings
Only a small part of the requirements gathered.

 

For wireframing we used Axure because it enabled us to work collaboratively and it eased the feedback process we received from the Cosmote Team. We first drew the main flows and then extended to secondary pages. we managed to have more than 400 wireframes (423 to be precise) all linked together matching the flows.

 

Axure Prototype
All 400+ prototypes were made in Axure.

 

Where careful crafting was needed, for instance at the slot machine, we first defined the components using detailed sketches.

 

Automatul de oferte
Automatul de oferte

 

Moving forward with the design, we tried to avoid as much as possible any waterfall approaches. As we worked on wireframes, we also created the style guide for each component. And while the designers were doing this, the developers worked on the project’s base and integration.

 

Homepage
The Homepage that made the launch.

 

We designed each component and its behavior: menus, panels, buttons, transitions etc. This made the front-end development phase go very smooth. Building the library first saved us time and effort later.

 

Styleguide
Excerpt from the styleguide book.

 

When the unexpected happens

We all knew that developing the e-Shop and MyAccount was our first and foremost priority, so we’ve agreed and focused on those,. yet we underestimated the work volume.   What was supposed to be a few days work, ended up taking more than two months. the corporate section ended up being a powerful addition to the company’s image and mission

 

Corporate Section
The Corporate section has taken us by surprise.

 

Responsiveness as a must

The wireframes themselves were built on a responsive layout and was centered on component blocks. This gave us flexibility and modularity which allowed us to easily create different layouts.

While the HTML & CSS templates took form, we tested them against the Client’s well-defined list of devices to make sure the overall experience remained consistent. We targeted all major mobile operating systems (iOS, Android, WindowsPhone) with the most popular resolutions (based on cosmote.ro’s visitor profile).

 

Responsive view
Early stage responsive simulation

 

User testing the prototypes

Remember our friends, Roxana, Miron, Ciprian, Iulian, George? Well, they had a lot of things to say when they turned out at the user testing week to check out what we had done. Our User Personas came to life and helped us out!

 

User Testing
Together we user tested the prototypes.

 

For that purpose, we created the flows, the required templates and added relevant and contextual Romanian content, so that the user could navigate freely in a real-life scenario. The results showed that no major changes were needed – only some minor copy misconceptions and small item blindness (the users didn’t manage to spot the Compare button – all fixed in the next iteration with a refined state).

 

Content Strategy at work

The content for the new website is a story by itself, Those of you working on the agency side or those responsible for content updates on the client side know for sure this challenge can turn into your worst nightmare unless managed properly.

 

It hasn’t been a secret for a long time now that many digital projects fail not because of the technological challenges, but because people choose to ignore content and treat it as an afterthought and not as a critical component with a huge impact on the overall business results. As Kelly Goto so clearly put is, “Late content is consistently one of the reasons for project delays. The task itself and resources needed to complete the task are seriously underestimated.”

 

Content is the one that along with branding, functionality and usability ensures a great user experience. As and Agency we’ve always treated content is a business asset, yet based on many years of experience, we knew how difficult was to actually estimate its value You might not consider content as a business asset, but try to imagine running a business without content.

Therefore, we’ve decided to build a business case selling content to key internal stakeholders. It was critical to have a common understanding and alignment; by getting all parties understand that:

  • Content doesn’t take care of itself and is a long-term commitment, requiring ongoing care, development and update;
  • Everybody in the organization is responsible for the content and once published, it has a life of its own, and our customers control it—they like, they share, they criticize etc;
  • To manage content successfully, one must be aware and put in place a well-thought internal workflow, covering all needed steps — from gathering and auditing, to editing and copywriting, approving, publishing, updating, monitoring and archiving; defining clear roles and responsibilities for all those involved is critical in such cases, as content was nobody’s primary concern or priority in their daily work.

 

We even tried to estimate the content effort and we reached a really scary conclusion—almost 9.4 months work for 1 person. It seems we were pretty convincing, as following some strategic meetings, the Client said yes and a new adventure started.

 

Content Strategy
Content Strategy Stages.

 

We wanted to make sure we’ll cover not just what, but also where and why, content will be published. In around 20 weeks time, we put together a truly by the book content strategy that planned for the creation, delivery, and governance of useful, usable content. This meant creating, discussing and approving with the Client a series of useful documents such as guideline for correct content collection, content inventory, content page templates, key messages, online editorial policy (which considers both brand guidelines and online channels specifics), editing policy, editorial calendar, SEO policy etc.

In addition, our team spent days selecting and editing tens of pictures, creating special icons, banners, icons and various newsletter templates.

 

Banners
One the many banner proposals
Icons
Part of the icon family

 

With the guidance provided by the content strategy deliverables, the Client content team managed in a record time to establish a great conversation with all their stakeholders customers, prospects, employees, press, investors and partners. They took over and successfully curated, edited, wrote, uploaded and published thousands of product photos, icons, product information sheets, promotions, information about services, terms and conditions, frequently asked questions, brand & marketing communication messages and special content (TV commercials, print ads and more), media-related information, banners, newsletter templates etc.

Collection
An entire graphic collection

Also you can

Explore how we designed the new Telekom.ro

Discover the process behind Telekom Mobile App

 
If you like our work and have an interesting web project send us a message and let’s get in touch.

  • Project duration: 18 months