4 — WELLNESS APP — PART 2 : UI
3 — IDEATE
It’s time to sketch low-fi prototypes for this application! Here is our first draft :
Of course, we are excited to jump directly into mid-fi, but we have to trust the process! Design is great (clearly, it’s my favorite part) but a good design is nothing if the UX is bad.
So, to avoid unpleasant surprises, we’ve made it test by 5 users (that’s the rule 😉) and we listen to their relevant feedbacks in order to change some touchy points on our mid-fi:
Our first iteration was on the allergies page :
We added an “other” field for allergies and moved the “anything else” section at the end of the profile settings, as users were confused to see this field in the 3rd screen and not at the end of the profile setting.
Our second iteration was on the calendar :
It wasn’t very clear for users,so we put a bigger button with left and right arrows for choosing different months, on the middle and add more spaces between elements.
Our third iteration was on the recipe :
Considering the accessibility, we add a video tutorial to explain each steps. Indeed, some users mights be confused for the meal preparation, so it’s easier to see directly how to do it.
To set-up our prototype, we begin by conducting a Visual Competitive Analysis, to understand the competitors, and have an overview of the syle used for the market.
Visual Competitive Analysis :
A visual competitive analysis helps compare the qualities of your product against the specific features of the competitor’s products. This is a form of comparative analysis and is used for several purposes, including identifying potential customers and finding ways to improve your product.
Then, to bring our ideas together in order to establish a visual charter, we create a moodboard.
I’m sure you already know that but, just a quick reminder about it:
A moodboard is a brainstorming tool that can help you find inspiration and define your visual identity.
It help us to define our style and colors we will use to create the app.
Brand attributes
What is this new thing again?
Brand Attributes are the core values that define the overall nature of the company and represent the essence of the brand. It allows to portray the brand characteristics of the company and helps in formulating the brand identity.
- Healthy
- Personalized
- Supportive
- Unstressful
- Motivating
The Style Guide
As we just saw , we wanted our app to be healthy, unstressful and motivating. We used soft and warm colors in the background, to increase the confidence. Obviously, we used green colors for healthy and trusty choices.
Our style guide is organized by severals categories:
* Color range with all of our colors used for one purpose: Brand, accent, neutral and gradient.
* Illustrations for each meal categories.
* Iconography
* Typography
* Components and Buttons
In order to save time, we use the atomic design methodology.
What is it?
Atomic Design
It’s a methodology used to organized elements by size and categories (as its name suggests). An atome is a single element (like icons, button…), then we combine severals atomes together to create a molecule. An organism is a groupe of molecule gathered together, to finally create templates and pages. This method allow to design system of components and library.
It might take some time at the beggining but trust me, it’s better to take more time to create all of your components first, because it saves a lot of time later on!
Here’s an example of our atomic design used for the “Dairy-free Muesli” page on the native iOS. As you can see, each stage is represented.
4 — Prototype
Last but not least, we can finally present you our final product, Yummami!
After 2 intensives weeks, I’m hope you’re as excited to discover it as I was to did it!
CONCLUSION
Waoww! You did it! You achieve this long article level, congrats to you 😉
I am very proud because we grew up on every project, we are more and more autonomus, and we were able to work a lot with Sombath Her!
I strongly believe in the fact that we can laught a lot and be productive, I’m pretty sure it is the key for the future!
Having fun doesn’t mean not working at all!
We did a really great team together, and it was really two weeks of funny works! I wish to you to find partner like him, because even if there was a lot to do with a short timing, the job wasn’t hard to do when you can laugh everyday! Thank you my amazing cancer partner ✨🦀
