Story Of My Very First UX/UI Design Project At Ironhack Bootcamp

Part One: UX Design Journey of My Wellness App

Hello :) first of all, i would like to warn you, this will be a long post! But promise it won’t be boring, so please go on :) I will be telling the story of a wellness app i have created during my UX/UI Design bootcamp studies at Ironhack Paris. Actually i decided to separate UX and UI phases and have two posts, so this will be the Part One: UX Design Journey. And the UI part will be in another post in the following days.

Yes the posts will have UX and UI in them! Blood, sweat and tears, sleepless nights, stress, panic attacks… OK, a bit exaggeration but i cannot believe i got to this point in 6 weeks. Huge thanks to my instructor Louis, TA’s Arthur and Pam and everyone at Ironhack. Anyways, i will be writing more about them in another post later. To give you an idea about how my app looked at the end, here is the homepage ;

THE BRIEF

So, back to the point of writing this post, everything started with the brief. National Wellness Institute needed help from all of us Ironhack students! It​ is an organization founded in 1977 and offers certification and training for wellness professionals, providing them with frameworks and tools that they can use to help clients achieve their wellness goals. We were required to conduct user research to understand people’s relationship with wellness in order to develop a tool that will drive them to action.

EMPATHY WITH THE USERS

Using the design thinking methodology, i started my design journey with my surveys. First things i needed to learn were who were the users? What are the demographics? What wellness meant to them? What was happening in their lives in terms of wellness? What were their habits, and many why’s and how’s.. I got 110 answers, which is more than i expected, i was happy dancing in my mind “ yess, i have more than a hundred, oh yeeaah!” .Here are some of the results from the survey;

Almost 75% of them were working in an office and in a stressful environment. They were young professionals. 60% of them had pedometer apps. And 40% were having at least one other health related app on their phones.

In short, wellness for a majority of users was doing sports and eating healthy. They had just a little time for themselves after work. Finding time and motivation to do sports or eating healthy was hard for them.

I had valuable info from the surveys that led me to ask more questions. A big majority of users were talking about lack of motivations, but why? Were there any other areas in their lives which they could keep themselves motivated? How? So i did interviews with 5 users. Gathered all my answers and users ideas together and at the end of the research phase, i have created my persona. It reflects my findings from my research and empathy phase. Here you can see her ;

Then i prepared my user journey. I followed the user during a workday, tried to capture high and low points during the day and tried to discover opportunities. The moments she felt unhappy were these;

• She starts a new diet, but eats dessert in the afternoon and feels guilty.
• She plans to go to the gym in the evening but she learns that she needs to work extra hours and feels frustrated.

On the other hand;

• She was happy when she planned going to the GYM with a friend.
• She was also happy sharing the news to her friends that she started a new diet, feeling like she was having their support when she shared.

Here you can see my hand drawn user journey, it’s not fancy but it helped a lot :)

During the day , she thinks of changing habits like instead of elevator, using the stairs, looks around and sees that all her colleagues are using it so she goes on with the elevator. So , it’s an opportunity to have such heathy-unhealthy option pairs even at the office. If there was a “challenge” or “friend’s support” to choose the healthy option, maybe the user would easily choose the healthy one. After i defined the high-low points and some opportunities, i have built my “how might we” questions, which are;

• How might we, keep the users motivated and focused on their health goals?
• How might we, help the office people be more active and eat healthier during long hours in the office?

IDEATION PHASE

In the interviews and surveys, one of the highlighted issues was, “how it was easier to keep the motivation when you have your friends with you” so the solution should have involved friends and supporting each other. Having a common goal to achieve together.

For creating the concept, i got help from my friends, we used “crazy eights”.I love the name by the way. One of my favorites so far, helps a lot to put the ideas on paper, draw and write freely. It helps you collaborate and create great solutions you cannot think of by yourself. What i got from creating ideas for how might we’s are;

• It should have a “sending challenge to friends” function,
• Two different kinds of challenges for eating healthy and being active
• Let the user pick a ready challenge or create a custom one
• It should have a pedometer function too

Following the ideation part, i begin to draw. I love hand sketching. As i was working on my sketches, talking to my instructors i decided to add more fun to my solution which my persona would love. She is a young lovely woman who adores cute little animals! What i needed was a cute racoon, which my persona would do her best to keep healthy and safe.

I have checked Pokemon , Tamagotchi (it’s old i know), how they worked. Talked to a few more people (who are similar to my persona) about the cute animal idea, all answers and feedbacks were positive.So i sticked to it and continued!

What i came up with at first was a bit far from “cute”, actually a little bit ugly at the beginning i admit it :) But it got way better later, you will see! Here are the very first hand sketches of Fluf;

THE CONCEPT & PAPER PROTOTYPING

So with my little racoon, and my user flow, i was ready to prepare my first paper prototype! This is one of my favorite ingredients of the design journey! I love playing with papers :)

Before paper prototypes i should first tell you about the concept and user flow. In short, the concept is “ Send challenges to your friends to keep yourself and Fluf healthy” . So , main point of my app is, you can create or pick health challenges that you can even do in your office like, “use the stairs instead of elevator for a week” or “let’s quit sugar for 21 days” etc. send the challenges to your friends. If you all accomplish you keep your Flufs healthy! Here are some pictures of the process, road to paper prototyping;

When you get the app you start with a healthy Fluf. If you join challenges and success he stays healthy, if you lose he gets, umm.. lets say, fluffy :) and if you keep losing ad neglecting him he gets fluffier and flies away in the end! It’s sad i know but don’t worry, you can have him back when you accept or send a challenge and you succeed again. Here is a picture of my paper prototype;

I tested my prototype with 5 users. Two important outputs were;

• Adding an icon for the type of challenge to show if it was about eating healthy or being active.
• Having just one Fluf and not getting lots of Flufs as you complete challenges.

MID FI ON SKETCH

Testing and fixing my first paper prototype, i have reached the mid fidelity prototyping phase. I have added a sample from mid-fi screens on Sketch, i have added the challenge type, and had just one Fluf on the homepage with the paper prototyping results;

Here i have to share my personal opinion; to me preparing mid fi on Sketch or any other tool is a bit like wasting time. I have just a little experience yet but, i feel like this, at the moment. To me having a good paper prototype and testing it thoroughly till you are satisfied with it and having hand drawn mid fi is enough. Hope i don’t make “UX/UI gods” angry but this is just my personal opinion. So don’t strike me with lightnings and stuff or something gods. Mercy!

CREATING MY CHARACTER ON SKETCH

One of the most fun parts of my design journey with this project is when i created my character i named Fluf :) He is a racoon, as i have told before. I had no experience in drawing something on a tool like Sketch before. But it was not that hard. I built it piece by piece, brought them together and grouped them. At the end i had this;

On right is what happens to him when you lose the challenge; actually he gets more lovely and cute this way so i named him Fluffy fluf :)

So, with creating the character Fluf, begins the UI part, which is starting with the mood board , style tile, colors , hi-fi screens and interesting stuff! If you have any comments please go ahead :) Thank you for reading till the end, see you in the second part :) If you have time and patience to read more but don’t want to look for the UI post :) , here is the UI Part link. Thank you!