eBooks (2010)

At MWC 2010 Telefónica announced that they were working on an e-book distribution and reading platform, and it was to be ready for Christmas. When they had to design its mobile and tablet applications, they turned to Telefónica I+D looking for our help.

What

Telefónica had big plans for electronic books, looking to create a distribution platform, eBooks, which could be powered by its wireless network to deliver e-books everywhere. Part of this strategy was creating e-book applications for smartphones and tablets that would allow users read their books, keep their libraries tidy and shop for new books on the move.

mock-up for tablet version of the eBooks application
The final version of the eBooks application for tablets would show current reads on its home, tempting customers with updated magazines and newspapers

Time was critical, as a limited version of the tablet app had to be embedded on every Samsung Galaxy Tab sold by Telefónica that Christmas.

My work

Met with project management and reviewed documentation.

Met with Movistar UX team, who were working on the e-books web platform and PC application, looking to create a cooperation climate between both teams. We kept each other updated on our progress and that helped create consistency between projects.

Conducted competitive research on other e-book distribution platforms and e-book reader applications for mobile devices, including ethnographic observation.

Created simple storyboards for some potential scenarios, looking to current experiences with reading books on the move.

mock-up for tablet version of the eBooks application
The final version of the eBooks application for tablets would show your current reads on its home, tempting you with updated magazines and newspapers

Created LOTS of sketches for the smartphone application (which was the main priority at that moment) and presented them to project management to confirm project’s direction. Speed was key.

hand-drawn wireframe describing the smartphone eBooks application home
Hand-drawn wireframes were created and iterated, like this one for the home screen of the eBooks application
hand-drawn wireframe for the smartphone eBooks application library, resembling a bookshelf
A bookshelf-like screen was designed to show titles available on the device. Notifications icons were created to distinguish new content or books already finished books
hand-drawn wireframe describing the reading interface of the smartphone eBooks application
Reading interface was minimal, with menu items appearing only at user’s request

The mobile application shop was critical in generating revenue, so it was studied with particular detail. Books, magazines and newspapers would be available, and each kind of content had its own peculiarities.

long hand-drawn wireframe for smartphone eBooks application, describing its shop page
mobile eBooks shop would have different sections for different kinds of content, with several flexible modules
hand-drawn wireframe describing the magazine's section in the smartphone eBooks shop
Customer could restrict the kind of content to be shown with upper menu, and page would adapt to show sub-sections for that kind of content
hand-drawn wireframe describing the book details page for the smartphone eBooks application
Content detail page showing type, ratings, synopsis, related content…

Once direction was confirmed with stakeholders, a proper definition document was created. Sketches were turned into Balsamiq wireframes, and sitemap and detailed information were added. Also, key flows were illustrated with multiple wireframes.

powerpoint excerpt showing Balsamiq wireframe for smartphone eBooks application home screen
Balsamiq wireframes were created for the definition document, with highlights describing individual items
powerpoint excerpt showing Balsamiq wireframe for smartphone eBooks application bookshelf screen
Downloading elements would include a progress bar
powerpoint excerpt showing Balsamiq wireframe for smartphone eBooks application reading interface screen
Reading interface was consistent and minimal, appearing only at request
powerpoint excerpt showing Balsamiq wireframe for smartphone eBooks application shop screen
Shop was presented here in full, with further wireframes describing specific sections

News arrived that Telefónica wanted to embed a preview version of the eBooks application on each Samsung Galaxy Tab for Christmas. Therefore, the smartphone design had to be adapted quickly to the tablet environment and a preview version had to be designed.

powerpoint excerpt showing Balsamiq wireframe for tablet preview eBooks application home screen
A simpler preview version was created, with some pre-loaded content and teasers for full version
powerpoint excerpt showing Balsamiq wireframe for tablet preview eBooks application bookshelf screen
Bookshelf screen would offer information on how to add more books to the collection (which involved signing up for the eBooks service)
powerpoint excerpt showing Balsamiq wireframe for tablet preview eBooks application shop screen
Shop was simplified, given that only books (and no magazines/newspapers) would be ready at launch

Once the wireframes were accepted, Visual Design team turned them into visual mock-ups including graphic assets, and explanations on behaviors were supported with visual aids.

visual mock-up of eBooks tablet application, showing complete home screen with magazine and newspaper teasers
Home screen would show little “hanging” newspapers and magazines as a teaser in home screen. Customer may choose the kind of newspapers/magazines he is interested in (mock-up created by Visual Design team)
visual mock-up of eBooks tablet application showing shop page
Shop would include teasers and tactile carousel (mock-up created by Visual Design team)

What I got

  • Experience on smartphone and tablet applications.
  • Working under stress, with tight deadlines, and delivering.