Meet Affie: Personalized affirmations powered by AI

Meet Affie: Personalized affirmations powered by AI

Meet Affie: Personalized affirmations powered by AI

What would life look like with reassurance tailored just for you?

What would life look like with reassurance tailored just for you?

What would life look like with reassurance tailored just for you?

Client

Client

Client

Mindful users seeking affirmations

Mindful users seeking affirmations

Mindful users seeking affirmations

Scope

Scope

Scope

Research, UX, UI, User Testing, Prototyping

Research, UX, UI, User Testing, Prototyping

Research, UX, UI, User Testing, Prototyping

Duration

Duration

Duration

80 hours

80 hours

80 hours

Overview

Overview

Overview

The Problem

The Problem

Existing affirmation apps, despite their popularity, often fall short of meeting the needs of mindfulness-aware individuals. They provide generic affirmations, lacking the personal touch that is essential for users seeking reassurance.

The Solution

The Solution

Affie is a unique affirmations app that stands out by personalizing users’ daily affirmations with AI. This AI integration involves a short questionnaire, which allows users to enjoy a tailored affirmation each time they need one. This ensures that the affirmations are relevant, effectively assisting users achieve their mindfulness goals.

Research

Research

Research

Qualitative Research

Qualitative Research

This project began with qualitative research, including analyzing and collecting data from similar apps and user interviews.

Three goals were set to help empathize with the users:

This project began with qualitative research, including analyzing and collecting data from similar apps and user interviews.

Three goals were set to help empathize with the users:

Research Goals

Research Goals

  • Understand user expectations and needs for daily affirmations (How, when, where).


    • How do users go about getting their affirmations?

    • When do users need them?

    • Where are users when they need affirmations?


  • Gather visual data from similar apps.

  • Understand pain points from similar apps.

  • Understand user expectations and needs for daily affirmations (How, when, where).


    • How do users go about getting their affirmations?

    • When do users need them?

    • Where are users when they need affirmations?


  • Gather visual data from similar apps.

  • Understand pain points from similar apps.

Competitive Research

Competitive Research

Competitive research was performed on existing apps to investigate the current patterns for an app of this kind.  Four different apps were studied to ensure an understanding of their current onboarding and sign-up processes, along with exploring the elements on their homepage and other tabs.

User Interviews

User Interviews

The research process also involved empathizing with users through one-on-one remote interviews. These helped to understand their points of view and gather data from seasoned users on similar apps, ensuring the reliability of our app.


Five participants were interviewed. Some of the most important questions asked were:


  • Do you have any specific emotions or feelings as you seek affirmations?

  • Where are you when you need affirmations?

  • How long do you dedicate to your practices?

  • What do you expect to gain when you're looking for an affirmation?

What users said

What do you expect to gain when you're looking for an affirmation?

What do you expect to gain when you're looking for an affirmation?

What do you expect to gain when you're looking for an affirmation?

Interview Insights

Interview Insights

  • Users sometimes seek affirmations because they intend to improve their negative thoughts and feelings by practicing mindfulness. Sometimes, they seek affirmations to enhance their day.


  • Some users have a specific spot at home where they practice mindfulness but also have quick practices they can do from just about anywhere. For example, at a stop light.

  • Users tend to practice anywhere from 5-30 mins on most days.

  • Users expect to feel calmer, more centered, motivated, and relaxed after repeating affirmations to themselves.


  • All users agreed that incorporating mindfulness has significantly improved their lives. Their answers include more confidence, presence, less anxiety, and trust in themselves, painting a picture of the transformative power of mindfulness.


  • Some users expressed that their affirmations didn't feel personal enough. Some apps let them write their very own affirmations, but sometimes users don't have the inspiration to write them themselves.

  • Users sometimes seek affirmations because they intend to improve their negative thoughts and feelings by practicing mindfulness. Sometimes, they seek affirmations to enhance their day.


  • Some users have a specific spot at home where they practice mindfulness but also have quick practices they can do from just about anywhere. For example, at a stop light.

  • Users tend to practice anywhere from 5-30 mins on most days.

  • Users expect to feel calmer, more centered, motivated, and relaxed after repeating affirmations to themselves.


  • All users agreed that incorporating mindfulness has significantly improved their lives. Their answers include more confidence, presence, less anxiety, and trust in themselves, painting a picture of the transformative power of mindfulness.


  • Some users expressed that their affirmations didn't feel personal enough. Some apps let them write their very own affirmations, but sometimes users don't have the inspiration to write them themselves.

What users said

What users said

These are a few phrases gathered from the interview process:

These are a few phrases gathered from the interview process:

“I have a specific corner in my house where I sit to do all of my mindful practices”

“I have a specific corner in my house where I sit to do all of my mindful practices”

“I have a specific corner in my house where I sit to do all of my mindful practices”


-MrComfyChair345


-MrComfyChair345


-MrComfyChair345

“I don’t have a lot of time. I keep my affirmation practices to 5-10 minutes per session”

“I don’t have a lot of time. I keep my affirmation practices to 5-10 minutes per session”

“I don’t have a lot of time. I keep my affirmation practices to 5-10 minutes per session”


-CalmAndHurried


-CalmAndHurried


-CalmAndHurried

“The affirmations feel a bit generic. And I don't feel like writing my own affirmations”

“The affirmations feel a bit generic. And I don't feel like writing my own affirmations”

“The affirmations feel a bit generic. And I don't feel like writing my own affirmations”


-GenericallyHappy


-GenericallyHappy


-GenericallyHappy

What the users had to say

From this research, I learned that users desire a product that helps them improve their negative feelings, allows them to gain confidence and motivation, and doesn't take much of their time. A product they can use from home, but also from wherever they happen to be when they need it. Users need a product that makes them feel seen and heard, but that doesn't require much effort on their part.

Defining

Defining

Defining

Feature Roadmap

Feature Roadmap

A MoSCoW map was handy for determining the priorities of the product. What did users want the most? What do they absolutely not want? What is the most meaningful way we can help? What can be achieved during the project's allotted time? These questions are essential to remember when prioritizing to ensure an MVP can be successfully launched.

HMWs

The top priority was ideating a quick way to deliver personalized affirmations to users. That’s when the concept of integrating AI into the product was born.

Artificial intelligence would prompt users with a brief questionnaire, generating a tailored affirmation specifically for them. This entire process must not exceed a couple of minutes and should allow users to re-generate a new affirmation if the initial one doesn’t meet their expectations.

The product must also feature different categories of affirmations for users seeking a more general affirmation. In addition, it should offer other functionalities, such as the ability to favorite affirmations and mood logs to monitor users' moods before and after repeating their affirmations.

The pressing priority was ideating a quick way to provide personalized affirmations to users. This is when the idea of introducing AI to the product was born.

Artificial intelligence would ask a short questionnaire to the users, and then would generate an affirmation tailored just for them. This process from beginning to end shouldn't last more than a couple of minutes and must have a way for users to generate a new affirmation, in case the one they got isn't what they were hoping for.

This product should also have different affirmations categories, in case they aren't looking for something too specific. Also, among other functions: favoriting capabilities, and mood logs to track their moods before/after repeating their affirmations.

Personas, HMWs and POVs

Personas, HMWs and POVs

After setting the priorities, it was time to add a face to the feedback and insights, as if they had become one person. Personifying this user's interests, goals, and even pain points makes it even easier to empathize with them.

Priorities

Carlos and Megan seem nice! How can we support them on their passions while helping them in their quest for affirmations?

Priorities

Creating How Might We (HMWs) and Point of View (POV) statements allowed us to see up close the lives of our personas to find ways to support their goals.

On the above chart, three different statements will help us think about meaningful ways to help this pair:


  • How can we support Carlos find affirmations easily?


  • How can we help Megan save time as she tries to find her affirmations?


  • How can we also assist her in feeling supported through her specific situations?

Creating How Might We (HMWs) and Point of View (POV) statements allowed us to see up close the lives of our personas to find ways to support their goals.

On the above chart, three different statements will help us think about meaningful ways to help this pair:


  • How can we support Carlos find affirmations easily?


  • How can we help Megan save time as she tries to find her affirmations?


  • How can we also assist her in feeling supported through her specific situations?

Sitemap

Sitemap

Creating a sitemap for this project required outlining the main sections and features in a structured way. In this step it was necessary to think about what would live on the homepage and what could get its own featured icon on the navigation bar.

In this specific case, the main feature of the app is a short questionnaire that generates a personalized affirmation, therefore it needs to have the most prominent space in the homeage.

Creating a sitemap for this project required outlining the main sections and features in a structured way. In this step it was necessary to think about what would live on the homepage and what could get its own featured icon on the navigation bar.

In this specific case, the main feature of the app is a short questionnaire that generates a personalized affirmation, therefore it needs to have the most prominent space in the homeage.

Sitemap

This app also features different categories for users who aren't looking to generate an affirmation. This section can be found next in proximity to the app's main feature, since these two functions are closely related in providing affirmations to users.

The other features got their own icon on the navigation bar, because they're different enough in function to merit a different placing. For example, in the Mood section users can track and log their mood, which can be convenient to have at a finger's tap distance from the main feature.

This app also features different categories for users who aren't looking to generate an affirmation. This section can be found next in proximity to the app's main feature, since these two functions are closely related in providing affirmations to users.

The other features got their own icon on the navigation bar, because they're different enough in function to merit a different placing. For example, in the Mood section users can track and log their mood, which can be convenient to have at a finger's tap distance from the main feature.

User Flows and Task Flows

User Flows and Task Flows

With the sitemap already done, it is time to figure out precisely how the questionnaire (main feature) is going to work. Task Flows and User Flows help ensure we understand how users would interact with this app at a more fundamental level before getting distracted by visual aspects.


Here is a quick view of the user flow for the main task of our project:

With the sitemap already done, it is time to figure out precisely how the questionnaire (main feature) is going to work. Task Flows and User Flows help ensure we understand how users would interact with this app at a more fundamental level before getting distracted by visual aspects.


Here is a quick view of the user flow for the main task of our project:

User Flows and Task Flows

This user flow demonstrates the user journey towards a personalized affirmation. Once these steps are clear and concise, we can give our app some personality.

Design

Design

Design

Low Fidelity

Low Fidelity

Nothing says humble beginnings like good old pencil sketches. These are easy to make and not grow attached to since mistakes are expected as part of the process. 


Previously made task flows and user flows are now beginning to dress themselves with gorgeous styles to create a home screen, and other tabs and steps.

Nothing says humble beginnings like good old pencil sketches. These are easy to make and not grow attached to since mistakes are expected as part of the process. 


Previously made task flows and user flows are now beginning to dress themselves with gorgeous styles to create a home screen, and other tabs and steps.

Early Sketches

Early Sketches

Finding Book Reviews Flow

The sketch above represents the home screen view, a few affirmations within a category, and a selected affirmation inside that category.

Finding Book Reviews Flow

This set of sketches represents a very early version of the questionnaire before any iterations and feedback were taken into consideration. It's always fun to go back and see how much the final product has evolved from its early stages and how much of it made it through.

Branding Elements

Branding Elements

Before exploring fonts, colors, and styles, it was imperative to establish the values that this app would stand for. Once that’s selected, everything else should be easier to select based on color psychology and theory.

Affies values are:



-Peaceful

-Accepting


-Approachable


-Understanding



These values were selected as the voice of the app because they complement the most with the personas's personalities. This approach can help future users feel more welcomed and trust this app for the purpose it was made for.

Before exploring fonts, colors, and styles, it was imperative to establish the values that this app would stand for. Once that’s selected, everything else should be easier to select based on color psychology and theory.

Affies values are:



-Peaceful

-Accepting


-Approachable


-Understanding



These values were selected as the voice of the app because they complement the most with the personas's personalities. This approach can help future users feel more welcomed and trust this app for the purpose it was made for.

Primary Colors

Primary Colors

The selected colors were:

The selected colors were:

Secondary Colors

Secondary Colors

The selected colors were:

The selected colors were:

Translating into High Fidelity

Primary colors:

The color #F8F8F5 (light grey) stands for simplicity and neutrality, fostering a peaceful and approachable atmosphere.

The color #98D8D8 (light aqua) is a tone of blue that brings calmness and clarity, enhancing serenity and acceptance.

And #163B3B (dark teal) adds depth and stability, promoting trust and understanding.

Secondary colors:

The color #FFA07A (light salmon) and subtones, offer warmth and friendliness, making the app inviting.

The color #66CC66 (light green) and subtones, signify growth and harmony, reinforcing balance and renewal.

And last, #FFD700 (gold) and subtones, bring optimism and positivity, motivating users and aligning with the app's peaceful, accepting, approachable, and understanding values.

Primary colors:

The color #F8F8F5 (light grey) stands for simplicity and neutrality, fostering a peaceful and approachable atmosphere.

The color #98D8D8 (light aqua) is a tone of blue that brings calmness and clarity, enhancing serenity and acceptance.

And #163B3B (dark teal) adds depth and stability, promoting trust and understanding.

Secondary colors:

The color #FFA07A (light salmon) and subtones, offer warmth and friendliness, making the app inviting.

The color #66CC66 (light green) and subtones, signify growth and harmony, reinforcing balance and renewal.

And last, #FFD700 (gold) and subtones, bring optimism and positivity, motivating users and aligning with the app's peaceful, accepting, approachable, and understanding values.

Chosen Typeface

Chosen Typeface

Noto Serif

Noto Serif

Noto Serif

Translating into High Fidelity

The serif font “Noto Serif” closely adheres to the branding values while also being a valuable typeface possessing elegance, readability, and neutral aesthetics. The serif design aids in readability, making it suitable for longer text passages. A font like this can be beneficial for conveying affirmations or positive messages in different screen sizes.

On the other hand, being that this is an AI-based app, a more humanist typeface felt necessary to bring up more warmth to tame any "robotic" feel the app might have.

The serif font “Noto Serif” closely adheres to the branding values while also being a valuable typeface possessing elegance, readability, and neutral aesthetics. The serif design aids in readability, making it suitable for longer text passages. A font like this can be beneficial for conveying affirmations or positive messages in different screen sizes.

On the other hand, being that this is an AI-based app, a more humanist typeface felt necessary to bring up more warmth to tame any "robotic" feel the app might have.

Logo

Logo

The logo was designed to resemble a small, bright plant. When we tell ourselves positive messages, our souls get happy, like freshly watered plants. Also, plants bring people peace and serenity, aligning its meaning with the core values.

The logo was designed to resemble a small, bright plant. When we tell ourselves positive messages, our souls get happy, like freshly watered plants. Also, plants bring people peace and serenity, aligning its meaning with the core values.

High Fidelity

High Fidelity

After receiving feedback on the low-fidelity sketches, some iterations were built into the higher-fidelity deliverables. 



One of the main design changes was switching from limiting button options to a text field where users can write their exact feelings after being prompted by the AI.

After receiving feedback on the low-fidelity sketches, some iterations were built into the higher-fidelity deliverables. 



One of the main design changes was switching from limiting button options to a text field where users can write their exact feelings after being prompted by the AI.

High Fidelity

A few extra screens!

High Fidelity

The image above shows the evolution of the main dashboard from early sketch to high-fidelity. The need of changes became more evident as designing in Figma took place. Other improvements were made with the help of peers and mentors' feedback.

The image above shows the evolution of the main dashboard from early sketch to high-fidelity. The need of changes became more evident as designing in Figma took place. Other improvements were made with the help of peers and mentors' feedback.

UI Design

UI Design

Various icons and original components were implemented to give this app a consistent and visually appealing look. The icons and components in this UI kit were created with users in mind. These are the bits that will act as a door between humans and software, allowing interaction with the AI questionnaire and other features.

Comment from the Designer

Comment from the Designer

Of all the parts of this process, the one I’ve enjoyed the most so far has been designing high-fidelity mockups. Translating a pencil sketch into higher fidelity takes more than just personal effort. It takes teamwork and willingness to give and receive feedback from peers and mentors to improve your work.

Testing

Testing

Testing

User Testing

User Testing

Five people were interviewed remotely to test the app’s different flows on a Figma Prototype: Sign Up, AI Affirmation Prompt and Questionnaire - Happy, AI Affirmation Prompt and Questionnaire - Unhappy (Regenerate), History, Categories, Mood Log, and Account.



However, we will focus on the app's main task (AI Affirmation Prompt and Questionnaire — Happy) for case study purposes.

Metrics of Success

Metrics of Success

The following rubrics were used as a tool to measure the success and usability of the product:


1. Successful completion of the task

2. Time of completion

3.  Ease of use on a scale of 1-5 (1 hard, 5-easy)

The following rubrics were used as a tool to measure the success and usability of the product:


1. Successful completion of the task

2. Time of completion

3.  Ease of use on a scale of 1-5 (1 hard, 5-easy)

Task to complete

Task to complete

"Take the necessary steps to generate a new personalized affirmation."

Let's take a look at the starting screen the users were presented with:

"Take the necessary steps to generate a new personalized affirmation."

Let's take a look at the starting screen the users were presented with:

Task to complete

After finishing their questionnaire these were the results of the metrics:

After finishing their questionnaire these were the results of the metrics:

AI Affirmation Prompt and Questionnaire — Happy

AI Affirmation Prompt and Questionnaire — Happy

Completion

Completion

Completion

of the task

of the task

of the task

✔️

✔️

✔️

Average

Average

Average

time of completion

time of completion

time of completion

1 min,
27 secs

1 min, 27 secs

1 min, 27 secs

Ease

Ease

Ease

of navigation (out of 5)

of navigation (out of 5)

of navigation (out of 5)

4.6

4.6

4.6

What users said

What users said

While completing this task, users made their thoughts loud and clear:

While completing this task, users made their thoughts loud and clear:

What users said

“Where do I start?”

“Where do I start?”

“Where do I start?”

-LostInThe Woods24

-LostInThe Woods24

-LostInThe Woods24

“/Spends time scrolling up and down the home screen looking confused/”

“/Spends time scrolling up and down the home screen looking confused/”

“/Spends time scrolling up and down the home screen looking confused/”

-CantStopWontStop

-CantStopWontStop

-CantStopWontStop

“I think I tapped on the wrong place”

“I think I tapped on the wrong place”

“I think I tapped on the wrong place”

-OopsIdidItAgain

-OopsIdidItAgain

-OopsIdidItAgain

Metrics of Success

After spending a few more seconds on the homepage, they eventually were able to spot the entry point. However, it wasn’t as straightforward as was thought on the prototype.

Iterations

Iterations

From the user testing, we learned that an iteration of the previous design was very much needed. The entry point wasn’t enticing enough and was getting lost among the other elements.


That said, it wasn’t as easy as creating a new screen. Creating a new prompting window was another process that needed several iterations. Here’s the evolution of the homepage: 

From the user testing, we learned that an iteration of the previous design was very much needed. The entry point wasn’t enticing enough and was getting lost among the other elements.


That said, it wasn’t as easy as creating a new screen. Creating a new prompting window was another process that needed several iterations. Here’s the evolution of the homepage: 

Users' Pain Point

The above iterations were discussed with multiple peers and mentors. The final iteration that was developed was this one:

The above iterations were discussed with multiple peers and mentors. The final iteration that was developed was this one:

Metrics of Success

Let's take a final look at both versions next to each other:

Let's take a final look at both versions next to each other:

Testing Iterations

Testing Iterations

We interviewed three new people to test this new entry point to the questionnaire. The purpose was to find out how the iterations performed. Would this new design save users time and frustration? These were the results:

Solution

The second round of testing decreased the average completion time to 45.23 seconds, an improvement of almost 52% from the previous average. This improvement shows that the homepage is more efficient at grabbing users' attention when interacting with the prompting and starting the questionnaire.

Final Results

Final Results

Final Results

Go to Live Prototype

Insights from Testing

A few lessons learned from this project:

1. Not because it is intuitive to me, a designer, means that it will be also intuitive for a less technical person.

2. Colors can be effective tools at grabbing a user's attention. No need for extravagant changes, start slow and small, and big changes will come.

3. Less scrolling is best! More scrolling on a page doesn't necessarily mean it's more complete. Less scrolling and more efficient organization can reduce frustration and confusion by users trying to get around.

It was a journey from initial goal identification to final high-fidelity design and testing. This process demonstrates a method with a solid foundation based on user research, competitive analysis, and iterative design. By prioritizing user needs and feedback, Affie has evolved to offer a tailored experience that could stand out in its market.

Affie’s commitment to embodying values such as peace, acceptance, and understanding is reflected in its thoughtful branding and interface, making it a reliable companion for anyone seeking to enhance their mindfulness practice.

A few lessons learned from this project:

1. Not because it is intuitive to me, a designer, means that it will be also intuitive for a less technical person.

2. Colors can be effective tools at grabbing a user's attention. No need for extravagant changes, start slow and small, and big changes will come.

3. Less scrolling is best! More scrolling on a page doesn't necessarily mean it's more complete. Less scrolling and more efficient organization can reduce frustration and confusion by users trying to get around.

It was a journey from initial goal identification to final high-fidelity design and testing. This process demonstrates a method with a solid foundation based on user research, competitive analysis, and iterative design. By prioritizing user needs and feedback, Affie has evolved to offer a tailored experience that could stand out in its market.

Affie’s commitment to embodying values such as peace, acceptance, and understanding is reflected in its thoughtful branding and interface, making it a reliable companion for anyone seeking to enhance their mindfulness practice.