Friday, 13 January 2017

Marketing MyHealth - a call to action


Successful marketing campaigns often have a 'call to action', a tagline or objective that encourages the audience to get up, go out and buy the product or perform the service. The wartime recruitment poster by Alfred Leete, "Lord Kitchener Needs You", is a powerful and dramatic example of this. 

In order to create a harmonious and effective campaign to raise awareness of the product's existence and purpose, MyHealth should initially focus on the competitive element of the app. Focusing on one element initially will ensure a strong and corroborative message is delivered and avoid any mixed or confused messages. After the initial phase, marketing could focus on the advanced health features and fitness improvement abilities of the app. 



It's important that the campaign's tone of voice is appropriate. It must be competitive, challenging and encouraging, but also positive and not intimidating or hostile. 




Nike use a lot of emotional branding like Apple, which creates a sense of trustworthiness and connection to the consumer (also corroborates the history and success of the brand, which is why it only really works with brands that have already seen success). They also have perfected the art of making the consumer feel like they can do anything and be anyone if only they buy Nike gear, just like Apple do. Whereas Apple convinces you that life will be easier and more advanced with their products, Nike convinces you that you'll be bigger, faster, stronger; heroic consumer reflection. They have one of the best call to actions on the planet: Just do it.

App identity


"In other words, we strive for simplicity and functionality as much as we pursue beauty, purity and emotional relevance."
 
           Philips Design 



As with the UI design of the app itself, its identity must be simple and functional, but also friendly and approachable. This friendly appearance could be paired with a competitive tone of voice to encourage healthy competition amongst friends and areas. 

Hero images will be taken next week in the photography studio, but in lieu of those, the promotional images below show how a print/online ad campaign could be run. 



The fingerprint icon hints at the in-depth and scientific nature of the app while also making it clear that the app is personal and built around the user. The motto is competitive but not intimidating or incendiary. Gamification is key in the widespread adoption and continued use of the app. The blue gradient is also used in the app background, and uses key colours from the Philips palette. 







Customisation and Modularity

An issue with some current health and fitness apps is their overwhelming bombardment of features, and the automatic or forced application of features that may not apply or appeal to certain users. If users don't smoke, for example, then having a feature to discourage smoking is just taking up space. Philips MyHealth will solve this by employing a modular system similar to Fitbit, which allows the user to move and add/remove certain features from their dashboard. 

Three examples of customised dashboard content: 


Thursday, 12 January 2017

How to avoid it becoming a fad


Many fitness tracking and health monitoring devices or apps (even those not intended as such) often go through a temporary surge in popularity and then usage falls sharply and only the most loyal users remain. 

Although Fitbit is the best-selling fitness device, only 9.5 million out of 19 million registered users use it actively. Pokémon Go did a pretty great job of tricking people into walking more and being more often, but their daily active users, downloads, engagement, and time spent on the app per day are all well off their peaks and on a downward trend.




A rare achievement on an Xbox One console








Long term gamification, similar to what Xbox Live and PSN have achieved, may offer a solution but it's difficult to emulate that on a mobile platform. Points and rewards based competitiveness with friends will encourage people to get their friends on board. 

Access to national and international leaderboards will also mean that users are not dependent on their friends playing or remaining loyal.  Of course the option to have your data displayed would be optional. 

Introduction of elements







 

Transition to Philips colour palette




The blue/green colour palette is extracted directly from Philips' brand guidelines, and creates a relaxing and reliable appearance whilst adhering to the company's identity. 

Introducing Colour into MyHealth


Bright, energetic colours help create a friendly and active appearance. Many similar apps employ a bright and colourful palette, but later revisions and feedback sessions come to the conclusion that it would be more appropriate to abide by the Philips colour palette and potentially offer user customisation. 



Sharp-edged targets give a crisp, utilitarian appearance, but rounded-edge ones give a more friendly and approachable one. Ultimately rounded-edge ones are more appropriate for this app's tone of voice. 



Iconography allows for improved aesthetics and quicker communication. Many digital concepts for apps use absurdly small type - the device itself is small, and often you use it on the move, so type must be as legible and readable as appropriate. Variable colour palettes for different sections and features of the app also add quicker communication. 

Wednesday, 11 January 2017

Wireframing and Initial Design Ideas




Rounded edge navigation elements soften the appearance of the interface, but can be impractical through their additional use of space and the reduction in touch-target size. A good combination of rounded and softened edge targets offers an ideal compromise of aesthetics and usability. 



A rounded edge block-based interface allows for ample space usage, an attractive aesthetic and appealing customisation. The ability to re-order and remove particular blocks would allow users to perfectly curate the app to their own needs. 




A combination of written and iconographic information allows for a hybrid of quickly communicated but in-depth information. The inclusion of graphs is often seen in apps partnered with fitness trackers, such as Fitbit and Jawbone. 



The Gotham family of fonts was chosen for their high x-height and easily distinguishable characters, making them ideal for use on a digital interface. Gotham also has a friendly and approachable appearance, a feature which stood it apart from many typefaces specifically designed for interfaces such as Roboto or San Francisco, which look overly sterile and mean. Philips MyHealth must have a wide audience to be successful, and people want an app which looks friendly and support them over an intimidating and judgmental one. 

Focus Points for MyHealth

Philips are well known and highly successful in their own fields of "Consumer Lifestyle", "Healthcare" and "Lighting", but have sizeable room for an expandable presence in "Consumer Healthcare"

Philips MyHealth would primarily focus on Fitness Encouragement, Biomonitoring and Activity Tracking:

Blood analysis (blood sugar, alcohol intoxication, etc.)
Heart rate monitoring 
Fitness activity 
Sleep tracking 
Tobacco and alcohol consumption 
Dental and vision check ups
Mindfulness encouragement 
Air quality analysis 

Must be mostly automated, very easy and satisfying to use (Sense and Simplicity) 
Intuitive and automatic sync with wearable devices (monetisation through Philips wearables)
Potential for user customisation?
Gamification has worked for many apps e.g. Fitbit, Pokemon Go etc. 
Good design and an adherence to good design principles is key 


Why create the app?

In 2014, there were 8,697 alcohol-related deaths registered in the UK, an age-standardised rate of 14.3 deaths per 100,000 population

In 2016, air pollution caused 40,000 premature deaths in the UK, and 467,000 premature deaths a year in Europe overall.


Every year smoking causes around 96,000 deaths in the UK.

Reports have shown that many people take little or no part in physical activity, with nearly 80% failing to hit government targets

Philips are well known and highly successful in their own fields of "Consumer Lifestyle", "Healthcare" and "Lighting", but have sizeable room for an expandable presence in "Consumer Healthcare".

Tuesday, 10 January 2017

Evaluation

Design for Print 



I took a seemingly paradoxical approach to the Design for Print (Type in Context) brief and created a book dedicated to an analysis of typography in user interfaces. This allowed for an exploration into how typefaces intended for or suited to digital use performed in a printed environment, which led to comparisons and critiques on both sides. Such a close analysis of typefaces for screen-based environments also served as an asset in both the research and development of the Design for Screen brief. Though it would seem odd to create a book based around something exclusively digital, there is no reason why the two formats cannot exist simultaneously and in regards to each other. Indeed, many webpages exist on traditional media and many books exist on digital media, and my target market (graphic designers, design students, UI designers, technology enthusiasts) would likely be interested in both. Instinct led me to try and incorporate digital elements into the printed publication (such as link based navigation and digital iconography), but after experimentation I quickly realised how pointless a process this was - the formats are different for a reason. There were some elements that could transcend the digital to the physical however, such as the use of bright white satin paper (such as phoeniXmotion by G.F Smith) that would create an appearance similar to that of a backlit display. Unfortunately I wasn't able to acquire it for the final construction, and so standard matt is used. In mass production this obviously wouldn't be an issue. The cracked ink is also an issue created by the standard matt paper, and so wouldn't be an issue in mass manufacturing. Perfect binding was assessed as the most suitable method to use and proved effective, with ample strength, good usability and ease of manufacturing. Attaching the cover proved difficult however, perhaps due to multiple mathematical inaccuracies, but was still durable, appropriate and effective. The overall look and feel of the book was inspired by the modernist design manuals of the 50s and 60s, and though that resulted in communication and usability being put first, it also resulted in a somewhat sterile and repetitive appearance. Studio photography of the book would've been effective, but I didn't deem my final construction of a high enough visual quality and lacked the monetary ability to rectify it. 

The book's design and construction is appropriate and effective, with strong justification and a reason to exist, but the double page spreads should have been made more visually striking. 



Design for Screen 



Hyperloop is an emerging transport system which could allow travel up to 760 miles per hour. The system, its infrastructure and its usage will be progressive, exciting, futuristic and convenient, however there is a potential to expand this experience into the pods themselves with the inclusion of a large, retractable touchscreen interface. Inspired by science fiction, modern interface guidelines, and space transportation concepts, the Hyperloop interface is designed with the intent of finding an ideal compromise between the chaotic excitement of sci-fi and the functional convenience of well-designed modern interfaces. The final concepts come relatively close to achieving this, however there are some notable gaps in both aesthetics and functionality that would need ironed out if the concept was to be extended into an actual usage scenario. A strong foundation is provided however, with a basis for the application of on-brand and appropriate colour usage, the suitable application of iconography and the location of on-screen elements, from the top nav bar to the left and right climate control panels. The average Hyperloop commuter was kept in mind throughout the entire project, encouraging re-assessed visual hierarchy and the inclusion of multiple location/time tracking enablers. Globalisation was also accounted for, with numerous automatic and optionally manual measurement/time zone settings. 

My interface concepts provide a starting point based on a deep level of research concerning ergonomics, usability and psychology, and would only need a few more iterations to become a well-rounded and usable system that furthers and enhances the ideally exciting and convenient nature of Hyperloop. 

Monday, 9 January 2017

Interacting with the Hyperloop interface






The final conceptual interfaces developed give insight into how the full system could appear and work. The home screen for the Journey and Music tabs, a variety of settings, toasts, and dialogs have been created to showcase how the rest of the system could be developed from here.  

Emergency Interfaces


Emergency interfaces entail a whole new set of requirements than standard situation interfaces. They must be usable in all forms of light and environment, whether its clad in dust and smoke or drowned in bright light. Type must be large and indicative of the situation's severity, and the large size can help the type be readable even if the screen glass cracks or shatters. A shift in hierarchy is also required, to :

1. What has happened?
2. Where am I/what time is it?
3. What can I do?



In an emergency, critical content must take hierarchy above all else, and retain 100% legibility and readability. The above images show what the Emergency Mode for Hyperloop could look like. 

Saturday, 7 January 2017

Toasts and dialogs

Dialog (BlackBerry 10)





A dialog box is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.




Dialog (early Android)


The toast's proximity to elements gives visual links to help the user understand its origins

Greying out the background elements shifts the visual hierarchy exclusively to the toast; in this case that is essential because the system is unusable without user action

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.

Wednesday, 4 January 2017

Location of interactive elements


For the benefit of finger travel it makes sense to have as many of the interactive elements on a screen as close as possible to the finger starting point, which is usually near the bottom of the screen. This is why the bottom of the screen is an ideal location to house the back and home buttons (and ideally as many elements as possible). 


This is also why there is a rebellion amongst UI designers against the hamburger menu, and a return to bottom-bar based navigation. It avoids hiding content, and avoids the annoying action of having to stretch your finger to the top of the (increasingly bigger) screen every time you want to go somewhere else. 


Side-bar based navigation



Top-bar based navigation


Bottom-bar based navigation

Further investigation must be done to assess which is the most appropriate for the final Hyperloop interface