Brief for The Good Life 2.0

The Goof Life brief therefore asks you to design a product, service, campaign, or system that facilitates positive lifestyle behaviours in daily life, which will help people to: 

• better prevent the onset of lifestyle-related chronic conditions by modifiying lifestyle behaviours like reducing alcohol intake, eating more healthily or increasing physical exercise; or, 
• detect these conditions earlier so that they may be treated and potentially resolved; or, 
• live longer and enjoy a quality of life through more effective or more personalised treatment for those living with lifestyle-related health illnesses 

Overview

A mobile app by Philips which would combine the best features and uses of all the major health apps. Would work alongside third party fitness trackers, smart devices and medical devices. Would inform the user of their heart rate, activity levels, sleep activity, blood analysis etc., let them keep track of their tobacco/alcohol/calorie/fluid intake, and remind them of when to see their dentist/optician health professional. 

Problem

Many health apps exist, but none exist which perform the features of all in a clear, concise, fun and rewarding way. An app could be developed which would allow people to live healthier, more relaxed and active lives in an easy, fun and rewarding manner. 

Objectives/Aims

The ideal experience of using a health app should be fun and active. It should make you feel as if you are achieving something, reaching your goals and living a better life because of it. It should be customisable and relevant to everyone, and a competitive element would encourage people to use it more extensively and encourage their friends to get it too. Everyone likes to win, and people try much harder when it's a possibility. Fitbit have used competitive elements to their great advantage. 

Target Audience

Generally the app would be targeted at users from the ages of 18-40. This aligns well to the Fitbit target audience. 

Deliverables

Comprehensive interface designs for the MyHealth app. 

Supporting Resources/Information

Apple Health 

Google Fit 

Fitbit

Microsoft Health 

Experience Design in Transport

User interfaces form one part of the user experience as a whole. In order to assess what kind of interfaces and designs would be appropriate for Hyperloop, it would be beneficial to observe and analyse current and former interfaces and experiences seen in transport systems of the past. 

Concorde 

Concorde was the second supersonic passenger jet airliner ever to be built (after the Russian Tupolev Tu-144). Though Hyperloop only just achieves the speed of sound at 760 mph (compared to Concorde's 1,354 mph), it will be the first major ground based transport to come close to this speed, so it seems relevant to look at the kind of experience passengers got with Concorde and whether or not it corroborated the experience of the aircraft being cutting-edge, exciting, 'futuristic' and extremely fast and convenient. 

Note: Photos provided by Business Insider 

The narrow, long fuselage and interior reinforces the impression of speed, as does the relatively limited number of seats. Though there are no backseat displays, it must be noted that Concorde was retired in 2003. It could also be argued that supersonic aircraft allow for such speeds that in-flight entertainment isn't as necessary as on traditional long-haul flights, though in modern and emerging systems such as Hyperloop, digital interfaces are less about necessity and more about providing a beginning-to-end positive experience. 

One of the reasons for the downfall of Concorde was its extremely high tickets prices, made so by its extremely high production costs. This meant that only very affluent individuals were able to afford tickets, and so the in-flight experience was adjusted to reflect this. Though it is easier to create the feeling of luxury with a well-designed physical product such as a champagne menu, it's arguable that in the long term a digital equivalent is now more appropriate, especially for a system such as Hyperloop. Digital interfaces allow us to eschew disadvantages such as a propensity for damage, getting lost or dirty, resources used for continuous production etc. and to create a more exciting and futuristic experience. 

In-flight information such as speed and altitude immediately reinforces how convenient and/or advanced the transportation method is. It would be particularly relevant in the case of Hyperloop to include such information and more e.g. GPS location/accurate ETA/live view? 

Economy Class vs Business Class vs First Class

in subsonic aircraft 

In contemporary subsonic flights, the difference in the cost of the ticket doesn't affect the speed of the aircraft, but rather the in-flight experience. It decides whether you get a small screen or a medium one or a large one. Whether it's bordered by white plastic or gold metal. Whether your seat controls are physical, digital or non-existent. Whether you can adjust the tint of your window or not. Whether you sit in a row with many other people or have your own independent cabin. 

Business Class Seat Controls

Economy Class Displays and Seating

Emirates First Class 

Environmental Mood Lighting can have a great impact on passengers' perceptions of the vehicle and the experience of travelling within that system.  

"Different colours are perceived to mean different things. For example, tones of red lead to feelings of arousal while blue tones are often associated with feelings of relaxation. Both of these emotions are pleasant, so therefore, the colours themselves procure positive feelings in environments. The chart below gives perceived meanings of different colours in the United States."

Functional (F): fulfils a need or solves a problem

Sensory-Social (S): conveys attitudes, status, or social approval

Trains

Though trains are often given a bad reception due to high prices, infrastructure issues and their inability to scale with demand, many people enjoy the experience of travelling on them due their best-case scenario being a medium speed, relaxed, self-contained journey. Often, particularly if you're going somewhere new, the act of looking out of the window can be a positive and entertaining experience for a substantial length of time. Some Hyperloop systems may have transparent surfaces that can be looked out of, but most probably wont at this point, and so an alternative user experience must be created. Perhaps a personal interface could create an even better experience than a window. 

General UI observations

Hamburger Icon

The hamburger icon was designed by Norm Cox when we was working for Xerox. With the advent of modern smartphones designers were tasked with trying to fit a quantity of content designed for desktops on the relatively small screen of a phone. In almost all cases the hamburger icon was employed to house a hidden navigation menu, like shown below. 

Though the hamburger menu is very useful for allowing content to fit on smaller screens, it has recently undergone a lot of criticism from UI/UX researchers who argue that another solution must be found that doesn't involve the content being hidden. Facebook's mobile app illustrates their point - when the app was first launched, most of the content was hidden within a hamburger icon to allow for plenty of space for the News Feed, etc. A few years later, however, they brought some of the links hidden in the menu and made them main action buttons on the app, and found that the percentage of users interacting with those functions increased considerably. 

You could argue that a good use of the hamburger icon is to house low priority functions within a mobile website or app. A balance between space and interaction should be found. The use of a hamburger icon on a desktop site would appear wholly pointless. 

Accessibility 

Legislation has been passed in many countries that makes it the law for all websites to be accessible to everyone, regardless of any visual or audio impairments. Websites tend to overcome such limitations by including compatibility with systems and software such as screenreaders, high-contrast modes, and magnifiers. 

Breadcrumbs

Breadcrumbs, or a breadcrumb trail, are a feature used in user interfaces to show visual hierarchy and to aid navigation. They're usually found on a website and appear like the example below. 

Screen resolutions 

Designs intended for screens originally would've been designed with a pixel density of 72ppi. With the advent of Apple's Retina displays, and the following industry shift towards high-resolution and ultra-high-resolution displays, digital content is now displayed on screens upward of 300ppi. Digital displays are now as crisp as the printed page, and so content for the digital space must abide by this. The original concern for accessing high-resolution content on the internet was poor internet speeds and the impact they would have on page loading times, but major improvements in broadband speed have been seen in recent years to massively mitigate this issue and accompany the shift to a high-resolution digital world. 

Responsiveness 

Instead of creating two different websites for desktop computers and mobile devices, UI designers and web developers are now opting to create responsive websites. Responsive websites infinitely and automatically scale content according the device which is being used to access it. 

Behance on Desktop

Behance on Vertical Tablet

Behance on Smartphone

App vs Responsiveness

Generally you could argue that unless the software, product or service depends on accessing hardware that would only be accessible through the creation of an app, then a responsive website is a more appropriate product to develop. It ensures that any device with web capability can access it regardless of the OS or platform used, and it saves time, resources and money that would otherwise be spent on creating multiple applications. 

User retention and performance 

50% of web users on average will exit a site if it hasn't loaded in 2.6 seconds. This demonstrates how important well-optimised and fast-loading sites are.

12-column Grid 

The use of a 12-column grid seems totally absurd when you consider that at base level, the vast majority of web pages seem to be 4 or less columns. See Twitter below for reference:

At base level, Twitter employs a 3-column grid

BBC News would appear to use a 4-column grid

However if you were to overlay a 12-column grid over these sites, and the vast majority of other major sites too, you would find that a 12-column grid fits perfectly over the top. This abides by the Modernist print rules. 

Full Brief for Design for Screen

Overview

Hyperloop is an ultra-high speed transportation concept with numerous start-ups working separately on it. Though the concept of pneumatic tube transportation systems have existed for a number of decades, a version using modern technology and a dedicated business plan was developed by Elon Musk in 2012. After writing a white paper outlining the potential technological and business strategies, he then released it for other companies to actually create it. SpaceX, Musk’s space transportation company, owns the trademark Hyperloop. The system would allow you to travel at speeds of up to 760mph, meaning you could travel from Los Angeles to San Francisco in around half an hour. Though this is drastically faster than other ground-based transport systems, it still involves people being stationary for periods of time ranging from half an hour to upwards of an hour. Though specific details are still being developed, it seems likely that passengers will not be able to use devices such as their own laptop within the pods. This creates an opportunity for a comprehensive digital experience within the pods.

Problem
Hyperloop has to be an exciting, comfortable and calming experience. If passengers are to embark the capsule, be strapped in and have no access to their own personal technology or items with no view of the outside, then the experience then becomes sterile, odd and inconvenient. The entire, beginning-to-end experience must be exciting, comfortable and calming. 

Objectives/Aims

The ideal experience of using Hyperloop should be extremely fast and easy, but also calming, reliable and even somewhat friendly. The interface should replicate this. There are a number of features that the system could have, such as live travel times, speed, information on the destination, a web browser, weather etc. A balance must be found between making the interface easy to use but new, exciting and engaging. 

Target Audience

Due to its nature, the interface would have a very broad audience of people aged 18-40. Most people who use the system would have extensive pre-existing  experience with touchscreen technology, so using it would be intuitive and obvious to them.

Deliverables

A selection of concept interface design visuals for the Hyperloop Pod Interfaces.

Supporting Resources/Information

Interface typography studies

Colour theory

Colour psychology

Major OS interfaces

Current public transport interfaces e.g. trains, planes

Car interfaces 
Plane back-of-seat screens
User experience in vehicles, specifically planes and the difference in class
User experience in trains
Historic transport experience e.g. original planes, supersonic planes (Concorde)

Research for The Good Life 2.0

iOS Health app

Though all iPhones are pre-loaded with the Health app, very few people actually use it. It's a visually compelling app, and it's relatively easy to use so it would appear that it's the need for active data input that puts people off using it. The app is also only going to appeal to those who are actively trying to healthy due to the lack of any competitive or rewards-based features. More positively, however, Health has a very broad set of features ranging from a pedometer to calorie intake to sexual health. 

Google Fit

Google Fit, Android's iteration of Health on iOS, is much the same as Health just with less features. Like with Health, users tend to just use it for automatic features like the pedometer or distance tracker. In order to be appealing, the app would ideally do almost everything autonomously.  

Microsoft Health

Microsoft's offering is much the same as Google Fit and Health on iOS, just with less features and a Metro UI interface. All three standard system apps fulfil some features in a relatively successful manner, but the features, data input and visuals are all different. 

Fitbit Desktop

Fitbit are the most popular wearable fitness device company, and they have used gamification and 'hooks' to compel their users to take as many steps and walk up as many flights of stairs as possible. By introducing a competitive element, particularly with people you know personally, they can play on the natural urge to win. 

All of these apps provide a set of unique or overlapping features, but no app provides all features in a perfect package, and there is a lack of deep health analysis. Philips has extensive experience in biomonitoring, and so are well placed to combine the best experiences of all the existing solutions and add more. 

Responsive Brief: RSA The Good Life 2.0

http://sda.thersa.org/en/challenge/rsa-student-design-awards-2017/phase/rsa-student-design-awards-2017/track/the-good-life-2-0-en

An app focused on personal health, with a rewards/competition-based element to encourage wider use, would allow Philips to reach out to the largest possible audience without additional physical products having to be sold/manufactured. 

Full Brief:

There are a number of behavioural risk factors that contribute to chronic diseases, including poor diets high in salt and sugar, low levels of physical fitness and long periods of inactivity, smoking, and alcohol consumption. 

This brief therefore asks you to design a product, service, campaign, or system that facilitates positive lifestyle behaviours in daily life, which will help people to: 

• better prevent the onset of lifestyle-related chronic conditions by modifying lifestyle behaviours like reducing alcohol intake, eating more healthily or increasing physical exercise; or, 
• detect these conditions earlier so that they may be treated and potentially resolved; or, 
• live longer and enjoy a quality of life through more effective or more personalised treatment for those living with lifestyle-related health illnesses 

Your solution should have mainstream appeal and something that could become part of popular culture. When designing your solution, please bear in mind the incentives for people to use it or buy it aside from simply wanting to improve their health. 

Behavioural economists have shown that awareness of the right thing to do doesn’t necessarily convert into changed behaviour; for example, a survey showed 85% of people know we should eat five portions of fruit and vegetables a day, but only 47% reported eating five or more portions of fruit and vegetables on the day before. As such, you are encouraged to think about how we can positively encourage lifestyle behaviour changes through gamification and other ‘hooks’. 

It is important to remember that our lifestyles and behaviours are profoundly influenced by what our friends are doing, the way the environment around us is designed and options that are more prominent, cheap or convenient. Equally, behaviour change solutions that are imposed on people are often less popular and successful than those which the user finds genuinely appealing and willingly choses. 

As part of your response, you are also asked to think about the commercial realities and business value of your proposal – successful submissions will not only present a compelling design solution but also business opportunities with consideration for revenue generation and new business models. 

Things to consider:

1. Social and environmental benefit – how does your design benefit society and/or the environment? 
2. Research and insights – how did you investigate this issue? What were your key insights? 
3. Design thinking – how did your research and insights inform your solution? How did you develop, test, iterate and refine your concept? Demonstrate the journey you’ve been through to the end result 
4. Commercial awareness – does your journey make sense from a financial point of view? What is the competitive environment your solution would sit within? 
5. Execution – we are looking for a design that is pleasing and looks and feels well-resolved. 
6. Magic – we are looking for a bit of ‘magic’ – a surprising or lateral design solution that delights 

Examples of automotive user interfaces

Most car interfaces have to fit within a relatively small display, so the content can often feel cramped. Often they use icons by themselves to help with saving space, but this can leave the exact use of the buttons unknown or ambiguous. Car interfaces still end up feeling cluttered and unintuitive in most cases. 

Apple's CarPlay system offers a good solution to cramped displays. It simulates an iOS-like interface which can work effectively on a screen as small as 4-inches, and it also has the advantage of being immediately familiar to anyone who has used an iDevice.

The sheer quantity of boxes and gradients here is jarring and difficult to interpret quickly. The user doesn't know where to look first, and there isn't a sufficient contrast between the white text and the light grey box.

The concept of utilising a display in the steering wheel seems innovative since it would require only a very slight glance downwards to get up to speed on what you need to know, instead of having to divert your attention to the right or to the main dashboard. 

Android Auto, the Android version of CarPlay

The use of illustration in user interfaces

Illustrations can be used to great effect in user interfaces. They can add visually appealing emphasis to subject matter that traditionally wouldn't be interesting, and can help summarise information in an illustrative rather than a written form. Their suitability is arguably limited because an over-use could be intrusive and unnecessary, but when they're suitable they help to create a positive, calming, exciting and overall more interesting experience. 

Examples of good and bad website interfaces

Imboldn

http://www.imboldn.com/

This is far from the worst example, but there's no reason for the top navigation bar to be so big. It creates a very annoying, inefficient and claustrophobic experience, particularly when it's obscuring such beautiful content. The negative experience is exacerbated on this site by the significantly low amount of content displayed on one page, meaning you have to click through dozens of pages to see a considerable amount. 

It'd make a lot more sense to have an infinitely-scrolling website similar to what Pinterest does (see below) in order to keep the user's attention and interest without them getting bored of interaction-fatigue due to the need to click 'next page' so much. 

www.pinterest.com - a good example of infinite scrolling

Reddit

Reddit is an outlier in the world of massively popular social networks. It has a dated, cluttered, and difficult to use interface which is arguably by design in order to reflect the sheer mass of information on the site. Whether or not that was the purpose, the fact remains: Reddit is difficult to use, and for that reason it limits its user base.

Apple

Since 2000, the actual experience of using the Apple website has remained unchanged. This is impressive. The interface visuals have adapted to the times and been modernised over the years, but the way in which you actually interact with the site is basically the same, which is a huge nod to how successful an experience it is. The same cannot be said for almost any other site, including Apple's main competitor, Microsoft: 

Microsoft website, 2010

Microsoft website, 2016

Tesla

A ubiquitous trend in contemporary interface design is the use of hero images, particularly as a banner which may or may not scroll. Sometimes the entire home page can be used to house a hero image. Apple arguably kicked off the trend, but it can be seen on almost any tech/product site now. Tesla makes particularly good use of them, as seen below. 

www.tesla.com

A hero image is present on almost every single page on the Tesla site. They don't get in the way, they only enhance and bring forward the reason the page is there. Everything is made exciting; something as ostensibly dull as a home battery system is made to look sophisticated, trendy and desirable. People who see that image want that product. Broadly, hero images can help to epitomise what a product stands for; what it's all about, why it exists, and the best-case use of it. They highlight the very best features of the design, and often present the product in a way or place where users can imagine themselves there in an entirely positive scenario. Usually a very brief description accompanies the image along with one or more action buttons. 

BBC News

The BBC News site is a really great example of visual hierarchy, and how a huge amount of information can be presented in an effective and attractive way. A grid system is utilised to display stories based on their significance, and as the stories become less significant, so does the way in which they are displayed. On an average news day you have one main news story with a large photo and the largest type on the page. You then have secondary news items with a smaller photo and smaller type, and then the lowest-priority news items are text only. 

In very major news events, a banner which extends the full width of the page is used. Sub-headers and sub-stories related to the main news is also present underneath, reinforcing how important an issue it is and making sure people are presented with enough information to remain up-to-date. 

In events which are happening live, such as the Olympics or political elections, a full-width banner is also used, but often they're accompanied by live infographics and data charts which display potentially complex information in a simple and bold manner.