Design Team

Mobile App UI/UX Design and Development / Infographics

 

 

As a relatively complex App, one of the biggest challenges was to sort out all the functionality and features into an easily navigable, logical and comprehensible flow for the user. This formed a key challenge, but was ultimately resolved with a logical workflow that is easy to understand and organized to work with one’s intuition.

The wireframe diagram above (after numerous iterations) was a tool to help us work out and communicate the intended flow of the app, for ourselves to evaluate and tweak, as well as for communicating with programmers. It’s inclusion here serves the purpose of providing a sense of the App’s scale and complexity.

 

The strategy was to create an App that feels like ‘lifestyle-oriented’ health-consciousness. We made it highly approachable, and reminiscient of a lifestyle magazine, or brochure, rather than what would remind one of ‘computer software’.

 

The third screen shows the home base for the user. Periodically, new health tips and images are revealed to give a feel of a ‘live’ magazine.

 

‘Gamification’ of the graphics was one of the ingredients we’ve employed to generate the approachability and feeling of simplicity.

While doing this, we sought ways to make data appear ‘happy’ too, so as to make Tinke a health-tracking device that is endearing to use, instead of a technical drudgery.

Inspired by the observation that sliding one’s thumb over capacitive interfaces is more addictive and more natural than tapping on it, we achieved this with a ‘single-swipe’ fanning menu system: Wherever a user initiates a finger swipe, that determines the submenu that opens; and without lifting his finger, he swipes to his choice and releases to make the choice. This menu system enables every key page of the App (10 of them in fact) to be directly accessible from any other page with a single swipe. Users never need to ‘tap-here-then-tap-there’, or return to a home menu just to go to another page.

Such is the success of this menu system that we have multiplied it across various points in the App where there are multiple paths of action to take.

 

The system not only gives speedy navigation - but because of its ‘fanning-out’ mechanism, all options stay hidden until you are making a decision - effectively reducing visual clutter, and the number of ‘buttons’ at any one point on the screen. This is possibly the fastest navigation menu ever made. And not only that, the interaction is proving to be extremely satisfying, fun and highly addictive.

While most of the development process and alternative options are bound by non-disclosure agreements, Zensorium / Nitto Denko has graciously allowed the detailed showcase of the process behind developing a few areas of Tinke. This provides a us chance to reveal some behind-the-scenes work, as a representation of the methods and rigor put into the design of the App.

We started with loose, playful doodles as a search for new ways to represent information, finding interesting visual analogies, envisioning new effects, and trying to work out the functionality and hiearchy.

At this stage, some sketches may be more inclined to solving ‘function’, whilst others may be about a cool new aesthetic.

 

Working on a digital project allows us to move quickly into ‘scale one’ high fidelity sketch prototypes. The emphasis here has still been about finding new and fresh ways to break out of the box of statistics display. The aim is to find interesting starting points so that we are not just stuck with convention.

Working in scale allows us to better examine how the realities of the screen size constraints the design, and also helps us evaluate the usability.

 

Directions which show promise functionally, and/or aesthetically, are further worked on to test the plausibility of the direction. As we do this, we experiment with variants that modify the usability, to better understand the layout challenge we are facing; at the same time, we play with different visual treatments to try to arrive at different aesthetic impressions.

Below are snapshots of two of the directions that we have more intensively explored in parallel.

Sometimes we take a direction with a promising aesthetic, and try to wrestle the maximum functionality from it; at other times we focus on a layout with great usability, and we try to make it as visually comfortable as possible. The ideal would be a synergy of the two.

 

Over here, as a charts page, the functionality was the main driver, thus once we arrived at this highly usable and compact layout, the task was to stay with it and work on maximizing its aesthetic quality. The above snapshot shows the progressive refinement towards a clear, comforting, and interesting visual. Different visual tricks were experimented with to create an overall feeling of simplicity, consistency, spaciousness, and friendly approachability - while making sure it still feels credible and substantial.

 

By careful control of the visual hierarchy, hues and gradated translucency, the Records Pages exude an easily readable, organized, and uncluttered feel - despite the large amount of information compactly represented.

A side panel can be revealed underneath to adjust the age and gender settings of the World values used for comparison. For even more clarity, each variable can be individually toggled on/off to select what is displayed or hidden.

 

The task of designing for the measuring page of VITA index faced the main challenge of trying to make the blood signal waveforms look friendly and less technical. However, at the same time it should not become too playful such that it loses its ‘healthcare credibility’.

In our explorations, some options tended more towards the technical, and some more towards the playful. While the snapshots of the options we had explored for this are confidential, the gist of the main trick we have adopted is to make the waveform into a solid graphic rather than a graph line aesthetic - this way we it helped us move it away from the 'science-y' association of a line-based technical graph - and instead hints more at mountain ridges, melting snow caps, water waves etc.

 

This approach it however, when taken too literally, tended towards a childish feel, and would not fit well with a medical device needing some level of soberness. The final design was a precisely-balanced version between the ‘literal childishness’ of the mountain ridges analogy and something that feels more controlled and rational.

 

For the development of ZEN measurement, we needed to create visual breathing guides for users so that they can follow along in their inhalation and exhalation. The typical solutions involves having clear start and end boundaries, like a meter, so that the user can visually track and anticipate when to switch between inhaling and exhaling.

 

However, as illustrated by the attempts shown above, these ‘visible boundaries’ tend to create an aesthetic like technical meters, and also clutter the interface - especially because we need five different breathing speeds to be displayed at the same time.Therefore we needed to find an alternative solution.

The resultant design typologies remind too much of technical meters. Also it seems that the boundaries which are always visible are an unneccessary clutter on the screen.

 

Inspired by the way slinky coils move, we created a graphic that did not need to have permanent fixed boundary to indicate to the user the end of the movement.

 

Another problem became apparent - To create a sufficiently big range of movement, the circles had to be somewhat big, and thus created the problem of overlapping. However, what was initially deemed to be a problem - the overlapping - was used as an opportunity when we decided to adopt the concentric rings ripple patterns. The overlapping produced a beautiful moire effect rather than being a problem.

With the same vision in mind, this final example shows the similar rigor with which we have explored and developed the Results Page, so that the display achieves a high level of functional usability, as well as an aesthetic that marries friendly approachability and credible soberness.