gradient.png
 
iPhone X Clay Mockup.png
iPhone X Clay Mockup-1.png
2 Final Wordmark.png

An app where parents can search for clubs for their child, sign them up, and pay dues - all in one place! 

Project Overview

Challenge

Develop a solution to ease parents worry about their child's social enrichment due to the pandemic. 

ROLEUX/UI Designer

PROJECT LENGTH. 9 weeks

 

TOOLS. Figma and Invision

Solution

An app that allows parents to search, enroll, and pay for the club for their child. 

Problem Space 

COVID 19 has caused parents and kids to quarantine and not socialize.

 

During the pandemic I witnessed first hand the changes in my sister's life with her two kids.  COVID 19 caused not just my sister but everyone to be in quarantine where I noticed changes in behaviors. One such area was children e-learning and their parents facing a new norm of having their child at home more than regularly. 
 

80% of U.S. parents were homeschooling their children during the early phase of the Coronavirus. 

8 in 10 parents say their child(ren) are experiencing heightened stress levels. 

This left parents of middle school children worried as research showed that social isolation due to quarantine show to be a heavy burden for younger and older adolescents. 

Source: EdWeek, UMICH, and EdTrust

Online Education

Process

Human Centered Design

To navigate this problem space I used the HCD (human centered design) method.   This allowed me to design a solution which focused on the user and their pain points, goals, and motivations while still being rooted in research.  Below are the steps I took for the project ending with the hi fi prototype. 

 

peace.png

Empathize
Problem Space
Research
HMW

2

loupe.png

Define
Interviews
Persona 

creative-thinking.png

Ideate
Sketches
Wireframes
Moodboards

settings.png

Prototype
Hi Fi mockup

EMPATHIZE

How Might We...

A How Might We statement is used to reframe a problem space. This approach is a helpful way to look at a problem as an opportunity. By asking a question, it has us thinking of possible solutions to a problem. 

How might we help parents of middle schoolers overcome their concerns about their child’s social interactions so that they won’t worry about their kids social development? 

Defining the Problem

job-seeking.png

Issue

Homeschooling during COVID 19 has left parents feeling worried not only about their child’s education but also about their child’s social activities. As schools turned to teach online in a matter of a few weeks, most schools did not have the proper infrastructure in place to provide the best experience possible when it came to school activities and clubs. A majority of the kids e-learning were isolated and did not have social interactions as when they were in school. 

recruitment.png

Whose Affected

Parents and kids were affected by quarantining. Parents were worried about their child's social enrichment which led to more stress during an already stressful time.

 

Since children were stuck at home they couldn't see their friends as they use to. 

worries.png

Alleviating Pain Points

Finding ways for kids to have an interactive experience when they are e-learning. 

 

A way for parents to be less worried is to be informed of online activities for their child.

broken-link.png

Constraints

There are a few constraints to keep in mind as I explore this topic. In terms of technology, having the schools and districts agreeing to integrate with a new platform can be problem-some.

A socio-cultural constraint would be having children on a digital solution. Currently, kids are in front of their screen for school. A potential solution would be another online platform and this means children spend more time online.

Hypothesis

design-thinking.png

I believe....

Parents of middle schoolers are stressed about their child’s social interactions during quarantine. They feel that their child has become more anxious and secluded due to quarantining.

 

I will know I’m right when I see....

Parents reporting that kids are withdrawn and not engaging with friends as much as they did pre covid.

 

DEFINE

linkedin-sales-solutions-VtKoSy_XzNU-uns

Interviews

To better understand the problem space I decided to talk to the source itself, parents.  I interviewed parents with kids between the ages of 11 -14 years old whose children were attending school before the pandemic. These interviews proved my hypothesis and informed me that parents indeed were wanting an all encompassing solution.  By interviewing potential users of the app,  I was able to understand their pain points, behaviors, and motivations. 

pencil.png

 

From the interviews, I synthesized the data and found commonalities and themes.  I narrowed down my scope and concentrated on one main insight which guided me toward my solution.

Insight

Parents want schools to have a better way for more interaction amongst classmates during e-learning. They believe this would help kids social enrichment and mental health. 

Persona

_Capstone%20Part%202%20_edited.jpg

User Story 

Finding and enrolling child in social club. 

I understood that my persona, Priya, has pressure to provide her kids with daily social interactions. Helping Priya find groups for her child will assist her in alleviating her frustrations.

 

After developing my persona, I created user stories which are created to show the functionality our users will want when using our digital solution. The user stories show the action the user takes as well as the benefit or value it will bring the user.

 

I’ve developed many user stories, but selected one to move forward with.  My interviews helped me realize that parents want to find a social means for their secluded child.  So the user story most closely to align with that is finding and enrolling a child in a club.  

Screen Shot 2021-05-08 at 6.45.16 PM.png

Selected Task and User Story

Epic: Connecting with child’s resources.

User Story: As a parent, I want to enroll my child in a social group so that my child feels connected to peers while e-learning.

Primary Task: Sign up child for a club

Task Flow Diagram

In order to move my research and data into a digital solution I created a task flow to help in translating my ideas.

Capstone Task Flow Final.png

IDEATE

Ideating is my favorite part of the process!  I have fun coming up with different possible solutions.  But for this project I needed to consider a few elements and think if there is already a way to accomplish the challenge.  There is currently no app that helps parents stay informed of their child's social activities in school and within the community. 

 

A potential way to solve this problem was for parents to connect their kids with activities that they may not have known about. So bezzie, an app to help parents find social activities for their child, was developed. Parents have the option to search for activities or clubs within the child’s school or within the local community.

Sketches

Using my task flow as my guide, I started sketching to see what this would look like.  The sketches helped in

providing a direction to move forward. 

IMG_6678.JPG
IMG_6673.JPG

Wireframes

Once I had an idea of how the app could be laid out, I started creating my wireframes.  There were a lot of iterations and variations.  So the next step was to conduct user testing to ensure that users understand the flow and usability of the app.

V1 Anime Details.png

Version 1

V2 Anime Details.png

Version 2

Anime Details.png

Version 3

User Testing 

ab-testing.png

I did two rounds of user testing with 5 testers each round. The purpose of the tests was to determine if the users were able to do a specific task within the app.  The results were as follows:

  • Users wanted to type in search bar on the home screen


  • Not expecting 2nd screen to show up as they thought they were typing search on previous screen


  • Need to highlight which page you are currently viewing


  • Have either the word clubs in filter page or don’t have the word clubs


  • Can have Currently In Filter on own section on bottom


  • Can add share icon on club details page on the top right


I was able to incorporate all the provided feedback to ensure a fully usable design. 

Before

NewsFeed Page.png
Search Page.png

After

NewsFeed Page.png
Search Page.png

Users reported that they were not expecting the next screen (with sort options) to show up once they clicked the search bar.

These screens were changed to have the search flow feel more natural.  The after flow is closer in line with the iOS standards.

Before

Sign up page.png

After

Sign up page.png

All field required was added as users stated that they weren’t sure if everything needed to be filled out.

Before

V2 Anime Details.png

After

Anime Details.png

I changed the layout to make it look more consistent and clean.  And I made the Sign Up button be the clear CTA.

Final Low Fidelity Wireframes

NewsFeed Page.png
Anime Details.png
Search Page.png
Sign up page.png
Search Page with CTA.png
Detials on sign up page.png
Anime Results Page.png
Success Page.png
Brand Development

Visual Identity 

art.png

To bring my app’s visual identity into life, I developed a More A than B list to help in the mood, tone, and style of the brand. 

More A than B: 

More fun than serious

More social than isolated

More lively than dull


More mature than childish

With my list in mind, I then found the following keywords to be appropriate for the brand:

Playful, Connected, Social, and Fun

Mood Board

Keeping my words in mind, (playful, connected, social, and fun) I looked for images and colors that conveyed those feelings.

Screen Shot 2021-05-09 at 5.05.35 PM.png

Colors

colors .png

Since parents are stressed and worrisome during the pandemic, a calming yet energetic feel without being to serious is best to help them find what they need without being to hectic.  The combination of the orange with the teal work well together to provide the feeling of the app. 

* Text and background colors were checked for accessibility.  The colors are compliant and passed the WCAG 2.0 standards. 

Wordmark

After considering many different names that can imply friendship, I chose the word bezzie, based on feedback from users.  Bezzie in British English means best friend. This can be used as the best friend for the parent who needs help finding clubs. It can also be used to imply the kids finding best friends or joining clubs with their best friends.

word bezzie 2.png

Logo 

bezzie logo.png

The app logo was added next to the word mark.  The logo is meant to be the lowercase letter b.  It also shows the parent and child relationship (big circle and small dot).  The logo can be used alone and in conjunction with the wordmark.

PROTOTYPE

High Fidelity Prototype

Combining my research and inspiration, here is my final version of the prototype. 

Frame 4.png

press to zoom

press to zoom

press to zoom

press to zoom
1/10

Future Considerations 

The Forgotten.png

For the purpose of my capstone, I have shown my app from the view of the parent.  I have a feature to message the advisor of a club within the school.  If the advisor can receive messages, it is fair to say that the advisor can also be a user. 

   

Another potential user can be students.  They can browse for clubs themselves and share clubs of interest with their parents.

 
In the future, the goal will be to have the all the different users connect with each other on the app.  

 

Bringing more benefit to the user.

Another way to show the value to our users is to have the app available for download on an iPad.  Keeping the needs of my persona in mind, the next most likely device they would be on was an iPad.  This is a device they bring with them on the go and normally sit with in front of the TV or when at home.  Therefore, it made sense to consider what the app would look like on the iPad.  

Final Ipad mock .png

Let's not forget about the marketing. 

To gain awareness and showcase the value of the app a marketing website was created.  The website shows the features and explains the benefit of the app.  A responsive website was designed so users can view on both a desktop and cell phone.

Apple iMac 27_ Mockup.png

Key Learnings 

Throughout my time at BrainStation I have been learning the agile design thinking process.  This process has taught me that you can show your work and still keep moving along and make changes as needed.  I realized that iterating and refining till the last minute is acceptable.  This has been a challenge, as you receive feedback before you have a complete product.  But it also becomes important as you can make changes as needed, rather than waiting to fix or change everything in the end. By incorporating feedback as you go, it helps make the end result a better product.   I hope to continue working on these skills and incorporate them into my future UX projects.

Congrats you've made it to the end! If you made it this far, I'd love to chat! Let's work together!