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

Part Two: UI Design For Fluf App!

Hello :) As i have told in the previous post I will be telling the story of a wellness app i have created during my UX/UI Design bootcamp at Ironhack Paris. If you have read the recent post you already know that i decided to separate UX and UI phases and have two posts, so welcome to Part Two: UI Design for Fluf App!

MOOD BOARD & STYLE TILE

So UI part begins with the moodboards. Oh i love moodboards! You find your keywords, look for fancy photos and colors, you are free (-ish)! A splash of color here and a bit of inspiring quotes there..i love it! And it really helps a lot to focus, deciding the colors and feelings you want to create and everything. With Fluf, main feelings and notions were; friendship, supporting each other to achieve your goal, having fun with friends and challenging your friends in a funny way. I wanted to use warm colors like yellow and orange with blue and green to give a sense of freshness and health and a calming effect. Here’s what i had as my mood board for Fluf;

With the style tile things begin to get serious. You have typography, example of header, subheader, body text, font names, sizes, colors, examples of button styles and color swatches (with Hex Codes) in it. My style tile for this project looks like this;

ATOMIC DESIGN MODEL

First a little bit info about atomic design model; “It is a system which involves breaking down a website or web application into its basic components so that they can be reused throughout the site or app.”

You begin with building your atoms which are icons, colors, photos you will use, every basic particle you will use. Then you prepare your molecules bringing atoms together. And one step forward, you prepare organisms. Here i have added some samples from my work, first the atoms;

And a glimpse of molecules here;

This is the first project i began to use atomic design but, again just “my idea” as a beginner, i felt like the best is starting with home screen and maybe create 3–4 main hi-fi screens of the user flow and then preparing your atoms and molecules. I could handle it this way. The other way , beginning with atoms, molecules, organisms and then hi-fi, doesn’t work for me, yet. Maybe in the future :) But as i said before, this is just my personal view based on my own experience , i should test it more :)

PREPARING THE HI-FI & TESTING THE PROTOTYPE

So i wanted to give you the idea of how my screens evolved during the ui phase as i proceed in the project. Here they are, what i begin with and what it became at the end.

First the homepage, last version is on the right;

And challenge sending screen, last version is on the right again;

To summarize how i got to the last screens ;

• So, all this work is done during a bootcamp and of course during the process working with our instructors helped a lot (A LOT) ! I loved how they make you find the right way :) They don’t just give you the answers, it would be quick and easy . Instead of that, they ask questions to direct you to the right path. For example , i had two main call to action buttons on the homepage and they were in the same color. But after my instructor asked me “which one do you think is the most important” and we chat on it. Checking and trying different colors and looking for inspiration, i decided to have these two different colors for my buttons.
• And test! test! test! testing the hi-fi prototype with users who are similar to my persona. Getting their ideas about how they felt about the homepage i created. Asking them to pick 5 words from a list to describe the feeling of it. Most of them were ; clean, fun, clear ,easy to use and some of the users said the font i have used was making it look old and weird. So i decided to change it (also my instructor was not that happy with the font too , so he was right, bye bye cute font! )
• During the tests, users pointed that it was confusing to have two colors in the icons at the bottom bar. So i have made them all grey, and they turn green to indicate where you are.
• Lastly i have made the “create a challenge” screen simpler, less buttons and less indicators.

After deciding the last versions of the screens, i polished and checked them before sending to Marvel, i prepared the mockup on Marvel. Did my tests again, have changed a few little points. So here are some of the last version screens from Marvel;

At the end i am happy with my Fluf app! And here you can try my mockup;

I admit that it was hard work, from beginning to end, i got frustrated at some points but when i see the mockup on Marvel i was like “Oh look at my baby :)” I had just two weeks, which is quite a short time to prepare everything. It was stressful but feeling of learning and improving as a UX/UI designer is worth every effort ! Thanks for reading :)