Dot View

Oct 2014 – Oct 2015 | Interaction |  HTC

Overview

The Dot View App enabled users to access basic information without opening the Dot View case. Its retro modern style was a reminder of the early era of computers with dot matrix displays. Users were able to use Dot View to view incoming notifications, answer incoming calls and check their call history. Moreover, Dot View can be personalised with customised wallpaper or images that surface when the case is closed. Specific animation will be optionally displayed on holidays and the user’s birthday.

Acquiring information on Dot View
Answering a call without opening the case
Specific animations optionally displayed on holidays and the user’s birthday

Apart from the basic features, three supporting apps were released for the Dot View case: Dot Message, Dot Design, and Dot Breaker. Dot Message allows users to create a marquee that is visible through the Dot View cover. Dot Design enables them to create Dot View themes by drawing on the screen, and Dot Breaker is an Arkanoid-style brick-breaker game that is played while the cover is closed.

Three supporting apps for the Dot View case – Dot Message, Dot Design and Dot Breaker.

My role

This project took place between March 2014 and April 2015, and I worked on it as a user experience designer for the software starting October 2014. The Dot View project entailed cross-disciplinary collaboration and extensive communication among engineers, UI designers and industrial designers. My role in the project was to develop the early concept, plan the features, research and create the wireframe and flow.


Challenge 

Dot View 1.0 had been successfully identified as an iconic presentation of a smart cover. Besides enriching the Dot View features, the goal was to make Dot View 2.0 a more enjoyable and engaging experience through innovation. The integration of software and hardware opened up numerous possibilities, but it demanded thorough research, experimentation, and usability testing to ensure the development of a flawless and smooth user experience.


Approach

Observation

Dot View was a product with perfectly-matched software and hardware; however, its interaction and user interface were unconventional. The gesture controls needed to be intuitive, while avoiding any mistriggering. Hence, I observed how users interacted with Dot View 1.0 in order to enhance the original experience, while thinking out of the box to potentially find new ideas.

Sketches for the observation of hand gestures on Dot View
Brainstorming

We organised an internal workshop for participants from different disciplines to explore the possibilities for Dot View. This enabled us to think beyond our profession and quickly gather lots of ideas.

Internal workshop to brainstorm ideas for the next update of Dot View

Vision

Our vision was to revolutionise the way people interact with content between accessory and mobile device.

Dot View provided another layer to the information displayed on the case by changing the way it is accessed when the phone is covered by the case. Unlike other cases that only enable users to answer a call by opening the case, Dot View gives them the option of seeing who is calling before opening the case. Dot View combines hardware and software to directly respond to users’ needs in an engaging way, and the case and the software work together to protect the phone, as well as users’ privacy, by allowing them to access basic information when the case is closed.


Detailed design

After the scope of the features was locked down, as a UX designer, I quickly sketched all the key features and discussed them with the project manager and the engineers to check the feasibility of the design at each iteration.

Sketches of key features

Since Dot View had an unconventional design, some high risk areas were found during the internal review and a prototype was required to verify the design at this stage; thus, a prototyper was commissioned to create a prototype and I worked with the user-researcher to test its usability. The design was modified at a later stage based on the user’s feedback, and deliverables consisting of the design flow and wireframe were given to the visual designers and engineers for implementation.

Dot View 2.0 (Key screen / Flow / Wireframe)
Dot Message (Key screen / Flow / Wireframe)
Dot Design (Key screen / Flow / Wireframe)
Dot Breaker (Key screen / Flow / Wireframe)

Launch & Result

After the launch of Dot View 2.0, the Dot View app received positive feedback. Users responded well to the new Dot View features and the supporting apps and there was a great deal of media exposure on well-known media platforms, like CNET. However, since some users reported mistriggering issues after the launch, we improved the design and conducted the user testing. We updated the Dot View app as soon as we confirmed that the design change reduced the chance of mistriggering. In addition to the product itself, we had released a source code, which aimed to encourage developers to create more Dot View-compatible apps and built a Dot View open source community.