CHALKTALK
A personalized learning software for ELA & Math. Real-time, remote or in-person
My Journey at ChalkTalk
I joined ChalkTalk as a UX/UI designer in March 2022.
The first initiative I took on was to create a Styleguide and component library to both unify the UI elements across the platform and to better utilize React JS’s capabilities.
Another highlight from my time at ChalkTalk was taking ownership of Github For Education. A product release that enables teachers to edit, share and merge individual branches of ChalkTalk’s content, to create the Github of SAT/ACT content.
From there, my role at ChalkTalk shifted to that of a Product Manager for one of ChalkTalk’s two development teams. This work involved creating and maintaining the roadmap, prioritizing sprints and connecting the customer support and product teams to ensure customer feedback was immediately acted on (incident response management).
Styleguide
Auditing the Platform's UX
Hierarchy of elements
Component Design
Based on Material IO
Font & Color Hierarchy
Intuitive Hierarchies
Handover Process & Stack
From wireframes to deployment
UX Audit
Inconsistencies in the use of fonts, colors and components was proving to be a UX liability for ChalkTalk’s users.
The process started with an in-depth audit of all pages, with the goal of identifying these inconsistencies to create a styleguide and component library that would both address users’ confusion while also saving valuable frontend development time.
Component Design
I set to work designing the needed components based on my findings from the audit.
I used Material IO’s component library as a starting point, with the knowledge that integrating Material IO with React would significantly streamline implementation of the styleguide.
These components were then moved to Zeplin. Zeplin is a great tool for delivering high fidelity wireframes, as it will crossmatch them with a styleguide to point out all instances of a component to the developers. It also provides a CSS snippet for these components.
Font & Color Hierarchy
I put together a color palette and font hierarchy and specified use cases for every font and color.
Before starting with this project, 90% of the platform utilized the same font (Montserrat) and the same color (Orange), with no hierarchy in place. There was no consistency in component styles either.
This meant that headers, subheaders, body text and buttons were often indistinguishable. Implementing this new hierarchy had a significant impact on the legibility and UX of most pages.
Handover Process & Stack
My work on a component library gave way to a valuable opportunity to outline a new handover process complimented by the new design stack (XD > Zeplin > React).
Before
After
Github For Education (GFE)
Getting Onboarded
Requirements & Research
The Release Roadmap
Created on Notion
Wireframing & User Flows
Design & Iterate
Moving it all to Jira
Epics & Stories
Getting Onboarded
GFE was the reason I joined ChalkTalk. I requested to take ownership of this product, and earned that responsibility.
In order to gain a better understanding of the needs of our users, I conducted interviews with ChalkTalk’s power users. These were a great opportunity to discuss low fidelity wireframes and core functionalities with the users.
I also gained a thorough understanding of Github’s branch logic and looked into other useful best practices ranging from wikis to streaming services to social media platforms.
The Release Roadmap
On Notion, I broke down the elephant into smaller bites, segmenting the product into 8 separate versions each comprising 3 or 4 functionalities to be deployed. This allowed for a few things:
– Prioritization of most-to-least valuable functionalities
– Opportunity to wireframe, iterate on and test separate user flows
– A way to effectively disperse information to all internal stakeholders (tech lead, content team, product)
Wireframing & User Flows
Once the prioritization of the versions and subversions were determined, I set to work designing wireframes for each subversion (user flow). I created separate viewing links for each user flow in order to annotate each with specifications.
Each user flow was substantially iterated on as product, tech and content weighed in with their considerations.
See the bottom of the page for an example of one of these user flows.
Moving it all to Jira
Once the roadmap and wireframes were signed off. I transferred all of these initiatives into Jira in the form of tickets.
Versions became Epics, and subversions became Stories. Every ticket contained within it a summary, wireframes, business logic and acceptance criteria (for QA).
