Frame 1 (4).png

Bquote App

Duration

Tools

My Role

Team

Platforms

Dec 2020 - Feb 2021

Figma, MS Excel

UI Design & UX Research + Strategy

John Royal
(Developer)

iPhone & iPad

Project Timeline

01

Overview

Identifying the Problem
Defining the Goal
Project Timeline

02

Research

User Archetypes
Competitive Analysis
Survey
User Persona
User Journey Map

 

03

Ideate

User Flow
Wireframe
Design Assets

04

Final Designs

Final Screens
Usability Test
Next Steps

 

Overview

The Problem

Often, education systems in the U.S. and abroad fail to recognize the role and impact of Black figures in the past and present. The underlying cause of this kind of erasure can be contributed to centuries of systemic racism against the Black community. Hence, it is crucial for people to learn about and be inspired by the lives and contributions of Black revolutionaries, writers, poets, and artists. 

The Goal

The primary goal of this design is to get users inspired and motivated by quotes from influential Black figures by allowing them to read quotes seamlessly and learn more about each author’s life and achievements.

 

Research

Determining User Archetypes

Mobile Phone_Isometric.png

Tech-savvy users who frequently use their phones

Team work_Isometric.png

Adult users with busy schedules

Information flow_Two Color.png

Users seeking easy-to-understand information

Analyzing the Flaws of Competing Apps

Motivation App

X Mockup.png

Some quotes have author's names while others don't

No option to learn more about the author 

No images of authors

Daily Quote App

X Mockup.png

Content does not include enough historical figures 

Constant ads disrupt the user experience

Conducting Quantitative Survey

To better understand my user base I conducted a survey of 10 participants between the ages of 25 to 41

70%

Want to learn more about influential Black figures

80%

Want to see more Black figures in other quotes apps

80%

Do not have enough time to conduct research

Developing Key Insights

From the data gathered through the survey, I developed 4 key insights to improve the ways in which users can learn more about influential Black figures through motivational quotes.

01

Inform users about authors through biographies. Since the majority of particpants in the survey indicated that they wanted to learn about more influential Black figures, adding a biography section will be crucial. 

02

Allow users to search for quotes based on categories. This feature will reduace the amount of time users need to spend researching quotes since they will be able to customize their experience. 

03

Provide quotes at specific times. As shown in the research, many users have busy schedules and are unable to spend much time scrolling through quotes for inspiration. Hence, a notification fetaure would make the user experience a lot smoother and convenient. 

04

Provide a non-disruptive ad experience. Compared to other quotes apps, it's important that Bquote provides a seamless and easy-to-navigate ad experience to further add to the convenience of the app. 

Creating User Personas

MacBook Pro - 2 (2).png

Creating User Journey Maps

MacBook Pro - 1.png

Ideate

After conducting research, developing key insights from the findings, and creating user personas, I began the process of developing wireframes, user flows, and prototypes. 

Developing User Flow

Developing a user flow using Figma allowed me to better understand how to implement my solutions within the app

Scene (3)_edited_edited.png

Creating Wireframes

After developing a user flow, I created wireframes using ProtoPie. This gave me more structure and guidance to proceed with my app design. 

Frame 3 (1).png

Design System

I put together a design system that uses colors and iconography that reflect the brand identity of Bquote.

Instagram post - 1 (9).png
 

Final Designs

After creating high-fidelity wireframes and developing a design system, I dove into the finals screen designs for Bquote. Below you can see some of the key features that were implemented into the app to solve user problems. 

 
Black (2).png

Author Biography

The author biography feature allows users to easily learn about each of the Black figures. Users can easily move from the author's biography to find more quotes from the same author by swiping left and vice versa. This feature eliminates the research time and adds to overall the convenience of the app.

Black (3).png

Categories

This category section offers 16 different categories, letting users discover quotes based on their needs. This feature was well-liked in similar quotes apps, so it was integrated into Bquote, but has been modified to meet the needs of Bquote’s user base.

Black (4).png

Notifications

Notifications allow users to receive quotes at specific times to eliminate the need to search out quotes. Users can specify the dates and times that they would want to receive notifications for quotes and personalize their experience.

Black (5).png

Native Ads

And lastly, this design of native ads does not disrupt the user experience. Here, users are able to swipe through the quotes and they can choose to engage with the ads as they’re swiping.

Black (6).png

Usability Test

Conducting a usability test was a crucial step in this project as it allowed us to fully understand the functionality of this app. This test included a total of 10 participants whose ages range from 27 to 34. 

Notifications_Isometric.png

100%

Set up and received notifications with ease

Iphone_Isometric.png

90%

Navigated all of the features of the app with ease

Waiting_Isometric.png

100%

Felt the experience was not time-consuming

Next Steps

More user testing and insights will lead to better design solutions. This project was unique from my other ones as I had the opportunity to work directly with a developer to make the design a reality. This taught me how to assess the practicality of my design and I learned important collaboration skills. This app is currently available for download on the App Store. 

View my other projects:

Group 131 (7).png

Fantasy x Fisher

Group 131 (10).png
Group 131 (6).png