Design Development

Aim: to reduce the duration of a Raynaud’s attack, to bring the minutes of suffering down over time. The app will prempt and help user to manage their symptoms and risk factors before an attack occurs, by learning from previous data entered manually by user or by having location settings and other devises synced.

Why tapping?

According to the Material design guidelines, tapping requires just a small movement from the user. Ideal for someone with limited dexterity, strength or motor impairment. However, the tap area must be large enough to avoid error because if the tap doesn’t land in the right location on-screen, the user’s tap will be misinterpreted by the system.

The majority of gestures are performed by the user’s fingers (tap, swipe, drag, slide etc.) but can also involve hand movements (shaking, tilting, moving, and rotating the device).

Because when we get cold our heart rate drops, our mind can get foggy and we find the simplest things to be difficult. I wanted to get back to basics, use one gesture – tapping – to keep things simple for the user when their mind and body aren’t operating at full capacity.

If your fingers and toes are always freezing and your nose is cold to the touch, poor circulation may play a role in your brain fog. These are signs of poor circulation in the brain as well.

– Dr Noel Thomas

Rubens Cantuni of UX Collective tells us “in the early days of touchscreens there was only the most basic of them, the single tap, which was very easy to understand as it was the digital version of indicating something you want.” Tapping and other early gestures, like dragging to scroll are simple to use, intuitive to discover and easy to remember as they are based on real world interactions.

The 5 Whys:

Why are you building this app?

To track Raynaud’s attacks in sufferers.

Why would you need to track attacks?

To prempt, reduce and prevent them from occurring at all.

Why does prempting them help?

According to medical advice, prevention is the only ‘cure’ as there is no actual cure.

Why prevent it?

Because people suffer from it, it hurts and is debilitating and distressing and people can’t use their hands or feel other body parts for periods of time.

Why do this at all?

To make people’s lives better

First wireframe hand drawn

Wireframe – Paper

Usability Testing

As time was limited, the user tested was myself as I suffer from Raynaud’s. The following videos show the design and iteration process based on my user tests, using paper prototypes in Marvel.

Paper prototypes:

Profile set up, Iteration 1:

See Appendix for links to all user testing on paper protoypes.

Basic wireframe in XD

Link here

Following my low fidelity prototypes and tests, I created a wireframe in XD for my high fidelity prototype. The final wireframe in XD was enormous, so I have posted a picture of a section of it below:

Partial Final Wireframe in XD

Style Guide

I have chose Google Materials for my style guide. I feel that its clean and purposeful methods are suitable for my project. I really like the logic it follows. Thus, for my grid I have chosen a 4 column grid for mobile with 16dp gutters and margins. The iPhone 6 has a 1334 x 750 pixel resolution which works out at 326 ppi (pixels per inch) – the same as the iPhone 5. In Adobe XD, iPhone 6 was the default choice. I went for that as it’s a fairly popular phone and many users would have it.

According to Google Materials, the gutters and margins for a ‘small handset’ such as an iPhone 6 are the same as below:

When images or icons will appear I will follow the style guide also with larger gutters of 32dp.

Typography

I chose Roboto, as it is part of the Google Materials kit, but also because it allows “letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.” The point of my app is ease of use, when otherwise impaired. The last thing you need is to not be able to read the type on screen. I want the app to already feel familiar, so that people don’t have to think too hard, as brain fog is one symptom of Raynaud’s.

(Fig.1)
Grid and type style in my Adobe XD set up

From the Google Material style guide, I selected every second size, for a dynamic visual hierarchy. (Fig.1)

Designers have a tendency to default to a 12-point body text size, but increasing that to 14 or 16 (or even as high as 24) can lead to increased readability depending on the typeface being used. …For example, …Vogue.com uses a 19px body text size.

Cameron Chapman, Toptal.com

Another aspect of Google Materials is its design for Machine learning, which is key for my app. “Machine learning (ML) gives computers the ability to make predictions and perform tasks without specific instructions. By identifying patterns in large and complex aggregations of data, machine learning can be applied in a variety of ways, such as searching for information using imagery, personalizing a chat app experience, and identifying music.”

Button size

The universally known minimum button size of 48px x48px is simply not large enough for the average person’s finger pad.

An MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) found that the average human finger pad is 10-14mm and the average fingertip is 8-10mm.

Luke Wroblewsky

Because tapping and drag to scroll are the main actions, it was important to ensure the buttons were accessible to all.

“When interacting with a touchscreen, users will prefer to use the pad of their finger rather than the very tip. The pad of the finger is slightly narrower than the full width of the finger: 10-14mm. The fingertip is smaller still – 8-10mm wide – but more awkward to use than the pad of the finger.” Luke Wroblewsky

I carried out a button size test in XD, using the grid I created following Google Materials guidelines to see how the large 72px buttons fit on the screen. As 72px (Fig.2) translates to 25.4mm, they are more than large enough for the average person’s finger pad. A medium button of 60px (Fig.3) is 21.167mm so is also more than adequate as a target touch point.

According to Steven Hoober:

On mobile touch devices people do not scan from the upper left to the lower right as on the desktop. Nor do they touch the screen in the opposite direction—from the lower right to the upper left—because of the limitations of their thumb’s reach. Instead, they prefer to view and touch the center of the screen…People can read content best at the center of the screen and often scroll content to bring the part they’re reading to the middle of the screen if they can. People are better at tapping at the center of the screen…

Floating action buttons

Button placement (fig.4)

I placed the buttons within the reachability range of either left or right thumb (fig.4). They are large enough for a non-dexterous finger or thumb to tap successfully. I avoided the top of the screen for the main action buttons.

Colour, mood and nostalgia

In order to help warm the user, I decided to use warm colours like red, pink and also purple as an optimistic colour. These happy colours can have an uplifting effect both emotionally and physically.

One of the features of the app is that when the outside temperature dips below 10 degrees celsius or the user’s wearable tracks their heart rate dipping below 60 BPM (generally considered the slowest a resting heart rate in an adult should be) the users happiest moment will appear as a reminder to help warm them up.

Higher levels of music-evoked nostalgia predicted increased physical warmth, and participants who recalled a nostalgic (vs. ordinary autobiographical) event perceived ambient temperature as higher… consistent with the close central nervous system integration of temperature and pain sensations, participants who recalled a nostalgic (vs. ordinary autobiographical) event evinced greater tolerance to noxious cold.

– Zhou, et al.

The colours were chosen to help users feel relaxed, warm, calm and comforted. But also, I was interested in the crossover of red with blue/ green to make purple as these were often the colours that people’s hands would go as a result of Raynaud’s. I decided to be literal in my translations, for clairty. I tested the colours chosen on colorsafe.co and all were Level AA conformant.

Red is associated with love, warmth, and comfort.

Green strong associations with nature, green is often thought to represent tranquility, good luck, and health.

Pink is thought to be a calming colour associated with love, kindness, and femininity. Some shades are described as relaxing.

Purple, a mixture of red and blue, is often seen as mysterious or creative.

Many people find white serene and pure. White is bright and can create a sense of space or add highlights, which is good for design.

I was interested in the crossover of red with blue/ green to make purple as these were often the colours that people’s hands would go as a result of Raynaud’s. I decided to be literal in my translations, for clarity. I tested the colours chosen on colorsafe.co and all were Level AA conformant.

Original logo

The logo wasn’t really a logo

New Logo

I re-designed the logo, using geometric shapes and colours representing cold, warm and cross-over

Mood Board

More on my Pinterest mood board here.

Iconography

I used Google Material icons for the most part, but drew my own in Adobe Illustrator when I couldn’t find specific ones I needed.

References:

https://uxdesign.cc/natural-gestures-are-the-best-gestures-990e2ca3d3b6

http://www.drnoelthomas.com/blog/2017/3/16/are-you-spaced-out-all-the-time-five-reasons-for-brain-fog

https://uxdesign.cc/natural-gestures-are-the-best-gestures-990e2ca3d3b6

https://material.io/design/layout/responsive-layout-grid.html#grid-customization

https://www.toptal.com/designers/typography/web-typography-infographic

https://www.toptal.com/designers/typography/typographic-hierarchy

https://fonts.google.com/specimen/Roboto

https://www.lukew.com/ff/entry.asp?1085

Zhou, Xinyue,Wildschut, Tim,Sedikides, Constantine,Chen, Xiaoxi,Vingerhoets, Ad J. J. M.Zhou, X., Wildschut, T., Sedikides, C., Chen, X., & Vingerhoets, A. J. J. M. (2012). Heartwarming memories: Nostalgia maintains physiological comfort. Emotion, 12(4), 678–684. Retrieved from: https://www.ncbi.nlm.nih.gov/pubmed/22390713

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s