BloodBud Research Book by sarahcommansdesign

BloodBud Research Book An exploration of how user interface design could aid life for those affected by Type 1 Diabetes Written and Designed by Sarah Commans 1

University for the Creative Arts

Contents 01 Introduction 01.01 About the writer and designer 01.02 About the project 01.03 The rationale behind the project

8 10 12

02 User Interface & Experience Design 02.01 What is UI and UX design? 02.02 The history of UI design 02.03 Good UI design practices 02.04 User interface methodologies 02.05 User interface designer interview

7 16 18 24 34 40

03 Type 1 Diabetes 03.01 Type 1 Diabetes 03.02 Professional interviews 03.03 Patient and family interviews 03.04 Conclusion of user research 03.05 Apps in healthcare

48 50 56 62 64

04 Research Case Studies 04.01 Introduction to case studies 04.02 iOs interface 04.03 Healthcare apps 04.04 Successful user interface and experience

72 74 82 94

05 Literary Review 05.01 Literary review

7 108

06 Personal Reflections & Conclusions 06.01 How the project has improved the designer

7 112

07 Project Proposal 07.01 Concept & aim 07.02 Audience 07.03 Design direction

116 118 120

08 Bibliography & Illustrations 08.01 Bibliography & illustrations

126

Introduction

â&#x20AC;&#x153; The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease.â&#x20AC;? Massimo Vignelli 5

01.01

About the writer and designer

Personal aspirations and a passion for designing within the healthcare sector are the sources of fuel for this final outcome.

Back in 2016, I wrote a personal manifesto for my aspirations as a professional designer. This manifesto stands strong 2 years on, and is in fact the fuel for the project I undertake now. “ Constantly learning stimulates me to be creative. I don’t relish the idea of visually communicating something if the process doesn’t require thoroughly learning something complex. One of my most ascertainable aspirations is to be a designer working alongside scientists to visually and clearly present complex information.”

“ Identifying as a theory-hungry pragmatist, I am driven to achieve the goals I set for myself and many of these goals are derived from passion. I am passionate about understanding the how and why of a subject and find it’s these answers that liberate me creatively throughout my design process. It’s therefore metaphorically in my DNA to ask questions and comprehend something before curiosity drives me to unravel my next area of intrigue. As well as needing to be theoretically quenched, it is also necessary for me to be visually stimulated before creating successful outcomes. I gather visual stimulants from a variety of sources since my fascination spans a broad spectrum; these sources range from the fashion choices made by others in order to communicate, to a complementary colour palette found in landscapes. Living organisms supply me with an abundance of inspiration since the processes within them are so complex, yet logical. I can also associate visuals with the information I process and my sources of inspiration; I developed a photographic memory over the past few years and understand this is a valuable skill to a designer communicating complex information visually. Being a logical person, I can attest to logic aiding understanding. I appreciate a structured editorial layout or an infographic which navigates a reader effortlessly through information. It is through logical systems that I intend to visualise knowledge, but being a character so fascinated by the diversity of life, I won’t limit myself to one disciplinary area. Instead, the most vital environment to place myself in as a designer is one that is constantly evolving; forcing me to untangle new information every day.” - Sarah Commans ‘Personal Manifesto. 2016

Self-portrait illustration

01.02

This research book explores the treatment and management of Type 1 Diabetes, as well as the use of user interface design to resolve any current issues of those affected by the disease. About the project

Back in 2003, my older brother was diagnosed with Type 1 Diabetes. He was 9 years old. This was a disease completely new to my family, and although I was too young to play any real part in his adjustment to life with the disease, I could recognise that having to inject yourself 3 times a day, as well as consistently monitor your blood sugars, was quite the inconvenience for a 9 year old. Not to mention the pain that came with the new inability to eat sugar and sweets whenever desired. Adjusting to life with Type 1 Diabetes can be really tough.

Insulin crystals

The biological processes, nature and treatment/management of this disease is explored in a later chapter. For now, it is relevant to understand that the disease is currently incurable. Itâ&#x20AC;&#x2122;s treated with insulin injections to help the body do what it is no longer able to do by itself; to regulate the blood glucose levels after eating. Maintaining these levels within a healthy range is absolutely vital to the survival of every human being. As previously stated, the adjustment to counting carbs, regularly visiting the clinic to keep on top of other health complications that accompany the disease, and injecting yourself 3 times a day is really tough. It is within this type of situation that I envision myself using my discipline to help relieve any stresses on patients and their families; exactly as my manifesto argued. Throughout the study of Graphic Communication, I have learned that my strongest talents lie within digital design. I can also understand complex academia to help inform good design decisions to produce functional outcomes on screen, not just pretty ones. One of the most enjoyable projects for me has been conceptualising and designing an iPad application for the primary carers and family members of those suffering with dementia. The user testing revealed that the experience was pleasant and the information was clear, as well as genuinely useful. It is for this reason, and my personal experience of Type 1 Diabetes, that this project will resolve issues for those affected through digital user interface design.

Douglas Engelbart, 1984

The rationale behind the project

01.03

The project stands or falls on the ability to harness good user interface design, to improve the lives of those affected by Diabetes.

It will be revealed in later chapters that there are currently many â&#x20AC;&#x2DC;pain pointsâ&#x20AC;&#x2122; for those affected by Type 1 Diabetes. Pain points are identified by professional UI/UX designers, and they refer to current weaknesses in a process that the user goes through. Specific to this project, that process is the diagnosis, education and management of this disease in everyday life. To become the type of designer that I aspire to be, it is important to ask if and how my strengths could be used to counteract a weakness. These aforementioned strengths being digital design and understanding complex information or processes. My most successful outcomes flow from my passion to aid those with health complications, and my passion to understand something complicated in order to resolve an issue with design. User interface design is my area of highest interest. It is the interrogation of the history of this discipline, its current use by experts and professionals, as well as its ability to resolve any issues relating to the disease both now or in the future, that is documented in the remainder of this research book.

User Interface & Experience Design

“ The intrinsic rate of human performance is exponential.”

Engelbart’s Law 13

02.01

What is UI and UX design?

The Industrial Revolution

User interface design exists to make the use of a piece of hardware a much more ergonomic, straightforward and simply better experience for the user. Computer interfaces have evolved over the past 40 years to get to where they are today. This evolution has reasoning, and the development of technology is firmly rooted in the Industrial Revolution. Each succession of user interface has responded to or improved upon the interfaces that came before it. For this reason, we can learn better UI design by looking at the history of it, how key designers have improved upon the interfaces that came before them. As well as look to improve UI design ourselves as designers, by finding the weaknesses in current approaches in the fields we work within.

Every piece of hardware has a user interface to improve the user’s experience. The Industrial Revolution indirectly set UI and UX into motion centuries ago. “ User experience design is the application of research

and design methods applied during the design of a userinteractive experience.”

Peter Beare and Gavin Allanwood

“ User interface design is the intentional composition

of elements on a device which users then interact with. The design should intend to ease usability and therefore improve the user experience.”

Ash Hopkins, UI designer

02.02

Technological developments & the history of graphical user interface design has determined the style of interaction that we see today. 1760-1869

The history of UI design

1870-1914 1911

1945-1959 1955

1965-69

1973

1981-1983

1984

First Industrial Revolution, mass production systems have been developed throughout Britain, western Europe and northeast America. Railroads, canals and roads opened a more connected society and development of fast communication. Railroad gave way to telegraph and then telephone. Second Industrial Revolution led to the rise of steels and oil in the US, as well as more labour power in factories. Technical skills became essential in the workplace. Frederick Taylor developed ideas called ‘taylorism’. These intended to streamline operations in factories and increase worker productivity. This led to an appreciation and hunger for sophisticated technology to assist the worker and ensure their conditions and labour hours were not unethical. During WW2 some women, who were strong mathematicians, helped with war efforts and their expertise was used to develop computer technology. Henry Dreyfuss, an American industrial designer and author of ‘designing for people’, published his ideas on the relationship between humans and machines. He argued that fitting the machine to the human was more appropriate than the other way round. This work led to a universal design movement, the human scale project and new practitioners who were focusing more on ergonomic design. This is also when practitioners started describing the space between humans and machines as ‘interface’. Dreyfuss’ work is now known as interaction design. The first touchscreen was introduced by E.A Johnson in Touch Display. Touchscreen was pivotal as it has defined the way humans interact with computer screens. The capacitive screens, which used electrical charges in human skin to close an electric circuit, were used up until the 1990’s when resistive touchscreen became more commonly used. The Xerox Alto was the first graphical user interface on a desktop computer which was not intended for commercial use. It changed the common understanding of computers because users could print documents exactly as the screen showed, it had storage and access to email. The Xerox Alto kick-started a race for companies and developers to see who could refine the computer into the most fast, small and easiest to use machine. The first fully integrated desktop computers were the Xerox Star (81) and the Apple Lisa Office System 1 (83). The next 10 years of graphical user interfaces incorporated colour, high resolution and better processing power. However the design remained relatively consistent, much like the Windows 1.0, 2.0 and 3.0 software. Macintosh OS 1.0 system released. IBM had gotten most of the attention in the computer industry up until this point. The system introduced the iconic ‘Hello’ screen, and their slogan ‘For The Rest Of Us’ made the general public trust the reliable, non-intimidating products that apple was producing.

Xerox Alto - first graphical user interface

1995

1998

2010 17

Don Norman, a ‘user-experience architect’ worked at apple and stressed the need for human-centred design. Again this renewed the idea of design fitting with human capabilities and needs amongst creators, rather than the other way round. The first iMac was released. It’s futuristic and simple design accentuated their promise that they had ‘nothing to hide’ and this furthered trust between the company and their customers. The early camera-phone, the J-phone became very popular because creators and consumers were keen to use smart products in smaller packages. It had a camera and allowed for video chats, games and portable internet. Retina display introduced. This display could fit twice the amount of pixels into an inch which resulted in much more crisp visuals. Consumers then began to expect this quality in following products. Now virtual reality is being explored to continue to push limits.

The history of UI design Henry Dreyfuss ‘Designing for people’

Apple Macintosh 128 Promotional Poster (Top) & Modern Apple Products (Bottom)

The history of UI design

Where are we with graphical user interfaces today?

All our steps in creating or absorbing materials of the record proceed through one of the senses; the tactile when we touch keys, the oral when we speak or listen, the visual when we read. Is it not possible that some day the path may be established more directly? Bushâ&#x20AC;&#x2122;s â&#x20AC;&#x2DC;As We May Thinkâ&#x20AC;&#x2122;

Up until this day in history, the design of graphical user interfaces have been refined to ensure that the final product works well with the demands and physical requirements of the human body and mind. Leading creators have competed to create the most powerful devices with the most pleasant, reliable, consistent and trustworthy user experiences, in the smallest possible packages. Today, screens and processors have ultimately reached their physical limit. Bush believed that one day the path between human and the material could be accessed more directly than through the senses. With this in mind, designers and creators have begun to explore the capabilities of virtual screen display technologies, augmented reality and touch-less tech to continue moving user experience and user interface design forwards.

â&#x20AC;&#x2DC; Pokemon Goâ&#x20AC;&#x2122; uses augmented reality, bringing the pokemon to life

02.03

When designing a user interface, keep the mind in mind. In the words of Gavin Allanwood and Peter Beare, authors of the book ‘Basics Interactive Design: User Experience Design’, it’s crucial for a user-interactive design to be a good experience for the user, otherwise it will eventually be replaced by a better design. This natural process of succession has been demonstrated throughout history as researchers, designers and creators dedicated their work to improving the quality of user experience for the designs already in existence.

Good UI design practices

Before undertaking a user interface design project, it is crucial to understand what current UI designers now agree to be good quality user interface design. As well as how they go about ensuring a high-quality user experience. This section will look at authors Gavin Allanwood and Peter Beare, alongside the research of designer and web-developer Rajesh Lal and author and current Assistant Professor of Computer Science, Jeff Johnson.

Brain cells

Good UI design practices Typographic styles can convey different emotions. It has to be used thoughtfully to 24convey the desired tone to an audience in its appropriate context.

User Experience Design Gavin Allanwood & Peter Beare

User experience designers need to understand the behaviour of the people who will be using their design, as well as produce work which works well with existing technology and systems. It is crucial to know the influences on their users to understand and predict their decisions. Instead of purely just asking what users want, it is also important to observe behaviour and experience. Then the job is to improve their experience by using design knowledge and skill. User Research

As designers we have to ask who will use the final product, what the final product will do and from this we can identify the aims and system requirements. User research methods include surveys, interviews, field studies and journal entries from users. In a coming chapter, this research book documents some of the most widely accepted and effective methodologies for collating such vital information.

User Expectation

The user should be encouraged to recognise design elements and pieces of information, instead of having to recollect it. Visual or audible feedback is also expected to acknowledge a user has interacted with the interface and there will be an output. Users expect similar visual elements to behave in similar ways. It is therefore important to stylistically treat these elements, for example buttons, consistently. Users expect to gain something from the application. It is worthwhile to consider integrating some aspects that reward the audience. These could be physical awards that are sent when goals have been reached, or alternatively progress trackers affirm a desired positive impact.

Good UI/UX Design

The term ‘semantic design’ refers to producing an architectural structure of information on screen which makes the most sense to your audience. It is the relationship between the signs and the things that they’re referring to; their meaning. It is important to consider what symbols and words connote to the specific audience for the product and in their particular environment or context. These meanings can differ based on the experiences of the user. Other effective methods of ensuring that the final outcome will be well designed and effective for the user include:

- Capturing ideas and solving problems through noting and brainstorming on paper. - Using flowcharts, diagrams and storyboards to organise and create relationships between mass ideas and user research. This is the point where the ‘architecture’ of information is formed and early issues can be identified and then removed. - Layout, being the deliberate layout of type, images, colours and imagery on a page, has to make the information easier to understand. It needs to direct the user logically through the content and ensure that nothing vital is overlooked. The effectiveness of layout can be done through eye-tracking and interviewing for both quantitative and qualitative feedback. - Type can create emotional responses and users are aware of different categories that typefaces fall into. The different styles connote different emotions, such as excited, fun, professional etc. - Type testing can be important in making sure the design isn’t subconsciously conveying the incorrect emotions for its context. - Images assist memory and recognition. They should be used where possible to convey information but it again has to be considered if there will be less-obvious, emotional impact on the user.

Design Essentials Rajesh Lal

Good UI design practices

Rajesh Lal, a successful designer and web-developer, has produced writings on the best practices and most desired user experiences when producing a mobile app. More specifically, he has researched how to design for a lifestyle app, which enriches the daily life of the users by providing them with useful information in a simple, bitesize and very accessible format. He also explores the concept of natural user interface. In his words, this is an evolution of the graphical user interface and it harnesses natural gestures of the user based on what they would do with a physical object. The interaction between human and the natural user interface is implemented through touch, motion and speech. As these gestures come instinctively to the audience, the user experience is enhanced. The use of the application requires even less thought. With this, he has clearly identified the best ways to create a desired user experience; such information feeds this project with vital knowledge.

Natural gesture - Fingerprint TouchiD

Mobile Phone App

A mobile phone app comes either pre-loaded on the device or can be downloaded from an app distributor such as the Apple App Store.

Best Practice

The best practice for app design, according to designer and webdeveloper Rajesh Lal, is as follows: Focus on single and clear functionality Use short, memorable titles, succinct descriptions and highquality icons to convey information Utilize the existing and built-in device potential for better usability Customise features where appropriate for the users Have default settings where possible and allow storage for user preferences Use plenty of white space in the screen layout to avoid cluttering Use colour sparingly and consistently Use physical feedback, e.g. vibrations, only where it will add value to the userâ&#x20AC;&#x2122;s experience Integrate gestures of natural behaviour around the physical movements, in order to engage with the interface Keep the interface real-time and responsive to avoid confusion

User Experience

The users experience needs to include a few aspects to ensure it is of a high-quality. Ultimately, people donâ&#x20AC;&#x2122;t notice an interface when it encourages a seamless user experience. They do however notice when the interface leads to a jarring, unnatural experience. In a mobile app, the experience should really consist of: Fun, simplicity and intuitive Being able to customise the design Identifying the app through a specialised interface Simple interactions and memorable visuals for the elements that occur more frequently Working without internet access Being given clear feedback in app Being able to share and interact with other users

Designing with the Mind in Mind Jeff Johnson

Jeff Johnson is currently an Assistant Professor of Computer Science but has previously worked as a user interface designer, implementer, manager, usability tester, and researcher. He has written extensively on how to design for the human mind, producing interfaces that conform to the mind’s strengths and weaknesses. He has claimed that the human mind, limited to the one that regularly uses computers, websites and smart-phones, has a pre-set frame for how the interface should look and perform. They therefore tend to interact with the interface without properly thinking and looking. It’s important to understand how the human mind and vision works, in relation to user interfaces, in order to design well.

Good UI design practices

Gestalt Theory This is a theory that describes visual perception. It doesn’t attempt to explain why it happens. This is sufficient in guiding design decisions for this particular user interface project.

Proximity

This is the relative distance between objects. In a display, the user can identify groups and subgroups based on the distance between elements. Those that are closer together will be put into categories. Therefore borders aren’t always necessary, although they can help with distinguishing sections of information on screen.

Similarity

Objects that are similar in style, colour, shape and size will be perceived as a group.

Continuity

Our visual perception is biased and for this reason is perceives continuous forms rather than segments that may actually be disconnected. It automatically closes open forms to see a whole object. Sometimes we can even perceive a blank area as a whole object. It’s possible to create a ‘stack’ effect of groups using this.

Symmetry

To reduce complexity on screen, human vision organises visuals into symmetrical layouts.

Grounds

The mind can separate the visual field into a foreground and background. Our primary attention holds the elements in the foreground. Images and colours in the background, a.k.a in the spaces that aren’t instantly acknowledged based on placement, contrast and size, can influence moods and therefore how the information is interpreted by the user. It’s crucial to acknowledge how the elements in the foreground and background impact the user. This impact needs to align with the desired effect. Information boxes work based on this theory. They pop up temporarily to hold a user’s primary attention for the duration that they’re on screen. They contain important information and this is why they are used the way that they are so commonly in UI design.

Common Fate

Objects on screen that move together are also perceived as groups.

Gestalt ‘Continuity’ principle

Good UI design practices

Gestalt ‘Proximity’ & ‘Similarity’ principles

With the Gestalt principles in mind, as well as his more general research into the humans perception and mind, Johnson has responded with recommended practice for designing a display. A designer should consider how the screen is perceived, and the relationship between elements, to ensure that all effects on the user are intended. Recommended Design Practice Structure

The more structured the presentation of the information, the quicker and easier the user can scan the information and comprehend it. This intertwines with the hierarchy of the information. To ensure that the hierarchy is correct, the design should: - Break information into distinct sections and subsections through headings and subheading, distance between information and visual consistency - Label each section prominently to avoid confusion - Higher level sections should be presented more strongly than those of the lower level

Colour

Reading and Understanding -

Limited Attention

The ease of view of elements on screen is affected by a range of different factors. Human vision is wired to detect contrasts most easily. Some people however have colour blindness and the sensitivity to certain hues and contrast is reduced; for most, this is particularly true for distinguishing between reds and greens. Human vision is also much less sensitive to blues and violets when compared to other colours. 3 things that commonly affect colour detection is paleness, the size of the patch of colour and whether there is separation between two colours. External factors that are much harder to control include variation in displays, grayscale displays, angles and lighting in the room. Good design should: Distinguish colours by saturation as well as hue Use bold, distinctive colours Avoid colour pairs that people with colour blindness can’t detect e.g. reds and greens Don’t rely on colour alone to highlight an object Don’t place opponent colours next to each other The setting of type, as well as the language used, affects the reader. It’s important to understand how certain decisions could inhibit understanding, such as: Uncommon or unfamiliar vocab Difficult typefaces or text all in capital letters Tiny fonts Text on noisy backgrounds Information repetition Centered text. In the West the audience scan from left to right and so when text is centred, each of the starting points are in a different horizontal position. This can cause confusion Humans notice things more easily when they’re linked to their goal. Their attention is limited and so providing a familiar and short path to achieve their goal is integral to good design. It’s important to remember that recognition is easy, but recalling information is harder. Seeing and choosing is easier than typing in information that has had to be recalled. With the limited attention span in mind, it’s effective to: Use pictures to convey functions and information if possible Tell users exactly and explicitly what they want to know Acknowledge user actions immediately Animate movement smoothly and clearly Let users go at their own pace Allow users to cancel lengthy operations

02.04

User interface methodologies

User-Centred Research Methodologies User centred research is vital when aiming to design a positive user experience between audience and technology. There is no one way of carrying out usercentred research and integrating the data into the design decisions. However, there are suggested steps to make best use of the information that can be gathered from the audience. There are also a few more commonly used methodologies for collecting data. These techniques are fast and cheap and therefore are appropriate for this particular project. There are ways of transferring users needs into specifications for building technological solutions. This is turn will add emotional impact to a product. Users are not often experts in apps and aren’t interested in how it works, but just want them to be useful. User data is used to identify ‘pain points’ to create personas and identify any possible solutions. Aims of this research: - To understand the value of user centred research to aid UI/UX design within the professional context. - To research the different forms of usercentred design and highlight which is most appropriate for this project. - To understand how to conduct the most effective interviews in hopes of gaining insightful quantitative and qualitative data.

01 - Collect Data Firstly, collect and analyse user data. The best way to collect data is in the place where the users do the tasks that I care about. Then use this data to extract pain points - the things that cause users problems. It is then assured that solutions can be designed that will help users to perform tasks better. 02 - Create Personas It is then possible to create personas from this user research. These are imaginary biographies but they need to be realistic and detailed. Try to concentrate many pieces of user data into key, focused descriptions of a primary audience. This is a way of making the user concrete in your mind, and develop common user attributes to make the final piece of UI design more consistent. 03 - Ideation This is the stage at which ideation techniques can be used. It is best for the designer to be freely creative without constraints. If a designer thinks more broadly about a problem, the solution is more likely to be beneficial to users. Make sure to get input from fellow designers and/or a team and allow them to propose new ideas. 04 - Storyboarding/Wire-framing This is the place to begin storyboarding and wire-framing; it’s an efficient way to put guide rails back in place and ensure the final solution design is build-able and desirable. A good way to begin is by describing an ideal future - where users can get tasks done without issue - and start to consider the mechanism through which they would do this. It then becomes possible to build a physical solution through software . Storyboards are visualising these solutions, and are a great way to communicate the ideas to peers to gain vital feedback. Wire-frames allow you to take this one step further and test out interactions before building them. 05 - Paper Prototype It is also beneficial to paper-prototype. This can come before digitally storyboarding or wire-framing. It is a quick and modifiable way to test UI designs. A key aspect to be tested is the flow of information, to ensure the participants will understand. This can be easily tested by peers. At this stage, you will also get more honest feedback because it doesn’t look like a finalised design.

The beginning of good UI design looks like pencil and paper. The ideas, storyboards and paper wireframes can all be created by hand, with solutions in response to user research.

User testing a product

User interface methodologies

There are multiple data types and these are collected and integrated into the final designed outcome through various methodologies.

There are a few different categories of data. The category that the collected data falls into depends on the way in which you have collected it, as well as the type of data you have extracted. The two most commonly recognised categories are quantitative and qualitative. Quantitative Quantitative research produces data which can be represented numerically, e.g. the amount of clicks in a certain area. It serves as objective and cannot be opinionated or biased. It also captures trends of what happening when the research involves large amounts of data. Types of quantitative research includes surveys, click tracking and eye tracking. Qualitative This is data that can’t be expressed by numbers, e.g. emotional responses or first impressions. It usually uncovers the ‘why’ behind the numerical trends. This type of research is commonly done on a smaller scale and is heard directly from people, since it is good to encourage users to express their thoughts directly. Types of qualitative research includes usability tests, focus groups and interviews. Other terms for data types: Behavioural vs Attitudinal Moderated vs Unmoderated Before collecting the data, a designer needs to determine the most appropriate methodology and identify the aims of that piece of user research.

Usability Tests Observe tasks and find where the user runs into trouble. Ask them follow up questions to understand their thoughts. This method can help to choose between any design alternatives. Interviewing This is a widely used technique to gain qualitative data. Ask open ended questions about needs, goals and motivations and where possible, do the interview in a place where the user would be interacting with the app to observe natural behaviour. This is called an ethnographic interview, where a designer is able to observe users in the field and not the lab. They can also learn about different types of users, behaviours and get their outlook on any specific items. This is especially helpful to build personas. Card Sorts This is a quantitative method helped to determine categorisation and hierarchy of the information architecture. An open card sort uses an audience to categorise elements into groupings that make sense and then label them. A closed card sort is used to develop navigation and hierarchy by asking the audience to place elements within the categories. A good technique is to use sticky notes and tables so that elements can be quickly moved. Eye Tracking This is equipment that captures and analyses where a person is looking on a piece of UI design. Click tracking is similar but captures and analyses clicking and scrolling behaviours of users. This methodology is used to get a true understanding of what actions users are taking without having to rely on memory. However, the results cannot tell you why. There is specialised, low cost equipment that can be used, such as ‘crazy egg’, ‘click tale’, ‘user zoom’ and ‘chalk mark’. Personas Personas are used to describe the different type of users the interface will serve. Use a variety of research tactics beforehand to understand key user behaviours and goals and the differences within an audience. To create a persona, data needs to be pulled into a unified story about users skills, goals, environments, key behaviours and the context of the product being designed in their life. The designer can then refer to personas as they make design decisions. Physically creating a document that summarises personas key attributes and using an image, builds out the identity.

There are effective ways of interviewing other designers and the interface users to gain the most impactful insights. For this specific project, other UI and UX designers, patients with Type 1 Diabetes, their families, diabetic consultants, paediatric nurses and app developers have been interviewed. This is documented in the following sections of this book. They were briefed on the final project proposal and then encouraged to give feedback and relay their knowledge based on their own experiences within their fields or environments. Most interviews have been conducted over electronic correspondence.

User interface methodologies

Common procedure has been followed in order to be most effective with this methodology and gain the most focused insight whilst also being sensitive.

Creating Questions for Interviews. To be effective, questions need to: -

Be written in a way that users are capable of answering Be neutral and non-leading (avoid asking â&#x20AC;&#x2DC;how much do you like it?â&#x20AC;&#x2122; Frame both negative and positive responses embedded in the question Have an appropriate level of precision for people to be able to answer Supply a set of answers for people to choose from when asking a closed question Be more exploratory and can give details and/or context that you may not think of to ask, when asking an open ended question Observe behaviour and ask people what they have done recently or do regularly Ensure people will feel comfortable when they donâ&#x20AC;&#x2122;t know an answer Consider that users may try to answer in a way that makes them look better Be sensitive to embarrassing personal topics, such as finances or healthcare Give an easy way to opt out of questions Let the user know why every piece of information is necessary Balance between getting detailed information and avoiding overwhelming Last about 5 minutes for a survey, 20 minutes for a usability test

Creating Questions for Interviews. To be sensitive, questions need to: -

Make the user feel comfortable and engaged with you Reminds participants that there are no wrong answers Ensures instructions are clear and flow in a way that is obvious Breaks instructions down into bite-size tasks to gain focused information Keep participants talking the most to gain qualitative data Listen closely and come up with follow up questions to dig deeper Allow you or a peer to take notes on the answers that relate to goals

Interviewing the target market

02.05

User Interface Designer Interview. Dan James

User interface designer interview

This is an email interview with an user interface designer who has had experience in the industry for 10 years. Aims of the interview: - The best software for wireframing and prototyping UI design projects. - How best to incorporate and conduct user research. - The best sources of inspiration for real world UI designers. - How to design for the healthcare sector and take into considerations the medical and emotional needs of a user.

Dan James Dan James is a UI designer who has worked with large companies over the past 10 years. Some of these include Oxford University Press and Eurostar but also includes startup companies such as Overture and Hasty. He claims he is primarily a UI designer, but can also produce high-quality user experiences and has worked in product development. The main reality which drove contact with this designer is his design influence on the iOs mobile application for storing and organising all data related to a user’s Type 1 Diabetes. ‘mumoActive’ is recognised by Apple’s Health Kit and the NHS Apps Library, and it was interesting to receive insight into his experience of designing for healthcare. This app has been explored further in the upcoming ‘Case Studies’ chapter of this research book. Through conducting an interview via email correspondence with the designer, insight into the industry and effective design processes have been determined. His responses will feed the design process and decisions directly affecting the outcome of this project.

mumoActive & Whizz education, by Dan James

The Interview What initially drew you to working as a UI designer?

After completing a degree in Economics and Politics from York I was working in Brighton and didn’t really want to do anything associated with my degree so just worked in bars and cafés for a couple of years. I took that opportunity to train myself in something more useful and chose to work with the Web. I began by building websites, then got my first job with a company called Kwiqq that billed themselves as ‘Social Website Builders’. This was around the time social networks were taking off (the web 2.0 era). We built social sites for other companies so my skillset in learning how to design a UI rather than just a website grew with every project we completed.

User interface designer interview

Kwiqq didn’t have a lot of funding so money ran out quite quickly. I moved on to Groupspaces after that and a lot of my work is still online for this project and can be found here http://groupspaces. com/ it looks a little dated now but we created a good UI used by a large amount of users. After Groupspaces I worked freelance, mostly in UI design, as over the years that is where most of my projects had come from. I worked with Zesty (zesty.com) mumoActive (mumoactive.com) Whizz Education (whizz.com) and more, I think that I had a natural ability to organise designs and information in a simple and easy to understand way, so I gravitated towards projects that needed those type of solutions. In short, I fell into UI design as I was naturally more able to design in that way rather than being a pure creative designer for example. My abilities lay in organising information. What is your design process, and which pieces of software have you found most useful to date?

My design process varies depending on the client requirements. Some projects I have dived straight into code and designed out of trial and error or through code-based wireframes. An example of that type of project would be Overture Booking Agency Software (bookingwithoverture.com), my most successful project to date and where I now work full time as the head of design. We wanted to get something live as soon as possible so we decided to shorten the process by making most of the decisions in code. We did however sketch out the architecture of the app at the beginning. Other projects I have provided mostly visual designs. This was how I worked on mumoActive. Still other projects I have focussed on the entire process. For example, working with Whizz Education where a lot of money was on the line I provided wireframes that were user tested then design mock-ups that were then user tested again, through to final working prototypes that were tested to make sure the correct decisions were being made at each step. In terms of tools I use pen and paper for wireframes, Photoshop/ Sketch App for designs. For web apps I sometimes only use code as I find it easier to do what I want in a more realistic setting. For iOs I use Sketch to mock-up the designs, export those designs, then import them into Xcode and work from that to build out the UI.

Who have been the most influential designers for you throughout your career/ projects so far, and where do you most commonly turn to for inspiration?

For web app design I try to grab as much inspiration from apps that I use or from sites like dribbble.com and behance.com. I follow Frank Chimero (frankchimero.com) and the work that comes out of 37 Signals (basecamp.com) and Fuzzco (fuzzco.com) Also, very useful especially for iOs design is Meng To and his Design Code series (designcode.io)

As I understand it, a wireframe for a user interface acts similarly to a blueprint for a building. It clearly displays specific details about the structure and layout of the final outcome. How do you approach producing wireframes for your outcomes, and which tools have been most useful for you as you have been doing so?

When I need to wireframe I generally use either pen and paper or code. I find static design mock-ups in Photoshop or Sketch to not be fluid enough although I think that newer tools such as Framer and the prototype feature released in Sketch 49 have solved this problem somewhat.

What are the most effective methods to gain crucial user research, and how do you ensure this research is incorporated into the design to create the most enjoyable interaction for the user?

Again, this depends on the type of project. For Whizz education we had a UI that was already being used by customers. In this instance we put the new designs and interactive mock-ups in front of end users and then used Silverback App (silverbackapp.com) to record their interactions helping us to refine the designs and make any changes we required.

Wireframes either need to be super quick to produce (paper) or interactive (easiest in code). You can make good use of Bootstrap (getbootstrap.com) to get UI elements on a page very quickly with a fair amount of interaction options out of the box.

For Overture we were building a completely new product, in reality we didnâ&#x20AC;&#x2122;t really know what the end users needed so it was, and remains to this day, a trial and error project. This has been the most successful way to design a UI in my experience. Even with extensive user research you canâ&#x20AC;&#x2122;t expect to solve end userâ&#x20AC;&#x2122;s problems. Sometimes it is better to dive in design something, get feedback on how it is working and iterate all the time. For mumoActive, Sheldon (the creator) was the main end user so the design inspiration came from him and his requirements. What are the common obstacles when designing a user interface, or the most difficult tasks you have encountered?

The most common is inconsistency. The most successful projects have a clear idea of each UI element from the start or develop guidelines as the project progresses, get these written down in a workable style guide as soon as possible so that the design can be consistent, and the code can be cleaner. From this the most difficult tasks I have encountered have been working on existing projects where these guidelines were not in place, so the code reflected the lack of consistency, was messy and difficult to work with.

User interface designer interview

mumoActive visual

Regarding the mumoActive Diabetes app specifically, what was your experience of designing to aid life with the disease, and how did you ensure it was both medically and ethically sound?

For mumoActive this was easier than most projects in this vein since the creator was using the product to manage his children’s Diabetes so there was a direct link between the two parties. We knew what worked because it was being tested daily, not only by Sheldon and his sons but also their care workers at school. Having that stream of data and real-life usage constantly available made the app much easier to design and manage. If there was a theme that has worked well for me as a UI and UX designer, it would be that working with real end users has always created the best products. The failures I have had have always come from designing first then involving the end users second. Get something out as soon as possible then iterate upon it based on feedback from users and you stand a better chance of a successful product. It certainly felt like we were doing a worthwhile project and that when you research the statistics for Diabetes it is turning into a very big problem for the NHS and society in general. Along the way we worked with various NHS parties to improve the tools available to their nurses in the field but sadly when I was working there the project didn’t quite get enough traction to make a real difference.

Finally, what is the most enjoyable or rewarding aspect of being a UI designer?

I love UI design as I thrive on seeing a finished product, something that I have had a part in creating and something that in the end is being used by people in their daily lives. Taking my current role as an example Overture is a product that myself and my colleague Jack Fairhall designed in 2008 and is now the most widely used Booking Agency Software used by thousands of agents worldwide and 100’s of thousands of artists from Simon Rattle and the Berlin Philharmonic to the Arctic Monkeys and Avicii. Knowing that it’s something that we designed over a couple of weeks in 2008 and constantly refined up until today is what keeps me interested.

The experience and knowledge of the professionals can feed the design process for this final outcome. To conclude this section, itâ&#x20AC;&#x2122;s to be stated that engaging with and using the resources produced by the designers documented, will be what feeds the success of the project outcome. By drawing information from professionals in the field, the final user interface will be more successful in the real world. As a result, the outcome can be succinct, relevant and popular among users for its usability. By adopting the popular user research and data collection methodologies, such as user testing, interviews, eye-tracking and user personas, the outcome will respond better to the real needs of its target audience. Itâ&#x20AC;&#x2122;s this response that will improve the user experience and therefore their satisfaction.

Mobile applications on home screen

Type 1 Diabetes

“Socrates said, Know thyself. I say, Know thy users. And guess what? They don’t think like you do.” Joshua Brewer

ex Principle Designer at Twitter 45

Type 1 Diabetes Artificial insulin-producing beta cells

Type 1 Diabetes is a lifelong condition. As a result of the immune system mistakenly attacking the persons body, the insulin-producing beta cells in the pancreas are no longer functioning. Insulin is a hormone which allows the cells to use the glucose (sugars) in the carbohydrates from the foods that are consumed. Therefore, without insulin, the blood glucose levels can become too high because the cells are not taking up, using or storing these sugars. Furthermore, the insulin is not regulating blood glucose levels as normal and so they can also fall too low. This is called hypoglycaemia and can be fatal if left untreated. The nature of the disease means that those directly affected need to closely monitor and manage their blood glucose levels for the entirety of their life. They need to stay within a target blood glucose range (4-7mmol/l) and they do so by injecting themselves with long-acting insulin with meals and snacks. Those affected check their blood glucose levels regularly, through and finger pricking meter. They can then adjust the amount of insulin injected accordingly, to remain within this range.

Although the treatment of the disease is always being refined and developed, and there are varying treatment options which suit different peopleâ&#x20AC;&#x2122;s lifestyles more appropriately, the management is intrusive and can put strain onto those with the disease and their families. There are existing technologies, including mobile applications, which aim to help track and manage the information and lifestyle adjustments that are inevitable with the diagnosis of Type 1 Diabetes.

03.01

Type 1 Diabetes is an autoimmune disease where the insulin-producing beta cells have been destroyed. The Nature of the Disease The NHS has published online that the main symptoms of this disease include: -

Extreme thirst Passing urine regularly Weight loss Fatigue The NHS have also stated that, although anyone of any age can be affected, the disease develops very quickly in young people. It is not only the most common type of Diabetes in children, it is also one of the most common types of chronic disease. In the U.S., the peak age of being diagnosed with the disease is 14 years old. The disease is often inherited but it is also viral. It cannot be cured and those directly affected need regular insulin injections, or pump therapy (a tiny needle under the skin, removed for swimming and showering, supplying a more consistent flow of insulin to the body) to manage their blood glucose levels. Blood glucose levels are measured in millimoles. The normal range is 4-7mmol/l but immediately after meals it can run up to around 10mmol/l. 2 hours after a meal, it should return back down below this figure. Hyperglycaemia is where the blood glucose levels are too high. Anything above 10mmol/l running into the teens is considered high. If the glucose levels are in the high teens and left untreated it can lead to diabetic ketocidosis, which is a build up of acid in the blood. The risks with this are unconsciousness and sometimes even death. It is therefore extremely important to regulate the blood glucose levels and check the ketones using a dedicated meter. Hypoglycaemia (hypo) is where the blood glucose levels are running too low. This is typically below 4mmol/l. When a person with Type 1 Diabetes is experiencing a hypo, they typically feel shaky, weak and hungry. They should immediately test their blood glucose levels to confirm that they are having a hypo, and then consume a fast-acting carbohydrate such as a glucose tablet or a sugary drink. It is also encouraged to consume a slow-acting carbohydrate. If the person becomes unconscious, an educated person around them or a member of the emergency services would then insert a glucagon injection into one of their muscles.

Those affected and their families are educated about the disease and both its treatment and life-time management by a diabetic doctor and a specialist care team. When theyâ&#x20AC;&#x2122;re diagnosed, theyâ&#x20AC;&#x2122;re taught how to use each piece of equipment, the signs of hyperglycaemia and hypoglycaemia and how to treat each scenario, before being discharged. They would then meet with their Diabetes specialist care team, consisting of a doctor, nurse and dietician, every 2-6 months to review their management and adjust their course of treatment if necessary.

03.02

Interviews with Nurses, Doctors and Professors.

Professional interviews

The following interviews explore the varying levels of experience with and understanding of this disease, held by a paediatric nurse and a general practitioner. Aims of the interviews: - To better understand the diagnosis and treatment of Type 1 Diabetes from a medical professional perspective. - To understand the ethical considerations for a project for this audience. - To understand more about the current, most advanced management and treatment of the disease, as well as the future of treatment.

Rachel Allen - Paediatric Nurse Rachel has been a practising paediatric nurse for the past 13 years. She regularly sees children and teenagers diagnosed with Type 1 Diabetes and is involved in the first point of care for them and their families. Typically, she ensures that any questions and concerns of the patient and families are answered sensitively, and that theyâ&#x20AC;&#x2122;re completely happy and healthy before being discharged from the hospital to begin adjusting to this new life. Dr Ruth Robinson - General Practitioner

Interview 01 Rachel Allen Paediatric Nurse

How long have you been a paediatric nurse for?

I have been working 13 years. I always wanted to work with children and I loved the medical side.

Did you have to do any specialist training regarding Diabetes?

We have study days fairly regularly, and it’s part of the course. The treatment and management changes fairly regularly. For example children are now being introduced to using the pump. Instead of giving injections with meals and snacks, the pump mimics what the body would normally do. It gives a constant background injection rather than the long acting injection. You can also type in your blood sugar result and how many carbs you’re about to eat and it calculates how much insulin you then need. It then just requires pressing a button to receive the insulin.

Why do young people with Type 1 Diabetes record their blood glucose readings using monitors?

They are looking out for trends. To see if there is a time of day that they’re particularly going high for example, and they can compare it with what they’re eating to see how it’s affecting their levels. The dietician is closely involved in the management of a young person’s Type 1 Diabetes, and in the diabetic clinic they see the diabetic dietician, the diabetic nurse and the diabetic doctor all in one clinic.

What’s the difference between the diabetic nurse and the diabetic doctor?

The nurse is more day to day so if anyone has an issue they’re the first contact for the families. They also go into schools and do teaching. The doctors can adjust the doses of insulin. However, the nurses do suggest changes to doses because they work as a really close team.

When someone is diagnosed, what’s the usual procedure?

The child usually comes in with a history of being unwell, e.g. weight loss or really thirsty. The length of time that these symptoms have been present varies. If they’re not too poorly when they come in, they go straight onto the injections after they’ve worked out how much insulin they will need. They have one long-acting injection a day, and a short-acting injections with meals and large snacks.

Are there any concerns expressed at this point that parents particularly have?

Obviously it’s a lot to take in for the parents. They’re all over the place, some cope really well and some it hits them at different times. Some start by getting on with the practical stuff and it will hit them later on. But with some it hits them straight away. We try not to give them too much information at one time. That’s where the diabetic nurses come in because they do a lot of the education in little stages. So to start off with they teach them how to do the injections and the blood sugar monitoring. Once they can do this and the blood sugars have been stabilised, they’ve seen a dietician and they know what sorts of food to eat and what to avoid. As well as how much insulin to give dependant on sugar content and carb counting, they can be discharged home. We want to get them home as soon as possible but the parents have to be happy with giving the injections and the finger-pricking monitoring, and how to treat a hypo or what to do if they’re high.

How do people tend to respond to the news that they have Type 1 Diabetes and this is the way they’ll need to treat it?

Everyone responds differently depending on the person and their age. But the teenagers particularly find it hard depending on what their friends can be doing, and now they’re going to be different. With the little ones, they’re scared to start with. They get used to it but initially they’re scared of the injections. It is a massive change that will effect them for the rest of their lives.

Are you ever told about upcoming technology that is being tested?

On the study days we have been told about the pumps and they try to get a lot of the, especially younger kids, straight onto the pump. But it is something that I’m not particularly familiar with. Like the freestyle libre (the constant blood sugar monitor) it’s a little needle that stays in the body all the time. You can take it out for swimming and showering. It seems that this method is more stable as it mimics what the body naturally does if it was healthy.

Professional interviews

Could you please go into a bit more detail as to what has happened to the body of someone with Type 1 Diabetes, and why it has occurred?

They don’t really know why some people get it and some people don’t. Basically the body is not producing insulin so you have to give the injection to mimic this. Insulin regulates the blood glucose levels by letting insulin into the cells. This is how the body gets its energy and also why one of the early symptoms of the disease is tiredness. The glucose isn’t getting into the cells, it’s just staying in the blood. They sort of describe insulin as the key to the lock that opens the cells and lets glucose in.

Is the ‘lock and key’ analogy the sort of language and imagery you use to convey more complex information to the younger patients?

Yes. It mainly depends what age they are. There are a lot of booklets with different methods of communication depending on what age the young person is. For example a younger child one, or a teenage one.

In your experience, what ages do you think would benefit most from a mobile application that could be used to monitor and regulate blood glucose levels, through updating the patient and their families also on a watch, over long distances?

I think the younger children would always be with their parents so they wouldn’t need to use an application that updates their parents on their blood glucose levels. So ages of about 8-16 seems appropriate. The younger ages, perhaps 8-12 may not be in secondary schools but are usually involved in after-school activities and clubs, as well as going round to their friends a lot. It might be good to use different language and slightly different visuals for 8-12 and 12-16 year olds because an 8 year olds understanding is different to a teenagers, and what they like is different. When you’re preparing to leave secondary school, you may not want smiley faces popping up on screen. In the real world you tailor your language to your audience.

What are the ranges of blood glucose levels that a Type 1 diabetic has to stay within. What’s the risk of running too high or low?

It’s between 4-7mmol/l. A hypo is under 4mmol/l. The first couple of weeks after being diagnosed they usually run quite high, into the low teens but obviously not too high, and this is normal just so they don’t hypo. They then adjust the level of insulin over the next few weeks. Everyone needs slightly different ratios so this adjustment period is just figuring out how much they need to keep them in the desired range. They need to be notified if they’re too high and if they’re too low. When they are very high they need to test for something called ketones. They have a different ketone fingerprick meter to check that.

Are there are any other ethical considerations when designing for healthcare or this disease in particular?

One thing may be, would the teenagers want their parents to have access to all their information regarding the monitoring and management of their disease? It would be helpful and the parents would feel reassured by it, but them being able to have access to their levels and then being able to constantly be on their case about it might be intrusive. It might feel a bit controlling for the teenager when they just want to get round it on their own. The parents may also get distracted by it. They may want to check the levels all the time, and they will have to learn to trust that the teenager is doing the right thing. Another point is that the patient and family will have questions when they’re first diagnosed and overloaded with information. It’s important to respect that they have a lot of questions, ask them to feel free to write anything down as it comes to them and allow them to inject or ask questions in private.

How would you suggest the issue of privacy both of information and questions are resolved without taking away the feature of monitoring blood glucose levels and sharing these over multiple devices?

There could be a function where the parents couldn’t see it all the time. There could be a setting to switch off and on depending on when the teenager wants to share that information with their parents, and only the teenager has access to this? You could also add a notes section that they could add to and link to a reading. It could then be sent to their specialist care team or raised in their next clinic appointment. This would be particularly useful for the parents.

Young person being diagnosed

At what point do you think it would be suitable to introduce an application?

Thatâ&#x20AC;&#x2122;s a good question because it may become just another piece of information at the beginning that overloads the patient and their family. It could perhaps be introduced at the first clinic appointment. I canâ&#x20AC;&#x2122;t remember how often they visit the clinic, but in this appointment they measure their height, weight, do their HBA1C which is a blood test which shows what their levels have been over a while. They look at the downloads from the blood glucose meter, visit the dietician and see the diabetic specialist nurses and eventually see their diabetic doctor as well. There are also other health complications put at risk because of Type 1 Diabetes, so their eyes and feet are checked as well. I think a lot of patients would find an app which could update both the patient and parent automatically over long distances useful.

Interview 02

Professional interviews

Ruth Robinson General Practitioner

What causes Type 1 Diabetes?

The beta-islet cells of the pancreas lose the ability to make insulin due to auto-immune damage, it is not clear why people may develop the condition, likely various genetic factors but possibly environmental triggers in combination with this e.g. viruses.

How is it diagnosed in a hospital?

Symptoms (thirst, fatigue, passing lots of urine, drowsiness) Examination (dehydration, rapid breathing) Blood tests - may be done at a random time of day, may be done ‘fasting’ e.g. before breakfast - look at sugar levels, can also look at markers to see what the sugar levels have been over a period of time. If unwell would take blood tests from the artery in some occasions, to check for condition called diabetic ketocidosis. Also examine urine for sugar and ketones. Can also do blood tests to look for antibodies but would ask a specialist about this.

How is it diagnosed in a hospital?

Often under 20, almost always under 40.

What’s the difference between the diabetic nurse and the diabetic doctor?

If an adult is an inpatient I would refer to endocrinology/Diabetes medical team and diabetic specialist nurses (work together).

How present is modern technology in current treatment. E.g. the use of artificial pancreases which can secrete insulin or the use of chips that monitor blood glucose? If current presence is negligible, are you aware of the use of these increasing in future treatment?

Only what I hear about on the news...I have never looked after a patient with an artificial pancreas as far as I can remember!

Are there any mobile applications, aiding the management of life with the disease, recommended to those diagnosed or their families/carers?

I’m afraid it is outside of my area.

Any other ethical considerations surrounding the disease which should be acknowledged by a mobile app?

I suppose if information was stored in the app, would have to consider relevant law around medical confidentiality and how to keep this data safe. T1DM can be a fatal disease if mismanaged, so would need to take precautions to make sure that advice was very clear and that people did not use the app as a substitute in situations when they should be going to A and E or their GP for treatment for example.

Scientist carrying out medical research

Patient and family interviews

03.03

Diabetic testing blood glucose level

Interviews with Patients and Parents. These interviews were conducted both in person and over email correspondence to gain crucial insight into the worlds of those directly affected by Type 1 Diabetes. The interviews covered the diagnosis process and the life adjustment/management since diagnosis with the aims as highlighted below.

Aims of the interviews: - To further understand real-life diagnosis and management of the disease. - To further understand the emotional responses of those directly affected by Type 1 Diabetes. - To identify pain points in the current process of life adjustment/management and how my design could resolve some of these issues.

Lucy Oldman - Type 1 diabetic Lucy has been diabetic since she was 18. Sheâ&#x20AC;&#x2122;s now in her late twenties. Brenda Pownall - Parent of Type 1 diabetic Brenda has been a mother of a Type 1 diabetic for 2 months. Jimmy Pownall - Type 1 diabetic Jimmy was diagnosed with Type 1 Diabetes 2 months ago.

Interview 03

Patient and family interviews

Lucy Oldman

How old were you when you were diagnosed with Type 1 Diabetes?

18 years old.

What symptoms were you experiencing before you went to A&E/hospital?

Constant thirst, frequent urination, blurry vision.

What was the diagnosis process you were taken through?

I went to the GP who tested my blood glucose initially, which was very high, then it got sent to the hospital who called me in as an outpatient that same day.

How did they relay information about the disease and its management after you were diagnosed? Were you put in contact with a specialist clinic team? If so, what type of specialists did this team consist of and what were they there to do?

No specialist clinical team as such, I was referred to a dietician and also placed on a carbohydrate counting course the following year.

How often did you then have to visit this specialist team (if you did)?

Continued to see the outpatient nurses for a few years for fairly regular catch ups.

Was the experience of being diagnosed and adjusting to life with Type 1 Diabetes overwhelming for you and/or your parents/ family? If so can you identify why that was?

I felt slightly overwhelmed as I had to completely change what I was doing in regards to eating. I remember my mum wanted to know what my levels were which would cause some frustration, but I knew it was only because she cared for me and wanted me to be healthy. Any feelings of frustration weren’t insurmountable, I didn’t feel like it was something I couldn’t deal with in general.

If the answer to the previous question is yes, can you think of any methods used that helped relieve any stress or anxiety related to Type 1 Diabetes?

I can’t remember putting into practice any particular method to help calm myself, I just got on with it. I didn’t really think too much about the longer term repercussions, which probably was a source of relief somehow.

Are there any other resources you would have loved to have access to during/after your diagnosis?

I would have loved consistency in care. I had seen a good consultant a few times during my first few years after being diagnosed, then I moved to university in York when I was 21, and it all went a bit chaotic there. I have only just got myself back into seeing a regular team at a hospital, now I’m 28. I have regularly seen the diabetic nurses at my GP surgery, but there is only certain amount that they can offer. All new equipment and trials etc. have to go via the hospital team.

What is the blood glucose range you aim to stay within? Does this change for each person and what routine do you follow if you are too high or low? (What are the medical risks of being too high or too low that you are trying to avoid).

The range everyone should be within is 4-6, however I give myself a bit of grace and am happy if it is between 4-8. If I am low (anything below 4) then I have 3-5 jelly babies or glucotabs, and then follow it up with a digestive biscuit or 2, depending on how low I have been. If I am high, for example 15+, then I would do a correction dose.

Do you have any concerns/feedback about the app concept and how it would work in real life with real people? Perhaps considering the ethical/emotional side of the process?

I can see how informing the parents/guardians of the young person is good for very young children, however for teenagers that would be quite intrusive and might cause frustration. It would be good for reminders to be sent if the person had a learning disability and if they get easily distracted, perhaps.

Typical blood glucose monitor

Interview 04 Brenda Pownall (Parent) & Jimmy Pownall (Type 1 Diabetic)

Patient and family interviews

Brenda Pownall When the young person in your family was diagnosed with Type 1 Diabetes, what was the diagnosis process you were taken through?

A trip to the doctor who took a urine sample to test for ketones being present and a blood test to check glucose levels. Both these levels were extremely high so Jimmy was told to go straight to the EAU (Emergency Assessment Unit) at Royal Surrey Hospital. Once there they did more tests all proving positive and then started him on his treatment.

How did they educate your family on what the disease is and how you were to now manage it in your everyday lives?

They explained what it was and showed Jimmy how to inject himself and the amounts he should take. After 24 hours in hospital bringing the ketone level and glucose level down he was sent home to administer insulin and take glucose levels himself. We went back to the hospital the next day so they could monitor him and adjust the insulin levels he was taking. Over the next few days he went twice to the diabetic clinic for advice and he has been managing it himself since. The diabetic clinic has said he can pop in any time or ring them. He has an appointment next week at our GP surgery for another blood test and then a week later seeing a doctor and nurse together. This is general practice at our doctors surgery for newly diagnosed diabetics.

Did you have any concerns or worries about the life-adjustment once the young person had been discharged? If so, what were they and were you given any useful resources to help relieve these worries and concerns?

I did have questions but canâ&#x20AC;&#x2122;t remember them all now, probably things about hypos and what happens if he forgets to take insulin. Once we were home I worried about whether he was carb counting properly (we have not seen the dietician yet.) I worried in case he had a hypo in the night whilst asleep. I worried the first time he stayed over at a friends house. I worried the first time he went to a party and had alcohol. I found loads of written information at the clinic and there is info online.

How did the care team ensure your worries, concerns or questions were answered to an extent that you were satisfied with before the young person had been discharged? If they did not do this, how could they have done it better?

They answered my questions immediately, obviously it is all a learning curve so many of my questions came later but I was able to look up info in literature given. Also we have diabetic nurse phone no. and email so questions can be answered that way.

How did the young person/you as a parent or guardian record the vital information that would be reviewed in diabetic clinic appointments? Did you find your method effective or do you wish there had been other more efficient resources available? What might these have been?

Jimmy has a blood glucose reader that keeps all the readings of levels, which he can then upload onto his computer. This is great. Unfortunately there is not a similar thing to record how much insulin he takes each time and he is always forgetting to record it in his book.

Are there any other resources you would have loved to have access to during/after your diagnosis?

24 hour telephone service would be useful at first because diabetic clinic is only open 9 - 5pm Monday to Friday. I think hypos are a particular worry so anyone or anything that can give assurances about a hypo is good.

Do you have any concerns/feedback about the app concept and how it would work in real life with real people? Perhaps considering the ethical/emotional side of the process?

As Jimmy is 17 years he would not want me to be able to monitor him so closely, but I can see this would be really useful with younger children.

Jimmy Pownall How old were you when you were diagnosed with Type 1 Diabetes?

17 years old.

What symptoms were you experiencing before you went to A&E/hospital?

Drinking a lot of water (in a 6-hour day at sixth form I would drink 2-3 litres), urinating a lot, loss of weight (2 stone in 6 weeks) and tiredness.

What was the diagnosis process you were taken through?

I went to a doctorâ&#x20AC;&#x2122;s surgery and did a blood test and a urine test. I then went to hospital and did another couple of tests.

How did they relay information about the disease and its management after you were diagnosed?

In the couple of days following I went to the diabetic clinic at the hospital and was told how the disease would affect me and how to treat it.

How did you decide to treat your Type 1 Diabetes immediately after being diagnosed? Have you since changed the type of treatment (e.g. moved to using a pump) or was your treatment adjusted in the months following your diagnosis?

I still use separate bolus and basil injections that I got initially.

Were you put in contact with a specialist clinic team? If so, what type of specialists did this team consist of and what were they there to do?

Yes, initially I would go to the clinic once a week and show a nurse, who worked specifically in the diabetic clinic, my blood sugar results and how much insulin I used. I no longer visit the clinic, but I have the phone number so I can ring if I need advice.

How often did you then have to visit this specialist team (if you did?) and what was the aim of these appointments?

As above.

Was the experience of being diagnosed and adjusting to life with Type 1 Diabetes overwhelming for you and/or your parents/ family? If so can you identify why that was?

Not at all. I already had a healthy diet and so I didnâ&#x20AC;&#x2122;t find it that difficult to adjust. The most noticeable difference was my feet had very dry skin.

If the answer to the previous question is yes, can you think of any methods used that helped relieve any stress or anxiety related to Type 1 Diabetes?

n/a

Are there any other resources you would have loved to have access to during/after your diagnosis?

n/a

Do you have any concerns/feedback about the app concept and how it would work in real life with real people? Perhaps considering the ethical/emotional side of the process?

It seems like a good idea to me. I find it particularly annoying that my blood glucose tester does not have a feature to save how much insulin I inject so I have to use a booklet.

03.04

Incorporating user research & responding through user interface.

Conclusion of user research

Allowing user research to inform design decisions ensures a user-centred outcome, useful for the audience.

Notifications on a user interface would effectively resolve these key issues for the target audience

It’s important to identify real issues for real people. It is only then that a designer can start to work on a solution, in order to better the lives of their audiences. According to the research in this section, below are the main problems for both parents and young diabetics when trying to manage life with Type 1 Diabetes.

The Key Pain Points & Design Solutions 01

The risk of not knowing when a diabetic is out of range. This could be resolved through notifications. By constantly monitoring blood glucose levels, a mobile and watch application could notify both the diabetic and a parent when the young person is out of range. A feature which walks the user through treating a hypo could also be integrated, so if anyone around them is uneducated on the disease, they can still offer to help. This would reduce the need to test blood levels at regular intervals, because the person will be notified when they need to act.

Not being able to monitor a young diabetic discreetly. Although being notified and constantly updated on blood glucose levels is vital, it is also good to consider whether or not every young diabetic would want their parents having access to so much of their data. In some families, this may cause more tension than peace. The nurse, Rachel, pointed out that teenagers particularly don’t enjoy the idea of their parents being able to control them through a phone, or tell them what to do all the time. It would therefore be good to be able to adjust these settings according to how much the parents are allowed to be notified on. For example, to only be notified when they’re having a hypo and not knowing their levels otherwise, or only being notified when the young person is out of the house.

The Key Ethical Considerations 01

Data Protection. It’s important for the concept of the final outcome to be influenced by the process of professionals in the real world. This will be accomplished in the following sub-section. Current leading medical apps and acknowledge systems already in place to ensure that their content and function adheres to data protection policies. This ultimately protects and respects the dignity of the user.

Accuracy of medical information and guidance. Similarly, the content of a medical application needs to be sound and beneficial to the health of the user. Again, in the following sub-section, the role that the NHS has to play in the quality control of medical applications is explored. This can feed the evolution of the outcome and ensure that its goals and its function lines up with professional expectations.

03.05

Apple HealthKit, CareKit & ResearchKit

These three Kits are open source framework which Apple has introduced to allow researchers and developers to produce apps for data storage and medical research. The open source framework refers to the source code being available to the general public free of charge, for them to then use and/or modify. For this project, the source code is not incorporated, but understanding the ability for this feature is pivotal in the conceptualisation of the outcome. It is necessary to know the technology available to UI/UX designers and app developers.

Apps in healthcare

HealthKit allows for health and fitness data to be shared with other applications whilst ensuring that the user’s privacy is entirely respected and that they have full control of the distribution of their data. It can work directly with some health and fitness devices, but most significantly in the iOs 8.0 update, the system can automatically save data from compatible monitors. This feature would be very beneficial for Type 1 diabetics, since the recording of their blood glucose levels and insulin settings can become intrusive. The data is saved in an encrypted data base and both iPhone and Apple Watch have their own data bases. The Health app is the user interface between the user and this HealthKit data. They can edit the sharing permissions for each data type. This is an important ethical consideration for an app that deals with such sensitive health data. CareKit helps the users to understand and manage their health more effectively through features such as tracking their symptoms, creating care plans and connecting to their care teams. ResearchKit allows app developers and researchers to create research applications. The newest versions use the existing sensors and abilities of an iPhone to track movement, take measurements and record data. Users of the applications can then produce data in a large variety of ways. Data is usually produced and recorded through surveys, consent and tasks but designers can create new modules of their own. This feature would be useful for researchers and scientists working on the development of future treatment of Type 1 Diabetes, including artificial pancreases from stem cells. NHS Apps Library

This is a digital library that collates together multiple digital tools that the general public can then use for their health and care. It’s currently a site in testing, but there is a small selection of high quality, safe and effective tools. Some of the apps display the label ‘NHS Approved’ which informs the potential user that it has been tested, and there is clinical evidence which supports its outcomes. Different badges are also attached. Ones that cover the app meeting NHS standards for clinical effectiveness, safety, usability and accessibility. Furthermore there needs to be proof that the app can improve patient outcomes, or that the design is user-centred and effective. These are all assured through badges. There is also a programme which monitors and gathers evidence. The developers of the apps need to comply with the Data Protection Act when collecting personal data, and this is a key ethical issue recognised and monitored by the NHS Library. As a designer within a sphere riddled with ethical considerations, it’s important to understand how professionals and app developers ensure their audience is prioritised, satisfied and protected. A UI designer has to familiarise themselves with the real people and the real world processes, before putting pen to paper. To gain key insight into this, a phone interview with Sheldon Steed, CEO and founder of the mumoActive Diabetes tracking app was conducted.

Apple Health app

Medical Apps How do UI designers use their platform to resolve pain points for users, whilst acknowledging main ethical concerns?

The process of conceptualising and materialising a Diabetes app. Sheldon Steed. His motivations. Sheldon founded mumoActive, a secure communications platform for people to track and share their health data and information. It all started with the intent to help him and his wife manage their two sons’ Diabetes. Since then funding has allowed his platform to effect a wider audience. Not only is he a founder of this app, he is also a CEO, a TEDx speaker, a skier, mountain biker and a recent keen surfer. A phone interview was conducted with Sheldon in order to gain the best insight into his process of producing this app. mumoActive will be explored further in a later case study, but in essence it exists for diabetics to track and share their health data and information securely. For this reason, it’s not technically a health app. It is concerned with logistics and communications. But Sheldon oversaw the design development for a similar audience to the one explored in this research book, making insight into his experience and what he has found out along the way, very valuable.

Apps in healthcare

He has fed the project in vital ways. The most significant outcome of this interview was the realisation that a designer’s job is to solve a problem for the user in the most engaging way possible. Not to improve their health to any award-winning degree, but to simply take what they already do and make that a whole lot easier for them.

The Questions: 1. 2. 3. 4.

5. 6. 7.

Do you have a personal connection with Type 1 Diabetes? If so, how and/or why did this connection influence the mumoActive app concept? What was it about Dan James’ work that inspired you to hire him for the design aspect of this project? What were the key process steps of this project from concept to completion, and do you have any tips or warnings based on your experience? (e.g. market research, user-feedback and testing, recognition from the NHS). Did you run into any major ethical issues when designing an app for healthcare? If so, what were these & how did you address and resolve them whilst being sensitive to your audience? Why did you choose to visually represent the data in the way that you did? (e.g. the finger touch wheel and graphs). What was your experience of getting the app recognised and listed on the NHS apps library? Did you have to adhere to any criteria in order to do so? If so, and if you are able to share, what are some examples of this criteria? Finally, based on your understanding of Type 1 and the impact it has on the lives of those affected, do you have any general feedback or concerns regarding my app concept & how it may affect the intended audience?

Disclaimer: The following text isn’t a direct transcript of the phone interview. Instead it is a paraphrase of Sheldon’s answers, but the core ideas are integral to his responses. The responses don’t directly correspond to a question shown on the left, but as a whole the responses answer all of the enquiries.

The idea was to solve a personal problem and the process of designing the app was iterative. This problem was keeping track of what his young, Type 1 diabetic boys were doing, to see any patterns and to change management accordingly. Dan James (previously interviewed UI designer) didn’t end up producing all of the designs, instead he built the website to go alongside the application which wasn’t eventually used. Sheldon used a huge variety of different apps to figure out what he liked. In particular, he really liked the Yahoo weather app a few years back, and this is the style from which the ‘sugar slider’ input derived from. Whenever he saw a mobile application that he loved, or an aspect of the design which was really successful, he brought it to the team and they tried it out in their own application. Ultimately, him and his team drew inspiration from the bigger things, and it was this iterative process which resulted in mumoActive. Sheldon emphasised that Diabetes and its management is so personal. There are different types and needs, and ultimately they didn’t want to produce a health app in terms of managing and giving advice on the disease. Instead a logistics and communications application to track a diabetic’s sugar levels and aid management decisions, seemed more appropriate for the audience. Using mobile apps and technology to aid management comes with its risks. For example, older people with Type 1 Diabetes will not be used to inputting their information on a device. Instead they will have gotten into habits of recording all of their levels in different books, and taking these paper files to their doctors. From his own market research, he discovered that there is only a small group of Type 1 diabetics who would be willing to track their information digitally. And amongst these, there are fewer still who can afford the type of technology required to make the process of tracking and management as efficient as possible. Sheldon used DEXCOM as an example of efficient technology that only a small percentage of the Type 1 population can realistically access. Sheldon highlighted that a Type 1 diabetic will test their blood sugar levels every 2 to 2 and a half hours. This is because it takes about 1 and a half hours for the insulin to start working, once it’s been injected. Therefore the input of data and information, and the access to the recordings needed to be super fast and easy. The more frequently a task needs to be done, and this is something that’s done multiple times a day, every day of the week, the easier the user experience needs to be. Sheldon voiced that he wanted to differentiate his application from existing ‘Diabetes apps’ through a slick user interface. The others that he had seen were in his words ‘clunky and gross’ and instead he just wanted to make something that was easy and fast. Once questioned whether there were any ethical considerations throughout the process of creating this ‘health app’, Sheldon stated that mumoActive doesn’t technically fall into the ‘health’ category. Since it’s more concerned with the inputting and storing of data, and communicating this information between users (i.e. parents and teachers at school, or with doctors in an appointment) it initially didn’t need to adhere to an extensive amount of guidelines. Essentially, because it doesn’t advise the users on how to manage their Diabetes, its existence didn’t come with huge risks to the user if the advice wasn’t medically sound.

Furthermore, Sheldon expressed how he found that there were not many government standards in place when he was producing and developing mumoActive. Now there has been an emergence of these. For example, he named ‘iso27k’ as the baseline security for this platform, and that the NHS apps library ensures that certain aspects of a mobile application adheres to their standards. mumoActive can actually be found on the NHS apps library. He did clarify that once they were affiliated with the NHS library and became an NHS business partner, they had to consider that they were essentially in charge of patient data, and so even the way he carried his laptop around had to change accordingly.

Apps in healthcare

In terms of the user interface, and displaying large amounts of complex information, Sheldon walked through his ideas behind the types of graphs. He wanted it to be a nice experience for the users, rather than daunting. For the line graph, he found that there was no use putting more than 3 days worth of information on the screen at any time. This was because it would get visually overwhelming, but also 3 days allows users to spot any patterns; insulin to carb ratios can then be adjusted according to these patterns. If there were regular hypos occurring whilst at school, Sheldon wanted to include a feature so that he could add a note for the teacher of the class, asking them to give him a sugary snack at that point in the day to help maintain correct blood glucose levels. A pie chart can be accessed by swiping across the line graph. The pie graph aims to easily depict other elements of Type 1 Diabetes management. These include visually answering questions such as ‘how many tests does the diabetic do a day’. These questions are usually answered in clinic appointments by a doctor, and so to have the accurate information to hand is helpful. The 3rd graph allows the audience to see the carb intake for the past 3 days. From this they can then adjust by themselves, or for a younger diabetic with their families, the insulin ratios. For Sheldon’s diabetic boys, the insulin settings are usually determined by their insulin pump, but he still found it crucial to be able to monitor and adjust these manually in order to best maintain healthy blood glucose levels. Lastly, and most importantly, Sheldon revealed the most effective role a designer can fulfil for this audience. Firstly, he confirmed that parents of young diabetics are frequently anxious about the management of their Diabetes, and whether or not they’re out of range, both inside or outside the house. He exclaimed that his children are only patients for 1 and a half hours a year (when they’re visiting their diabetic clinic teams) and the rest of the time they are normal children doing normal kid things, like riding their bikes out in the street. Therefore, the user wants to be treated like a human, not like a patient. He went on to say that the big opportunity for a designer is to find a problem and resolve it in an interesting way for the user. Although Type 1 diabetics, and their parents/guardians, may always worry about being in range, if they are to be frequently notified on their current blood glucose level, then the design should put them at ease and make them feel normal, not unhealthy.

â&#x20AC;&#x153;My children are only patients for 1 and a half hours a year (when theyâ&#x20AC;&#x2122;re visiting their diabetic clinic teams) and the rest of the time they are normal children doing normal kid things, like riding their bikes out in the street. The big opportunity for a designer is to find a problem and resolve it in an interesting way for the user. Although Type 1 diabetics, and their parents/guardians, may always worry about being in range, if they are to be frequently notified on their current blood glucose level, then the design should put them at ease and make them feel normal, not unhealthy.â&#x20AC;? Sheldon Steed, CEO & Founder of mumoActive.

Research Case Studies

“There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” Milton Glaser 69

04.01

Helpful technology and positive user experiences on handheld devices can greatly improve the lives of those struggling with their health.

Introduction to case studies

Just as was clarified in the â&#x20AC;&#x2DC;The History of UI Designâ&#x20AC;&#x2122; sub-chapter, a successful designer needs to look at what has come before and respond to the strengths and weaknesses. Only then will the outcome be more satisfactory in the eyes of its user. This is why breaking down case studies is crucial. It ensures that inspiration and understanding has come from a variety of different sources. The following sections in this chapter will break down eight different case studies, whose designs have influenced the development and outcome for this project. The case studies are all examples of user experience and interface design, in response to their target market and goals as a product. Most of these are extremely well known mobile applications, but there are also some case studies which wonâ&#x20AC;&#x2122;t be as universally recognised. Designers from all walks and with varying strengths and weaknesses can offer other designers a lot, in terms of displaying design techniques which have worked successfully. These can then be incorporated and refined further, to produce more successful outcomes. The design, including style and specific techniques, are analysed in order to break down exactly why these pieces of design can be influential for this project outcome. More than that, existing iOs technology has been researched and analysed, to respond to previous research; a successful user experience outcome should harness the built-in technology of the device. Users now have a certain expectation for iOs applications, based on the existing apps and features available to them on this platform, and the user interface should communicate that certain technological features are available in-app. In other case studies, and more specifically within health application contexts, the design has been the sole focus. As Type 1 Diabetes affects people of almost all ages, and does not discriminate against gender, there are several case studies which represent how design techniques have been harnessed in order to make the user interface as simple, explicit, stylish and still as approachable as possible.

Smartphone Homescreen

04.02

Case Study 01 iOs Interface iOs is the mobile operating system found on Appleâ&#x20AC;&#x2122;s devices. The interface between the user and the hardware has been constantly updated and as a result, has evolved, through 11 different versions. The system has been refined, with the style changing in response to feedback and developing technology, in order to produce an efficient and effective interface to guarantee pleasant user experience. The mobile application, that will be designed in response to the research documented in this book, will adhere to iOs interface guidelines since it is to be used on both an iPhone and iWatch.

iOs interface

Apple home screen

History

Steve Jobs presented the first iPhone to the public on January 9th 2007. Originally named OS, iOs has undergone much development in the past 11 years, resulting in a refined system which now also supports devices such as iPads, iPods and iWatches. iOs 1.0 was the first interface to marry user and touch screen mobile with huge success, allowing an audience more direct interactions and speedier results. Major versions of the hardware are released yearly, and as the technology within the devices becomes obsolete, they no longer are able to support previous versions of iOs. This keeps technology moving onwards and allows the public to be frequently presented with the most up-to-date technology. The visual language of the interface has to match this pursuit to remain cutting-edge. Apple has published guidelines to help keep the interfaces that are associated with iOs, as consistent, successful and contemporary as possible.

Features

In Apple’s own words, iOs is the ‘world’s most advanced operating system’. iOs 11 has new and improved features, such as drag and drop interactions and compatibility with a pencil to draw digitally. Augmented reality is supported and so can be incorporated into iOs applications. Siri is a voice which learns from the user, and is able to respond to requests by presenting information and making suggestions. All of these features are examples of cutting-edge technology, as Apple constantly strives to deliver advanced technology to decrease the amount of work that has to be done by their consumers. It is this admirable ethos that has resulted in beautiful interfaces that really work. The outcome for this project can increase in its effectiveness by paying attention to the design techniques adopted by the designers and developers of the most recent iOs interface.

iOs Guidelines

- Clarity. Keep the visuals clear. This is done by ensuring that the text is always legible, the icons are precise, there are only subtle adornments, the screens focus on functionality, there is sufficient negative space and that colour, fonts and graphics are used appropriately to highlight important content. - Consistency. Keep the screens consistent by using well known icons, standard stylistic text treatments and well understood terminology. - Feedback. Let people know that their actions have been acknowledged and completed. iOs for example ensures that interactive elements are highlighted briefly when tapped, or progress indicators are used to inform people of where the longer-running operations are at and that animation or sound is adopted to acknowledge an interaction. - User Control. Don’t let the app take over decision making. Ensure that actions are easy to cancel and that elements are familiar and predictable to reassure the audience. - Built in Components. Whenever possible, allow the app to support biometric authentication to increase security and familiarity. But also make sure to use UI Kits to keep the interface consistent. Bars contain information to tell people where they’re at in the app, as well as containing buttons. Views contain the primary content and can be scrolled through, as well as being the space on screen where information can be inserted or deleted. - Controls initiate the actions, and come in the form of buttons, switches, text fields and progress indicators. - Gestures. Ensure that the app incorporates well-known gestures for the audience. Tap, drag, flick, swipe, double tap, pinch and hold are all interactions which provide the user with a short-cut route to perform a task. The features of an iOs app should acknowledge this. - Modality. Alerts provide modal experiences. They are the main focus temporarily and they prevent other tasks from being completed until they’re acknowledged and dismissed. This is particularly useful when trying to get the user’s attention to highlight urgent information. The notification or alert can occupy the whole screen, or only cover it partially. Either way, there should always be a completion or cancel button accessible in order to exit the view. There should always be a title to identify what is happening, and there should be a consistent use of modal transition styles throughout the application. - Navigation. User’s are unaware of navigation within an app, until it doesn’t meet their expectations. A designer is responsible for using navigations that don’t draw attention to themselves, dominate the interface or takeaway from designed elements. People should always know where they are in the app, and they should only be given one path to each screen to avoid confusion or loss of direction. - Data Protection & Settings. Users need to grant permission if the app asks to access personal data. A user will expect to have complete control over their information. It’s important to explain why the app needs the information, as well as allowing settings to be changed whenever. When it comes to settings, there needs to be as little reason as possible for setting changes, since the default settings should closely resemble what the user expects. For authentication, users need to gain something in return when authenticating their identity, such as access to information or personalisation. Data entry also needs to be as fast and easy as possible to keep the user engaged, and a picker should be used to choose from a list of predefined options whenever possible. Make sure that the values are ordered logically when using a picker.

iOs interface

iOs settings screens

iWatch interface design

Case Study 02 iOs Technology As the previous case study revealed, iOs has gone through 11 seasons of development in order to now provide devices with more intelligence and power than ever seen before. There are a few ground-breaking technologies which have revolutionised how users engage with their digital worlds, as well as changing what a user expects to see and gain from user interfaces, based on how user interfaces now typically behave.

iOs interface

Apple FaceiD technology

TouchiD

TouchiD was invented because Apple deemed it appropriate to increase security for the digital data stored on their devices. The user can use their fingerprint to unlock their information and activate features, instead of a passcode. It is a highly advanced piece of technology. Sapphire crystal forms the button and has been chosen for its clarity and strength, protecting the sensor but also focusing the finger directly onto it. A steel ring is then place around this button and detects when the finger is placed, to tell TouchiD to start reading it. Advanced capacitative touch, a technology mentioned in the ‘History of User Interface Design’ chapter of this research book, takes high-resolution pictures of the fingerprint in sections. By mapping out detail beyond what the human eye can detect, the technology can compare a mathematical representation to the fingerprint added to the system prior, and unlock the device. It also automatically updates the stored mathematical version to improve accuracy, as the user is interacting with the device. It has become one of the safest methods of securing data for two reasons. One is that every fingerprint is unique, and so two separate fingerprints are hardly ever (1 in 50,000) alike enough for a match on TouchiD. Secondly, images of the fingerprints are never stored on an Apple device, only mathematical versions, and so it isn’t possible for someone to access your actual fingerprint from the stored data. It also is never backed up anywhere such as iCloud or Apple servers, and isn’t used to match other databases. TouchiD is available for developers to integrate into their applications, to sign into their apps or authenticate their identity before performing an action.

FaceiD

Face iD has used facial recognition technology to improve upon TouchiD. Although both are still very much in use. The TrueDepth camera system can map the geometry of the human face and a user can then unlock their device by simply looking at it. Over 30,000 invisible dots project onto the face and create a depth map, as well as capture an infrared image. Akin to the TouchiD technology, a mathematical representation of this data is then created and stored. It’s designed to respond to changes in appearance, such as the presence of accessories, but asks the user to confirm (through entering their passcode) a more significant change such as a shaved beard. FaceiD is ‘intelligently activated’ by lifting up the phone, tapping the screen or and incoming notification. Once the user looks at the screen after any of these instances, they are able to unlock it without physically touching the device. FaceiD is a tangible response to Bush’s quote from ‘As We May Think’, noted in the second chapter of this book. He observed and questioned the possibility for a more direct route, between human and the physical world, than through senses. FaceiD technology has achieved exactly this, and is a testament to the value of those who think up the seemingly impossible. Again, it is available to developers to integrate into their iOs applications, to serve the same function as TouchiD. Any app that already uses TouchiD, will support FaceiD.

ARKit

For Apple, Augmented Reality is supported on their devices through the integration of ARKit. They claim that they host the biggest AR platform in the world. The kit combines virtual reality with the environment around the user, and can be incorporated into multiple applications to enhance the user experience in entirely new dimensions. The kit can see and place digital objects on surfaces. Artwork can be integrated into the experience, and so can bring real-life posters and images to life. The camera is also of a high resolution, and so brings everything on screen into crisp focus, to improve the experience of the audience. It uses the same technology as FaceiD, alongside technology known as Visual Inertial Odometry to track the world and sense where the phone is in relation to the room. Ikea has integrated AR through their app called Ikea Place. The user can visualise their products in their home before they make purchases. An extremely wellreceived application, Pokemon Go, allows for users to catch real-size pokemon and respond to their scale through the movement of their device. Augmented Reality is a highly effective way of easing the user experience for an audience, by making their access to information mimic interaction with the real world more closely. Gestures and interactions don’t have to be learned by the user. Instead the technology responds to what happens in reality.

SiriKit & Machine Learning 77

SiriKit allows apps supporting iOs and watchOs to work with Siri. Users can perform tasks using only their voices, as Siri intelligently responds to requests. For example, a user can request Siri to ‘make a note of the time and place in my list app’ and it will be completed without the user having to physically engage. This again enhances the user experience, as the stress of performing a task through less-natural interaction is removed.

iOs interface

TouchiD technology

FaceiD & TouchiD application - Apple Pay

04.03

Case Study 03 Apple Health This app makes it possible for a user to learn about their health and reach their own, health-related goals. By taking data from an iPhone and/or Apple Watch (linked to the same Apple iD account) or third party app thatâ&#x20AC;&#x2122;s compatible that the user already uses, the audience can view all of the relevant information and progress in one place. It is also intelligent enough to recommend applications to the user, based on their personalised settings and trends, making it very easy to make progress with their physical health and mental wellbeing.

HealthCare apps

Apple Health home screen

History & Function

The Apple Health app has been included on Apple devices since iOs 8. It doesn’t have to be added to the applications shown on the home screen of the device, and it also cannot be removed. Apple developers have deemed it appropriate to focus on four different categories to better the audience’s health. These four are Activity, Sleep, Mindfulness and Nutrition. Activity and Sleep use biometric technology, both built into the Apple device or from a third-party tracker, to track progress and quality of movement or sleep. Mindfulness and Nutrition are areas which can suggest third-party applications on the iOs App Store to help monitor and take control over these facets of health. The app is also capable of tracking other important data, such as information related to the heart, body measurements and reproductive health.

Design

The style of interface for this application strongly coheres with the iOs guidelines as explored in the previous Case Study. At the top of the screens, the bars contain signal, time and battery information as required and seen throughout the rest of the iOs interface. The back interaction button is placed in the most common position on the screen, and labelled. The title of the pages appear at the top, in the largest and boldest version of the font compared to the other elements. A soft but diverse palette is used to engage the user, as well as separate out the four categories clearly. The typeface ‘San Francisco’ is the system typeface for iOs since iOs 9. It is very legible, clear and consistent (as recognised by Apple). Weight, size and colour have been used diversely, but consistently for each type of information, in order to highlight the most important content. The one typeface has also been used throughout in order to increase the professionalism of the final aesthetic. Boxes are used around different categories of information, and spaced according to how they should be grouped. This is a theory which directly relates to Gestalt, as identified in a previous chapter of this book. The icons for the menu at the bottom are simple and recognisable. They also change colour as they’re tapped, whilst remaining this colour as the screen shows the information related to that tab. As shown on the next page, there is a vast amount of complex data stored and organised by this application. It is done very successfully through multiple design techniques. These include using bar charts to visualise the data and easily compare it to other hours, days, weeks, months or years. A menu across the top of the chart allows the user to switch between different views according to their preference. The vivid, primary orange highlights the important shapes that convey the content the quickest and easiest. Shapes, language and order is kept simple and logical to help with digestion of the information. Specifically to the medical iD, which would be useful in an application containing information for a Type 1 diabetic, the information is organised through a list of interactive components. Not too dissimilar from the ‘settings’ pages of iOs, the information is direct and legible, with the important phone numbers being placed in a separate colour to not only emphasise them, but inform the audience that they can be interacted with to perform a desired task.

Techniques to Incorporate

- Use colour boldly in order to draw attention to the most important aspects of the screen. - Alternatively, use it to categorise information so that the audience won’t need to do it for themselves. The categories need to be logical and coherent. - Use the largest, most bold version of the font for the title of the page, as this constantly reminds the user where they are at in the application. - Consider using this well-known, successful font in the final app. ‘San Francisco’ is diverse, designed to be used on screen and it is arguably the very essence of the iOs interface. - Use only one typeface throughout the whole application, to make it look more professional. - Put colour fill boxes around different types of information, the most important pieces of information or interactive buttons to categories them or highlight them on the screen. - Keep the icons simple and recognisable. - Place the icons across the bottom on the screen to then be in view and easily accessed on every page within the application. Use colour fill to highlight them when they’re tapped and when they’re currently in use. This is another way to tell the user where they are. - Use graphs, bars and charts effectively and allow multiple viewing options accessed by an obvious tab. - Put interactive elements in another colour.

HealthCare apps

Apple Health app screens

Settings screen

Case Study 04 mumoActive App mumoActive Diabetes provides those affected by Diabetes with the means to see all crucial information in one place and have complete ownership & security over it. Itâ&#x20AC;&#x2122;s not about the technology, but about the empowerment of understanding your health, being connected to those involved in the care and being free from avoidable health complications of this life-long disease.

HealthCare apps

iPad Dashboard

Key Information

Features

Design

These interface proofs were designed by the UI designer Daniel Lewis James and put forward throughout the iterative creation of the app. His career and process has been explored in the second chapter of this research book. The app was designed and then released in February 2014. The developer of the app is mumoActive, but the seller is a company called Strategic Specific Limited. They have categorised the app as Health and Fitness, despite the better judgement of Sheldon Steed. The concept for this project outcome could fall into the Health or Communications category. The target user of the application is anyone older than 4 years of age. - Tracking of blood glucose with manual input. It stores the information for days, weeks and months. - Take notes/add hashtags to find information easily and to track what happens after you’ve eaten particular foods. - Use notes to keep in touch with teachers at school. - Store and easily access clinic contacts. - Store medication recordings and insulin pump settings. - Compliant with NHS security standards. The app doesn’t take and use the information, it’s only for the audience. - The option to share information with diabetic clinic professionals. - Integrates the usability with existing apps (i.e. email and notes). The style of the user interface is very simple, clear and neutral. The complex data is presented in delicate, linear forms with a typeface that complements this. The most important information (the blood sugar level and carb intake) is presented in a simple wheel with a slider to adjust the amount. This is a much more straightforward and engaging method for the audience when inputting repetitive information. Using a darker background ensures that information stands out in the foreground, with the most important information or interactive features being emphasised through colour. Dan James has used simple, linear icons which do not take over the interface, but instead complement the use of graphics and type to help inform the reader of the type of data they’re looking at. For example, icons which show the time of day using images of the sun’s position in the sky, have been used to identify the times attached to the logged blood glucose readings over the past 24 hours. By limiting the use of colour and images, and keeping the style very neutral, the interface doesn’t exclude a gender. This is very important since Type 1 Diabetes is an autoimmune disease and so affects both genders equally; there is little evidence to support it occurring more often in men or women. It is a sophisticated palette and style, which possibly appeals to a more mature audience. The intended user is above 4 years old but the nature of the information on the page, and the sophisticated use of black and linear elements wouldn’t engage users this young.

Techniques to Incorporate

- Keep the elements simple, clear and legible. - Use linear infographics and visuals to present complex data. - Ensure that a slider or pre-determined list can be used to input the data, to ensure that the user is asked to do as little as possible. It is also good to consider technology or methods of data retrieval and input that may not exist yet, or at least is not being harnessed by current technology. This keeps applications cutting-edge and appealing to an audience. - Keep icons very recognisable and simple. - Use sophisticated visuals to communicate that the function is serious and the data is important, but consider ways of adding more ‘character’ into the final design to engage all ages in the target user range. This could be a feature that is customisable according to the personality and age of the person using it.

HealthCare apps

mumoActive input screen

mumoActive storing & tracking

Case Study 05 Vitality Health Users are already invested in the vitality health or life insurance scheme. With this application, they can use their member number to enjoy active rewards. The app allows the user to access cinema tickets, Starbucks drinks and Apple Watch rewards according to how active they have been. The app also contains a medical and health iD, to help the user to understand their health better; not too dissimilar from the Apple Health application. The app is linked to external apps, such as Apple Health, in order to keep track of the activity of the user and reward them accordingly.

HealthCare apps

VitalityHealth main screens

Features

Design

- Link the profile to Apple Health and/or the Apple Watch accounts to earn the Vitality points for their activity. - Once the threshold has been reached for Vitality points for that week, the app generates rewards. - Cinema ticket codes for Vue and Cineworld are generated. - Free Starbucks drink QR code is generated. - The status of these rewards is displayed on the home screen and constantly refreshed. - A digital membership card with name, details and an image allows the user to be identified by partners of Vitality. - The app also contains written information about earning the points, as well as understanding their health better and getting healthier. - The app also periodically disables desirable features and prompts the user to get their health checked by a professional, before those features become available again. This ensures that the user is aware of their state of health, which is a primary concern addressed in the rationale of this concept. The design is simple and eye-catching, through the use of a bold pink. The choice of colour palette could arguably discourage a male-audience but it directly links to their brand identity. This consistency between interface and brand identity is key, as it allows the user to draw links between the identity and the service, either strengthening the reputation; or in less favourable circumstances, weakening their brand reputation. The same font has been used throughout the application, with the exception of the brand mark appearing in their bespoke font. The titles of sections are seen in capitals and placed in the primary pink colour, so as to draw attention to themselves. Buttons, interactive elements and key pieces of information (such as when the data was last refreshed) are placed on a colour-filled box. This either indicates their interactivity or simply emphasises their existence. A progress bar is present for viewing the status of current rewards, and colour fill is used to identify when the reward has been achieved. Encouraging, approachable and personable language is used throughout the screens, such as ‘well done’ to put the user at ease and make them aware of the sympathy the app has for their personal progress. By creating the impression that the application wants them to succeed, the more driven they will be to succeed. The user is also put at ease, whilst navigating information related to their health, through soft-edged shapes. It’s important to consider how relaxed a user is when designing for their health.

Techniques to Incorporate

- Ensure that the primary colour links to the brand identity. The logo doesn’t need to be placed on every screen throughout the application. It can be used to represent the ‘home’ button, but it is more typical and effective to incorporate branding using colour palettes. - Use capital letters for titles and important pieces of information. - Use a linear or circular progress bar to constantly update the user with information that is important to them, or that they would always like to know. - Use colour and/or fill to identify when the status of something has changed. - Use approachable and encouraging language to put the user at ease & motivate them. - Use soft-edged shapes to increase approachability and sympathy.

HealthCare apps

Personal account space

04.04

Case Study 06 Spotify Spotify is a music and audio application which allows users to stream free albums, find songs, discover new music and download the songs with free streaming and a built-in music player app. Userâ&#x20AC;&#x2122;s also have the option to pay for a subscription, to gain more benefits from the application such as listening to music whilst not connected to the internet. Spotify can recommend music, or it can simply store the music that you have collated through their search feature. Playlists can be created and edited at any point.

Successful user interface and experience

Spotify login

Features

Find music, play songs, stream from multiple artists. Download music onto a device. Create your own playlist. Play music and shuffle through songs. Stream radio across the globe. Play music on other devices through bluetooth and wifi. Take song, album or playlist recommendations.

Designer, Tobias van Schneider

Tobias was the Lead Product Designer and Art Director at Spotify. He describes himself as a ‘German multi-disciplinary maker of useful, curious and beautiful things’. Whilst he was art director, Spotify’s users increased from 15 million to more than 70 million. It was during this time that the company became the world lead in music streaming. His work has been featured in many renowned publications, just some of which include Wired, Inc Magazine, Computer Arts and Washington Post.

Design

The style and visual language of this application differs in many ways to the other case studies explored, but simultaneously harnesses some of the same design techniques. The main way in which it differs is through its use of background colour. By placing the content on a dark grey screen, with the text and icons appearing in white, the atmosphere becomes heavier and the language more sophisticated. The interface immediately appeals to a more mature audience. This is key, as some of the audio that can be accessed on the application is explicit, and the target audience is 12+. Icons are used wherever possible to convey information. They appear next to page titles when they’re listed, to help a user choose which feature they’d like to activate. The icons are linear, simple and easily recognisable. For example, the concert icon is an iconic ticket shape. As the iOs guidelines state, it’s important to use easily recognisable icons and ones that appear commonly throughout other apps. Spotify has adhered to this. One exemplary case being their menu icon. Appearing as the iconic three stacked lines, it complements the rest of the interface by matching in line weight, size and colour. Interactive elements are either placed on a soft-edged rectangle shape filled with their primary green shade, or the same shape with a white outline to match the style of icons. The typography appears consistently with capitalised titles, bold type for the names of the artists and albums, and the same font used throughout every page. The app also harnesses the gestures that their users will already be familiar with. These include swipe to flick through tracks, tap to pause and play, and tap and drag to change to a different point in the song. This is strongly encouraged by iOs and is considered in depth by user interface designers.

Techniques to Incorporate

- Use a darker background to increase the level of sophistication of the interface, especially if there is sensitive content within the application. - Use iconic images for icons to communicate quickly. - Ensure that main buttons, such as menu, appear as they would be expected to. - Strongly consider how natural gestures can be used to enhance user experience.

Successful user interface and experience Spotify interface across devices

Case Study 07 Mobilet Mobilet is a mobility and ticketing app concept. Users are enabled to plan, purchase and store tickets for their journeys with ease. The journeys can even be across nations.

Successful user interface and experience

Mobilet app

Features

Purchase tickets via multiple payment methods. Share tickets with friends. Store tickets. Store favourites. Select different methods of transport. See the journey on a map. Compare prices & modes of transport for same journey.

Designer, Jakub Kudelski

In 2017, Jakub Kudelski designed this user interface for NetGuru. NetGuru is a design and software consulting agency in Poland. They specialise in product design, web development and mobile development. Most impressively, they have redefined Volkswagen’s selling process and increased their metrics substantially as a result. The company strives to create the critical elements of systems for their clients, to increase their efficiency and productivity. More specifically, Jakub Kudelski is currently a Creative Director and has had more than ten years experience in branding and digital design. His digital outcomes are bold and powerful. Utilising strong typefaces, blocks of contrasting colours and negative space, he creates clean outcomes both for on screen and print for his clients. Although this is an aesthetic that the outcome for this project will aspire to, it is the style of design for the Mobilet icons that’s most inspirational.

Design

The most striking element of design on these screens is the use of bold colour. The vivid blue, almost purple, hue is used alongside a humble off-white and deep grey. Since it is so vivid, it has been used sparingly and with care. The icons appear in this colour to direct the viewer’s eye to the images, which will communicate information the quickest. This is a technique which improves the user’s experience; they can work less hard to obtain the information that they’re looking for. Furthermore, these icons appear simple and well-crafted. The linear style does not over complicate the form, allowing the graphic to be easily recognisable. The shadows add a dynamic element to their appearance, and gives the impression that they are bespoke without being over-complicated. The rounded stroke caps and soft edges on the shapes reduce the formality. This is a technique to make the user interface screens more approachable, which is particularly useful for a younger audience. Or equally for an application that serves a more relaxed, leisurely function. This application is intended to reduce the stress for the users on their otherwise complicated journeys. Therefore the user interface needed to be as fun, approachable and laid-back as possible, whilst still retaining a level of professionalism. A level of professionalism which reassures its users that it can perform the task to a high-standard. Professionalism has been communicated in other ways, such as jargon and correct terminology relevant to the type of service it is delivering, and crisp graphics which are clearly useful in order to perform the tasks. Another successful element of the design is the character which has been injected into otherwise standardised interface buttons. For example, the menu button consists of slightly differing line lengths, but still clearly represents the well-recognised menu button. The back button has also been stylistically treated consistently, alongside the bespoke feature icons, to create a seamless overall design. It is design manipulation such as this that allows designers to be led with ease through interfaces, as no elements on screen become jarring or a hindrance.

Techniques to Incorporate

- Use bold colour to draw attention to the most important pieces of information on the screens. Use it sparingly however to avoid confusion and a decrease in the professionalism. - Create simple icons which clearly convey their function. - Consider ways in which the icons can stand out compared to competitors, such as shadows, in order to look more bespoke and exclusive to the service represented by the interface. - Look for ways to inject character into the design. This can be done through new approaches to the existing, well-known buttons which also complement the rest of the design. It could also be done through completely new but easily recognised icons, or verbal language with stand-out character.

Successful user interface and experience Friendly review screen

User connections

Case Study 08 Use By Use By is an app that aims to reduce the food wasted by the typical homeowner. The app can keep track of food bought, the food thrown away or eaten, and can notify the user when something is about to go out of date. A camera scan system allows the user to easily keep track of what they have purchased, and a recipe suggestion appears to help them use up the ingredients left in the cupboard. All of these features exist in order to reduce the food wastage, save money and reduce their contributions to the atmosphereâ&#x20AC;&#x2122;s CO2 emissions.

Successful user interface and experience

Use By splash screen

100

Rationale

Use By was designed for a Leeds University hypothetical project by a Graphic Design undergrad. It aims to resolve the issue of food waste. The stats that substantiate the rationale of this project stand currently as: £13 billion worth of food binned in 2015, 15 millions tonnes of food waste per annum, and 11.7% of food that’s purchased is wasted avoidably. The student accepted and acted on the UN’s claim that if food waste was reduced by 25%, there would be enough food to feed all malnourished people. Also in her rationale, the designer claims that not only would it resolve this issue, but it would also help the user to save money, as well as decrease the size of their carbon footprint.

Designer, Emma Blackman

Emma Blackman is a comprehensive, successful designer who currently works freelance alongside completing her undergraduate degree. She produces clean aesthetics, whilst also injecting character and flare through bespoke typography, calligraphy and colour palettes. She is particularly fluent in balancing her on-screen components. Ensuring that the user is guided to the correct places on-screen, in the correct succession. She does this through multiple design techniques which could be adopted during the design of the Type 1 Diabetes application.

Design

Emma has chosen a clear typeface. It always appears uppercase, and the leading has been increased to improve the legibility. Although typically it isn’t easier to read fonts when they’re uppercase, in this context it becomes not only clean and well-balanced, but it also causes the screens to appear stylish and contemporary. This is well-suited to a young-adult audience who have recently become students or homeowners and are solely managing their food stocks and wastage. To complement the stylish and clean use of typography, Emma has achieved the same through a unique, striking colour palette. A gradient has been placed on the three main colour combinations. This not only modernises the screens, but also helps to draw the eye to the correct places. By creating a fluid motion, the eye naturally falls up or down. This is also dependant on the emphasis created by the elements as they contrast, more or less, the differing background intensities. Albeit that this technique is successful for this particular case study, and helps to make the arguably dull topic of food wastage more engaging, a gradient would not work for every mobile application. It has been used appropriately here, and the colour choices complement each other impeccably. If the designed outcome for this study into Type 1 Diabetes is to incorporate a gradient, it needs to appear sophisticated, well-considered and only add to the final aesthetic, rather than take anything away from it. Furthermore, Emma has designed a set of successful, bespoke icons to not only guide the user through the information on-screen, but also complement her chosen tone of voice. They are delicate, clean and well balanced to work alongside the typography and layout. By using consistent line thickness, a simple outline version and bringing in the dark grey from the text on screen, the icons marry well with the other elements. They are also easily recognisable. A home icon represents going back to the home screen, an iconic calendar represents the button which activates the calendar pages and a fridge contains the pages with the ingredients on her shelves. The icons look as though they belong, and all appear in a size on screen which can be easily tapped and activated by the user. Hierarchy has been well considered and executed throughout her work. A primary example of this is the addition button at the bottom of the screen. Since the application will be most used to scan in the food bought to keep track of what’s in stock, as well as their use-by dates, she has placed the activation button for this feature in one of the most accessible and obvious positions. It is so easy for the user to tap the button with their thumb at any point. Also, she has used a colour background, drop shadow and bold line weight to increase emphasis on the interactive element. The drop shadow in itself communicates that the element is a button. Buttons on user interfaces typically mimic a button in the physical world through added drop shadow effects; buttons in real-life sit on a raised plane so that, when pushed, the input action causes the output. These are just a few of the ways in which Emma has designed a coherent and successful mobile application, which is very usable at the most basic level, but also engages the user through vivid, sophisticated and bespoke design elements.

Techniques to Incorporate

101

Use leading to create clean, legible type. Use striking palettes and fresh tones to create a contemporary finish. Consider gradients to add a different dynamic and guide the user. Use consistent thickness of stroke and colour to increase professional finish of the icons. Use a drop shadow to highlight the interactive element. Place the most used buttons in the most accessible and obvious positions.

Successful user interface and experience App screens & function

102

Reminders & recipes

103

Literary Review

104

“Content precedes design. Design in the absence of content is not design, it’s decoration.” Jeffrey Zeldman

Co-founder of The Web Standards Project 105

05.01

Literary review

Why? There is good great reason to create a mobile application to aid life for Type 1 diabetics, and their families, when considering the current management of the disease & the future of its treatment.

106

Freestyle Libre - a revolutionary blood glucose monitoring device which stores levels for up to 8 hours. Levels can be viewed by simply scanning the patch

When taking into consideration the refined research in this document, as well as the broader research which has fed into this study, it becomes apparent that professionals surrounding Type 1 Diabetes can see a space for a mobile application to aid life with the disease. Not only have the case studies demonstrated that great UI design, which adheres to the human dimensions and the human mind, can have a powerful impact on both the health, pleasure and lifestyle of its users. More than this, research into the current diagnosis and treatment of Type 1 Diabetes, and the emotional impact it has on those directly affected, has revealed that there is more that can be done in supporting this audience. Users would appreciate a more direct way of being notified that they, or their diabetic children, are out of range. Not only does it need to be fast and direct, but also reassuring and emotionally sympathetic. Diabetics are normal people, living normal lives, with an extra consideration to be concerned with; their blood glucose levels. They would therefore appreciate more refined and ‘slick’ ways to monitor this discreetly, whilst having complete control over their data and information. The UI and UX design industry, as well as government standards, have put systems in place to ensure that all of this is possible. As well as this, it has already been demonstrated through speaking to the founder, and research into the design of the Type 1 Diabetes app ‘mumoActive’ that users and the National Health Service respond positively to a mobile application of this nature. This is another strong motive to produce an outcome for this audience, within this context, in response to personal research and conclusions. Type 1 diabetics and their families may benefit greatly from digital design; provided it has been designed with their needs, emotional and physical, in mind. The power of good UI design and a positive user experience, combined with the future of Type 1 Diabetes treatment and management, could result in an engaging digital outcome which solves a real problem empathetically.

107

Personal Reflections & Conclusions

108

â&#x20AC;&#x153;The more I deal with the work as something that is my own, as something that is personal, the more successful it is.â&#x20AC;? Marian Bantjes

Designer, Typographer, Writer and Illustrator 109

06.01

How the project has improved the designer

Nuclei of an atom - representing the importance of responding to scientific research and advancements when designing within the healthcare sector.

110

As a designer, why do I care? Despite I myself, the author & designer of this project, having a personal connection to Type 1 Diabetes, I also care about harnessing design to better the lives of those around me. Across the 3 years

As a result of the last 3 years of my undergraduate studies, I can confidently state that I now think like a designer. Not only has it become habitual to analyse why certain design techniques have been utilised all around me, but more than this I question the emotions that they evoke in an audience, and what could be changed to make pieces of design more effective in its context. This is a result of my studio practice, as I’ve had to research how typography, colour and shape can have certain effects on a consumer of design. But more specifically, the theoretical thinking skills have been drawn out through our CTS studies. I have thoroughly enjoyed looking into the patterns and trends that have emerged, as design has similar effects on groups of people. And how these patterns and trends can inform design decisions to improve my own studio outcomes. To understand how to be particularly empathetic to an audience regarding their health and care, as well as research in depth into the biology and physiology of humans to further understand their situations, emotions and how to better lives with design, has been particularly enjoyable for me. This is the reasoning behind many of my projects over the past 3 years being focused around biology, healthcare and academia.

What this project has helped the author to realise

This project in particular has made me realise that there is more to design than simply making things look pretty. Sheldon Steed, CEO and founder of the Diabetes app mumoActive, helped me particularly to realise this. After a phone call with the successful businessman, I had a clearer idea of what I want my goal to be as a designer; he stated that a big opportunity for someone like me is to take a problem in the lives of the audience, and use sympathy and good design to make life easier for them. This doesn’t have to materialise as an almost-impossible task, but instead it’s more effective to conduct user research and figure out what they’re already doing, then simply harness design to make these tasks even easier for them. In the context of this project, this has looked like using iOs software and the ability to notify multiple people at the same time, through visual, audible and physical feedback (onscreen notifications, sound effects and vibrations) to make a person aware of a hypo at any point, and hence removing the stress of not knowing when one might be occurring. Furthermore, by simply allowing a user to store blood glucose levels over extended periods of time, and automatically send information periodically to medical professionals, removes the added pressure to have to remember to record this data manually. I aim to produce helpful designs in the future, and this project has made me realise the importance of user research, as well as the understanding of good digital design techniques, in order to achieve this.

111

Project Proposal

112

“Good design is all about making other designers feel like idiots because that idea wasn’t theirs.” Frank Chimero

Designer, writer and illustrator. Clients include Nike, Microsoft & Starbucks. 113

Concept & aim

Apps on iPhone X

The catalyst for this concept has been the beautiful creations of a variety of UI and UX designers, as well as the boldness inherent to Engelbert’s Law. This law states that ‘the intrinsic rate of human performance is exponential’. The user experience and interface industry, one with a rapid rate of growth, requires designers who are willing to dream big and appreciate the power of technology; both that already exists and does not yet. The outcome for this project will be a testament to this. 114

07.01

The concept and aim for a final outcome, based on the research documented in this book.

The outcome will be an iOs app concept used on an Apple iPhone and iWatch, to demonstrate the future possibilities of medical and smartphone technology when they’re combined. It will aim to remove stress for parents and guardians who care for a young person with Type 1 Diabetes. How will it work?

The blood glucose levels of a Type 1 diabetic will be constantly fed back to the devices, through remote readings from a chip inside the Type 1 diabetic. This is technology which doesn’t yet exist (the freestyle libre and artificial pancreas are the closest two pieces of existing technology). However, Engelbart’s Law has motivated me as a designer to design an interface to work with technology which could exist in the not too distant future. The most significant feature of this application is that both the child and parent is automatically notified when the young person’s blood glucose level is out of range. I.e. they’ve entered a state of hypoglycaemia or hyperglycaemia. The levels relevant to the young person’s profile can be viewed at any time, recorded and automatically shared with the appropriate diabetic care team. The young person would interact with the app via the iWatch, whilst the adult would access the features via the iPhone. The child can then be notified at any time by the app or the parent, or walked-through correct procedure if they’re out of range, should they choose to activate these settings and provided that all information is medically sound.

Why is it relevant?

This data needs to be readily available to parents, guardians, teachers, friends and the young person with Type 1 Diabetes. As identified in user-interviews and questions answered by medical professionals, knowing the data can remove stress that comes with the constant risks of Type 1 Diabetes. Knowing exactly when hypoglycaemia/hyperglycaemia will occur and how to best deal with the situation would support recently diagnosed families to work as a team to adjust to a huge lifestyle change.

115

07.02

“Informing the parents & guardians of the young person’s levels is good for young children” Lucy Oldman, Type 1 diabetic

It was identified in the user research that this concept, although useful for anyone with Type 1 Diabetes, would be rather intrusive and frustrating for older teenagers if their parents could constantly access the data and send reminder notifications. Both Lucy Oldman (an adult Type 1 diabetic who was diagnosed at age 18) and Rachel Allen (a paediatric nurse who has been practicing for 13 years) revealed this insight into the minds of potential users and the nature of the disease. For this reason, the primary audience will be parents and guardians of young Type 1 diabetics; diabetics between the ages of 8-14.

Audience

The app will offer the ability to switch off and on the parent notifications, as well as hypo/hyperglycaemia walk-through settings, in the instances where the diabetic may be older than 14 but also have a learning disability. This level of personalisation makes the application more accessible and empathises further with the real user needs. Displayed on the right are examples of the ages, activities and environments within which the intended user would be found.

116

Gender

As specified in the chapter ‘Type 1 Diabetes’ which explored the nature of the disease, Type 1 Diabetes does not favour a particular gender. Instead, the autoimmune disease affects both boys and girls. The design of the application interface on the iWatch will not be gender biased. The parents and guardians using the application on their iPhones would also be either male or female. For this reason, both the visual and written language will remain neutral so as to optimise the user experience for both genders.

Age

The research has also revealed that in the U.S., the peak age of Type 1 Diabetes diagnosis is 14 years old. In essence, the research suggests that a user application, which would remove stress for real users, would be most beneficial to a young diabetic and their family. However, a child between 8-14 may not be in the position to manage all of this data alone, which is why the parents are to be the primary user/audience of the application. Although the young person would interact with the features and interface, they would only receive notifications to prompt them to manage the disease consistently and correctly in their day to day lives.

Environments

Between the ages of 8 and 14, the young person would be expected to spend most of their time at school. It is common that children of this age also spend their time round friends houses, doing sport and at after-school clubs. These are activities where an adult, unfamiliar with Type 1 Diabetes and its management, is responsible or the child is engaging in physical activity which directly affects blood glucose levels. The app, which regularly updates and notifies the young person/parent when necessary, would reduce stress for these scenarios; it would put the parents’ mind at ease whilst they themselves are at work or home, that their child’s health is being monitored without stopping them from being involved in the fun.

Audience examples

117

07.03

Design direction

mumoActive

Similarly to the app â&#x20AC;&#x2DC;mumoActiveâ&#x20AC;&#x2122;, the interface will clarify types of data and simplify data storage, whilst engaging the user to create an enjoyable experience.

118

MusixMatch Brand Visuals

Colour & Data In a previous chapter of this research book, professionals have demonstrated good user interface design through their literature and portfolios. By interrogating case studies and understanding the studies of experts such as Raj Lal, the iOs app can now incorporate techniques to ensure the audience can use the product, as well as enjoy the experience.

119

Ultimately, the design will be simple, sophisticated and visually engaging. To aim for this style is a necessity, since the user will have to navigate through and store complex, important data in order to restore their confidence and reduce stress as theyâ&#x20AC;&#x2122;re managing Type 1 Diabetes. To achieve a positive experience such as this for the user, Raj Lal encourages that guidelines are followed. The first being that information is laid out clearly and to avoid clutter on the screens. To the left, the app â&#x20AC;&#x2DC;mumoActiveâ&#x20AC;&#x2122; has used sophisticated, clear graphs to convey important information. He suggests that buttons, such as menu and back, should appear consistently throughout the pages; both regarding their position and style. Bright and bold colours (see the palette shown above) ensure that the experience is exciting and stimulating, particularly if a younger audience is using the application or the information is arguably dull. It is also crucial to allow levels of personalisation, for example adding a name or changing the colour palette, since this adds an extra level of consideration for the user and their wants or needs.

Images & Icons In a previous chapter, two mobile apps and the techniques used by their designers were explored. Although both very different in function and purpose, the interfaces are friendly and relaxed. Since the aim of the Type 1 Diabetes application is to reduce stress and aid the management of the disease in everyday life, the interface should be approachable and friendly. The icons play a significant role in the success of these two interfaces. Soft edges & rounded strokes reduce the formality of their appearance to put the audience at ease. The simple, linear design style used to create an easily recognisable form, ensures that the icons are understood quickly. Other buttons, such as back, menu and view, complement the style of the icons since they have been styled in the same fashion. All of these icons have been placed in logical positions, where the user would expect to find them based on their use of other applications. The use of icons for the outcome of this project will follow suit, to improve the user experience as theyâ&#x20AC;&#x2122;re more seamlessly guided through the application.

Design direction

Raj Lal states the importance of using images and icons where possible to convey information, rather than words or requiring recall. The icons therefore need to be instantly recognisable, as well as appeal to the target audience for this mobile and watch application.

120

Case study examples

121

The outcome will be an iOs app concept used on an Apple iPhone and iWatch, to demonstrate the future possibilities of medical and smartphone technology when theyâ&#x20AC;&#x2122;re combined. It will aim to remove stress for parents and guardians who care for a young person with Type 1 Diabetes. This book has been designed by Sarah Commans for her Final Major University Project at the University for Creative Arts, Farnham. The research has been conducted and collated by the author, to feed to the design of the user interface outcome.

122

123

Bibliography & Illustrations

List of Illustrations

124

Figure 1

Sarah Commans (2016) Self-portrait Illustration [Vector Illustration]

Figure 2

Insulin Crystals (2018) [Micrograph] At: https://www.gettyimages.co.uk/detail/photo/insulin-crystals-lightmicrograph-high-res-stock-photography/470659249 (Accessed on 05.04.18)

Figure 3

Douglas Engelbart,1984 (2017) [Photograph] At: https://blog.prototypr.io/an-abridged-history-of-ui-7a1d6ce4a324 (Accessed on 08.04.18)

Figure 4

The Industrial Revolution (2017) [Drawing] At: http://top5resources.blogspot.co.uk/2014/05/industrial-revolution. html (Accessed on 08.04.18)

Figure 5

Xerox Alto - First Graphical User Interface (2016) [Photograph] At: http://www.righto.com/2016/06/y-combinatorsxerox-alto-restoring.html (Accessed on 08.04.18)

Figure 6

Henry Dreyfuss ‘Designing for people’ (Computer work stations) (1955) [Drawing] At: https://simanaitissays. com/2014/06/13/henry-dreyfuss-designer-for-humanity/ (Accessed on 22.02.18)

Figure 7

Apple Macintosh 128 Promotional Poster (1984) [Promotional Poster] At: https://www.pinterest.co.uk/ pin/83387030579723269/ (Accessed on 08.04.18)

Figure 8

Modern Apple Products (2018) [Photography] At: https://unsplash.com/photos/RrFvYtCwO8E/info (Accessed on 08.04.18)

Figure 9

Pokemon Go (2016) [Photograph] At: http://comworldseries.blogspot.co.uk/2016/07/pokemon-go-sowsaugmented-reality-seeds.html (Accessed on 09.04.18)

Figure 10

Brain Cells (2018) [Micrograph] At: http://www.iflscience.com/brain/brains-work-their-genes-just-much-theirneurons/ (Accessed on 05.04.18)

Figure 11

Typographic Styles (2017) [Photograph] At: https://unsplash.com/photos/jhtPCeQ2mMU (Accessed on 10.04.18)

Figure 12

Natural Gesture - Fingerprint touch iD (2016) [Scan] At: https://www.carolina.com/teacher-resources/Interactive/ development-of-latent-fingerprints-with-silver-nitrate/tr38704.tr (Accessed on 07.04.18)

Figure 13

Gestalt ‘Continuity’ Principle 01 (2014) [Image] At: https://mashfordp8.wordpress.com/2014/03/11/the-gestaltprinciples/ (Accessed on 05.04.18)

Figure 14

Gestalt ‘Continuity’ Principle 02 (2015) [Image] At: https://cmm312fall2015.wordpress.com/page/22/ (Accessed on 05.04.18)

Figure 15

Ken Jeffery (2018) Gestalt ‘Proximity’ and ‘Similarity’ Principles [Image] At: https://opentextbc.ca/graphicdesign/ chapter/3-3-compositional-principles-strategies-for-arranging-things-better/ (Accessed on 05.04.18)

Figure 16

Jess Watters (2018) White desk and black eye glasses [Photograph] At: https://unsplash.com/photos/ HyoRyMAVpNA (Accessed on 07.04.18)

125

Figure 17

User Testing a Product (2017) [Photograph] At: https://unsplash.com/photos/Bs8pjXQe7k4 (Accessed on 07.04.18)

Figure 18

Interviewing the Target Market (2017) [Photograph] At: https://unsplash.com/photos/bMclPCvSHLo (Accessed on 07.04.18)

Figure 19

Dan Lewis James (2018) mumoActive [Photograph] At: http://danlewisjames.com/work/mumoactive/ (Accessed on 05.04.18)

Figure 20

Dan Lewis James (2018) Whizz Education [Photograph] At: http://danlewisjames.com/work/whizz-education/ (Accessed on 05.04.18)

Figure 21

Dan Lewis James (2018) mumoActive Visual [Image] At: Re: mumoActive Proofs - Invitation to collaborate [Email sent to Sarah Commans, 6th March 2018].

Figure 22

Rami Al-Zayat (2016) Mobile Applications on Home Screen [Photograph] At: https://unsplash.com/photos/w33-zgdNL4 (Accessed on 05.04.18)

Figure 23

Gu Lab, UNC-NC State (2017) Artificial Insulin-producing Beta Cells [Micrograph] At: https://medicalxpress.com/ news/2017-10-synthetic-beta-cells-secrete-insulin.html (Accessed on 05.04.18)

Figure 24

HealthHearty (2018) Young Person Being Diagnosed [Photograph] At: https://healthhearty.com/diabetic-comacauses (Accessed on 10.04.18)

Figure 25

Drew Hays (2017) Scientist Carrying out Medical Research [Photograph] At: https://unsplash.com/photos/ tGYrlchfObE (Accessed on 10.04.18)

Figure 26

Diabetic Testing Blood Glucose Level (2018) [Photograph] At: https://pixabay.com/en/the-level-of-sugar-in-theblood-3310318/ (Accessed on 10.04.18)

Figure 27

Kate Redfern (2016) Typical Blood Glucose Monitor [Photograph] At: https://unsplash.com/photos/GBVRyE4PRLk (Accessed on 10.04.18)

Figure 28

Jamie Street (2017) Notifications on a User Interface [Photograph] At: https://unsplash.com/photos/33oxtOMk6Ac (Accessed on 09.04.18)

Figure 29-30

Apple Health App (2018) [Image] At: https://uxplanet.org/apple-health-of-a-healthy-human-82be6bcb248c (Accessed on 10.04.18)

Figure 31

Saulo Mohana (2016) Smartphone Homescreen [Photograph] At: https://unsplash.com/photos/D_kOW7iHNnw (Accessed on 09.04.18)

Figure 32

iOs Settings Screens (2014) [Image] At: https://www.sohu.com/a/204449136_673833 (Accessed on 10.04.18)

Figure 33

Watch Interface Design (2018) [Image] At: https://wallpapershome.com/download-wallpapers/iphone/apple-watchgui-interface-watches-wallpaper-5k-4k-review-3508.html (Accessed on 10.04.18)

Figure 34

Watch Interface Design (2017) [Photograph] At: https://www.verdict.co.uk/imagination-technologies-canyonbridge/ (Accessed on 10.04.18)

Figure 35

Apple FaceiD Technology (2017) [Photograph] At https://www.dailydot.com/layer8/apple-face-id-app-permissions/ (Accessed on 10.04.18)

Figure 36

Apple (2018) Touch iD Technology [Image] At: https://support.apple.com/en-gb/HT201371 (Accessed on 10.04.18)

Figure 37

Apple (2018) FaceiD & TouchiD Application [Image] At: https://support.apple.com/en-gb/HT201239 (Accessed on 10.04.18)

Figure 38

Apple (2018) Apple Health Home Screen [Image] At: https://www.apple.com/uk/ios/health/ (Accessed on 10.04.18)

Figure 39-41

Apple (2018) Apple Health App Screens [Image] At: https://www.apple.com/uk/ios/health/ (Accessed on 10.04.18)

Figure 42

Apple (2018) Settings Screen [Image] At: https://support.apple.com/en-gb/HT204351 (Accessed on 10.04.18)

Figure 43

Dan Lewis James (2018) iPad Dashboard [Image] At: Re: mumoActive Proofs - Invitation to collaborate [Email sent to Sarah Commans, 6th March 2018].

Figure 44

mumoActive (2017) mumoActive Input Screen [Image] At: https://itunes.apple.com/qa/app/mumoactive-Diabetes/ id808363184?platform=iphone&preserveScrollPosition=true#platform/iphone (Accessed on 05.04.18)

Bibliography & Illustrations 126

Figure 45

mumoActive (2017) mumoActive Storing and Tracking [Image] At: https://itunes.apple.com/qa/app/mumoactiveDiabetes/id808363184?platform=iphone&preserveScrollPosition=true#platform/iphone (Accessed on 05.04.18)

Figure 46

YingShun (2017) Vitality Health Main Screens [Image] At: http://yingshun.co.uk/portfolio/vitality-health-app/ (Accessed on 05.04.18)

Figure 47

YingShun (2017) Log In Screens [Image] At: http://yingshun.co.uk/portfolio/vitality-health-app/ (Accessed on 05.04.18)

Figure 48

YingShun (2017) Personal Account Space [Image] At: http://yingshun.co.uk/portfolio/vitality-health-app/ (Accessed on 05.04.18)

Figure 49

StockSnap (2018) Spotify Login [Photograph] At: https://pixabay.com/en/android-mobile-smartphone-2618093/ (Accessed on 07.04.18)

Figure 50

Spotify Interfaces Across Devices [Photograph] At: http://streaming.dk/spotify-google-cast/ (Accessed on 07.04.18)

Figure 51

Heidi Sandstrom (2017) Spotify Interfaces Across Devices [Photograph] At: https://unsplash.com/photos/ H4fYXZ1hyco (Accessed on 07.04.18)

Figure 52

Lastly Creative (2018) Spotify Interfaces Across Devices [Photograph] At: https://unsplash.com/photos/N_ xjrdKZPkw (Accessed on 07.04.18)

Figure 53

Spotify Interfaces Across Devices [Photograph] At: https://spotifyapk.net (Accessed on 07.04.18)

Figure 54

Jakub Kudelski (2017) Mobilet App [Image] At: https://dribbble.com/shots/3920189-Mobilet-Payments/ attachments/893346 (Accessed on 01.04.18)

Figure 55

Jakub Kudelski (2017) Friendly Review Screen [Image] At: https://dribbble.com/shots/3937905-Mobilet-Send-tofriend/attachments/898406 (Accessed on 01.04.18)

Figure 56

Jakub Kudelski (2017) User Connections [Image] At: https://dribbble.com/shots/3937905-Mobilet-Send-to-friend/ attachments/898408 (Accessed on 01.04.18)

Figure 57-61

Emma Blackman (2017) Use By Proofs [Photograph] [Image] [Email sent to Sarah Commans, 4th April 2018]

Figure 62

Freestyle Libre (2018) [Photograph] At: https://www.freestylelibre.co.uk/libre/products/starter-pack.html (Accessed on 01.04.18)

Figure 63

Hal Gatewood (2017) Nuclei of an Atom [Photograph] At: https://unsplash.com/photos/OgvqXGL7XO4 (Accessed on 07.04.18)

Figure 64

Bagus Hernawan (2017) Apps on iPhone X [Photograph] At: https://unsplash.com/photos/A6JxK37IlPo (Accessed on 10.04.18)

Figure 65

Audience Examples (2018) [Photograph] At: https://www.parenttoolkit.com/grade-levels/life-after-high-school (Accessed on 22.03.18)

127

Figure 66

Audience Examples (2018) [Photograph] At: Audience Examples (2018) [Photograph] At: https://www.parenttoolkit. com/grade-levels/life-after-high-school (Accessed on 22.03.18)

Figure 67

Audience Examples (2018) [Photograph] At: Audience Examples (2018) [Photograph] At: https://www.teachaway. com/blog/top-digital-literacy-resources-teachers-free-lesson-plan (Accessed on 22.03.18)

Figure 68

Audience Examples (2018) [Photograph] At: Audience Examples (2018) [Photograph] At: http://www.wups.com/ event/camel-race-by-optimist-club-of-west-branch/anna-samoylova-535880-unsplash/ (Accessed on 22.03.18)

Figure 69

Dan Lewis James (2018) mumoActive [Photograph] At: http://danlewisjames.com/work/mumoactive/ (Accessed on 05.04.18)

Figure 70

Nicola Felasquez Felaco (2015) MusixMatch Brand Visuals [Image] At: https://dribbble.com/shots/2177405Musixmatch-brand-visual-blocks-patterns (Accessed on 05.04.18)

Figure 71

(Previously Referenced)

Figure 72

Jakub Kudelski (2017) Case Study Examples (Mobilet) [Image] At: https://dribbble.com/shots/3895170-Mobilet/ attachments/885934 (Accessed on 01.04.18)

Bibliography & Illustrations

Bibliography

128

About | London Arts in Health Forum (s.d.) At: http://www.lahf.org.uk/about (Accessed on 10 January 2018)

About Face ID advanced technology (s.d.) At: https://support.apple.com/en-gb/HT208108 (Accessed on 1 March 2018)

About Touch ID advanced security technology (s.d.) At: https://support.apple.com/en-gb/HT204587 (Accessed on 1 March 2018)

Allanwood, G. Beare, P. (2014) User Experience Design. London: Fairchild Books.

Allen, Rachel (2018) [Interview by Author, 14th March 2018]

Apple health kit - Google Search (s.d.) At: https://www.google. co.uksearch?q=apple+health+kit&oq=apple+health+kit&aqs=chrome..69i57j0l5.1639j0j4&sourceid=chrome&ie=UTF-8 (Accessed on 1 March 2018)

Building software for world changers | Netguru (s.d.) At: https://www.netguru.co/ (Accessed on 28 February 2018)

Choices, N. (s.d.) Type 1 Diabetes. At: https://www.nhs.uk/conditions/type-1-Diabetes/ (Accessed on 5 February 2018)

Continents, S. to O. (s.d.) ‘Creative Arts and Humanities in Healthcare’ At: https://www.nuffieldtrust.org.uk/ files/2017-01/creative-arts-and-humanities-in-healthcare-web-final.pdf

10.

Dawood, S. (2017) Can Graphic Design Save Your Life? asks Wellcome Collection’s new exhibition - Design Week. At: https://www.designweek.co.uk/issues/28-august-3-september-2017/can-graphic-design-save-life-wellcomecollection-new-exhibition-healthcare/ (Accessed on 10 January 2018)

11.

Emma Blackman | Graphic Design (s.d.) At: https://www.emmablackmandesign.com/use-by (Accessed on 19 February 2018)

12.

FreeStyle Libre | Glucose Monitoring System - Diabetes Care (s.d.) At: https://www.freestylelibre.co.uk/libre/ (Accessed on 5 March 2018)

13.

Graphic Design in Healthcare: An Inconvenient Truth - W2O Group (2013) At: http://www.w2ogroup.com/graphicdesign-in-healthcare/ (Accessed on 10 January 2018)

14.

Health & Life Insurance That Rewards You - Vitality (s.d.) At: https://www.vitality.co.uk/ (Accessed on 8 March 2018)

15.

Home Page | Digital Apps Library (s.d.) At: https://apps.beta.nhs.uk/ (Accessed on 12 March 2018)

16.

Hopkins, A. (2017) An Abridged History of UI – Prototypr. At: https://blog.prototypr.io/an-abridged-history-of-ui7a1d6ce4a324 (Accessed on 8 February 2018)

17.

Inc, A. (s.d.) ARKit - Apple Developer. At: https://developer.apple.com/arkit/ (Accessed on 1 March 2018a)

18.

Inc, A. (s.d.) Machine Learning - Apple Developer. At: https://developer.apple.com/machine-learning/ (Accessed on 1 March 2018b)

19.

Inc, A. (s.d.) SiriKit - Apple Developer. At: https://developer.apple.com/sirikit/ (Accessed on 1 March 2018c)

20.

Inc, A. (s.d.) Themes - Overview - iOS Human Interface Guidelines. At: https://developer.apple.com/ios/humaninterface-guidelines/overview/themes/ (Accessed on 1 March 2018d)

21.

iOS - Health (s.d.) At: https://www.apple.com/uk/ios/health/ (Accessed on 22 February 2018)

129

22.

iOS 11 (s.d.) At: https://www.apple.com/uk/ios/ios-11/ (Accessed on 22 February 2018)

23.

James, D.L. (s.d.) Dan Lewis James. At: http://danlewisjames.com/ (Accessed on 5 March 2018)

24.

James, Dan (2018) [Interview by email, 5th March 2018]

25.

Johnson, J. (2014) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines. (2 edition ed.) (s.l.): Morgan Kaufmann.

26.

Lal, R. (2013) Digital Design Essentials: 100 Ways to Design Better Desktop, Web, and Mobile Interfaces. (s.l.): Rockport Publishers.

27.

de Lange, C. (2017) ‘Graphic design can save your life – here’s how’ 13 September 2017 [online] At: https://www. newscientist.com/article/2147303-graphic-design-can-save-your-life-heres-how/ (Accessed on 10 January 2018)

28.

Limited, V.C.S. (2014) Vitality UK Member on the App Store. At: https://itunes.apple.com/gb/app/vitality-uk-member/ id794024908?mt=8 (Accessed on 8 March 2018)

29.

Ltd, S. (2011) Spotify Music on the App Store. At: https://itunes.apple.com/us/app/spotify-music/id324684580?mt=8 (Accessed on 8 March 2018)

30.

Mobilet (s.d.) At: https://dribbble.com/shots/3895170-Mobilet (Accessed on 8 March 2018)

31.

Mumoactive - Secure, Connected Health for Diabetes (s.d.) At: https://mumoactive.com/ (Accessed on 5 March 2018)

32.

Nodder, C. (s.d.) UX Design: 1 Overview. At: https://www.lynda.com/User-Experience-tutorials/UX-DesignTechniques-Overview/490750-2.html (Accessed on 10 January 2018)

33.

Oldman, Lucy (2018) [Interview by email, 29th March 2018]

34.

Owen, J. (2015) Visual language and healthcare - Creative Review. At: https://www.creativereview.co.uk/visuallanguage-and-healthcare/ (Accessed on 10 January 2018)

35.

power_of_art_visual_arts.pdf (s.d.) At: http://www.artscouncil.org.uk/sites/default/files/download-file/power_of_ art_visual_arts.pdf

36.

Pownall, Brenda (2018) [Interview by email, 19th March 2018]

37.

Pownall, Jimmy (2018) [Interview by email, 24th March 2018]

38.

ResearchKit and CareKit (s.d.) At: https://www.apple.com/uk/researchkit/ (Accessed on 1 March 2018)

39.

Robinson, Ruth (2018) [Interview by email, 23rd February 2018]

40.

Rounds, D. (2016) A Short History of Computer User Interface Design by Usabilla. At: http://blog.usabilla.com/shorthistory-computer-user interface-design/ (Accessed on 22 February 2018)

41.

Schrauwen, L. (ed.) (2017) Can graphic design save your life?. London: GraphicDesignand.

42.

Staff, V. (2011) iOS: A visual history. At: https://www.theverge.com/2011/12/13/2612736/ios-history-iphone-ipad (Accessed on 22 February 2018)

43.

Steed, Sheldon (2018) [Interview by phone, 14th April 2018]

44.

Tobias van Schneider - Design & Creative Direction (s.d.) At: http://www.vanschneider.com/ (Accessed on 8 March 2018)