Healthy Freelancer
Finding an easy way to staying fit, motivated and cheerful!
Our designers’ team enjoy working on self-development tasks that improve their expertise, widen their understanding of design technologies, provide extra experience and deepen knowledge of how to use design tools creatively.
Healthy Freelancer app is a tribute to an idea of generating a clear, user-friendly and intuitive app design for individuals that work from home and often neglect or simply forget about regular exercising and healthy eating.
The team’s task for this self-development project was:
- To conduct a market research to see what similar app solutions exist;
- How popular they currently are;
- What features they provide;
- Create a new product that offers an improved user experience and a fresh look at an old problem.
During the research stage, we found out that fitness apps for freelancers represent solutions that are either too complicated or too simple. In the first case, a user often has to deal with a tricky app structure, lots of text explanations and videos that are hard to adjust to a home environment, or needs to be a profound athlete or be well-prepared for physical exercising. And in the second case, apps provide a too primitive and limited experience and lack programs that could develop a strong motivation for a healthy lifestyle.
To better understand our target audience, we used an empathy map and brainstormed about a typical freelancer’s likes and dislikes, favorite things and fears.
Our goal for Healthy Freelancer was to reach the golden mean, where a user won’t have to study tons of text and video instructions (because a freelancer is busy with work, so they don’t have time to study the application). Instead, the interface design and fitness programs will perfectly match a freelancer’s busy work schedule, won’t take much time to complete, and be intuitive and motivational at the same time.
Hello, Friend!
I’ve been working as a freelancer for many years and have become a real IT expert. But with all the work in my mind and hours of sitting in front of my laptop, I’ve totally ignored my lifestyle and exercising. And then I realized... I have to change my daily routine and find a way to get back in good shape.
Day after day, I’ve been searching for apps and checking fitness programs that could teach me how to live a healthy life and make a plan for regular exercising.
After many tries, I’ve come up with my own idea of a fitness app that will help other freelancers, just like me, become vigorous, strong, fit and full of joy. So to say, a Healthy Freelancer!
It is an app that consists of small and fun exercises that will boost your energy and encourage you to exercise every day. The app helps with most common health issues that freelancers experience on a daily basis, including pain in the back, wrist ache, eye strain, gaining weight and also a lack of energy and motivation.
How did we decide on the app’s logo design? We had three options in mind, creating a logo that depicts letters, shows the home workout, or displays our Freelancer character.
Our goal was to evoke a strong emotional response among potential app users. That’s why we turned down the idea of using letters. Displaying our character at full height while exercising was not the best option either. It would be hard to recognize what the character is doing because it looks tiny and small. Also, considering that the app’s fitness programs are unusual and don’t include dumbbells or barbells exercises, we’ve finally focused on showing off the character’s face, young and healthy.
Research
UX
UI
Branding
Fitness programs in the app have been organized to specifically embrace the right daily habits and build a better physical and emotional health. Select the key pain points in your daily routine, and the app will provide you with a customized workout program that matches your needs.
Meet Mike Maxter, your guide to getting in a good mood and shape!
Take a look at me. I’m a young, independent and charismatic guy that is always ready to help.
Our task with the character design was to generate an image of a smart male programmer that is in the typical age range for a programmer (around 25-35 years old) and looks like a typical programmer. Here are different variants of his face that we’ve come up with.
We didn’t want to make him look dull or too hipsterish. Our freelancing developer is young and active. Mike is smart, so he’s got glasses and a few stylish wavy locks of hair. Also, yes, please pay attention! He’s wearing slippers, not some fancy and chic sneakers or shoes, because he works at home. And this is also why he’s wearing a T-shirt and shorts. His clothes give him absolute comfort. And for the cherry on the pie of Mike’s portrait, we’ve added a soul patch below his lower lip.
Manual mode
Once you run the app, you can select an activity that you’d like to begin with.
Standard mode
As soon as a notification comes to your device, you can begin using your customized program of a healthy freelancer. It’s up to you to decide whether you want to use the app right now or get ready to start a bit later.
Easy and quick visualization
Creating wireframes helps quickly visualize the idea and test its viability. At this stage, it’s very easy to edit and correct errors. For the app, we’ve created a prototype to check how reasonable our solutions are for the app’s idea.
Watch and repeat after me
To make interaction with the app convenient, all switches between exercises have been made automatic. Every exercise is accompanied by an audio with a short instruction. Additionally, you can choose to view the text instruction.
It’s all at your fingertips
You can specify the number of repetitions, adjust the voice power or turn off music in Settings. You can switch between exercises by swiping or pressing the button.
For the app’s design, we’ve selected flat style, clear and bright colors and good contrasting and used illustrations as the basis for the app’s look and navigation. This way users don’t need to waste time on reading lengthy instructions and can perceive information and tasks that the app poses intuitively.
The app’s concept presupposes animated screens to make the app live, builds a dialogue with a user and quickly engages them into the activities. For example, a dialogue with a user is supported through such animation features as Mike slightly waving his hand or pulsing of an active button.
For Healthy Freelancer, we’re using a very clear color coding that reduces time an individual usually needs to process information. It means that you don’t need to read the text and can understand what to do based on the color you see.
Our team used natural color associations for the app. For example, healthy food is easily identified with the green color, water is turquoise because it’s important for maintaining a good health, work is blue because it’s often associated with stability and well-planned activities. The sidebar uses a darker shade of violet to create a contrast with the rest of the app’s screens that are very light.
Orange was used to show dynamics while red signifies a lot of energy, so it was applied to the section of physical exercises. Light violet was used to begin eye rest training. It’s not like other natural colors in the app and serves as a non-trivial color solution for a fitness app.
Power
#f5554b
Dynamic
#fdb933
Eyes
#b181b4
Water
#00b7d2
Food
#7dbb00
Work
#009cff
Menu
#44364d
We’ve selected fonts that keep up with the mood of Healthy Freelancer. That’s why, they’re moderate and unsophisticated. Many of the app’s screens include headlines, so the typography was selected with the idea of easy and fast information consumption. You won’t find lengthy texts in the app.
Museo Sans Rounded
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Gotham Pro
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Photoshop
Photoshop is used for HTML coding.
Illustrator
Illustrator is used for images.
InVision
InVision is used for prototyping.The side menu gives access to additional options in the app. There’s a smart alarm clock that initiates a healthy night sleeping mode to help you wake up at the right time. The feature that assists you with organizing your workplace will provide a healthy environment and ensure a better effectiveness at work. In case, you’re looking for something very special, you’ve got an option of generating your own individual program.
Data about your activities (daily, weekly and monthly) is carefully collected by the app. You can check your water intake balance, number of completed exercises and the total time you’ve been active. Each of the parameters is measured separately, so a user can view each of them as needed.
For each type of activity offered by the app, we’ve chosen elements that most quickly explain what to do next. For example, the icon for work time is naturally identified with the basic programmer’s work tool, a laptop.
Following healthy eating habits means that there will be several snacks scheduled during the day. To differentiate these small, but important meals, we’ve created several different snack food icons.
The app solves one of the most serious problems that freelancers face. Step by step, it drives them away from a lazy daily routine. The app’s format makes this transformation an easy process, so freelancers won’t need to do anything crazy and hard. The gamification elements, images evoking emotions and fun exercises help resolve the problem of a sedentary lifestyle.
Due to a small number of features, Healthy Freelancer is an intuitively easy-to-use app. Its design is emotional, but not overwhelming.
It’s also got a friendly tone of voice, so a user stays constantly engaged and motivated. Workout exercises are easy and unusual at the same time, so users can enjoy them and have fun.
Also, the app is flexible and you can easily add more features to it. You can create more challenges, such as competing and sharing your progress with your friends. The app is an excellent option for monetization, such as offering additional fitness programs for a fee or selling goods for freelancers (e.g., a mousepad that prevents hand numbness).
