Tinke
Tinké App
Making Wellness and Fitness Assessments Fun and Easy for Everyone
Having developed a non-invasive technology to measure parameters in blood, Zensorium, a company financially-backed by Japanese optics giant Nitto Denko, engaged us to turn it into a consumer product that offers a snapshot of one’s overall wellness at any time. We designed the preliminary hardware configuration that became the Tinké devices, and also created from the ground-up its accompanying mobile app—a fun and easy to use platform for understanding the science of the body.
Client Nitto Denko, Zensorium, 2012
Role Wireframing, UI/UX Design, App Development
A Lifestyle Product
Unlike technical representations of measurements commonly found in medical devices, we employed a friendly and approachable graphic language for this everyday health awareness companion. The Vita Index measuring page integrates a meter gauge in the shape of digits as if the score in a game.
Periodically, the home page of the app shares health tips and features imagery of wellness just like in a magazine. By borrowing elements from other lifestyle products, we positioned the Tinké app as more than a computer software. At the same time, we carefully balanced this more playful approach with its credibility as a health and wellness product.
Intuitive Workflow
The complexity of the Tinké app required a logical organisation of all its features into a comprehensible experience for the user, including a well-designed “unboxing” process. When a user launches the app for the first time, they encounter a progressive unveiling of its features and are introduced to the unique ways of interacting with it.
Health For Everyone
Key to Tinké are two patented indexes—derived from an analysis of oxygen saturation, respiration rate, heart rate and heart rate variability via a person’s blood—that need to be easily understood by users. Instead of using a conventional blood signal waveform for the Vita Index, a fitness score based on heart rate, blood oxygen level and respiratory rate in relation to gender and age, our graph hints at natural forms like mountain ridges and water waves. For the Zen Index, which measures one’s heart rate variability to determine stress levels, we were inspired by the movement of slinky coils to create expansion-contraction visual meters that do not have a static, visible start and end point. This afforded a lightweight aesthetic that enabled the overlapping of the meters; together with the use of concentric rings, these are reminiscent of the interference of ripples rather than meter gauges. This design visually guides users to carry out breathing exercises of different speeds, helping them easily track and anticipate between inhaling and exhaling.
The approach of having start-and-end points defined by boundaries that stop progressing (left) is more lively and dynamic compared to conventional static boundaries (right). But more importantly, the approach affords greater white space and feels less mechanical.
The Zen Index display solution leverages the new way to create motion boundaries without static start-and-end points.
Fast and Easy Navigation
A ‘single-swipe’ fanning menu was developed to help Tinké app users quickly navigate its myriad functions. This does away with the typical tiresome process of tapping or returning to a home page. Instead, users can easily access all 10 key pages of the app and get to a specific feature without ever lifting their finger from the screen. This menu, inspired by observations of how users of interface systems find sliding more natural than tapping, also reduces visual clutter as options stay hidden only until a decision has to be made.
Clutter-Free Records
A key challenge was finding ways of representing the huge amounts of data measured by Tinké’s in a clear manner that would not overwhelm users. This was achieved by using hues and graduated translucency as well as hiding additional information until called upon. A side panel can be used to adjust age and gender settings for comparing values with the rest of the world, while variables can be easily turned on and off for additional clarity.
Idea sketches for different ways to display history charts with clarity and compactness.
Generating breadth: Creating ideas for newness and clarity in the representation of wellness stats.
Further development of various promising directions.
Progressive experiments to refine the clarity and aesthetics of the records page. The later versions demonstrate the use of graduated translucency that helped create aesthetic lightness, despite the compact layout.
