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.
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.
Full HD LED display. The front of the device is a classic Android-based smartphone with the usual suite of mobile apps.
A black-and-white display is based on E-Ink technology. This screen displays important data only and consists of small widgets.
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.
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 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.
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.
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.
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.