top of page

Light Quotes App

overview

CONTEXT

 

The use of Quotes has increased in the past years. People have been seeking ways to feel inspired and empowered. In these challenging times, quotes have become essential in everyday life.

 

Humans are aspirational. "Quotes can be both personally satisfying and a marker of social status or personal preference," as stated in the Mantras Matter article. 
 
When dealing with emotions, people usually find themselves on their own; hence, these expressions become a valuable tool to enhance emotional energy and boost momentum in time.

CHALLENGE

There is a need for a new product that focuses on young adult users regularly looking for a source of empowerment, inspiration, and motivation.

The current apps are too complicated to use in terms of choice. Most of them have so many possibilities that the users experience choice paralysis, and then the momentum for the energy boost fades. 

 

Furthermore, while Social Media is flooded with quotes, they are not well organized, leaving the user unable to find what they are looking for in an overwhelming number of alternatives.

ROLE
Research / Concept /  UI/UX for Mobile / Illustration / Visual Design 

TEAM

Lina Yohay (UI/UX and Visual Designer)

Sylviane Rabi (Positive Psychology)

Luis Bustamante (Code and Engineering)

TOOLS
Figma / Miro / Zeplin

CLIENT
Young + Minds
Code Ara Design Studio
Belgium

YEAR
2019-2022

How might we empower people to achieve their goals with an inspiring tool?

OUR APPROACH

Our team was eager to discover how and why young adults between 20 to 40 use quotes on a regular basis. In addition, we needed to assess the short-term emotional impact of the quotes as a tool for achieving a long-term goal and dealing with daily challenges so that we could use this data for building our app.

We wanted to:

 

  1. Create a simple, user-friendly, and effective app.

  2. Discover new techniques to build more engaging and customisable quote designs that can be shared via the app or social media.

  3. Allow users to be motivated and empowered to continue their daily journey while receiving an emotional boost.

My design process to solve this project followed 4 steps.

discovery >> ideatION >> design >> testing

Discovery:
Research and Analysis

The research for this project was based on determining users' needs and goals in terms of the emotional component of using quotes. We were curious about how quotes are used in various situations and why they are shared. In addition, we attempted to assess the short-term emotional impact against the long-term goal and daily challenges.


According to user interviews, the use of quotes inspires, energizes, and motivates people; they appear to function as an emotional energy boost that has an immediate effect.

16 Interview.jpg

THE USER

We set our target into two groups: 1) Young working professionals 30 to 40 years old,  with or without kids, and 2) College students in their 20’s.

Persona 1

courtney-cook-unsplash.jpg

“ I like to see how others perceive life through quotes.”

Maria Sierra

26 / Female / Single / Student / Tel Aviv

As an art student, Maria likes to understand the perceptions of others through visual images or the quotes they post on Instagram. 

 

She posts quotes on her Social Media twice a week and looks for different ways to stay inspired. She makes quotes' illustrations and finds sharing them useful as a tool to communicate her feelings and empower others.

Goal

Find inspiring quotes without having to choose from many sources.

 

Pain Point

There are too many topics to choose from in the Quote Apps that she uses, and she gets lost in her decisions to post, spending more time than what she has available.

ed-pylypenko-unsplash.jpg

“ Reading a positive quote every morning empowers me to continue my daily routine.”

Pablo Porto

32 / Male / Married with 1 small child / Marketing Manager / Madrid

As a Marketing Manager has a hectic schedule and uses different apps to keep his mindset on track. He meditates early in the morning and likes to use quotes with his team to inspire them in their personal and professional lives.

Goal

Get empowered every day through practical tools.

 

Pain Point

There is no time to read books searching for meaningful emotional boosters. Social Media showcases many quotes but finding the correct section takes too long.

Persona 2

INTERVIEW NOTES

The Quotes Survey drew 50 responses from young individuals. The following is an example of 5 of them and their comments on how they interact with quotes.

1 Interview Notes.jpg

THEMES AND OPPORTUNITIES

After evaluating and analyzing all of the responses, we divided them into eight categories to gain insight into the quotes' influence on the participants.

2 Interview Synthesis Sections.jpg
27 Quote.jpg

KEY FINDINGS

*

People feel inspired, empowered, and motivated by the use of quotes.

*

Quotes work as an emotional energy boost that has an immediate effect.

*

Quotes are transformed into metaphors and mantras, making them easier to learn, remember, and use in many contexts.

*

In a few words, quotes convey a clear message. As a result, unless they are seeking for anything specific, consumers don't spend much time utilizing quotes.

*

Participants get involved by using quotes on social media to introduce themselves, share an opinion, and communicate deep thoughts, feelings, and convictions in a few words.

*

Quotes are used at least once a week as a powerful quick tool for receiving or transmitting a message that has an impact on a positive experience, and they like to use it for themselves or share it with others.

Ideation

We brainstormed design ideas and features that would incorporate our findings to construct an app at this stage, followed by the processes for feature ideation, feature prioritizing, and the feature prioritization matrix.

Feature Ideation

3 Features.jpg

Feature Prioritization Matrix

5 Feature Prioritization Matrix.jpg

Feature Prioritization

4 Complexity Effort.jpg

CONCEPT AND SKETCHING

As part of the UX process, I generated a diverse collection of concepts via Crazy 8's, brainstorming, and later, Digital Prototype Iteration design implementation to increase our chances of discovering the most practicable solution for our chosen design path.

Crazy 8's

11 Crazy 8.jpg

Brainstorming

12 Sketches.jpg

Pizza Quote

Categories with icons

Quotes' spiral

3 Quotes categories

Quote Meal

DIGITAL PROTOTYPE ITERATION

18 digital prototype iteration.jpg

Design >
Low Fidelity

When creating and implementing the Light Quotes features, I decided that the app should have four core Quote categories for faster choosing. The new product should be editable and shareable.

17 Splash screen and signup.jpg

Splash Screen and Sign up

17 Categories.jpg
17 Login and welcome.jpg

Login and Welcome Screen

Categories, quote customization, and sharing

FLOWCHART

At this moment, the goal was to gather and categorize all of the content from the research phase. The project had a solid concept and understanding of users and application functions. As a result, I created a new flow that considered every step of the solution.


I evaluated four key categories for the app: empowering, self-awareness, motivational, and inspiring. Before adopting the final flow, the flows were designed and tested to discover what would work best for the user. Finally, a Lookback.io test was run, and the results were used to make some adjustments and clarifications.

6 Flow.jpg

First Flow Approach

Final Flow Implemented

8 Flow.jpg
27a Quote.jpg

Visual Guidelines

To maintain a cohesive experience on the app, I built a consistent design system using atomic principles to develop all of the project's components. The visual style guide sought to convey joy and openness while preserving a clean design.

Its elements may be implemented in future designs such as websites, additional app sections, or printed material. I carefully selected a collection of over 200 quotes to be built in and arranged by category, as well as a customizable geometric drawing system to allow the user to personalize the experience.

Logo and Colors

Logo_lightquotes.jpg
Colors_lightquotes.jpg

Typography and Icons

Typography.jpg
Iconography_lightquotes.jpg

Quotes Images

Quotes stories_lightquotes.jpg
Quotes_lightquotes.jpg

Buttons and Bars

Button_lightquotes.jpg
Bars_lightquotes.jpg

Develop Prototyping

I produced a high-fidelity prototype when building the Light Quotes app to allow for final adjustments in implementing the app's accessibility so the user could browse easily.

 

Users can create a new account or sign in to an existing one. They can log in or sign up, then select the app's category, customize it, and save or share it. Each quote can be personalized in terms of color, text, images, and size.

20 Onboarding.jpg
21 Sign up and Welcome.jpg
22 Quotes 2.jpg

onboarding

login and sign up / QUOTE SELECTION

QUOTE CUSTOMIZATION

SHARING ON SOCIAL MEDIA

25-Instagram-Story-GIF.gif

Testing >
Validation, usability, and feedback

Following four rounds of prototyping, user feedback, and testing, the final product was delivered. Finally, we identified a solution that the users preferred.
 
80% of the users said the app was "empowering, useful, understandable and easy to use." The new features and UI supported them in discovering and sharing quotes with wise time management to achieve what they were looking for.

bottom of page