Communication Mobile App

Creating an app for parents at Washington International School

Final prototype video walkthrough

Project Overview

Client: Washington International School
WIS is an education-based daycare located in Washington state. WIS has three separate locations in the state and offers Chinese immersion bilingual education for 1-5 years old students.

Duration: 80 hours

My Role: End-to-end UX/UI Designer

Scope & Focus:
My focus for this project is to create a mobile app for parents as primary users. I will mention teachers here and there as the secondary users but will not be doing design and test for teachers' tablet application.

What's the Problem?

Forms are often forgotten or hectic morning left sign-in sheet unsigned
Parents also have to beg for media updates
Lack of communication between parents and teachers as email is strongly encouraged
Long line during drop-off and pick-up times

Solution?

With an understanding of the needs and expectations of parents, I will design a better way to share and communicate. Additionally, I will design a tool that will help daily procedures to run faster and more efficiently.

Design Thinking Process

I sought to DISCOVER what the users need, motivations and pain points with their current process. DEFINE the scope of work and the screens that would need to be designed. DESIGN solutions in the form of wireframes and high fidelity prototype. TEST a prototype on real users, and IMPROVE the design based on feedback.

Research Goals:

Discover users’ habits, needs, thoughts and process
Identify pain points and the reasons behind them
Discover how they try to solve current challenges
Learn from how other apps solve common childcare problems

Methodologies:

Individual interviews
Competitive analysis

Current website. WIS has no mobile app

Review of Current Experience

WIS has no established branding as of yet. The logo which shows on their website is not used anywhere else.

Currently all procedures are done with pen & paper with occasional emails from announcing holidays, bill pay reminders, schedule changes or introducing new teachers, etc.

Parents receive photos on special occasions only.

Teachers ask for supplies by writing them down on a piece of paper and taping it on to the sign-in desk at the Lobby.

Empathy map

Understanding Users

I was able to interview 5 parents whose children are enrolled in WIS currently and 2 teachers who work at other similar school nearby.

Affinity map

Identifying Challenges & Room for Improvements

I grouped similar points people made together under a common goal/motivation and/or desire for a specific feature.

Insights from interviews were used to develop the persona of Lillian Song

Interview Insights

Parents desire to know and see more about their children's day, preferably in live-time but not necessarily as long as it’s done on the same day.

Photos and videos is the top priority as most are immigrants with grandparents overseas.

Daily procedures need to be more efficient, less time consuming with minimum effort

Easier connection with teachers and fellow parents

What Are Others Doing?

I explored various daycare apps on Apple and Google and found top three apps on both platforms. I then did a comparison on their common features and observed how they might present same solution differently as uniquely to their brand.

Insights:

Ditch the paper. All of these apps emphasized on minimizing cost and inefficiency of using pen and paper for daily procedures
Covid safety precautions as big marketing play right now by reducing the amount of face time
Common features found from digital check-ins, daily reports, attendance, media sharing, messaging center, reminders, paperless billings, to lesson plans.

Conclusion from Research Stage

Design an app that:

Allows parents to be easily informed with their children's activities
Makes it easy to communicate between childcare providers and fellow parents
Shortens wait times during pick-up and drop-off times

Read the full research report here.

Time to Prioritize

With the knowledge of what the users expect and what the competitors do, I did a prioritization matrix to help visualize what to concentrate and move forward on. This exercise is important to ensure that I make informed decisions regardless of the emotion or bias.

& Where Should They Go?

Armed with a list of features and its descriptions, I conducted an informal card sorting exercise with 3 moms whose children go to WIS. We did this in the playground as we watched our children play. Moms, the ultimate multitaskers.

Based on their feedback, I created a quick sketch during the exercise. That helped tremendously as they came up with even more suggestions as it was easy to visualize. That had to be the most beneficial card sorting exercise I ever conducted.

Takeaways:

Features deemed most important were sign in and out, childcare timeline, forms, gallery, message center and reminders.
Forms should be included as a step in the sign in process instead of separate feature.
Reminders is too broad for school events, billings and supplies requests. Suggested to separate supplies on its own.
Taking Airbnb's inbox as inspiration, combining communication features into a big umbrella of Inbox. Features such as messages, reminders and incident reports.
Combining less important features inside a hamburger menu. Features such as attendance, health, menu, calendar, settings.

User & Task Flows

I created the following flows to visualize a more in-depth user's hypothetical journey that includes different choices or difficulties the user might face navigating the app.

Sketches

My design process started with sketching for quick visualization of the ideas I have. Although not focusing on secondary users right now, I threw in some tablet app designs for fun.

My priorities were to sketch the following pages:

Digital sign in and out
See updates
Download/share media files

User Testing #1

Since I have access to WIS parents every weekend as we meet for playdate, I decided to a quick informal test with 3 moms. I asked them to sign in their child and explore the updates timeline. In addition, I asked for their preference between the two feedback screen designs I sketched.

Insights

Having both sign-in and attendance buttons too close to each other is a bit confusing
Wants to see multiple photos at one glance while scrolling down the updates timeline
Need to revise the flow from clicking photo post on timeline, where should it go next? Gallery or a separate post?
Concerns for chat type interactions on Inbox as it is less formal some things could get lost

Next, next, next...

Due to the time constraint I integrated the above feedback directly into the next phase — mid-fidelity wireframes. I swapped classroom and attendance, made the photos appear in a collage on the updates timeline, changed the layout of the photo post to mimic Instagram more for familiarity and finally added more screens.

Current Branding

WIS does not have an established logo or any visual branding whatsoever. The logo they have on the website does not appear anywhere else on marketing or email signatures. The Chinese characters there is literally translated as Washington International School.

Meet Your New Visual Identity

When I think of WIS, three words that came to mind are trust, knowledge and creativity. In Seattle area especially, it is very hard to find a bilingual daycare that is NOT play-based. The curriculum that WIS follows includes everything from language, mathematical, arts to musical developments. Parents know their children are getting quality education and care and the students love going to school.

Why?

I chose to work with mostly primary colors because it's a school for young children, and purple for a dash of creativity. The primary colors used in the design are shades of blue and purple. Why blue? Blue represents trust and knowledge.

There are also 2 variations to the logo, one being with the Chinese characters on it for more formal application like on any printed business cabinet, but for web application use the other variation without the Chinese characters.

User Testing #2

I used Maze as a platform to do my user testing. Testers were given 2 scenarios to complete. Testers are mostly parents with children in various daycares throughout Seattle.

Scenario 1:
You are in your car in the school’s parking lot during drop off and want to sign your child in prior to walking in to the Lobby.

Scenario 2:
After signing your child in, you remembered you need to send her room teacher a message. Create and send a new message to Becky Liu.

Open ended questions were also asked after each scenario completion.

Maze graphical reports for each scenario and testers feedback

Learning Points:

It was my first time using Maze and through this I've learned a few important things. One of them being to give a brief explanation of what testers should expect on Maze. Most of my testers weren't familiar with Maze and some had technical difficulties with their browser of choice and hence had to drop off midway. Maze still counted it as drop-off and thus lowered the overall usability value.

Another important thing I learned is to not overcomplicate the prototype. For my second scenario testers were supposed to create a new message for teacher Becky, there were some confusion since some tried to open a message from teacher Becky on another matter that's already inside the Inbox. I should've changed the sender name to another person to not confuse the testers.

What can be improved?

While there were no significant problems reported, a few of the testers stumbled on the Inbox page where they couldn't see the + button to create a new message clearly. I improved on this by swapping the + button to a larger primary button floating just above the bottom navigation.

Same thing for the send message button that was on the top right hand corner of the wireframe. I took that out and introduced a similar button used in the previous solution.

Another thing to note was the homepage. Some WIS parents who have multiple children enrolled was inquiring about how the process would be like switching profiles. They did not like the idea of logging out and back in with another account. So I decided to take inspiration from Instagram and applied it to my design. Now switching profiles is very easy with just a single swipe motion.

I also took out the attendance tab and added it to the hamburger menu instead as WIS parents feel it isn't used regularly enough to warrant its prominence.

Moving On to High Fidelity

I applied the changes to the high fidelity version and also did tidying up such as adding status bar, making sure all the design elements from buttons height to fonts to be consistent with the branding.

Reflection:

Overall I had a really fun time with this project, our playdates became more fun as this project was discussed often. I found talking with the users really helped my confidence as the designer. In total I managed to have in-person discussion with the users 4 times at different stages. Their feedback were very valuable.

I interviewed two teachers from nearby daycares and the results were used to create the persona of 'Teacher Becky'

BONUS

Based on my interview with the teachers at nearby schools, the preferred method of documenting is with tablet and traditional pen & paper. Those who still use pen & paper with tablet said the app they use isn't as fast as jotting things down. I tried to solve this problem by making default answers and automated time entries.

Here is the user persona I created for the teachers and bonus tablet screens for homepage, potty entries, activity entries and supply request page.