Giffgaff (2009)

Innovative O2’s MVNO Giffgaff (the mobile network run by you) had to be translated from a great idea into a full-fledged service quickly, and the Information Architecture of its website was essential in achieving long-term success.


There was a secret project around Telefónica I+D Barcelona’s office. A room was permanently locked; glass walls obscured with paper, and meetings where few people were allowed were taking place.

The latest project from O2 was going to be developed by Telefónica I+D (R&D). It was a MVNO (mobile virtual network operator) which was going to operate on O2’s network, but there was something more than technology. It was going to be run by you.

current Giffgaff home page
Giffgaff, the mobile network run by you

Giffgaff means mutual giving in Scottish English, and that was Giffgaff’s basis: by letting users help with support and some other operations, we could take costs down, allowing us to go with competitive rates. And if you help a lot, you will get a lot back with “payback”: twice a year Giffgaff shares its benefits with its customers, and those who help the most get the bigger share.

To become a reality, Giffgaff needed to go from being a great idea to a great service, and a simple and easy to use website was part of the plan.

My work

Giffgaff has been my toughest and greatest project until today. When I was invited to take part in the “secret project” as Information Architect, it was just a Powerpoint outlining some principles (backed by marketing research), and a great promo video showing what Giffgaff could become. When I left the project six months later, everything was ready to fly. It was hard, and it was worth it.

screen capture of My Giffgaff (customer's dashboard) from Giffgaff's first website version
First finished version of My Giffgaff (customer’s dashboard)

Reviewed all the information that had been generated about Giffgaff.

Took part in brainstorming (led by Lars Stalling, ex-IDEO) to identify key issues to be addressed by Giffgaff’s website.

green post-its over a paper wall listing key issues for Giffgaff
Part of the results of the brainstorming sessions that took place to identify key issues for Giffgaff

Analysed research and brainstorming to create first drafts for sitemap, flows and wireframes for key pages. These were critical in getting final approval from Telefónica for the Giffgaff project.

crude powerpoint wireframe showing the main areas of the My Giffgaff page
The first wireframes for Giffgaff were simple and created with Powerpoint
powerpoint diagram showing the steps in the flow for becoming a Giffgaff memeber
Key flows were described with powerpoint, describing each step and pointing out pending issues and questions
Balsamiq wireframe for the Giffgaff page, showing some extra detail
Wireframes were refined in Balsamiq, adding more detail and suggesting content
Image of first Giffgaff's sitemap, created with powerpoint
First version of Giffgaff’s sitemap, part of the high level website overview document that got the final “green light”. I created a clickable powerpoint presentation to simulate limited interactivity.

Sent to UK to become Information Architect at Giffgaff, working at Albion London’s (brand agency for Giffgaff) premises.

Reviewed and studied “Documented member experience” document, the “bible” for Giffgaff project created by top stakeholders. Extracted and applied its main principles, challenged a few others, and accepted grudgingly some, contributing to this document.

Conducted competitive research on mobile operators and MVNOs.

Created customer journeys to illustrate key customer flows through Giffgaff’s website.

hand-drawn customer journey for getting new members to Giffgaff, showing the information exchange and steps involved in the process
Customer journey for the inviting new customers to Giffgaff (MGM or member gets member) process

Went through LOTS of sketching for Giffgaff’s pages, widgets and flows. Several approaches were considered for each page and functionality.

hand-drawn My Giffgaff wireframe, showing proposals for the different widgets
The newsfeed was a main part of the My Giffgaff proposal, influenced by the Facebook design. The ideas was that important information would be pushed towards the user, instead of having the user drill down the page looking for it. Left and right columns would be populated with customizable widgets
hand-drawn sketches for balance and topup widget, showing configuration options states in the top-up process
The balance and top-up widget was intended to allow a simple and easy top-up process, showing immediate feedback
hand-drawn sketch for the statistics widget, with several hand-written notes
The statistics widget was an ideal place for new member’s suggestions: given that on-net calls were free, customer would save if his most-called to friends joined Giffgaff
hand-drawn sketch for statistics widget alternative, showing a bigger widget with several tabs
Other possible statistics widgets or areas were considered, always looking for ways to help customers save by having his top friends join Giffgaff
hand-drawn sketches for several kinds of notifications in the newsfeed area of My Giffgaff
The newsfeed area in My Giffgaff would push relevant information to the customer. Several different kinds of notifications were considered.
hand-drawn wireframe for anonymous top-up (where an unlogged customer may top-up any Giffgaff account)
Besides customers topping-up their own accounts, anonymous top-up was considered, allowing people top-up other accounts (parents paying their son’s phone bill, for example)
heavily annotated hand-drawn wireframes for the 'get address' functionality
Sometimes a minor functionality can be tricky and require extra detail to reassure communication. Typing your address in a form is a cumbersome process, and there are several ways to ease this up.
hand-drawn depiction of the SIM activation flow, with rough wireframes and several notes
Flows can also be sketched, showing rough wireframes for each step in the process while trying to capture interaction

Conducted paper prototyping (with Isabel Conde‘s support) to evaluate different approaches.

hand pushing button on a paper prototype for Giffgaff
Paper prototyping allowed us to refine some wireframes before presenting them to Giffgaff stakeholders

Created wireframes and sitemap for Giffgaff. They had to be approved by top stakeholders committee and went through several revisions.

Omnigraffle wireframe for the anonymous top-up page at Giffgaff
Sketches were turned into prototypes and then presented to the Giffgaff committee for approval.
Omnigraffle wireframe for My Giffgaff (customer's dashboard) page
Key pages went through several revisions to get the final approval.
Omnigraffle wireframe for My Giffgaff, including typography and sizing
Once wireframes got approved by stakeholders they were turned into “visual” wireframes by Visual Design team, adding typograhy and final details while looking for pixel-perfect sizing (this wireframe was created by Sergi Vila)
Sitemap for Giffgaff, created with Omnigraffle, showing branches and pages and referencing to wireframes
Sitemap for Giffgaf beta launch. Each branch was described with more detail in the document, and each page referenced to its wireframe

Conducted usability tests on Giffgaff’s first prototypes.

Screen capture of usability test on the Giffgaff page, recorded with Silverback
Some guerrilla usability tests were conducted on the first protoypes of Giffgaff and were recorded with Silverback

What I got

  • Experience in the UK market, particularly working within a brand agency, acting as “bridge” with O2 and Telefónica I+D.
  • Turned documents into a full-fledged working website defined by sitemap, wireframes and flows.
  • Became part of a successful and innovative product, helping shape it.

Important achievements

In its first year of operation Giffgaff won two industry awards:

  • Forrester Groundswell Award
  • Most Innovative Community Award at the Social CRM Customer Excellence Awards

It was also finalist for the Marketing Society’s Brand of the Year.