O2 Health (2011)

Warning

This project has not been released to the public. Details and text have been filtered and heavily edited to uphold confidentiality.

Electronic Health is a strategic field for our future, given its potential to reduce costs and optimise procedures. Telefónica was conducting several pilot projects in this field, with Telefónica I+D providing development. User Experience team was called in to refine interfaces for future commercialization.

What

Telefónica is exploring the Electronic Health field, confident that its experience in online services and infrastructures can be put to good use. Some pilot projects have started in Spain and the UK (under O2 Health flag), with Telefónica I+D (R&D) providing software development.

Home page for O2 Health
O2 Health homepage, displaying information on some of the projects I’ve been involved in, like Side by Side

After some initial proofs of concept it became clear that the User Experience of the services had to be carefully considered before commercial launch. Telefónica I+D User Experience team was called in.

My work

Checked e-health pilot project’s user experience, reviewing documentation and prior testing archives.

Conducted usability testing on current pilot project’s interfaces. Considerable effort had been put by management and developers to create good interfaces, but the lack of specific design resources had resulted in technology-centric complex interfaces.

blurred screen capture of usability testing on O2 Health pilot project
Watching the services through the eyes of a “user” allows me to complement research and get a quick understanding on the current status and problems
blurred screen capture of another usability testing on O2 Health pilot project
When Development team watched people struggling with their service they started to understand User-centric Design

I integrated with development team to build a mutual trust climate, offering advice on user interface issues.

Once sufficient rapport was created I conducted a User Experience workshop with development and development management regarding current pilot project’s interfaces. Usability tests were on display and specific issues were discussed, recognizing the team’s effort. This shifted development and management perspective from technology-centric to user-centric, and strengthened our bonds.

After some initial global eHealth review, I focused my efforts on the most critical pilot project.

Conducted KJ and collaborative design workshops which produced persona and scenario definitions, with more detailed user flows for key scenarios.

blurred image of post-its on wall
UX team produced a lot of ideas and a KJ exercise was used to group and prioritise them
blurred image of user flow sketched on a whiteboard
Sketching user flows collaboratively helped create consensus among the team
blurred image of personas grouped by scenarios
Once main use-cases were defined, personas and scenarios were created (document template was created by Visual Design team)
blurred image of customer journey
Critical scenarios were defined from a user-centric point of view with customer journeys

The service had several different kinds of users, with different goals and tasks. Went through a lot of sketching to test several user interface approaches.

blurred image of hand-drawn sketch for user dashboard
First sketches for user’s dashboard page
blurred image of hand-drawn sketch for admin-like user dashboard
Some services had admin-like users that had to manage collections of items at the same time
blurred image of alternative hand-drawn sketch for admin-like user dashboard
Different alternatives were explored for each page (this one shows an alternative table-like interface for admin-like users)
blurred image of hand-drawn sketch for set-up process
Important processes were sketched too
blurred image of hand-drawn sketch for mobile phone
Some services included mobile phone interfaces. I created a mobile phone outline with Balsamiq and used it as a template for my mobile phone sketches

Transferred sketches to Balsamiq wireframes, easier to change and maintain, once the main user interface elements were confirmed with UX leadership.

The biggest issue with the service was that, given its highly customizable nature, the user would receive a lot of feedback on configuration options that might hide the most important message of the service: whether there was something wrong or not.

To help alleviate that I designed a single item that would synthesize the system’s current status.

blurred Balsamiq wireframe showing detail of customer's dashboard showing a check sign
Wireframe detail: a simple symbol and message reassures the customer that everything is working ok, and that people are fine (by the way, I use soccer player’s names a lot in wireframes)
blurred Balsamiq wireframe of customer's dashboard showing a warning sign
When something goes wrong the symbol changes to a warning or emergency sign; the item causing malfunction shows up with consistent colour and iconography
blurred Balsamiq wireframe of customer's dashboard showing a warning sign for lack of configuration
When a customer accesses the service for the first time, he finds a warning message asking for configuration, with links that take to the corresponding configuration pages

This idea scaled well to admin-like users who had to manage several users’ accounts.

blurred Balsamiq wireframe of admin-like user's dashboard showing checks for each user and a general check for the system
Admin-like users managing several accounts would see each account status represented with a simple icon. The resulting global status is then shown as an icon too
blurred Balsamiq wireframe of admin-like user's dashboard showing checks for a lot of users and a general check for the system
This principle works again when the number of managed accounts grow. Furthermore, besides showing basic information for selected account, information updates are displayed: changes in information are usually more interesting than static information
blurred Balsamiq wireframe of admin-like user's dashboard showing a warning sign for a user which results in a warning sign for the global status
When an account needs an action, it is displayed on top of the list and the global status changes to an emergency sign, offering a link to the account
blurred Balsamiq wireframe of customer's dashboard for an account that needs configuring
When an account needs initial set-up, a link to the set-up wizard is offered (next to the error message)

Best design practices were applied throughout the system, looking to alleviate cognitive burden on the users.

blurred Balsamiq wireframe showing a web form
Web forms were formatted according to best practices, using careful grouping and alignment
blurred Balsamiq wireframe showing a contextual menu for an element in a table
Contextual menus appear when hovering on actionable items
blurred Balsamiq wireframe for a set-up process, offering a default configuration
Default configurations were offered where appropriate; users can review and edit these settings before confirming them
blurred Balsamiq wireframe with an action button, showing a link with extended help on the results of the action
Contextual help is offered close to calls to action that might seem uncertain or problematic
blurred Balsamiq wireframe for a mobile phone interface, showing a sliding tab that opens up advanced configuration options
Advanced configuration options are “hidden” behind advanced gestures or menus

Wireframes had to be approved by the O2 Health committee sponsoring the pilot project, and workshops were conducted in the UK to present and review the results.

Javier Gala conducting a workshop, pointing at a diagram hanging on the wall
Results were presented to O2 Health committee regularly, looking for approval and feedback

What I got

  • Experience with eHealth services and applications.
  • Working with global teams that had me commuting between Barcelona, Granada and London while keeping in sync with everybody.
  • Integrated User Experience gracefully in technology-centric teams to breed cooperation instead of rejection.