HAPPY WELL app — Design journey

Nevena Grubelic
5 min readJul 22, 2017

--

Several years ago I felt that I might be on a crossroads. During that time my thoughts were concentrated on discovering what I like doing the most and where I find myself at home. I looked back at my work path and it seemed that everything was leading to that day. During the past years, I learned most of the work processes, but the creative work was always especially close to my heart.

I always liked to monitor how things work to be able to improve business processes. When building websites, the most important part for me was to make it equally perfectly functional and beautiful. Nothing less.

Sometimes I was angry with web developers, because of their lack of graphical edge, and sometimes I wondered if I am really the only one who understands and loves the code and graphical interfaces equally.

Idea was born

By the end of the year, I got the idea of developing an app that would help people to feel better. I was observing myself and people around me and discovered that when you feel good, everything around you starts to unfold in the right way and you start receiving good prospects about anything. The key was really too simple: You just have to be happy!

Soon after that I received the Google Scholarship for Udacity Android Basics Nanodegree and bringing my app to life was suddenly possible. Since then things looked pretty ambitious with two big courses, work and family at the same time, but it was worth it. The Happy Well digital prototype was completed!

Design brief and need-finding

It wasn’t hard to choose the right design brief since there was nothing else on my mind than making this world a better place. So I chose to design an interface that facilitates personal or social behaviour change. Sometimes people don’t have anyone to talk to, some need to have a right push at the right time and some just need a reminder of their own worth or an uplifting message to turn their day around. Seeing a smile on someone’s face sometimes means everything and just knowing that you made someone’s day is a lot.

Like a true detective

The process started with investigating how similar apps were built. I tried to find the best and worst in those apps and strongly decided to avoid anything that could repel someone from using it. The first thing was to not include a prerequisite that facilitates the app to access various mobile phone systems like contacts, location, camera, photos, etc. I definitely wanted to include as much Help info as possible incorporating tooltips to enhance UX for new users. I also wanted to simplify the notification setup process and at the same time design only what is really feasible in the final product. Being familiar with developing for the Android platform proved to be of great help.

What followed was user testing on several apps that are similar to what I planned to build. Testers reported about what was annoying them while using apps with notification reminders and they all agreed in one: they wanted to have more flexibility setting up notifications.

Storyboards

The next step was to develop storyboards with two examples of how the app will be used.

Paper prototype

This is my favourite prototype phase because every time I do it, it reminds me that it is impossible to make everything right from the first attempt. This technique offers prototype development in various directions and easy modifications. I cannot recommend it highly enough. After heuristic evaluation made by my pears, some of the below screens were altered and the prototype was prepared for the next phase.

Digital prototype

By the time wireframe was made, I realized that the project will have at least 50 screens, so I made two decisions. One was to fully develop only the most important screens, key screens with major functionalities and skip for now the ones with repeating parts. The second decision was to start drawing the interface as it should look in the final stage since I had limited time. Some screens were still changed in the end, because of user testing which was coming next, but generally, it was a great decision.

Testing the prototype

Initially, the digital prototype was tested by two testers in my presence. After that, I launched an online A/B Test with two app versions using the UserTesting.com platform. That resulted in videos and comments from users who tested it. The conclusion was that the majority of users won’t have any problems with navigating the app, which was what I hoped for. To my surprise, even the app version which did not have the better user interface caused no problems for the average user. Nonetheless, I decided to provide enhanced user experience with buttons on the bottom which clearly indicate what action is expected.

Some tips to make your future projects even better

Investigate color meanings — colors inspire and have subliminal meanings, various to different people and different countries. Some colors inspire, some sell, the right color can make all the difference.

Get some graphic design course — because graphic design topics covered in this course were not profound enough and you really want (need) to be pixel perfect.

Develop a critical eye — before starting your prototype investigate what is already on the market and find as many errors as possible.

Talk to developers before you start — developers are great first testers. They know if something is feasible and can give you valuable first insight.

Test on as many users as you can — because every one of them has different values and needs. Who knows, maybe you can put all those ideas in the app version 2.0. :)

Keep learning — I cannot stress this one highly enough. The research will make you a better designer, make it a habit.

Digital prototype: https://bit.ly/2vV2buf

Conclusion

Finding and retaining happiness can be a real problem for some people. My idea was to make a digital reminder that a mindful and fulfilled life is really possible. Happiness can be found inside everyone and then — just expect miracles!

--

--