Interaction Design

A healthy diet supports normal growth, development and ageing, helps to maintain a healthy body weight, and reduces the risk of chronic disease leading to overall health and well-being. The gut accounts for most of our immune system and produces more than two dozen hormones that influence everything from our appetite to our mood. Nutrition is an essential aspect of life, instrumental in our health and wellbeing – so the importance of it cannot be stressed enough.

As Habiits has developed over the course of the semester, I realised I could not go into full detail on each area, because realistically there would be enough material between sleep, nutrition, mindfulness and nutrition to build four different apps. Information must be presented to users at a higher level. However, I stand by the importance of nutrition and do feel it is essential to include. Even if a person can’t extract detailed nutritional information such as calories, meal suggestions etc., it is still important to raise awareness of this area and provide users with a tool that allows them to document their habits.

I took it upon myself to create four handouts that provide an overview to each area I intend to include in Habiits:

Sleep

Nutrition

Mindfulness

Activity

These documents included a weekly log, where candidates were asked to write the foods they ate, and how this impacted their mood. I chose not to include diet suggestions I knew were recommended to be healthy because I actually wanted to let people eat whatever they normally would - including food that is unhealthy from time to time. This would allow me to see the adverse effects certain foods and diet types can have as well.

Information architecture is the creation of a structure for a website or application, that allows us to understand where we are as users, and where the information we want is in relation to our position. Information architecture results in the creation of site maps, hierarchies, navigation.

It has been a fine line ensuring I do not overstep the mark and suggest I can solve mental health issues or provide therapy.  As I have mentioned before Habiits is more focused on maintaining mental health and improving mood, with the goal of intervening before a person experiences more severe disorders. Thus, finding similar apps to review for market research has been difficult. With that being said, I feel like this is actually a positive thing, because it has shown me that there is a lack of platforms out there in this same market gap.

This was a mindfulness app concept I found on Dribbble that I have chosen to dedicate a post to. In Steven, Colin and Charlotte’s interviews, each interviewee spoke about the importance of exercise and activity. Setting ourselves goals to strive towards and engaging in challenges, followed by that feeling of satisfaction we get from the sense of achievement. When browsing, I noticed the ‘Daily challenge’ section on this UI - which is what largely caught my attention. I loved this idea of empowering users to ‘challenge’ themselves, with healthier habits. In the screen on the left, we can see these challenges are housed in coloured cards, labelled and accompanied with a corresponding icon. I seen examples of horizontal scroll being used in this way a long time before I came across this concept and had already integrated it into my own sketches, flows and prototype. But it’s always nice to see it being used more often to reaffirm what a powerful component it can be. Applying this concept to Habiits, I thought to myself I could ‘challenge’ users to not bring their phone to bed (if they were interested in improving the quality of their sleep) or challenge them to have one less takeaway a week. I think this also makes people feel like they have to prove a point that they can do it - that their will won’t be beaten by something that seems so silly as not bringing their phone to bed. Used in the right way, these challenges could spark the imitation of these healthy habits. Food for thought.

The purpose of mindfulness is to bring things that are commonly encountered but often ignored to a person’s attention. One of the ways therapists achieve this is to encourage a person to concentrate on their immediate environment. 

They say the best User Interfaces are invisible – one that goes unnoticed by the user and allows them to focus on their goals rather than having to concentrate due to a poorly crafted experience. Users come onto a website or application to achieve a goal, a well-designed user interface should assist in doing this and direct the user to what they need.

Trusty Uber Eats; it’s always there, reliable and easy to use and so, we keep going back. Users don’t come to play with an interface design, as we touched on before, users use a product to achieve a goal – in this case it happens to be ordering food.

What I’ve noticed in a lot of modern mobile UX/UI Design, is how minimalistic and seamless the customer journey is. Uber, Facebook, Instagram, Spotify etc. all do a great job of using the perfect spacing between on-screen elements; frequently utilising white space.

Another noteworthy point I feel is how finger-friendly the touch points on these applications are. An MIT Touch Lab study of ‘Human Fingertips to investigate the Mechanics of Tactile Sense’ found that the average width of the index finger is 1.6 to 2 cm for most adults – which converts to 45 - 57 pixels. As we can see from the images of Uber Eats above, the selectable thumbnails are nearly all bigger than these dimensions, which means we do not have to focus on aiming for a small touchpoint and improves the user friendliness.

With design styles continually changing, not only online but offline, I thought it would be practical to write a short analysis on the current state of affairs over the fourth-coming posts, some tips that will be useful for me to keep in mind and future (anticipated) directions of User Experience/User Interface design.

A noteworthy starting point, I feel, is the topic of skeuomorphic design. Skeuomorphism is the concept of designing objects using textures, gradients etc. to imitate a real object from the physical world - It is also known as ‘realism design’, because of the fact illustrations or elements would appear as real as a 3D image.

It was accepted that Skeuomorphism was dead, following the last redesign of iOS in 2013 and multinational technology company Apple jumping on the bandwagon for flat trendy design. However, at the time of writing, Skeuomorphic design has started to come back into fashion through mobile app concepts and various desktop UI’s courtesy of modern design labs and studios.

If I’m basing this post on design mediums such as Dribbble where these new concepts were sourced, it would seem as though realism design is making a comeback. This doesn’t necessarily mean to say that it is the direction design is heading though, because there’s no telling what might happen in the future. My point is, that Skeuomorphic designs dipped out of fashion once and there’s no telling they won’t do the same again.

Another thing I have picked up on through market research, is the increasing number of designers that are starting to place more of a focus around the affordances in their designs. An affordance is the quality or property of an object that defines its possible uses or makes clear how it can or should be used. The example that springs to mind for me is the use of shadowing we see so often nowadays accompanied with button elements. In the example above, this shadow property is applied behind the ‘Traditional Kombucha’ tea card.

After filtering down to the typefaces I felt had the most potential, I arrived at four. At the moment, I’ve found it too difficult to drop it lower than four, because I think each of the remaining typefaces are all incredibly strong. 

Century Gothic

Century Gothic is based on Monotype 20th Century, which was drawn by Sol Hess between 1936 and 1947. The design is influenced by the geometric style sans serif faces which were popular during the 1920s and 30s. The Century Gothic font family is thought to be useful for headlines and for small quantities of text. It is also commonly used in advertising. As I mentioned above, I was a fan of all these four fonts, however, having research further into the history and ideal application of each typeface, I don’t think Century Gothic would be suitable for Habiits, considering how much content will be in the app. As well as searching for the right typeface for body copy, I’m also taking into consideration how these fonts look in their heavier weights. When I trialled this font in bold, I wasn’t satisfied with the balance.  

Sk-Modernist

Sk-Modernist is a minimalist, clean typeface created by Designer Sean Kane, who is the Head of Design at Fuller in Australia. According to Kane, “the aim of the typeface was to create an amalgamation of a modern Grotesk, like Helvetica, with a simpler geometric style, like Avant Garde.” and avoid complicated forms.

Sk-Modernist was designed specifically for the digital age, with each letterform optically adjusted using a mathematical system rather than the traditional typographers eye. This approach has resulted in a typeface that displays exceptionally well in digital mediums - a massive factor to take into consideration with  the primary use case being a mobile app.

Poppins

Poppins is a geometric sans serif typeface designed by typographer, Ninad Kale and type designer, Jonny Pinhorn in 2014 at Indian Type Foundry. I have seen this typeface used in various other design concepts and have also used it in a previous project myself. It is a beautifully balanced font, with each letter described as ‘monolinear’ by Google Fonts - meaning the vertical and horizontal strokes are of the same visual weight. This results in a user-friendly reading experience and would be a fantastic font to use in my major project.

Similarly to Sk-Modernist, there are a range of weights free to use, which have strong visual appeal in all weights. I know this is a successful font, because I have used it before. I know this doesn’t necessarily mean it is suitable for all use cases, but I think its fair to say Poppins is a bit of a crowd pleaser and a safe bet. This almost makes me want to test something different - to broaden my horizons.

Gilroy

Gilroy is a modern sans serif typeface with a geometric touch, designed by Radomir Tinkov, who is based in Sofia, Bulgaria. Out of the four I have posted above, I think Gilroy is my favourite. The Light and ExtraBold weights are free to trial - however, Gilroy is a paid font, which must be taken into consideration.

It’s hard to pick favourites out of these four, however, I think if I was being honest I did veer towards Century Gothic and Gilroy because of their geometric style and balance. I feel these typefaces are very similar, but as I mentioned above, I felt the kerning and horizontal strokes of certain letterforms was slightly off in Century Gothic.

Over the past few weeks I have collated various typefaces that I thought were attractive, clearly legible and would maximise readability for the content in Habiits. I began to gather these through a range of mediums including researching concepts on Dribbble, visiting websites and using WhatFont and Instagram posts. These were the twelve I believed to be the best for readability.

When creating content for our websites and applications, we must take care to balance both graphics and text. Frequently, textual information is the major source of information, so it is not uncommon for users to look straight for this. This is where typography comes into play.

Typography provides attractive appearance and preserves the aesthetic value of our content. It plays a vital role in setting the overall tone of our designs, contributing to the creation of powerful content - which is crucial in Habiits - and ensuring a more pleasant user experience.

It is a medium of communication

In a design, aspects such as the content, the colours and fonts used and other minute details provide a medium of communication between the user and the product. It is also important because many apps are related to a specific product, with specific goals. Typography allows users to determine what sort of information the product provides and helps them to reach their goal faster.

Visual appeal

Font selection should be as clean as possible. The correct choice of colour, font and text size are vital for readability and therefore, usability. As I touched on in an earlier post, many sources suggest that anywhere between 50-75 characters per line is considered acceptable for line lengths. Using fonts that are easy to read are key for presentation. In the following post I intend to filter through the fonts I have came across the past few weeks that I thought had the strongest visual appeal.

It has the power to hold attention

Many humans scan websites and articles, as opposed to actually reading them. Certain typography styles can be used to ensure the content is not too mundane and hold a reader’s attention. For example, highlighting segments that are captivating in bold or colour.

It establishes an information hierarchy

(Again one of the principles I covered a few posts ago) Different font types and sizes can be used to communicate which content is the most important in the hierarchy. For example, we might choose to highlight titles and page headings in a larger font. This helps the audience determine, almost subconsciously, which information they should devote more attention to.

It reflects professionalism

Vans are a brand of shoe that first launched in 1966. The company was founded by brothers Paul Van Doren and James Van Doren. The full name of the business was originally ‘The Van Doren Rubber Company’ but it soon became known as Vans. Mark Van Doren, son of the president James Van Doren, was only 13 years old when he designed the logo as a stencil that he wanted to spray paint onto his skateboard.

This was another famous brand I chose to highlight due to their praiseworthy logo. The letter ‘V’ in the Vans emblem is actually a symbol for the square root of an equation in mathematics. To the right of the ‘V’, the letters ‘ANS’ make up the rest of the brand name. ‘ANS’ is another maths reference, which represents the answer, this can be seen being used on calculator buttons. So, the Vans logo actually means the square root of the answer. It’s also in the shape of a van, which communicates to me that the shoes are high quality and get people where they need to be in comfort.

Coca Cola is the world’s most renowned beverage maker with the most iconic logo ever. The company was founded by John Pemberton in 1886. The company was then branded predominantly by Frank Robinson, who suggested the name ‘Coca-Cola’. Coca-Cola, or as it’s also known, coke, hit an exponential growth rate almost immediately and one year later Frank came up with the first logo – the handwritten name of the company. The handwriting has proved to be an eternal element, as it has come through the numerous logo modifications unchanged except for the colour.

The font is written in calligraphy and is what has actually made the brand. Its swirly design adds a degree of elegance and beauty. It feels to me this was written in such a flowy style purposely to represent the flow of the soft drink and coloured red to attract attention.

The Calvin Klein fashion house and company was founded by clothing designer Calvin Richard Klein and Barry Schwartz. Jeffrey Banks, who created the famous logo paid special attention to the wordmark, and approached the development of the corporate identity with great care. The wordmark is a minimalistic and described as simple but stylish.

If I can, I would love to achieve a Habiits logo with a hidden meaning, because, who doesn’t love a logo with a hidden meaning? Below I explain famous logos and their hidden meanings that you might not have known about.

The Sony Vaio logo integrates the ideas of analog and digital technology into one, using the ‘V’ and ‘A’ to represent an analog wave, and the ‘I’ and ‘O’ to represent binary from the digital world. The Sony logo above the Vaio has went through several iterations regarding its shape and proportions, yet, on the whole from 1957 onwards, it has been what it is now – a simple typographic wordmark without any images. In 1957, the predecessor of the current logotype was introduced by Sony which added unique character and individuality to the logotype.

Between 1957 and 1973, there were various redesigns, altering these lines and serifs, but ultimately the logo remained much the same. The redesign of 1973 brought a modernised and refined version of the logotype to the Sony visual identity. As we can see from above, the serifs on the letters are straight and clean, and all the bold contours in the wordmark are neat and solid. The Sony logo, introduced in 1973 uses the Clarendon Medium font.

The Amazon logo was designed by Turner Duckworth in 2000. In 2012, when the brand expanded offline, it removed the extension “com” from its corporate design. The visual symbol was created to represent the message that the e-commerce website offers an exhaustive range of products. This path from the first to the last letter of the alphabet is intended to mean that Amazon sell everything from A to Z (the arrow connects the two letters). In addition to this, this same arrow also has a curvature in the form of a smile, representative of the smile that customers would experience when shopping with Amazon.

This orange colour of the arrow adds warmth and friendliness to the logo. Amazon also runs a charity fund named ‘Smile’, so there you go.

The logo, designed for Subway in 2016, is a modernised version of all the previous emblems, where the inscription is set in a bold and rounded sans-serif typeface. The three letters on the left in solid yellow are representative of happiness and the sun, and the three letters on the right in solid green are associated with nature and health. These colours illustrate movement and are a reflection of the colourful array of fresh vegetables and other ingredients available in the shops. This all ties in with Subway’s values, which are a healthy diet, freshness and speed of service - plus they look aesthetically pleasing together.

The arrows pointing out of the first and last letters  (the “S” and the “Y”) are to indicate the entrance of the subway and exit of the subway, which let’s not forget is considered a mode of rapid transit. I have to admit, out of the various wordmarks and logos I’ve been researching, I think the Subway logo is my favourite. It’s remarkably clever and simplistic, and has been a real inspiration to look into. 

If I decide to stick with a wordmark for the ‘Habiits’ brand, I want to ensure I select the right colour scheme. One that is eye-catching and aesthetically pleasing and one that accurately portrays the vision of the brand.

The Google logo is one of the most recognised logos in the world. According to Smart Insights search engine marketing statistics 2020, Google control over 93% of the search market share, which is over four billion worldwide. The Google logo frequently changes on the website’s homepage to reflect current events, such as Christmas and important days in history. Larry Page first created the Logo in 1997 using the graphics program ‘GIMP’. In truth, the company logo has changed very little over the years, as we can see from the development below.

Whilst researching company logos and wordmarks, I found out, unsurprisingly, Google didn’t just choose the colours in their logo by accident. When asked how Google came to select the colours they did, Ruth Kedar, the graphic designer who developed the logo the company now uses, said, “there were a lot of different colour iterations. We ended up with the primary colours, but instead of having the pattern go in order, we put a secondary colour on the L, which brought back the idea that Google doesn’t follow the rules.” Innovation and pushing the boundaries of what is accepted is central to the heart of Google’s mission and vision. To convey this, Google broke from the traditional pattern they started with and made the ‘L’ in their logo a secondary colour instead.

This is a design concept of a self-care app created by Ronas IT, who are a UX/UI team based in Russia. The app offers a personalised selection of meditation mentors, mental therapy, and daily tasks. It seems to aim to relieve anxiety, organise thoughts, and find peace of mind.

This screenshot was taken from Dribbble and features two of the app's screens - onboarding and home. I presume this onboarding process and respective screens walk a user through the app's functionality, with the visual aid of the stepper to show which step of the onboarding the user is currently on. One aspect that caused a bit of confusion for me, was the ‘Let’s Get Started’ button at the bottom of the screen. I wasn’t entirely sure whether this button would initiate the onboarding experience, or whether users had to swipe through the onboarding screens, and pressing the button would link users directly through to the home screen - in which case the guide would be skipped and potentially important information could be missed. This raised my awareness of this potentially increasing the cognitive load for users and is something I will be sure to communicate clearly in Habiits’ onboarding.

The homepage hosts a daily selection of guides and tasks. Guides seem to be in video and audio formats to cater to both auditory and visual users. I intend to incorporate audio (and potentially video) formats into Habiits, for example for relaxing music to aid meditation and sleep. Seeing how Ronas implemented these formats with the aid of icons was useful for me to see. The home screen has a search feature in the top right of the interface, which I think is where users would expect to find it and therefore, smartly placed. Habiits will be a content-heavy mobile app and I think it is important to offer users with the option to search, to help them find desired content more easily.

As I mentioned in the last post, I decided to use myself as my own test subject for this exercise. I’m aware there is room for bias in instances such as this, however, I felt this task in particular was quite intrusive. I didn’t feel like I could ask a user to fill out something this detailed for me. Nevertheless, I thought it was an incredibly useful exercise to complete - it was something I was interested in myself, so I did fill it out truthfully and I believe it has acted as great research and inspiration for the sleep diary concept in Habiits. This was, of course, for research, but also because I’m taking on board a lot of the advice I’m reading about in my research to improve my mood and health. Not that I’m unhealthy or suffering from low mood, but who wouldn’t want to be healthier and happier, right?

Before we get into the diary, I want to mention that the sleep diary is filled in the morning after the day before. For example, in Tuesday’s column, where the number of alcoholic drinks consumed is noted as 3, this is alcoholic drinks consumed on the Monday, that would have impacted Monday night’s sleep and so on. I feel it is important to note this because these habits influence our sleep - so we want to see the correct representation of how they are impacting the night’s rest ahead, so that we can influence our sleep in a more positive manner.

Throughout the diary, there will be certain patterns and questions with the same answer every day because, similarly to most people, there are just certain things I have a tendency to do (and don’t do). For example, I never drink coffee, ever. For this reason I scribbled out the word ‘coffee’ in that question and just answered for when was the last cup of tea, because I drink a lot of tea. I also never fall asleep unintentionally (I think this question was more directed at people with narcolepsy which is a condition that causes people to fall asleep unintentionally at random times throughout the day). I also have a tendency to wake up a couple of times in the middle of the night, I’m still not sure why. However, this is never usually for too long and I can nod back off pretty quickly, thankfully. For questions such as ‘Did you exercise?’, ‘Are you eating more fibre-rich foods?’ and ‘Are you eating/drinking more fermented foods?’, I decided to combine a mix of purposely taking this advice on board and purposely not, to see how it would impact my sleep. 

Inside Fast Asleep, which you’ll recall is Dr Mosley’s book on how to get a good night’s rest, he provides us with a week-long sleep diary template to track our sleep efficiency. I thought this was a brilliant idea and even more fitting considering the app I was in the middle of creating. Anyway, I thought I would fill this out, logging my own bedtime habits and routines to see how my quality of sleep actually looked against recommended guideline(s). This was the first time ever completing something like this, although on different occasions in the past I knew I had struggled to get a good night’s sleep, as I’m sure the vast majority of us have (refer to the poll I created on Instagram and the number of people who voted that the quality of their sleep could be improved). I set myself the soft goal of trying to improve my sleep quality over the course of the week.

The point of keeping a sleep diary is to assess how well you are sleeping and to help calculate your sleep efficiency, I.e. the amount of time you spend in bed actually asleep. We can determine our sleep efficiency by dividing the amount of time we estimate to have actually been asleep for by the amount of time we have spent in bed. For example, if we are asleep for six hours but in bed for eight hours then we have an efficiency rating of 6/8 = 0.75 (or 75%), which is poor. Dr Mosley recommends we aim for a sleep efficiency of 85%; 100% is unrealistic because everybody needs a bit of time to drift off and some of us like to lie for a short period of time in the morning before getting up right away. However, Dr Mosley also reassures readers that a sleep efficiency rating of 80% is perfectly acceptable, so if we don’t get as high as 85% don’t worry.

Q1) What are the key impacts of sleep on mental health?

Stephen explained that sleep allows you to think a lot more clearly and rationally. A good nights sleep allows you to problem solve a lot more readily and when you do set out to problem solve, you come up with much more appropriate solutions. Lack of sleep blurs decision making and blurs your ability to pick the most appropriate solution (I touch on an example of this later on in the reflection where people might be lying around all weekend not achieving anything). Temporary loss of sleep is ok, it only becomes a problem if it’s a constant problem and added that it can also exacerbate everything else going on in the body (pain etc.). People Stephen has worked with over the years have more of a tendency to put things off such as taking part in exercise or activities as a result of lack of sleep - which are vital for our wellbeing.

When discussing sleep, Stephen brought in the importance of physical activity and the importance it plays in sleep quality. He elucidated a common problem where patients would have racing thoughts or their brains were drained, but their bodies aren’t physically ready to rest - “we would see that lot in psychiatry”.

Q2) Why is a healthy diet important for good mental health?

Stephen told me a lot of people who are mentally ill rely on sugary snacks and junk food to give them a boost of something pleasant. This is, unsurprisingly, extremely unhealthy both physically and mentally. Sugars don’t last long in the bloodstream - they’re used up quite rapidly and so don’t keep us full for long, leading to cravings for more. Good nutrition throughout the day counters this. If nutrition is poor, brain function is adversely affected. If we look at someone who is nutritionally compromised, for example with low blood sugar or with metabolic conditions such as diabetes, they show symptoms that are very close to depression such as feeling low, lack of drive and motivation.

He recommended I look up the impact of Vitamin B12, which he considers to be essential for good mental wellbeing. He told me therapists are aware of illnesses where this vitamin cannot be absorbed and explained that those patients show very psychiatric like symptoms such as lack of volition, fatigue etc. and concluded with a resounding “therefore nutrition plays a crucial part in wellbeing and mental health”.

When we were speaking, Stephen told me of a Psychiatrist in the same hospital named Joanne Younge, who has done enormous amounts of research into nutrition and the impact of the lack of certain vitamins. Stephen assured me that Ms Younge would tell anyone that many patients who turn up with poor nutritional diets are often misdiagnosed with something more sinister such as dementia because the patients mimic similar effects - and that’s the level of impact that poor nutrition can have on the brain.  

Q3) If you were to design an app focusing on improving mental health, which topics would you include and why?

As I mentioned, Mr Herron works in cognitive behavioural therapy and was very vocal about the importance of our thinking on mood, for example if we have a stream of negative thoughts this can result in depression and if we have a steam of frightening thoughts this can make us feel anxious.

But what he really focused on in the interview was behaviour, “humans are doers not just thinkers and what we do has a huge impact on how we feel” - he felt that this aspect of behaviour is often forgotten about, which frustrates him. Stephen voiced his thoughts surrounding behaviour and motivation, and how there is a mistaken belief that people get motivated and then go and do what they aimed to do - which he feels couldn’t be further from the truth. He explains how when we start to do something, this behaviour cognitively readies us and has a positive impact on our brain function. He gave me the example of how very often in therapy he would put a huge amount of emphasis on trying to get his patients to take part in exercise or activities and drilled home the prospect of then seeing the effect this had on them after they had done it, as opposed to talking themselves out of it beforehand - which I absolutely agree with.