Chalkdoc: Web App
- Role
- Lead Product Designer
- Scope of Work
- User Research, Launch MVP, Visual Identity, Marketing Website, Web App, Illustration
- Duration
- 8 weeks
- Year
- 2015
ChalkDoc was created by a teacher who was disenchanted by the canned lesson-planning tools on the market. He decided to build tools that both students and teachers can enjoy.
Opportunity: ChalkDoc's founder wanted to create a completely customizable lesson-planning app to accommodate teachers' tiny budgets and limited time. The tool features simple, streamlined functionality and access to relevant and entertaining questions to engage students' hearts and minds. While other apps generate non-editable worksheets, ChalkDoc gives teachers control over the specific kinds of problems they know their students need to work on most.
Approach: My work with ChalkDoc started with brand and product positioning through market research and user surveys. I connected the founder with an engineering team, and developed a simple visual identity as a foundation for a consistent look and feel to extend across their responsive marketing website, worksheets and web app as they experimented and scaled its functionality. I provided illustrated assets, a mini design system for the web app, high-fidelity wireframes, and templates for the downloadable worksheets.
Outcome: Using the provided assets and foundational user flows, the ChalkDoc team was able to scale the product across multiple iterations without requiring additional design work. The software continues to provide value for thousands of users many years later.
User Flow: Creating a Worksheet
Create Worksheet Flow - Iteration 1
Since the final output was intended to be a printable worksheet, the interface was designed to provide a preview of the worksheet as the user added their desired content. The worksheet title, page numbers, and a space for students to write their name and date, were auto-generated to keep things organized.
1. Create New Worksheet
2. Add New Section
3. Configure Section - Advanced Options
4. Worksheet Preview (hover to scroll)
Create Worksheet Flow - Iteration 2
After reviewing and testing different options, the engineers suggested some simplifications to reduce the lift. Displaying "pages" in the preview proved to be more complex than it was worth due to the varying lengths of questions that filled an unpredictable amount of the page. Additionally, rather than printing directly from the app, teachers were offered the option to "download" the worksheet and the answer key separately, and share the worksheet via email.
While keeping it simple was the number one priority in their early days, I made sure to bring out the approachable charm of the brand through custom illustrations and playful copywriting.
I built a marketing website for the founder to edit as needed, establishing a simple design system, and providing a series of illustrated assets to flesh out the look for the website and within the app itself.
The Final Product
After conceiving of the initial flows, and handing off the wireframes and mini design system, the founder and engineers continued to evolve the platform over time to include an increasingly complex library of swappable equations.