top of page

MyChalk Mobile App

An app for students and guardians to stay on top of classroom activity.

Team​

  • 1 Product Designer
  • 1 Developer

My role

I led the entire design process for this project.

Timeframe

4 weeks:
  • 2 weeks: Design
  • 2 weeks: Development

Tools

Figma

Why?

 User Onboarding    Mobile Experience  

"I want to view my son's grades on my phone, but I'm having trouble creating my account. I have to zoom in and out to see the entire screen. This is very frustrating..." - Parent on chat support
Prior to this project, the MyChalk app's onboarding experience was extremely limiting in nature - only those users with existing accounts were able to log into their accounts. Any new user looking to create an account would need to do so by going on a web browser.
 
This proved to be not only a frustrating experience for our users, but also took a toll on our customer care team. The issue feuled up our chat support during the back-to-school season, costing us resources to troubleshoot the same issue repeatedly throughout the day. It was estimated that around 6 out of 10 users on chat were new users looking to create an account.

What's the process?

1. Research
I collected a number of examples of good and bad user onboarding on mobile apps, including those of our competitors. A personal favourite user onboarding example was GMail. I loved simplicity offered by the app, and the fact that there was only 1 step a user can take on each screen.
1.png
2. User Journey
Since our users were informed about our app through multiple venues (e.g. school-wide distributed letters, emails, parent-teacher meetings), it was important for us to hold their hands every step of the way.
2.png
3. Wireframes & Prototypes
Multiple user journeys begged for early versions of prototypes. In the process of creating wireframes, I utilized Figma's quick prototyping feature that allowed me to test out different flows mapped out in the user journey. Figma's mirror app on the phone came in quite handy for this project, as I was able to get quick effective feedback from my peers and made quick iterations as I went along.
3.png
4. Mockups
Once the designs were tested, I utilized the UI components we created in Chalk's Design System to replace the wireframe version of the components. 
In addition, I worked on other collateral - such as, school letter (so that schools could easily print off the letters to send home), and marketing material for App Store and Play Store. It was very exciting to work on illustrations to promote the app.
4.png
bottom of page