We as human beings are always looking for a balance in our body and mind.
​
The question is how?
One of the answers can be found in our temperaments.
​
Parma is here to help you figure out your temperament type!
Overview
Parma is a mobile application designed to determine user`s temperament type and predominant humour by taking a test.
​
It gives the user some information about the concept of humorism and how it will affect on their body and mind and also what they should do to make a balance of humours in their body.
Role & Duration
Product designer
Product strategy, User research, Interaction, Visual design & Prototyping
Team of 1 designer & 2 software engineers
July 2019-
Challenge
This was a simple idea which emerged from a specific need. In my work as a dietitian I have been consulting with a large number of people. Gradually I realized what they are looking for and what their needs are in different areas. One of the questions they were always asking me was; "what is my temperament and how it affects my diet?"
This was where I realized maybe a mobile application can help people to understand what is their temperament and how it will affect their physical and mental health.
Process
I followed HCD process by first conducting user research. After synthesizing inspiring insights from interviews, the problem was defined and I jumped right into the ideation phase. From sketches all the way into high-fidelity prototypes.
User Research
I conducted research interview with my clients to understand
-
if they know what their temperament is.
-
if they have already done a test to realize what their temperament is.
-
if they know how their temperament affects their physical and mental health.
so I asked my clients to complete various temperament tests I found on the Internet. After they completed the tests, I interviewed my clients to understand their behaviours and attitudes. With these results I put together an empathy map and extracted some pains and gains.
My friend say she has done an online test to determine her temperament
Like to make a balance in their humours
My dietitian says you should eat food according to your temperament
Curious about the concept of temperaments and humours
Some of them think they don`t need to know their temperament
They feel like they need to know their temperament to be healthier physically and mentally
Think & Feel?
They think tests are time-consuming and hard to answer
Symptoms that is result of imbalance of humours in body
People who are on a diet based on their temperament
Online tests to determine temperaments
Dietitians who manage a diet according to people's temperament
TV programs talking about balancing humours
Herbal medicine based on temperament
My doctor says if I know my temperament,I can take herbal medications
Online temperament tests do not tell me how to balance my humours
What is temperament that my friend is always talking about?
Online temperament tests do not tell me the temperaments of foods
How can I balance humours in my body
Some information about temperaments are really hard to understand
See?
Hear?
Say & Do?
Pains
-
They do not know there is a test to determine their temperament..
-
Hate to read hard-to-understand information about temperaments.
-
hard to find clear data about temperament of foods and how to balance their humours based on that.
-
Tests are time-consuming
Gains
-
They do not know there is a test to determine their temperament..
-
Hate to read hard-to-understand information about temperaments.
-
hard to find clear data about temperament of foods and how to balance their humours based on that.
-
Tests are time-consuming
Ideation
After collecting the recordings from the user interviews I started to write down my thoughts and ideas of how to create an app to fulfil users' needs.
Problem vision & Solution
From my Ideation and User Research phase, I extracted three value propositions for my app :
-
The user will understand what is temperament and how it affects on their physical and mental health.
-
The user will take a test to realize what is their temperament.
-
The user will understand what to eat or prevent to eat based on their temperament.
Sketching
From here I could decide what actions and features were crucial and beneficial, and sketched an early mockup .
I mocked up the main screens and did a user research. After collecting users' ideas I did some iterations and user research again and finally it came up with the following.
User Flow
At this point, a flow chart was needed to map out the steps that user may take within the application. The main pages of the application and the path through the pages were defined.
.png)
Mid-fidelity wireframing
After usability testing and creating a user flow I mocked up the main screens and came up with the following:
​​
-
Sign up screen
-
Log in screen
-
Home screen
-
Test screen
-
Questions screen
-
Result screen
-
Description screen
Laying the foundation
My design was based on atomic blueprint. The key behind this method being small, independent - atomic - parts, can be combined into larger molecular structures.
This foundation defined my typography, colours, icons, and information architecture.
​
​
​
​
​
​
​
And this was where I needed to think about user interface design. I created a sketch master file to design my icons which was referred to throughout the design process then decided about my colour pallet, fonts and whatever related to UI.
I opted for a refreshing gradient look and the simplicity of the UI.
Colours
I decided to create a colour pallet that supports the brand`s values. Each temperament has its own colour so there were 4 main colours. For simplicity I followed 60-30-10 rule in creating colour pallet.
Cornflower Blue
#1B86FA
Link Water
#D1DFEF
Flush orange
#FF7400
Seashell Peach
#FFF6EF
Cinnabar
#EC3A3F
Soapstone
#FFF9F5
Scorpion
#565656
Pot Pourri
#EEDCD0
Dusty Gray
#979797
Alto
#DCDBDB
Mountain Meadow
#20C798
Typeface
I almost exclusively used Averta and Open Sans as the base typeface across the entire Parma product.
Heading 1
60px
Bold
Playball
Heading 2
30px
Bold
Averta
Heading 3
23px
Bold
Averta
Heading 4
20px
Bold
Averta
Body text 1
17px
Regular
Open Sans
Body text 2
17px
Bold
Open Sans
Body text 3
16px
Bold
Open Sans
Body text 4
11px
Bold
Open Sans
Icons
Prototyping
-
Get started screen
​
This screen was simply created to showcase our logo and encourage users to click on the button to get started.
​
-
Register account
​
Users would fill in a simple sign up form to create a new account.
​
-
Home screen
​
User can have a total idea about humorism by looking at the chart in home screen.
​
-
Test screen
​
User can go straight to the test page and start the test.
​
-
Questions screen
​
There are 24 statements that user rates on five point scale of how much they agree with each.
​
-
Result screen
​
User gets their result that is shown on a chart and they can tap on the chart to get more information.
​
-
Temperament screen
​
User can read some information about their temperament, humour, personality and lifestyle.
Usability testing
A group of users were gathered to test the prototype in the final stage of design to get feedback on the functionality, content and interactivity of the design.
Next steps
What I`ve planned for the next version of the app based on users` feedback is the following:
-
Provide a list of food products based on user`s temperament result.
-
Suggest the user a diet based on their temperament to enhance user engagement.
-
User will be able to take the test more than 10 times (Now the app will keep the record of test result for 10 times).
-
User will see some introduction screens before sign up page for boosting user experience in understanding what the app is about and how to do the test.
Development
I used Abstract to allow the engineers to inspect the CSS of the design. The developer team used React Native framework to develop the mobile app to support both iOS and Android. It will be accessible via the Apple, Google and Amazon app store in November 2021.
Project learnings
1. Simplicity is strength
We are often tempted by attractive and trendy designs. But, We must always remember the reason of creating a product. The primary goal is to understand the user, their problems and then come up with a design that solves it.
​
2. Prioritise
Create a strategic plan to launch an MVP. At brainstorming stage of my design I had totally different idea for this mobile app with a greater amount of context and features but after a while I realised it could potentially derail the project, so I started with this version and continue to have a better quality of product in time.
​
3. Seek out feedback early and continually
The strategy that helped me with the design most was user testing in different stages of designing. Testing the solution from paper form to mid-fi or hi-fi helped me to create a design that is user-centered and saves great amount of time and re-work.