TU Go Web App, your calls, texts and voicemails in your web browser.

Defining a new type of communication tool

The challenge

Telefonica Communications decided to expand the reach of TU Go ; an app that allows customers experiencing poor signal to call and text any numbers over WiFi with their existing phone number.

Following the work our London design team did on the release of TU Go 2.0 across various platforms (view Case study here), the company to release a responsive web app: TU Go users would be able to access all their communications without having to download an app ; and directly view them in their web browser.

The brief

The team’s Design Lead negotiated a two weeks design exploration period, before development starts. Our brief was to enable Telefonica customers to make phone calls, send text messages and listen to their voicemails within a web-browser view. We suggested to explore a responsive design approach, so this web app could also scale nicely to mobile and tablet devices.

My role

The approach within the design team was highly collaborative. I worked with the design lead and a visual designer through iterative sessions of sketching / design critique / prototyping.

Once the design patterns were settled, I was responsible to refine the in-app experience, whilst the design lead took on the log in and registration.

(Note: I left the company whilst the product was still being developed)

The approach

  • Defining Principles as a team
  • Exploring design principles — iterative sketch session
  • Design critique
  • Prototyping high level flow
  • Diving in the details

Defining Principles

Before starting any exploration, we used the knowledge gained from working on other platforms to inform the key driving principles for the design of a web-app. The most important principles were to focus on recent chat, and to tailor the experience to the window size.

Exploring design principles

Using our principles as a rough design guide, we went on doing sketching session followed by design critique reviews. Every designer would sketch as many ideas as possible on its own, then we would regroup and introduce our concepts to each other.

Design critique

We took pictures of every details, and we logged every concepts into a shared document, alongside every written PROS and CONS from the design critique session. Together we selected what principles could work best, and refined the amount of concept to 13 approaches.

PROS and CONS gathered during the design critique

Bringing the concept to life

We picked two different concepts to put forward to the product owner ; we selected the two strongest concepts, based on usability criteria and our knowledge of the product usage. We chose diametrically opposed concepts, one answering our key principles the best, the other offering a more traditional approach to communication interface.

We knew that stakeholders can’t always visualise how an interface flows only by seeing sketches. We decided to spend a day prototyping and recording key user flows for the two shortlisted concepts, then engage with stakeholders to get feedback.

Diving in the details

The projects stakeholders were interested to try out the most innovative interface approach after the presentation: the interface concept was to enable our users to view a summary of their communication, and open up to five chat window with the contacts.

Stakeholders agreed to get the web development team to put together a working prototype to test with front of TU Go customers.

We split tasks across the team to dive in the details ; I worked on the in-app experience whilst the lead designer would define the registration and login. The visual designer used our sketches and animation to start exploring the interface’s visual design.

Wireframes used to describe interface principles to the developers

Results

The user testing following the first prototype validated the key design principles we had defined. The interaction model was well received and understood. The product team went on to release a first version of TU Go Web following our original design.