Flying solo. Individual UX/UI Project Part 2 (UI)
After presenting the UX process, findings and mid fi prototype for this project, we started on the UI Design.
So it all started by looking for some inspiration online. I created a moodboard to get an idea of the look and feel I wanted for the App.
Before creating the Design Style Tile I came up with some adjectives I wanted the brand to convey and I actually started designing and played around with a couple of screens to see if the colours and the font I had in mind worked as I wanted to. Then I conducted a small desirability test where I had people see the app colours and design and tell me what adjectives came to their mind.
The colours I used are mixed of greens, which transmite health, positiveness and freshness, they have a hint of turquoise which transmits calmness and clarity, and the accent colour is a mix of magenta and brown to show seriousness, reliability and balance.
The font I used is the Ubuntu font family, a sans serif that hints clarity on desktop and mobile.
The mid-fi prototype was designed for an Iphone 8, but for the final presentation I decided to switch to an Iphone X, which meant I had to redesign a few things, but it was worth it. I studied the Human Interface Guidelines and designed the UI according to them. I’ll show you a few examples.
The use of a tab bar, strictly used for navigation, which also accents the part of the app the user is currently in.
Making the loading moments clear so the user doesn’t feel like the app is frozen or not responding. And also in this case I customised the loading screens.
Showing the title of the current view to make it obvious for the user where they are, and allowing them to always go back with the standard back button.
Before letting you go to the interactive prototype I wanted to show a few micro interactions that intend to keep the user happy and engaged with the app.
Click Here to see and interact with the prototype. Follow the blue hints and you will feel like this is the first time you open the app. You’ll set your preferences, create a meal prep menu, review the information and peruse on the home page a bit.
Hope you like it!
In case you didn’t get to see it, and want to know how this app came to be, here is the post about the UX part of this project.
