top of page
UX/UI Design Process
Research
-
Target Audience
​
-
Statistics
​
-
Market Analysis​​
Development
-
User survey
​
-
Personas
​​
-
Branding​
Prototype
-
Paper, Lo-fi and Hi-fi wireframes
​
-
Sitemap
​
-
Figma layout
Finalise
-
Add icons and visuals
​
-
Animate Figma prototype​​
About JourniMate
The main feature of the app was to implement an AI companion that would provide users with suggestions depending on their past conversations and future goals which they wanted to achieve.
These companion features make the app stand out and give it a unique selling point. It can easily be customised, is available 24/7 and can quickly determine what the user needs through mood tracking.
I wanted to design this mobile app as I was interested in creating a user experience that was fun, interactive and will be easy for individuals to navigate on the go when going about their daily life.
App Problem and Solution
Problem
-
Gen Z Individuals can feel overwhelmed from the pressures of daily life when multitasking their social and university studies.
​
-
When this is experienced, it can be difficult for them to express their emotions.
​
-
They may also be unable to share how they are feeling with others.
​
-
Individuals are concerned with their wellbeing and having good health and manage this through downloading relevant health apps.
​
-
These apps can be hard to use and get familiar with.
Solution
-
Developing a wellbeing app that allows users to share how they are feeling with 'Journi', an AI companion.
​
-
Journi will be able to track the user's phrases, tone and voice when talking to them.
​
-
Adding friends automatically from other social platforms who use JourniMate.
​
-
Being able to review past moods through mood analysis.
​
-
Will be easy to navigate and create an interactive experience for Gen Z individuals.
​
User Survey Questions
I designed and developed a user survey with nine questions based on my wellbeing research to gain more user information such as:
-
How often do you exercise?
-
How many portions of fruit and vegetables do you eat?
-
How many hours do you sleep each night?
-
How do you rate your day to day stress?
-
How anxious have you felt over the last 4 weeks?
-
What strategies do you use to stay motivated and positive?
-
What apps, websites or sources do you use for personal wellbeing?
-
Which apps, websites or sources do you use to help your organisation?
-
What features would you want to be included in a new app for assisting your daily routine?
User Survey Insights
After reviewing the responses I received from my user survey, I identified the following insights below:
The user survey revealed key insights and allowed me to consider what features should be the main focus of my app. I began to compare all the feedback and develop some features that would benefit my target demographic.
Some future insights I may consider developing are:
Fitness smartwatch feature that gives personalised feedback on their fitness routine.
Help tab that gives information on stress, meal planning, sleeping, fitness and other content.
Built in organisation tab and map that tracks day to day activities and hobbies
Wellbeing and mindfulness exercises tab that the user can do to relax
User Personas
I developed two user personas from my research - to highlight what goals, fears and challenges the target users may face and how they would use JourniMate.
Hierarchy Rating for Features
I created a hierarchy rating system as I wanted to rate my features before visualising them in JourniMate and this shows what my target demographic and survey users would want to use in a wellbeing app.
Carrying out further research into Gen Z and their interests in wellbeing, I placed the features in order of importance for JourniMate:
1.
Journi AI
Companion
-
Pragmatic Coders state that "with AI and machine learning, it is possible to provide customers with a
-
hyper-personalised healthcare experience."
-
68% of Gen Z say they’ve used an AI tool in the past month, with ChatGPT their preferred platform.
2.
Mood Tracking
-
Wokewaves suggest that "mood tracking apps are designed to offer insights into what might be triggering stress, anxiety and suggest personalized coping strategies. "
-
Journaling has also experienced a resurgence among Gen Z, thanks to its effectiveness in promoting self discovery and emotional regulation.
3.
Friend Activity Feed
-
Research by Pion revealed that pursuing creative hobbies and spending time with loved ones are among the most popular forms of self-care for this generation.
4.
Friend List
-
Online communities and support groups have become invaluable spaces for Gen Z to share experiences and find mutual support.
-
​Platforms like Reddit and Discord offer a sense of anonymity and belonging, essential for those who might feel isolated in their struggles.
5.
Activities
-
GWI add that "38% of Generation Z are still looking to explore more this year – at home and abroad."
Branding
After finishing my design thinking, I began designing the branding for JourniMate and produced multiple designs for JourniMate's logo using Adobe Illustrator.
The name Journimate was chosen for the app because the AI feature Journi is a friend who travels with the user and helps them through their wellness journey by offering them suggestions responding to their mood, tone, feelings and inputted data.
Colour Palette and Typography
Header - Montserrat
Aa
#DF573A
#EE8254
#FFF8EC
#339999
#16555E
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll
Mm Nn Oo Pp Qq Rr Ss Tt Uu Ww Vv Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 @ ! ? &
Body - Lato
Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Ww Vv Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 @ ! ? &
The colour palette for Journimate represents happiness, inspiration and feeling energised. These keywords portray how the user will feel after using the app.
​
When choosing a header and body typography for JourniMate, I focused on fonts that have great readability, easily seen by the user and can be effectively matched up together.
I decided on Montserrat for my header as it has great flexibility through the different weights and looks eye catching as a display title. Lato was chosen as the body type as it uses rounded edges and has a friendly tone suited for a wellbeing app.
Logo Development
I redesigned the split logo design for JourniMate as I did not feel the location marker communicated ‘wellbeing’ to my target demographic fully.
I decided to replace this with a heart to represent starting a new journey for better wellbeing.
Sitemap - User Flow
JourniMate's site map will include features such as a:
​
-
User profile
-
User dashboard
-
Journi companion
-
Mood analysis
-
Friend list
-
Settings page
Shows user's completed activities, interests, favourite activities and locations
User Profile
Splash Screen
Log In and Sign Up
User Dashboard
Current Mood
Current Mood
Friend Activity Feed
User fills in the questionnaire when signing up to the app, allowing Journi companion to know more about them
Journi Companion
Mood Analysis
Friend List
Settings
User messages Journi about how they are feeling
Journi responds and tracks the user's mood through phrases
User responds that they need an activity for an hour due to feeling stressed
Journi recommends an activity through details from the user's profile and their past conversations
Picks a past date on the calendar system
Shows how the user was feeling during the day from morning, afternoon and evening
Conversations with Journi that change the mood analysis are highlighted with an
orange dot
Clicking a friend to see the current activity they are
up to
Clicks the user's activity
Shows clear details for the activity through time and location
Provides:
- Account details
- Preferences
- Security and
privacy
- About
- Log Out
User logs out
User bookmarks the activity to be reminded by Journi later on
The user is happy with the chosen activity and adds it to the activity feed for other friends to see
After showing how JourniMate will be navigated by users, I started developing Lo-Fi and Hi-Fi wireframes using Adobe Illustrator.
​
My Hi-Fi wireframes show two different personas using Journimate these users were:
-
John Doe who has just signed up to the app and is trying it out for the first time by talking to Journi.
​
-
Emily Taylor who has used the app for a month and wants to set up a meeting with a friend using Journi.
JourniMate Lo-Fi Wireframes
Splash screen
Log In and sign Up
Log in
Sign up
JourniMate questionnaire 1
JourniMate questionnaire 2
User dashboard
Journi companion
Friend list
User profile
Mood analysis
Mood analysis (inspect a date)
JourniMate Hi-Fi Wireframes (John signs up)
Splash screen
Sign Up
Log in
questionnaire 1
JourniMate questionnaire 2
John's dashboard
Friend list
Journi companion chat 1
Journi companion chat 2
Mood analysis
Mood analysis (inspect a date)
John's profile
Settings
JourniMate Hi-Fi Wireframes (Emily logs in)
Splash screen
Log In
Emily's dashboard
Emily's profile
Journi companion
Mood analysis
Mood analysis previous month
Mood analysis (inspect a date)
Checking push notifications
JourniMate App Icons
JourniMate Storyboards
JourniMate Prototype
Conclusion
In conclusion, JourniMate aims to provide a personalised wellbeing experience using AI. Journi companion will be able to analyse questionnaire answers and conversations to find out how the user is feeling.
Journi can also provide suggestions, set up activities, reminders and more to help the user feel better and be more active daily. The app will also allow users to visualise how they were feeling through past moods using the mood analysis feature.
The app prototype appeals to a Gen Z demographic through customised experiences, appealing interactive elements, automated processes and minimal app navigation.
On reflection and in the future, I would develop features such as being able to visualise and review past conversations in the mood analysis infographics and set up activities for specific friends through interests. The app would also be enhanced by further developing the Journi companion feature by allowing the user to link their social media platforms such as Instagram or Facebook which will create a better personalised experience.
My Miro Research Board
bottom of page