Joy Education Foundation is an educational non-profit that utilizes digital literacy tools to improve student’s K-12 reading proficiency.
Design System | User Flow Diagram | Accessibility | Style Guide | Prototyping
Features
Jumpstart onboarding process
Review company’s mission
Learn about platform services
Provide direct connection to a live agent for complex inquiries
Role
UX Designer w/ 6 other designers and a design lead
Duration
4 Months
Potential parent who works long hour shifts, so an extensive onboarding process would make them leave before finishing
Joy Education Foundation struggles with onboarding, leading to lost customers, and lacks customer support. As a design team we thought a chatbot could provide a guided onboarding process, deliver quick answers about reading support, diagnostics, curriculum placement, and help connect families to tutoring services—addressing key pain points and improving retention.
Moreover, a chatbot offers instant, 24/7 support without the cost of hiring staff, making it ideal for handling onboarding questions at scale. Unlike static resources or limited human support, a chatbot can guide families through processes, explain diagnostics, and connect them to tutoring in real time. It provides a personalized, efficient experience that directly addresses the business’s current gaps.
The current onboarding process for parents to sign their student up for the free digital service is extensive, contains out-dated UX content, and is overall time-consuming.
Low-Fi Draft
User Flow Diagram | Sketches | Prototyping
User Flow Diagram
Why?: Diagraming user interactions help map out screen displays, UX content, pre-defined choices, and give an aerial view of the entire chatbot flows, which are needed to refine the user experience and lay out a clear strategy for how the final flow should connect.
Strategic Planning: Created 80% of the intensive user flow diagram (2 major flows) in 3 days, outlining key pathways and interactions critical to the chatbot's functionality.
Low-Fi Sketches
Low-Fi Prototype
Why?: We created the intensive user flow diagram as well as the low-fi sketches which we converted to low-fi screens and a main flow. Unfortunately we did not acquire enough users to conduct low-fi usability testing, therefore wee relied on design critiques and client feedback.
Collaborative Iteration: Facilitated team collaboration to incorporate diverse screen ideas and innovative concepts into the initial low-fi flow and nudge component.
Usability Testing Preparation: Prepared low-fi designs for usability testing by incorporating the client website in the background to help simulate it’s actual use on the site. Ensuring readiness to gather crucial user feedback.
Prototyping and Testing: Prototyped the low-fi flow to simulate user interactions, paving the way for iterative improvements based on usability insights.
Branding + UI
Accessibility | Design System | Style Guide
Research and Conceptualization: Conducted comprehensive research on design systems, combing through 15+ different resources identifying essential components and best practices. Completed a course on Figma design system creation, applying newfound knowledge directly to project needs.
Initiated creation of a design system and style guide from scratch to create a cohesive design system the non-profit can utilize not only for this chatbot project, but for future iterations made to it and other similar projects.
These included color variations with accessibility considerations, typography guidelines, and screen size specifications.
Style Guide Development
Initial Style Guide
Color Variation + Accessibility
Created Local Styles
Final Iteration
Scroll
It was important to build out the style guide first as the colors, typography, and icons would be used directly to create components for the chatbot. In addition it’s easier to test out color accessibility before developing the UI.
Created 50 color variations based on the brand colors and semantic colors as well as documented AA and AAA WCAG Color Accessibility. Also created local variables and styles for easy hi-fi draft creation.
Component Library Development
Type here
👋 Hi there! I’m Smartee. Ask me any questions you have or select an option below to start!
Smartee 12:00 PM
I’m an inquiring parent/guardian.
Smartee 12:00 PM
Thank you for visiting! We’re so excited you’re here. How can I assist you today? 😊
You 1:37 PM
Read
Smartee
online
I want to onboard
I want to learn more about JEF services
I want to review service pricing
My initial design
Write a response...
👋 Hi there! I’m Smartee. Ask me any questions you have or select an option below to start!
Smartee 12:00 PM
I’m an inquiring parent/guardian
You 12:01 PM • Read
View services
You 12:01 PM • Read
How can I assist you today? 😊
Smartee 12:01 PM
Our mission
View services
See what parents are saying
Great! Here is our list of services we offer here at JEF:
Smartee 12:01 PM
Diagnostic tool
View curriculum
Pricing
Virtual reading tutor
Smartee
Online
Terms of Service
Return to Chat
Frequently Asked Questions
Update Language Preference
Report a Problem
How do I use this chatbot?
Chatbot Settings
Team-consensus UI
📣
Shared w/ client and design manager
Final UI
Consolidation of Feedback: Collaborated and synthesized team feedback on UI preferences and decisions into a cohesive direction for the hi-fi draft.
Innovative Design Contribution: Successfully advocated for an accessible UI design solution during team deliberations, resulting in its adoption and preference by the Design Manager. Also introduced a new accessible gradient, enhancing visual appeal while ensuring inclusivity.
Final Component Library
Usage: Display a chat preview to prompt user interaction with the chatbot
Smartee Nudge
Usage: Welcoming the user and informing the purpose of Smartee
Welcome Message
Usage: Display a chat preview to prompt user interaction with the chatbot
Chatbot UI
Developed core UI components essential for the project's hi-fi draft for the second iteration and for the final components in the hi-fi prototype.
Created 3 components which included 1 reusable component used by our design team of 7 for our hi-fi prototype. The 3 final components were created with 23 single components used as building blocks.
Hi-Fi/ Outcome
Prototyping | Documentation | Dev Hand-off
Building User Flows
Onboarding/New User Flow Design: Designed the primary onboarding and new user flow, a critical component driving the project's overall user experience strategy.
Leadership and Collaboration: Led the team in presenting the hi-fi prototype to stakeholders, structuring the presentation and managing responsibilities effectively. Iterated on the hi-fi prototype in collaboration with clients and the design team, incorporating feedback to refine user interface suggestions.
Documentation
Documentation and Handoff Preparation: Streamlined the design system and style guide UI for clear documentation, facilitating smooth handoff to clients and developers.
Final Style Guide
We used the brand colors and started building out the style guide. I started finalizing the style guide by reviewing DesignSystemsForFigma.com to see how other companies organized their design systems and style guides.
Clearly grouping the brand direction, typography, iconography, and color increased efficiency for developer hand-off. Most importantly including a ‘How To’ guide for developers and future designers in how to use both the design system and style guide.
Final Component Library
In cleaning up the ‘Components’ page was mainly sectioning off all of the team’s component ideation and exploration into a sub-section for archivation.
Next was grouping the component building blocks by the components they created: Smartee Profile, Chatbot Base, Chat Responses, and Settings. Then finally combining these building blocks into the main components: Smartee Nudge, Welcome UI, and Chatbot UI.
I then took those main components, redlined each of them, and sectioned it off into a section called ‘Redlined Components For Developers’ to make it clear what the developers need to get started in developing the chatbot.
Impact
This chatbot addresses Joy Education Foundation’s onboarding challenges by providing instant, guided support to families, reducing confusion and drop-off rates. It ensures users can easily access key information about diagnostics, curriculum placement, and tutoring services without needing live staff. With features like navigation, notifications, and settings, the chatbot creates a smooth, personalized experience that builds trust and keeps families engaged. This ultimately improves customer retention and reduces the burden on internal teams.
Learnings
NEW Interest Acquired: Design Systems 📐 -- This was an exciting project, especially creating the design system from scratch which was my first time doing so. I loved breaking down the UI to identify the individual components. This helped me better understand how to build out the component library as an livable piece of documentation as their needs from the chatbot may change. This influences my current interest in building design systems specifically the connection between the design-side component library and the front-end development component library.