FreeMe

Design of the application FreeMe, that helps caregivers manage their leisure time through relaxing activities, physical activities, and video courses.

Mockup of the app homepage

FreeMe

Design of the application FreeMe, that helps caregivers manage their leisure time through relaxing activities, physical activities, and video courses.

Mockup of the app homepage

FreeMe

Design of the application FreeMe, that helps caregivers manage their leisure time through relaxing activities, physical activities, and video courses.

Mockup of the app homepage

FreeMe

Design of the application FreeMe, that helps caregivers manage their leisure time through relaxing activities, physical activities, and video courses.

Mockup of the app homepage

Brief

Italian society (like many Westerners) is aging. Therefore, the brief is creating an application that targets either people over 65 or informal caregivers.

Solution

Our app, FreeMe, has the ambitious goal of helping caregivers manage their leisure time.

FreeMe offers a range of activities to do in one’s leisure time, mainly divided in: video courses, relaxation, and physical activity.

Brief

Italian society (like many Westerners) is aging. Therefore, the brief is creating an application that targets either people over 65 or informal caregivers.

Solution

Our app, FreeMe, has the ambitious goal of helping caregivers manage their leisure time.

FreeMe offers a range of activities to do in one’s leisure time, mainly divided in: video courses, relaxation, and physical activity.

Brief

Italian society (like many Westerners) is aging. Therefore, the brief is creating an application that targets either people over 65 or informal caregivers.

Solution

Our app, FreeMe, has the ambitious goal of helping caregivers manage their leisure time.

FreeMe offers a range of activities to do in one’s leisure time, mainly divided in: video courses, relaxation, and physical activity.

An AI disclaimer, before anything else

Personally, I believe that AI tools are very powerful and useful to integrate into UX/UI design processes.

But this on the unquestionable condition that they do not replace us: my friend Andrea and I tried to use them in such a way that they integrated the work we did at first.

If there is one thing that I have learned from the AI courses I have followed in Italy and studying abroad in Belgium, it is that they can have great accuracy problems.

#

1

|

Needfinding

Caregivers don't have enough free time and there is no app that offers a solution

An analysis of the scientific literature showed that there are no apps dedicated to caregivers' leisure time (and the ones we found weren't available in Italy, our research context), despite its importance for their psychological health.

Semi-structured interviews and grounded theory showed us the importance of free time for caregivers' health.

AI tools

Articles’ summary, inspiration for the functions of an app that deals with leisure time, competitors research

Transcription of interviews audio

#

1

|

Needfinding

Caregivers don't have enough free time and there is no app that offers a solution

An analysis of the scientific literature showed that there are no apps dedicated to caregivers' leisure time (and the ones we found weren't available in Italy, our research context), despite its importance for their psychological health.

Semi-structured interviews and grounded theory showed us the importance of free time for caregivers' health.

AI tools

Articles’ summary, inspiration for the functions of an app that deals with leisure time, competitors research

Transcription of interviews audio

#

1

|

Needfinding

Caregivers don't have enough free time and there is no app that offers a solution

An analysis of the scientific literature showed that there are no apps dedicated to caregivers' leisure time (and the ones we found weren't available in Italy, our research context), despite its importance for their psychological health.

Semi-structured interviews and grounded theory showed us the importance of free time for caregivers' health.

AI tools

Articles’ summary, inspiration for the functions of an app that deals with leisure time, competitors research

Transcription of interviews audio

#

2

|

Designing alternatives

We tried to fill the gap with a user-centered approach

To better understand the end users of the application and empathize with them, user personas were created, based on previous research.

The app's features were designed based on research, competitor analysis, and individual brainstorming. The information architecture was created after a hybrid card sorting session conducted with some users, summarized in the heat map shaped table below.

#

2

|

Designing alternatives

We tried to fill the gap with a user-centered approach

To better understand the end users of the application and empathize with them, user personas were created, based on previous research.

The app's features were designed based on research, competitor analysis, and individual brainstorming. The information architecture was created after a hybrid card sorting session conducted with some users, summarized in the heat map shaped table below.

#

2

|

Designing alternatives

We tried to fill the gap with a user-centered approach

To better understand the end users of the application and empathize with them, user personas were created, based on previous research.

The app's features were designed based on research, competitor analysis, and individual brainstorming. The information architecture was created after a hybrid card sorting session conducted with some users, summarized in the heat map shaped table below.

Box with personas' features
Heat map containing the results of card sorting session
Box with personas' features
Heat map containing the results of card sorting session
Box with personas' features
Heat map containing the results of card sorting session
Box with personas' features
Heat map containing the results of card sorting session

#

3

|

Designing alternatives

The app is designed to simplify free time management (and users will tell us that they appreciate it)

One of the most important functions of the application (Be inspired) is shown at the beginning of the Home. To make the choice easier, it asks users what they want and how much time they have available.

A caregiver confirmed the utility of this feature during a think-aloud session in the next design cycle:

#

3

|

Designing alternatives

The app is designed to simplify free time management (and users will tell us that they appreciate it)

One of the most important functions of the application (Be inspired) is shown at the beginning of the Home. To make the choice easier, it asks users what they want and how much time they have available.

A caregiver confirmed the utility of this feature during a think-aloud session in the next design cycle:

#

3

|

Designing alternatives

The app is designed to simplify free time management (and users will tell us that they appreciate it)

One of the most important functions of the application (Be inspired) is shown at the beginning of the Home. To make the choice easier, it asks users what they want and how much time they have available.

A caregiver confirmed the utility of this feature during a think-aloud session in the next design cycle:

Since everyday I have to make decisions and do things for me and others, I like having someone that gives me an idea and that doesn’t make me think about what to do [this is a translation, the participant was italian].

"Be inspired" function in the homepage
Results of the "Be inspired" function
"Be inspired" function in the homepage
Results of the "Be inspired" function
"Be inspired" function in the homepage
Results of the "Be inspired" function
"Be inspired" function in the homepage
Results of the "Be inspired" function

#

4

|

Designing alternatives

A strong app needs a strong brand

Before diving into the prototyping phase, a brand identity was created to keep the designing phase consistent.

#

4

|

Designing alternatives

A strong app needs a strong brand

Before diving into the prototyping phase, a brand identity was created to keep the designing phase consistent.

#

4

|

Designing alternatives

A strong app needs a strong brand

Before diving into the prototyping phase, a brand identity was created to keep the designing phase consistent.

Target

Informal caregivers who struggle managing their leisure time

Target

Informal caregivers who struggle managing their leisure time

Target

Informal caregivers who struggle managing their leisure time

Mission

Give caregivers the tools to have and live quality free time

Mission

Give caregivers the tools to have and live quality free time

Mission

Give caregivers the tools to have and live quality free time

Vision

A world in which anyone can enjoy their psychophysical well-being

Vision

A world in which anyone can enjoy their psychophysical well-being

Vision

A world in which anyone can enjoy their psychophysical well-being

Values

Reassurance, Protection, Empathy

Values

Reassurance, Protection, Empathy

Values

Reassurance, Protection, Empathy

Emotions

Calm, Relaxation, Peace of mind, Happiness

Emotions

Calm, Relaxation, Peace of mind, Happiness

Emotions

Calm, Relaxation, Peace of mind, Happiness

Tone of Voice

Casual, Serious, Respectful, Matter-of-fact

Tone of Voice

Casual, Serious, Respectful, Matter-of-fact

Tone of Voice

Casual, Serious, Respectful, Matter-of-fact

Visual

Rounded shapes and rounded corners, desaturated and relaxing colours

Visual

Rounded shapes and rounded corners, desaturated and relaxing colours

Visual

Rounded shapes and rounded corners, desaturated and relaxing colours

FreeMe: the use of Sound-symbolism

The name, which recalls the concept of free time, was created following the theory of sound-symbolism (Klink, 2000) and brand’s identity. The name contains the phone [i], which according to this theory should make the name seem milder, friendlier and lighter, in line with the brand identity of the application.

#

5

|

Designing alternatives

Users are expected to be more engaged with the help of rewards and projects

Some gamification elements were also included in the app's design, such as level rewards, badge rewards and progress bars.

Moreover, Yu-kai Choud’s Octalysis Framework was used to add two elements: enhancement of creativity and feedback, through personal course projects, and development and self-realization, through badges.

#

5

|

Designing alternatives

Users are expected to be more engaged with the help of rewards and projects

Some gamification elements were also included in the app's design, such as level rewards, badge rewards and progress bars.

Moreover, Yu-kai Choud’s Octalysis Framework was used to add two elements: enhancement of creativity and feedback, through personal course projects, and development and self-realization, through badges.

#

5

|

Designing alternatives

Users are expected to be more engaged with the help of rewards and projects

Some gamification elements were also included in the app's design, such as level rewards, badge rewards and progress bars.

Moreover, Yu-kai Choud’s Octalysis Framework was used to add two elements: enhancement of creativity and feedback, through personal course projects, and development and self-realization, through badges.

Progress page with level rewards and progress bars
Progress page with badges and courses projects
Progress page with level rewards and progress bars
Progress page with badges and courses projects
Progress page with level rewards and progress bars
Progress page with badges and courses projects
Progress page with level rewards and progress bars
Progress page with badges and courses projects

#

6

|

Prototyping

Let's start to sketch!

The prototyping phase was conducted starting from the sketches on paper and then was translated into high-fidelity wireframes. Pinterest and Mobbin were used for inspiration.

To evaluate the wireframes, a cognitive walkthrough was conducted for each user journey, allowing us to identify some elements to improve before introducing graphic elements.

#

6

|

Prototyping

Let's start to sketch!

The prototyping phase was conducted starting from the sketches on paper and then was translated into high-fidelity wireframes. Pinterest and Mobbin were used for inspiration.

To evaluate the wireframes, a cognitive walkthrough was conducted for each user journey, allowing us to identify some elements to improve before introducing graphic elements.

#

6

|

Prototyping

Let's start to sketch!

The prototyping phase was conducted starting from the sketches on paper and then was translated into high-fidelity wireframes. Pinterest and Mobbin were used for inspiration.

To evaluate the wireframes, a cognitive walkthrough was conducted for each user journey, allowing us to identify some elements to improve before introducing graphic elements.

Wireframe of the Homepage
Wireframe of the profile page
Wireframe of the Homepage
Wireframe of the profile page
Wireframe of the Homepage
Wireframe of the profile page
Wireframe of the Homepage
Wireframe of the profile page

#

7

|

Prototyping

A design system boosted our productivity

Mockups were created from wireframes. This phase was preceded by the creation of a design system, whose visual elements were supposed to arouse in the user the emotions of calm and relaxation.

AI tools

Color palette inspiration, color accessibility testing

Font pairing inspiration

#

7

|

Prototyping

A design system boosted our productivity

Mockups were created from wireframes. This phase was preceded by the creation of a design system, whose visual elements were supposed to arouse in the user the emotions of calm and relaxation.

AI tools

Color palette inspiration, color accessibility testing

Font pairing inspiration

#

7

|

Prototyping

A design system boosted our productivity

Mockups were created from wireframes. This phase was preceded by the creation of a design system, whose visual elements were supposed to arouse in the user the emotions of calm and relaxation.

AI tools

Color palette inspiration, color accessibility testing

Font pairing inspiration

Design system (Typography)
Design system (Typography)
Design system (Typography)
Design system (Colors)
Design system (Colors)
Design system (Colors)

#

8

|

Prototyping

Creating the prototype

In this phase, mockups were connected to each other to create the prototype. The main pages were created, as well as the instances of the activities and courses components.

AI tools

Mockup inspiration

Copywriting: text ideation for activities and courses pages

#

8

|

Prototyping

Creating the prototype

In this phase, mockups were connected to each other to create the prototype. The main pages were created, as well as the instances of the activities and courses components.

AI tools

Mockup inspiration

Copywriting: text ideation for activities and courses pages

#

8

|

Prototyping

Creating the prototype

In this phase, mockups were connected to each other to create the prototype. The main pages were created, as well as the instances of the activities and courses components.

AI tools

Mockup inspiration

Copywriting: text ideation for activities and courses pages

#

9

|

Evaluation

Users find the application pretty intuitive (66% Task Success Rate)

The evaluation of the prototype was conducted through a think-aloud session with target users, who had to carry out 11 tasks.

The task success rate is 66%. 25% of the tasks were completed with partial success and 9% were failures.

User struggled with an icon without a verbal label and the presence of two similar pages.

#

9

|

Evaluation

Users find the application pretty intuitive (66% Task Success Rate)

The evaluation of the prototype was conducted through a think-aloud session with target users, who had to carry out 11 tasks.

The task success rate is 66%. 25% of the tasks were completed with partial success and 9% were failures.

User struggled with an icon without a verbal label and the presence of two similar pages.

#

9

|

Evaluation

Users find the application pretty intuitive (66% Task Success Rate)

The evaluation of the prototype was conducted through a think-aloud session with target users, who had to carry out 11 tasks.

The task success rate is 66%. 25% of the tasks were completed with partial success and 9% were failures.

User struggled with an icon without a verbal label and the presence of two similar pages.

Task success rate table
Task success rate table
Task success rate table
Task success rate table

#

10

|

Prototyping

The prototype was modified based on user tests

The two pages were merged into a new page, called "In corso" (In progress) and verbal labels were added to those icons.

Finally, in the “Saved” and “In progress” pages the toggle was repositioned with the two tabs "Activities" and "Videocourses" in a more visible position, as some users hadn’t seen it.

#

10

|

Prototyping

The prototype was modified based on user tests

The two pages were merged into a new page, called "In corso" (In progress) and verbal labels were added to those icons.

Finally, in the “Saved” and “In progress” pages the toggle was repositioned with the two tabs "Activities" and "Videocourses" in a more visible position, as some users hadn’t seen it.

#

10

|

Prototyping

The prototype was modified based on user tests

The two pages were merged into a new page, called "In corso" (In progress) and verbal labels were added to those icons.

Finally, in the “Saved” and “In progress” pages the toggle was repositioned with the two tabs "Activities" and "Videocourses" in a more visible position, as some users hadn’t seen it.

Old pages merged into the new "In progress" page
Verbal labels in an activity page; new toggle in the "Saved" page
Old pages merged into the new "In progress" page
Verbal labels in an activity page; new toggle in the "Saved" page
Old pages merged into the new "In progress" page
Verbal labels in an activity page; new toggle in the "Saved" page
Old pages merged into the new "In progress" page
Verbal labels in an activity page; new toggle in the "Saved" page

#

11

|

Evaluation

FreeMe respects usability principles

To conclude the third design cycle, a heuristic evaluation was conducted, using Nielsen Norman group’s Heuristic Evaluation Workbook.

The application appears well designed: it has good visibility of the system status, it prevents errors from users and it speaks the user's language, promoting recognition rather than recall.

#

11

|

Evaluation

FreeMe respects usability principles

To conclude the third design cycle, a heuristic evaluation was conducted, using Nielsen Norman group’s Heuristic Evaluation Workbook.

The application appears well designed: it has good visibility of the system status, it prevents errors from users and it speaks the user's language, promoting recognition rather than recall.

#

11

|

Evaluation

FreeMe respects usability principles

To conclude the third design cycle, a heuristic evaluation was conducted, using Nielsen Norman group’s Heuristic Evaluation Workbook.

The application appears well designed: it has good visibility of the system status, it prevents errors from users and it speaks the user's language, promoting recognition rather than recall.

Mistake prevention in the timer page
Mistake prevention in the timer page
Mistake prevention in the timer page
Mistake prevention in the timer page

Try the prototype

Enough talking, now it's up to your exploration!

Try the prototype

Try the prototype

Mockup of the app homepage

Try the prototype

Enough talking, now it's up to your exploration!

Try the prototype

Try the prototype

Mockup of the app homepage

Try the prototype

Enough talking, now it's up to your exploration!

Try the prototype

Try the prototype

Mockup of the app homepage

Try the prototype

Enough talking, now it's up to your exploration!

Try the prototype

Try the prototype

Mockup of the app homepage

Did you enjoy this project?

Share this page with someone

Did you enjoy this project?

Share this page with someone

Did you enjoy this project?

Share this page with someone

Did you enjoy this project?

Share this page with someone

Got anything in mind?

Got anything in mind?

Got anything in mind?

Framer template designed by

, customized by me

Framer template designed by Goran Babarogic, customized by me

Framer template designed by Goran Babarogic, customized by me