GrowMi: An app for well-being + Productivity

NOTE: Whilst I would consider my best project because it widened my skillset having to create a product from scratch and publishing it. It is also my worst project because it is now a bit old and one of my first projects ever. If you want to see a clearer reflection design wise, I recommend also looking at my newer projects.

Achievements

Creator of the week!

Interviewed by Appgyver and can be read on Medium.

Featured!

Featured within the official SAP Appgyver newsletter and NoCode News.

Published!

GrowMi is now available for beta testing on Google Play.

Context

This app is a reflection on being a better human being. If people allow themselves to suffer needlessly, they have such a propensity to instil their own misgivings and moods unto others which adds a whole level of suffering people must endure on top of nature's caprice.

"Wouldn't the world be a better place if people worked on themselves, were thoughtful about their actions and had the right reasons for doing things they want to do?"

GrowMi presents a system for efficient work and reflection created during my Gap Year yet is in constant iteration as the world moves towards this notion of increasing complexity.

Role

I spearheaded the end-to-end product development process. Learning the technicalities of front-end and back-end development, marketing and other creative work. The whole process was psychologically enriching. Though, "No man's an Island," so I had help from different communities :)

Tools

Figma

Process Overview

I had not yet started my UX undergraduate and so largely self-taught, I relied on youthful hubris and intrinsic motivation to tackle such an enormous project. The process required constant iteration and so there was never a clean process.

Research

DISCOVERY RESEARCH AIM

To work out a relatively unknown problem. I had my initial assumptions of pain points within the wellness + productivity sphere but sought to prove/disprove my hypothesis with empathy and research.

Overview

User INTERVIEWS + OBSERVATIONS

I conducted user interviews via. Messenger and other social media platforms online due to the pandemic lockdown. When rules were relaxed I was then able to do naturalistic observations on existing solutions they use e.g. journalling, apps etc. With these methods I was able to collect attitudinal and behavioural data which counteract the negatives of each.

The interview followed this general structure: Warm up Qs -> Main Qs -> Follow up Qs and of course since I was collecting some personal information, I had written permission to gather their PII.

An interview using Messenger or the preferred method of communication by the interviewee.

An observation of people's current solutions of choice. This was an app someone used regularly. This became a case study observing the features they used; what they liked/ disliked as well as an in depth look at the application itself.

Secondary Research + Competitive analysis

Due to the pandemic, I could only interview a rather limited group. Thus, the primary data collected were the thoughts on how well-being is tackled within a young demographic of 18-27. The people who replied generally have open attitudes to well-being, are mostly young, looking for jobs and/or in education. Secondary research would give me a wider view and potentially find niche demographics.

I worked within a shared Google Doc (I had a several documents for research) to structure my findings within a table. During this time a Biomedical Engineering Student helped me to correlate research.

Synthesis

USER PERSONAS

Using the user interviews as well as research online to create these user personas. For some of the research and planning, I was aided by a Biomedical Engineering Student , Thea, who, from a more technical background, helped to give different insights and encourage me.

Affinity mapping

I then synthesised all the relevant data by affinity mapping. I took key points and grouped them into overall topics and themes in Figma. These would later be refined to become the sections of the app.

Problem

From the affinity map, it was easier to gain key insights and see what the underlying problem was...

People had their problems and their own things to say but didn't know how to cope. The topics of wellbeing were of interest to these young people and we see it even before the pandemic, there was a rising popularity of mindfulness exercises and growing awareness of mental health (growing market). Though they are well-intentioned, most people don’t know how to act and make it a habit.

Product Proposal

Create a well-being and productivity platform that’s relevant and accessible for everyone. An app for self-improvement and management to bridge the intention-action gap to help people develop with self-care and coping methods.

Planning + Development

**Before this, I gave myself 1 month to learn Appgyver and Firebase API.

Using Appgyver Academy and other resources to build smaller apps to get a handle on the functions and debugger before creating my own custom logic.
Reading Firebase documents and watching their videos to understand best practices for database structuring and tackling security with code.
I knew I couldn't learn everything so after the deadline of 1 month, I would just start or I would never begin.

Overview

Section 1: Sign In/Up

Sketches + pLANNING

Looking into an onboarding process to give an insight into what value a user will get from using the app (display clear value proposition). I had thought of adding a breathing animation like Headspace to provide initial value which would make it easier to ask for the user to provide feedback, tick terms & conditions etc. as they might feel more compelled to do so.

Mock-ups with Figma

TOP: is the initial mock-up using social log in and sign up but there was no capability for that on Appgyver so sign in/ up just has a basic username and password input. On the app store documentations if there is an option for Google sign up, there has to be sign in option with Apple and vice versa.

MIDDLE: shows new log in design after getting people to test the design above with the Appgyver app. I added more illustrations and copywriting to show the benefits of using GrowMi- I would count this as the onboarding process.

BOTTOM: is an experimentation for a 'dark mode' feature.

Prototyping + User testing with Appgyver

Because Appgyver also comes with an app to readily allow you to check the prototype, I was able to do Alpha user testing without uploading it to the app stores; do some bug testing and use more complex logic e.g. letting a user know if their email and password is valid, addressing legal documents and including the onboarding on one page to make things seem less long.

However, Appgyver Composer, gets data heavy so users noticed a bit of lag. Thus as of right now, I do not think an added dark mode feature would benefit the user.

The user is shown the mandatory splash screen and are greeted with the GrowMi mascot. I also added a 'remember me' feature so a user is automatically authorised if they've logged in before token expiry.

Future thoughts from Beta user testing:

Dark Mode so users don't strain their eyes but GrowMi uses a lot of backgrounds and colours so would be difficult to implement.
Social log in/sign up for quicker access

FINAL MINIMUM-LOVABLE PRODUCT

Section 2: Home

Sketches + pLANNING

Ideas for navigation bar running across all pages and icons for each umbrella category. Thoughts on what would be linked on the homepage like the theme, showing reminders, quotes, a 'focus of the day' etc.

Mock-ups with Figma

Settled with a homepage dashboard showing the umbrella categories. With this, I could promote users to the webcomic journal as it would be set as the background of the page.

Prototyping + User testing with Appgyver

The homepage shows an overview of To Do and Goals where on open page, the system counts users' to do list via. HTTP request.

However, this means requests are called every time a users goes to homepage which would be often. Despite this, Alpha testers have noted it's helpful, especially for the to do lists.

Alpha testers, however, say arrows to get to pages are hard to press and are seen trying to click multiple times before success.

FINAL MINIMUM-LOVABLE PRODUCT

I made the buttons more pronounced and the whole bar clickable. Only an overview of the to do list is shown to limit Rest API calls as showing the number of Goals, which didn't change as frequently as To Dos didn't have a significant impact on the users.

From user testing throughout, I noticed common productivity pitfalls which are addressed and have added a page in the home dashboard linked to 'Keep Growing.'

Section 3: Relieve

Sketches + pLANNING

Splitting relieve section into exercises, breathing and reading. Then contemplating the logic and layout of each one.

For the animations within exercises and breathing section, I filmed myself for each one and used ClipStudio to rotoscope. In the end, I created 45+ animations.

Mock-ups with Figma

Considering filters according to research of exercises (like floor, no floor, no jump) done at home and more options for users to choose types of exercises (specific focus on parts of the body). The reading section is also split into different categories and adding a social aspect by looking at what other people have written for the prompt.

Prototyping + User testing with Appgyver

Exercise split into 'easy,' 'intermediate,' and 'hard' otherwise user would have decision paralysis and tend to forego this section entirely.

They liked the animation but the timing along with the instructions on the screen didn't align. They felt the breathing section could have more variety.

FINAL MINIMUM-LOVABLE PRODUCT

Users had common pitfalls preventing them from exercising which are individually addressed in a guided way. I Split the exercise categories in different pages to limit API calls and the reading section could only be viewed by the individual as users' journals are felt to be private and there didn't seem to be any discernible benefits to having seen others' notes on the prompt given. Added breathing practices used internationally.

Future thoughts:

Concerns for future add-ons with reading section as, though files are compressed, they still consume somewhat large data.
Users noted some of the animations are hard to follow -perhaps better copywriting for instructions, use SVGs for smaller files and professional help with exercises as they were modelled after myself.

Section 4: To Do

Mock-ups with Figma

Planning the user journey for the To do list.

A user can input future To Dos on a calendar and get help with the pitfalls of not being able to accomplish to do list with a guided help section.

Sketches + pLANNING

Looking into the logic behind the Pomodoro Timer feature which would 'grow' according to the users' inputted time. Not a necessary feature but a thoughtful one users of Forest enjoy.

Planning the layout of the To Do lists according to people's habits with them (repeated to do, once a week etc.)

Prototyping + User testing with Appgyver

Due to my own technical capabilities, there is a pseudo calendar split into 'today,' 'week,' 'month,' 'year' instead.

Users used the guided help section often and liked the holistic approach to creating a to do list and helped them be more thoughtful about what they do. However, people weren't actively clicking on tips for having a good break.

FINAL MINIMUM-LOVABLE PRODUCT

Users thought manually moving To Dos between the pseudo calendar as cumbersome so the app would just focus on the present with 'Today' whilst also acknowledging future to do's with 'Upcoming.'

Having an efficient break is now an automatic pop-up once timer stops.

'Today' To Do list is now limited to 20 To Dos, though I've been thinking of limiting it to 3-10 to further push users into being more thoughtful.

Future thoughts:

Users want to have notifications + reminders for upcoming To Dos.

Section 5: Goals

Sketches + pLANNING

Goals, To Dos and Track (later Habits) were going to be on the same page as they are similar and users could easily flick between screens.

These would be overarching goals so would not be used frequently. Nonetheless, edits, pseudo alerts and guided help were features that were considered.

Mock-ups with Figma

Delving deeper into the user journey from setting a goal to creating a plan for said goal, getting help, completing a goal and giving it up.

Prototyping + User testing with Appgyver

Goals had 3 sub-sections within a page 'pending goals,' 'completed,' and 'given up.'

The help section just consisted of quotes which referenced The Top Regrets of the Dying, but like the To Dos, users wanted a more guided help section.

FINAL MINIMUM-LOVABLE PRODUCT

Added a guided help section- at the time I was reading Human Universe by Brian Cox and re-read Jordan Peterson's 12 rules for life which helped in delving into deeper questions.

Added a custom illustration for goals to differentiate it as one of the main pages.

Got rid of 'Given Up' goals this time any goals given up would go under 'Completed.'

Future thoughts:

Users would like to separate their goals execution rather than having one large input. I am not yet sure how I would input a possibly infinite number of steps and add that to a database then load it.
After one week, users are notified to retrospect their goal execution but users note it would be good if there was some sort of notification of this outside of the app.

Section 6: Habits

Sketches + pLANNING

I looked into different ways I could display a users' habit journey from an illustrated bar, a calendar, tiles etc.

As well as the different options a user could input e.g. repeated, unit of measurement, colour coding etc.

Mock-ups with Figma

I had thoughts on having a progress tile overview of all the habits and their stats on a given day.

I would later find out this would be difficult to implement (maths + logic) but alpha users in the prototype took no notice of the lack of stats.

Prototyping + User testing with Appgyver

This was a particularly difficult one to sort through at the back-end as the database had to be structured in a way where I could calculate some data on the press of a button at the front-end to be sorted and updated back again at the front-end.

Users prefer the guided help rather than the bullet points.

FINAL MINIMUM-LOVABLE PRODUCT

I added a custom illustration for goals to differentiate it as one of the main pages.

Limited the number of habits to 10 which seems fine because users only had about 3-4.

Future thoughts:

After one week, users are notified to retrospect their habit but users note it would be good if there was some sort of notification of this outside of the app.
Currently, when updating a single habit, all habits on the list are refreshed which are a waste of API calls. I am looking into having them displayed individually on the page.

Section 7: Reflections

Mock-ups with Figma

The routines would be short so as not to interfere or be too much when added into people's normal routine so anyone could do it.

Each reflection would also be linked to the To Do lists.

Sketches + pLANNING

Separated into morning and night reflections each with their own mini routines.

I also had thoughts of having choosing a routine from successful people of the past and challenges but seems like an after MVP thing.

Prototyping + User testing with Appgyver

Bug found where users could not view entries between their selected dates.

Users like to be reminded of their To Do list at these times and found themselves being more productive.

FINAL MINIMUM-LOVABLE PRODUCT

End Your Day follows the SKS process but that is now tied in with 'Meditations' section following the format of Marcus Aurelius' journal. Users have noted this to be an improvement and are also much more likely to go to the Meditations section now.

Start Your Day entries have also changed to just show on the page according to users' selected date which began as a workaround to a bug pertaining seeing data but has significantly decreased the number of API calls so has been kept.

Section 8: Meditations

Sketches + pLANNING

Initial thoughts for a section where users could think about specific aspects of their life like work, relationships etc. all within self-contained journals.

Mock-ups with Figma

Generating content for different journals on common aspects of people's lives e.g. a pathway on meeting new people, disengaging after intense work, performing under pressure etc.

Prototyping + User testing with Appgyver

FINAL MINIMUM-LOVABLE PRODUCT

To limit API calls, users are presented with a start page where they select the category of meditation.

I had a hard time doing pagination for this aspect and settled with a load more button. Thus, I had to try and decrease API calls further by splitting data into years and users could select the years to view entries.

Future thoughts:

Users note meditations section seems a bit boring compared to other sections with their illustrations.
Better pagination system that works on Appgyver w/ Firebase

This section is simplified. Having a section with possible infinite deep journals that could in theory have infinite numbers of chapters would be difficult to do with Appgyver (for now).

There are still the categories of the aspects of people's lives but now follows overarching themes rather than specific feelings and events.

Users note they like the feature as showing and reminding them of their values but they do not use it often or forget about it.

Section 9: Growth Journal

Sketches + pLANNING

Research for this section was possibly the most extensive where a lot of readings (books + articles) and watching lectures (e.g. online talks from professors) had taken place.

Mock-ups with Figma

A lot of possible ideas for guided journal pathways. In the end, a users would select a feeling they felt most strongly and then go from there.

Prototyping + User testing with Appgyver

Users preferred to add their own title rather than having the feeling as the title of their entry.

They didn't want to be forced to enter tags though some did like it but expected some sort of way to use them (e.g. via. search function) or see them somewhere as data.

FINAL MINIMUM-LOVABLE PRODUCT

Got rid of tags as they are not currently being used in a useful way.

Stress is quite common nowadays so added a specific pathway for it.

Future thoughts:

Bring back tags which may be used in the back-end for users to filter their entries and possibly get some stats though I would like data handed to users to be more meaningful.

Section 10: User Page/ Settings

Sketches + pLANNING

Honestly, I totally forgot about this section. Nonetheless, I quickly planned it out and sketched some features.

Here are some thoughts of things that need to be included on the app and is somewhat of a misc section.

Prototyping + User testing with Appgyver

This wasn't design heavy and I was already very familiar with Appgyver, so I skipped hi-fi mock-ups to building + testing.

Included common things like changing account email, deleting account and access to legal documents.

These were the things that, to my ability and the platform, technically feasible.

FINAL MINIMUM-LOVABLE PRODUCT

Future thoughts:

Include a provide feedback/ contact customer service via. email rather than the little note at the bottom of the screen. I need to find a service for emails and then link it in the front and back-end.

Pre-Launch

marketing

Published the GrowMi webcomic guided journals on Webtoons leading up to launch of the app.

The platform has a young audience who may be more open to mental health and may be more aesthetically aligned with GrowMi.

google play console

Reflections

This was a huge endeavour but I learned so many things not merely within the end-to-end product development process but also growing as a designer and adapting the way I work.

I am going to continue this project because self-development is an ongoing process. Even till now, as I read or watch something, I get a light-bulb idea and something I want to share with others but more accessibly through GrowMi.

The project's been fun in that slightly frustrating way, but I've always enjoyed the challenge of problem solving because I know in the end, there's a tangible and helpful outcome.

For future, I could optimise the process much more to refine designs faster and get better feedback.