Chalk Schools Case Study

Product: web app

Status: public

Position: Lead UI / UX Designer

I worked for Chalk Schools as their first in-house designer. As a designer joining the team after the Beta product had already been released, I had the responsibility of cleaning up the design of the initial product as well as working with the Engineering and Customer Success teams to create new features. Getting customer feedback is essential for my work, and I was able to talk with many current customers to understand their difficulties around the product and understand which new features would most benefit our customers.

The main project I worked on was onboarding; which included the initial research and interviewing process, creating personas, mapping out the product hierarchy, and defining a flow that would best fulfill customer needs. For the purpose of showcasing my design work, unfortunately, most of the work I did at Chalk is proprietary.

What is Chalk?

Chalk is an electronic-form management product. The current administrative paperwork systems used by schools are extremely slow and outdated. It can take over a week to get 5 signatures on a form if the signers are at different sites in a school district. Chalk caters to schools and school districts to make the paperwork process faster and easier.

Access points and new accounts

I mocked many UI and UX improvements for Chalk's marketing site and web app. One of the projects I worked on was to clear up the confusion around what an account does and who needs an account.

Chalk accounts are for people who put together forms, follow their paper trails, and sign many forms a day. Other people who interact with the service don't need an account, but there was a lot of customer confusion around this when I came onboard, because Chalk hadn't said anywhere who needed an account or what an account could do.

To remedy this I set up access points for two of our personas and redesigned the account creation page. The new 'Create an Account' page highlights three features you can do with an account (see image to the left). 

The first access point I created was for our Helper persona. Helpers are people who manage form paper trails and often initiate forms for others. I put a prompt within the Form Initiation page that let them know that having an account could make batch form initiation quicker. The second access point I created was for our Signer persona. Signers are people who sign many forms a day. I put a prompt within the Form Waiting email that let them know that having an account would make signing forms easier. The intent of these access points was to bring in those users that would benefit from having an account in the places they would feel the greatest pain point without one.

 

Product Cleanup

Old interface

New interface

As Chalk's first in-house designer I worked on a lot of UI improvements. Above is a popup used to send a form forward to the next person who needs to sign or review it. The old version (above to the left) didn't exhibit the clean feel Chalk wanted and had unnecessary information and clutter. My redesign (above to the right) uses a layout more similar to email and removed the unnecessary components.

A similar project and challenge I tackled was to redo the form header. Form headers contain highly important information including the form title, who the form is for, who currently "has" the form, and the date the form was initiated, along with tools to download a PDF, view the form history, and save progress. The old version of the header was similar to the popup above - it had a bad hierarchy and felt very cramped. Another problem with the old header was that it took up too much vertical space on the screen, leaving a limited viewing window for the actual form. My redesign followed the same style as the redesigned popup above, introduced a clear hierarchy, and left more vertical space available to view the form.

Old thank you page

New thank you page

Another page I worked on was the thank you page. The old page (above to the left) was redundant and had no purposeful layout. My redesign (above to the right) removed the redundancy of the popover box (in green) and composed the components in a more thoughtful way.