O2 Partner Portal (2010)

O2’s Partner Portal is an online wholesale service that allows companies (that act as resellers for smaller businesses) purchasing premium SMS services. A new version was designed and developed by Telefónica I+D looking to solve previous version shortcomings.

What

Enterprise premium SMSs are a big source of revenue for telecommunications companies like O2. A few companies interact directly with O2, connecting with their systems and acting as resellers for small/mid businesses. These companies use O2’s Partner Portal to keep track of their current portfolio and ask for new services.

Sign up / login page for O2's Partner Portal new version
The new version of Partner Portal has a strong and consistent corporative look

Current version was showing its age, and O2 asked Telefónica I+D to develop its new Partner Portal. Detecting some potential user experience problems, Telefónica I+D suggested its User Experience team to undertake design, and together we created the new Partner Portal.

My work

Reviewed new Partner Portal proposal to suggest usability improvements for development. This revealed several wider User Experience concerns that, once raised, convinced O2 to assign the whole new design to Telefónica I+D (R&D) User Experience team.

Development was going to follow Scrum’s agile methodology, so User Experience was going to be one sprint ahead, working on the next sprint’s design while supporting current sprint implementation. Besides, a 0-sprint research was commissioned.

Conducted research on current Partner Portal. It served several different kinds of users (both internal O2 employees and external reseller companies) with different goals and tasks, and interviews and ethnographic research was conducted on location (on Leeds and London).

screen capture of a male customer using Partner Portal, captured with Silverback
Having the chance to observe and interview real users while they were carrying on their daily tasks allowed me to get a lot of information about how customers interacted with the service
screen capture of a femaile customer using Partner Portal, captured with Silverback; another person can be seen behind the customer
I tried to keep interviews as quiet and non-obtrusive as I could, but I could not stop Partner Portal Business Analyst from watching the customer with me; he was mesmerised seeing his system through the eyes of a real user

A secondary result of these face-to-face interviews was that a common trust climate was established; further requests for information and cooperation were much easier.

One of the major issues that were discovered was that a lot of required domain knowledge, critical to create a helpful interface, was not documented. Finding this information was one of the focuses of my research, and an internal wiki was created to centralise the recovered information. Development team also used this wiki to share development information and soon it was a vital tool for the whole project.

screen capture of Partner Portal's wiki, showing different PTM products' definitions
Having an internal wiki helped project members stay updated on the domain knowledge as fast as we uncovered it. It also helped a lot to kick-start new people into the project

Given that the interface for the different users was very similar, initial sketches were ported quickly to Balsamiq wireframes, which allowed easier changes and maintenance.

Important effort was put in simplifying the sign up process, which was complicated given that multiple business and technical details had to be entered. We allowed customers to save their progress, so that customers that needed technical help could get it and then resume the process.

Balsamiq wireframe for sign-up process showing company detail data introduction
Sign-up form was created accorded to my beloved Luke Wroblewski‘s “Web Form Design”
Balsamiq wireframe for sign-up process showing connection detail's introduction
The sign-up process required both domain and technical knowledge. Given that few people could complete the sign-up on their own we allowed customers to save the sign-up process to resume it later, once they get assistance

Screens for O2 employees were mainly work lists and web forms that had to be completed. Adding extra information on hover and using clearly groupings allowed us to create a consistent interface for all employees and their tasks.

Balsamiq wireframe for O2 employee's work list, showing list of current orders in need of an action and extra info on them with tooltips
O2 employees would have a work list with orders in need of action. Tooltips were added to help them browse orders without the need to go into each one
Balsamiq wireframe with order details for company data approval step, with buttons for different possible actions underneath
Employees accesing order’s details can review related data (different for each task) and issue a corresponding action
Balsamiq wireframe with order details for reserve/validate L2M sources, with buttons for different possible actions underneath
The layout is consistent for different tasks, with the upper part of the screen showing related information and the lower prepared to receive employee’s input

External customers would have a dashboard with links to common actions and lists last orders’ list, including “in-flight” ones.

Balsamiq wireframe showing the customer's dashboard, including extra info on order with a tooltip
Partner portal customers have a dashboard that allows them to review their last orders’ status at a glance, while being able to add new ones easily

Customers would create new orders or manage their current portfolio from this dashboard, with tabs devoted to each kind of product. Several possibilities were considered.

Balsamiq wireframe showing PTM ordering for Partner Portal customers
Forms were used to capture required product’s information. Given that most customers entered information for several (similar) services at once, they were given the chance to add one service after another without needing to re-introduce common information
Balsamiq wireframe showing an alternative layout for PTM ordering for Partner Portal customers
Different alternatives for key pages were prepared

Customers may also manage their account information, editing their technical or administrative data.

Balsamiq wireframe showing connection details editing
Customers may request connection changes, being able to visually check the changes before submitting them
Balsamiq wireframe showing company details editing
When customers requested changes that required O2’s approval or the signing of a new contract, they were shown a warning

Quick changes were managed using screen captures from HTML prototype and adding wireframes where needed.

Screen capture of Partner Portal's prototype with several modules added with Balsamiq to create a quick wireframe
A screen capture and some Balsamiq wireframes on top can be used to create a quick wireframe for last minute modifications

Wireframes were distributed to some of our already established connections representing each kind of user, and reviewed together (remotely, using Skype) to confirm design direction.

Telefónica I+D Development team delivered partially functional prototypes at each sprint. UX team was usually one sprint ahead and new wireframes were ready at each sprint’s start.

Screen capture showing functional prototype for O2 employee's work list
Telefónica I+D Development team implemented functional protoypes at each sprint, like this one showing O2 employee’s work list
Screen capture showing functional prototype for PTM managing and ordering
Implementation of Parner Portal PTM managing and ordering (created by Telefónica I+D Development team)
Screen capture showing functional prototype for adding a new PTM
Adding a new PTM with Partner Portal’s prototype (created by Telefónica I+D Development team)

New prototypes were tested (remotely) with some of our already established connections for each kind of user. Detected problems were added to product backlog.

Screen capture of Skype's video chat session, showing Partner Portal account creation
We tested our prototypes (remotely) when time allowed. The contacts we made during our research were priceless for that

What I got

  • Experience with a wholesale web service, which needed to serve different kind of users with a consistent interface.
  • Conducting ethnographic research and using established connections to get further information.
  • Working in an Agile environment, integrating UX into sprints.