5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F
Contacts Team

YotaHub

Client

First version of Russian dual-screen smartphone caused quite a stir, so the second generation phone promised to bring even greater success. YotaPhone2 needed a special app to configure the black-and-white display. Yota Devices (the author and developer of the gadget) named it YotaHub and decided to entrust us with app interface design.

Task

UX and UI design of the YotaHub app. To complete the task, we looked at the features of the black-and-white screen, explored user needs and created interaction scenarios. The Yota Devices design team managed the project, they challenged us, shared ideas, offered guidance and received the results.

First screen

Full HD LED display. The front of the device is a classic Android-based smartphone with the usual suite of mobile apps.

Second screen

A black-and-white display is based on E-Ink technology. This screen displays important data only and consists of small widgets.

Second screen
splendor

The reverse side of the YotaPhone2 is good for reading, it consumes power slowly and provides an attractive cover for the phone. However, the main advantage of the display is information. The single panel has room to display the time, temperature, latest news, tweets and emails, missed calls, meetings and reminders.

YotaHub app

The user can configure the second display from the front of the device using the YotaHub app. The system consists of cover images and panels with widgets: YotaCovers and YotaPanels. The interface starts up when an object is selected for editing.

YotaPanels configuration

YotaPanels consists of four editable panels with widgets. The user decides how each one will look. The app gives two options: select from preset panels or put each one together independently.

Our task was to offer both possibilities and guide the user smoothly through both scenarios — the process had to be interesting and easy to understand.

Task solution

Android is popular due to its features and high level of flexibility. Learn the system, master it and carefully fine-tune it. Bearing this particular aspect in mind, we suggested a number of ways to manage the black-and-white panels, providing options for ordinary users and for geeks.

In the main scenario, the user enters the YotaPanels interface, chooses a panel, taps the Edit button and gets a list of preset solutions (Presets tab opens by default). For those who aren't happy with presets, there are alternatives. For example, in the panel editing mode, users can go to the Grids tab, choose the appropriate grid and then fill each block in manually.

CHOOSING PRESET PANELS

The user taps the Edit panel button to go to the list of preset solutions.

PANEL CONSTRUCTOR

The user chooses a grid in the Grids tab and uses widgets to manually fill in empty areas.

REPLACING PANELS

Tapping the Edit panel option again takes the user back to the choice: Presets or Grids.

EDITING WIDGETS

Tapping the widget brings up a dialogue window with two options: Delete and Configure.
(The Configure option is relevant for some widgets. For example, the special Weather settings are needed in order to specify the city).

DELETING AND CLEARING PANELS

Rarely used or unwanted features which we placed under the button in the top-right corner of the screen.

YotaCovers

Another part of the app is YotaCovers — an interface for managing cover images. These images perform two functions: they transform the appearance of the device and they store the owner's personal data. In YotaCovers, photos can be accessed from the phone, from social networks, and from a special file containing black-and-white YotaCast images.

The user sends a static image to the second screen or creates a slideshow including a number of images.

SELECTING PHOTOS FOR COVER IMAGE

To create a static cover image, the user chooses just one picture.
To create a slide show, the user selects several pictures.

SELECTING AN ALBUM FOR COVER IMAGE

Users can automatically create a slide show by long tapping the album.

The first version of the app will be followed by updates. To simplify and tweak how the second screen is managed, we are building all the new features and interface elements based on feedback received from YotaPhone2 users. We will present the results of this work separately.


Send a request or contact us at info@nimax.ru

Mail.Ru educational projects
Courses for developers by Mail.Ru and Russian technical universities.
architecture, content, design, development
Technopolis
An educational project of Mail.Ru Group and the Polytechnic University in St. Petersburg
architecture, design, development
Zehnder-online
Heating solutions from the authorized agent of German manufacturer Zehnder in Russia.
website, design, development
Hotel Schools
Education at Swiss hospitality universities
concept, design, development