Innerspace App

🤔Challenge
How do we create a space the app that users feel safe and comfortable with their very personal journaling experience of their daily reflections, diaries and emotions?and to keep users engaged in using the app on a daily basis.

🏔️Goals
▫️ Create a digital journal where users can access when ideas come in anytime, anywhere.
▫️ One-tap flows that allow users to start creating their notes instantly.
▫️ A multi-functional app that increases the engagement of usability. 
▫️ Gaining visual insights of the user’s emotional flow and mental wellness.

💬 Problem Statement
In the modern highly-developed and non-stop work lifestyle, the working class often find themselves battling with chronic mental stress and disorders and often having a sense of not having their life in control. Therefore, people are becoming more conscious of their daily reflections and emotion flows. Simple methods such as journaling are often applied to help people to manage their internal dialogues.

From the focus group who use diaries have pointed out their frustrations with finding a perfect tool for keeping diaries:
▫️ Having trouble to find a reliable online diary.
▫️ Their physical jornal book can be missing or left at home when needed.
▫️ Looking for a diary that can be kept safe and accessed easily.
▫️ Looking for a tool they can also keep notes.
▫️ Can’t find a good app that has multi-functions for keeping diaries and notes.
▫️ Struggled to maintain a journaling routine.
▫️ Security of the access to the digital personal diary is a concern.
▫️ Would be a powerful tool that consolidates with the function of keeping plans.

💪 Cooperation:
“The Innerspace app was a sample project for the purpose of self-learning about user interface and experience design conducted by Vivian Lo and I. We planned, conducted, synthesized the research, and did all the UX / UI Design work. The User Study was written following the structure defined in Marcos Rezende’s case study ‘Reaction: an e-learning app for elementary school students”. The project outcome was also presented in Vivian’s Design of Master programme.
‍
Source: https://marcosrezende.medium.com/e-learning-for-children-a-ux-ui-case-study-5f4c2177c6cc?source=friends_link&sk=a08efc91813def244a630277fc7a7ca3
‍

💡 Design Process

1. Empathize
‍
🔎 Research
The focus of the market research includes existing apps in the digital market that provide wellbeing service that:
▫️ aiming to improve wellbeing for its users
▫️ promoting mindfulness
▫️ having personal diary feature 
▫️ featuring with personal productivities
▫️ helping reduction in anxiety and increasing motivation
▫️ enabling management of daily tasks and emotions.

Some research about what motivates people to develop the routine of journaling helped us to gain a deeper understanding of our target groups and identify their personal traits better:

‍
🔎 Survey and User interview

To help us gain direct and deeper insights, we applied questionnaires to the selected aspect. The survey involved qualitative questions related to their lifestyle, career, personality, and experiences of maintaining their internal dialogs using physical diary or digital app.

The qualitative research result helped us find the answer to the user’s international when using tools to help organise life plans and emotional tracking.

We observed via the research that people in the focus group who seek tools to improve mental wellness and organising life tend to come from the creative industry. They have indicated that keeping ideas and self-reflections recorded can help them gain deeper insights of their clients’ needs, and is often an important source of motivation for their work development.

It seems the interviewees share the experience of the increase of anxiety when work or social activities and personal life are overloaded, therefore, having an one stop app that gives the overview of schedules and allow them to instantly record their thoughts and journals would really save so much time and energy in comparison of having to download multiple apps and got lost on their mobile screen when needed.

The interviews also considered fundamental drives, for them to choose an app is the aesthetic aspect and if it is easy to use.

It’ll be really lovely if there’s a one-stop app where I can keep all of my thoughts, schedules, dream journals and random ideas together. Currently they are all kept separately in my different diary books. Oh yes, and it has to look beautiful and made very easy to use just like a physical journal.
‍– Harry Williams, Docuentary Director

2. Define

💁 User personas

User persona #1: Katalina Blik

User persona #1: Harry Williams

3. Ideate

We created the initial Information Architecture of the possibilities based on the recurring keywords identified in our research.

The usability map helped us to gain scalability of the app development and other technical elements that need to be considered and researched apart from the main features such as passcode protection, managements of memberships and user settings etc.

🤔 How Might We…?

To expand our perspective and brainstorming about the users and project, we tried the method of rephrasing the problem statement using a question starting with the sentence “How might we...”. The approach of applying point-of-view statements was powerful because it helped us pinpoint the most essential insights about them.

📜 Point-of-View Statement:
How might we help people with busy lifestyles who want to better manage their schedules and emotional balance in order to create more space for mental wellness.

The rephrased user statement broadened the scope for us to start conceptualising the solutions beyond the status quo. We brainstormed to respond to the user statement, each idea was kept on post-it notes, so Vivian and I could identify the most practical and relatable ideas.

After the brainstorming session, some ideas emerged:

▫️ Help mindfulness and inner focus
▫️ A sense of private space
▫️ Something also looks after your emotion 
▫️ Online access everywhere 
▫️ Simple to use 
▫️ Planning 
▫️ Fast note 
▫️ To-do list features 
▫️ Voice recording (with speech to text) 
▫️ Easy Diary (It’s simple enough note to need a tutorial) 
▫️ Tracking mood 
▫️ Turn to data visualisation 
▫️ Sync to cloud via Google Drive 
▫️ Passcode and fingerprint protected 
▫️ Available on mobile, ipad and web

According to the selection of keywords and user research, we then started developing this in-depth user-flow by verifying steps in building the contents, and the type of visual communication, and the mood board that provides visual references.

🎨 User Interface

Colour palette:
To define the colour palette applied to the app, we studied the colours that provide psychological indications for security, privacy, warmth, calm, and peace. We then narrowed down the the selection of colours by implementing characters, an avocado and the sun. To complement them, we chose the colour green and orange be our primary colours. To illustrates a calm space for the target audiences to feel private and secure, we used dark scheme for our background.

Typography:

The typeface of TT Commons is a sans serif commercial font that was developed for web-based use. The curve of the type body is with a minimal contrast of strokes that keeps the space in between letters straight therefore it is easy for the users to read precisely on the mobile devices.

The “sans serif” text is the fastest to read, the exact opposite when it comes to the printed version–Jakob Nielse, Prioritizing Web Usability

Logo:

The keywords that most define the concepts of the app project through the brainstorms and research were listed: Mindfulness, Internal, Space, Focus, Journaling, Consciousness, Mental wellness, Emotions, Productivity, Simplicity. To pinpoint the concepts and embed it in the logotype, we visualised the word Internal, focus, and space with a minimalistic approach using a dot and outlined circle. 

Iconography:

From the results obtained in the user research, we came to the conclusion that the components have to be contrast and clean for the best of visibility. Apart from the approach of simplistic and contrast style, we also applied some characteristics to the icon set design to add a touch of playfulness to the visualisation.

Characters:

To obtain a more friendly and playful style, we proposed to add characters to the UI style – an avocado and Sun.

Task Flow: 

Through the user studies we have identified that the flow of the app will happen intuitively, with a simple layout so that the user can instantly start recording or journing down the ideas of the moment. Once logged in, the user can choose the type of journals or plan they want to create their contents with. Based on the research of personas, we learnt that some users have preference of using audio-type function in inconvenient situations such as when needing to typing down ideas or when they are on-the-go, or just woke up in the morning and wanting to record down their fresh ideas coming off reflections at the night before.

On the step of creating a plan, the user can add people involved in the schedule solely or from their contact lists or email contacts to make contact instant when communication is needed. THere is also a panel for the user to add links, this can be applied when online meetings are scheduled, or when the user needs to take note of the event link, etc.

Moodboard & Sketch:  

We started the development of the visualisation by creating a moodboard with the key words identified through the research. Based on the UI Style research, we created a quick sketch tdso define the layout and space required for the design. The sketch helped Vivian and I to sync on the directions of the UI before it heads more deeply for details.

4. Build

Prototype:
Once we defined the visual ambiance with the moodboard, we developed the wireframe in gray scale to focus on balancing the compositions of the main features and characters on the screen.

Based on the task flow, we defined the hierarchy of the buttons based on the frequency of the usability. We identified that the most frequently applied button would be the Start Writing button. According to studies about user interaction with mobile screens, the bottom area of the screen is most comfortable for users to reach with their thumb, therefore, we proposed to place the buttons for writing, enabling audio recording, free sketches and uploading images at the bottom of the screen. The area for the users to instantly start writing is positioned at the centre of the screen and is applied with a larger writing area.

🖼 UI Screens

The welcome and login screen of Innespace App:

The home screen & the overview screens for each features:

The home screen contains 4 sections, each of which delivers different information and usability and their compositions were defined by user studies of mobile devices. 

▫️ Top of the screen: User setting, overview and notification taps. 
▫️ Second section from the top: date, weather icon and a personalised greetings to the user.
▫️ Lower half: this section contains the key buttons for Diary, Notes, Planning and Moods. These are the hierarchy of the features hence is positioned on the area which is defined as ‘comfortable to reach’ in user research. 
▫️ Bottom: the navigation is applied across the screens for the user to easily switch between screens.

The feature screens:

5. Improvements

What have we learnt?

Both coming from a graphic designer background, Vivian and I are trained to work with our ‘design eyes’ which were developed through years of professional experiences and intuitions. This means, the layout, hierarchy, colour & typeface choice, style, applied media, art style used to play an important role in our design decisions. However, in the UI & UX project of Innerspace, we walked through the complete process involved in a UI/UX project. We have learnt to step back by starting the design process with defining the scale and problem statement and research of the project–switching perspective for more effective ideations–building different levels of prototypes–testing and iterating with improvements. This allows us to gain a deeper understanding of the users’ perspectives and the values of cross-team corporations.