Habiits

On placement, I had the opportunity to apply the skills and knowledge I had learned in University to a product suite centred around human welfare, where empathy was imperative. Through this work, I discovered a real sense of gratification and passion for products of this nature. Hereafter, I knew I wanted to create a platform that would have a positive influence on others.

Habiits is a positive habit-forming mobile application that encourages the practice of healthy habits and daily positivity. Our mission is to improve mental health through wellbeing. Habiits achieve this by raising awareness of key areas which influence our moods such as our diet, sleep and activity, and facilitates the practice of healthier habits within these areas. These habits promoted within the app have been scientifically proven to positively impact our well-being and, subsequently, our mental health.

Design Toolkit

Why Mental Health?

Mental health has always been a topic I have felt extremely passionate about, it has also been a topic that has impacted me and others around me and therefore, one I have always had a very close connection with. Mental health issues have been on the rise for a number of decades now. According to the Mind mental health charity, 1 in 4 people suffer from a mental health problem. In correlation with this, according to the NHS, the number of antidepressant prescriptions have also almost doubled between 2008 and 2018.

In addition to the above, the Coronavirus pandemic has been another factor that has had an adverse impact on mental health, causing depression and anxiety to spike. According to a survey conducted by the Office for National Statistics, the symptoms of anxiety disorder more than tripled between January 2019 and May 2020, while the symptoms of depressive disorder have almost quadrupled. All of these reasons provided me with the extra drive to create an app focused on promoting a sense of mental wellness.

Idea Generation

Mind maps are a powerful tool within idea generation. I have completed multiple mind maps now across various pieces of work and always found them to be extremely useful. Although I had an idea I was keen on, I knew that there would undoubtedly be more I would come up with through exercises such as this.

I drew around the areas I had an interest in and that I thought had potential. You will also notice at the bottom I have tried to connect various ideas that stemmed from topics together, this was to combine different ideas together to see if it sparked a cool concept.

Problem Identification

Existing products are made in such a way where the techniques used to combat mental health issues are not internalised after use. This forces users to be dependent on the product and orchestrates them into a double bind. We have to ask ourselves what happens when we close the app or if we don’t have our phone?

I believe there’s a gap in the market for a product that offers techniques and advice which become internalised after use, so users are comfortable in their own mind and not solely dependent on their phone. What differentiates Habiits is the knowledge and practices it’s filled with and how these are internalised in the brain after use. I want to provide people with a mechanism that empowers them.

Brand Name

I thought the name ‘Habiits’ was perfect for the product I’m creating. I like succinctness and modern brand names and for me, this ticks both of those boxes. A key fundamental of the app is to encourage users to adopt good habits into their day to day lives, which in turn will improve their mood. The idea is that over the course of a period of time (and through educating users on how and why we should be doing these things), these habits will improve their mental health.

Once I had the base word I wanted to work the brand name around, I wanted to develop the idea further to attempt to achieve more uniqueness. A few different iterations that followed ‘Habits’, were ‘Habitz’, ‘Habit Hut’ and ‘Habiits’. Out of these, I have decided to opt for ‘Habiits’. I learnt through this process how doing something as simple as adding an extra ‘i’, can result in a more branded feel — which is of course what we’re all striving for.

Colour Palette

There’s a wealth of ways to gather inspiration. I wanted to show that we don’t have to be so dependant on digital methods, and that beautiful colours can be found everywhere.

This first picture was a shot I took at the Parliament Buildings in Belfast. This particular Autumn’s afternoon I and a friend decided to go on a walk around the picturesque grounds of Stormont. I couldn’t decide whether this was a bit sad or not, but on the walk, this orange leaf really caught my eye. I knew I wanted to incorporate orange in the Habiits colour palette, so I took out my camera and took a picture of this leaf. When I came home, I uploaded the picture and opened it in Adobe Illustrator. I used the eyedropper tool to retrieve a few of the different hex codes using the different shades of orange in the leaf. This is what I found:

Of course, I did not expect the hex codes I retrieved to be the perfect shade of orange I wanted for Habiits, because the chances of that happening are probably one in a couple of thousand. However, if we have a look at the two colours pictured above (more so the shade on the left), it’s really not a million miles away from the oranges that I do actually want to have in Habiits. These could be taken into digital tools, such as Adobe’s colour wheel, to provide me with a starting point on finding the orange that is the right fit.

To wrap up this little series, I thought I would finish on a piece of furniture. When I arrived home, I wanted to redecorate the room I worked in to have a nice space for final year and thereafter. This included the new sofa pictured above, storage units and shelves from IKEA and a curved Samsung monitor. Redecorating this space wasn’t cheap, but it was a wonderful investment and having a clean, modern space that I make work more pleasant in has made such a massive difference. I repeated the same process for the chair as I did with the leaf and the sunset. Here were the colours I retrieved from Illustrator

The darkest parts of the chair are far, far too dark for what I had in mind. This was the dark coloured square on the right. However, I think the other two colours are quite attractive. I could see these shades being used to calm users and remind people of the night sky — which would be a perfect effect for the sleep section.

When designing an app focused on improving users’ mood, colour psychology becomes an extremely important facet — so I wanted to make sure I got the palette right. I’ve researched a lot into the various emotions different colours can evoke; so I had an idea of which ones I wanted to incorporate into Habiits.

To help with my colour selection process I like to draw inspiration from various mediums such as UI gradients and Awsmcolor. Once I found shades of oranges, purples and blues that were close-ish to the colours I wanted, I put them through Adobe’s colour wheel to return analogous, monochromatic, complementary and similar shades results. While this is a great help, I often find that the shades in colour jump quite drastically when trying to get that perfect tone. At this point, I took the colours I have landed on into the Encycolorpedia to increase the level of preciseness I can achieve with each shade:

Card Sorting

Now that I had decided on a brand name (which I am so pleased with), I knew it was time to determine which areas and features I wanted to include in the app. Up until this point, I had anticipated the main areas of Habiits would be sleep, mindfulness and nutrition. However, I was still unsure how to work these four separate areas into a cohesive app. It was through the card sorting that the idea for a habit-tracking app was really conceived. Towards the bottom of the user research survey responses, a respondent suggested a way to record what users eat. I took this on board and went on a bit of a tangent. I wanted to create a tool where users could record all of their habits.

Sketches & Wireframes

My sketchbook was without a doubt one of my most valuable assets. On numerous occasions, I reflected on the pros, cons and considerations to bear in mind for the various wireframes, components and flows I had drawn out. This creation of assets allowed me to visualise how sections and features within the app would look and most importantly, how they would work.

This paper-based exploration enabled me to map out important aspects of the system design such as the Information Architecture (IA) and User Flows and helped me to establish how the primary UX would function, reducing the number of potential roadblocks further down the line. I felt this approach was the most practical/ time-efficient, which undoubtedly saved me a lot of uncertainty, had I opted to move to digitisation at an earlier stage.

Grey Box Wireframes

User Flow Diagram

Next, I used the grey box wireframes (shown above), to map out the primary and secondary user flows to visualise how users would navigate through the application. This included flows for the core functionalities, for each respective area (sleep, nutrition, mindfulness and activity) and their corresponding subsections and more, such as the signup and onboarding experiences.

This allowed me to refine the navigation to reduce the number of steps users would have to take to achieve their goal, to contribute to a more pleasant User Experience.

User Testing

User testing is the process through which the interface and functions of a website, app, product, or service are tested by real users who perform specific tasks in realistic conditions. This research method enables deep information to be gained about your users’ patterns of behaviour, preferences and opinions, in order to implement this feedback for a more successful product. Testing early during the design process allows you to prevent future re-design costs and to launch a user-friendly product.

Round 1 SUS Scores

Round 2 SUS Scores

Strengths & Weaknesses

Despite my course covering a wonderful blend of various design specialisms, I consider my strengths to lie in User Experience (UX) and User Interface Design (UI). On placement, I worked as a UX/UI Designer for two companies, where I had the chance to work on commercial products and develop my capabilities in various digital design tools. I believe this proficiency, accompanied by my understanding of design principles and awareness of modern design methodologies, helped me to produce an innovative, user-friendly app.

Before this project, I had no experience with animation. Due to some of the challenges I faced, I tried to pick this skill up in a short space of time, which was difficult alongside the other aspects of final year. Although I felt I got to grips with this and made it work for its intended purpose, I definitely would have liked to develop this skill further if I had more time and am certain I will in the future.

User Personas

User personas are examples of anticipated user profiles that we can create based upon our research findings. Personas represent not only a specific user but all the different potential user types that might use your service or product in a similar way. They are a powerful tool that optimises our UX research in order to assist with the creation of core product functions.

For me, user personas act as a fantastic reference point throughout my design process. Sometimes it can be difficult to put ourselves in the shoes of the user. It’s not always possible to have a candidate or user reference group to consult with either (even more so at the moment with COVID-19) — so I feel that these fictional characters can really help to align our concepts and features to the target audience’s needs and wants.

Target Audience

The audience was a difficult one to decide on because mental health and wellbeing apply to all ages. However, I decided Habiits would be an app directed at 18–35-year olds, which is an audience I felt I was well placed to empathise with.

This decision was influenced by personal reasons and the statistics and stories I read, which indicated there was an increasing concern around the mental health among younger adults, and emphasized the need for a service like this in touch with today’s youth.

Challenges Faced

I would never consider myself to be an illustrator, so creating a set of landscape compositions was without question a challenge for me. With that being said, I knew these would suit the feel of the app and create a real atmosphere, which would evoke the emotions I desired — so I felt like these assets were necessary.

One aspect, in particular, I found difficult was achieving visual consistency to ensure all illustrations looked part of the same set. I drew these on paper first, which I felt helped to keep the landscapes consistent and then scanned these in to digitise them in Illustrator. In some cases, I went through around 10 different digital versions before I arrived at the desired aesthetic and as a result of this, this task took me longer than anticipated. However, I believe as time went on I grew in confidence and in the end, I was extremely pleased with the final illustrations.

Prototyping Habiits was a bit of a double-edged sword. I would consider this to be a skill I have developed quite well over the past few years. However, due to the scale and complexity through parts of the project (pictured to the left), it was also a challenge. Following the first round of usability testing, I took a lot of user feedback on board and implemented various changes, which resulted in new and improved (based on the second round of testing) user flows.

This particular version had 718 screens, which was difficult to manage (to say the least). This was due to me not being able to anticipate which path a user might take, which resulted in a lot of permutations. I felt this was necessary to provide users with enough selectable options to give them a sense of how the app would function in the ‘real world’.

Another challenge I encountered was the limitations of the software I used. Within the mindfulness feature in the app, I felt it was important to include meditation methods and the most practical way I thought these could be presented to users was through audio clips and guided meditations. During development, I discovered that due to certain limitations of Figma and Adobe XD, importing audio and video files were accommodated quite poorly. To work around this, I had to familiarise myself with Anima; a plugin that facilitated me to embed custom code. I was then able to source mp3 files and host these online.

Due to the behaviour of the plugin, users were still redirected to the Anima browser window — which was a factor outside of my control. Despite the fact I worked around this issue, I do not feel as if I completely overcame it, because I was still constrained to the behaviour of the plugin. However, it was useful to learn the way around this and is valuable knowledge I will be able to bear in mind for future work where audio is required.

Outcome

I think it’s important that there were challenges I was faced with. Although it can be difficult and sometimes result in a change of direction, I think being faced with these obstacles present opportunities for excellent learning curves, that have ultimately made me a more rounded designer. I feel like I have created a piece of work I can truly be proud of and overall, I’m extremely pleased with the final outcome. I learned a lot throughout my major project and look forward to developing my skills further in the design world.

Artwork