We help educators around the world leverage the proven power of interactions,
to help more students thrive.
Role
UX
researcher UX/UI
Designer
Platform
Responsive
Website
Sector
Education, eLearning, LMS
Pages
68 pages
(Still
Expanding)
Tools
Figma,
Userlytics, Photoshop,
HTML
Duration
4 months
for each
project
Impact
My design of reliability testing solutions led to a 23% increase in observer registrations and certification acquisitions.
Teachstone received acknowledgment from over 230 educational institutions globally, leading to 180 more agreements in 2023 compared to 2022.
Liaised with PM and Engineers to help me design a system that replaced coupon codes with product keys, enabling our clients to access their purchased seats easier.
Revamped platform flows and navigation menus reducing the frequency of misdirected customer service queries by 30% saving the company an estimated $40,000 annually in support costs, and increased traffic to previously neglected certification pages.
Conducted evaluative testing with 150+participants using userlytics.com; synthesized and designed against findings which increased conversion rate for primary user flow by 25%.
Overview
Teachstone's Struggles
Educational institutions worldwide hire Teachstone classroom observers to measure teacher-student interactions in their classrooms, for better learning outcomes. However, ensuring the reliability of those observers is a challenge. Therefore, I have been asked to design a digital reliability testing exoerience for more than 4 million observers to certify their qualifications.
Overview
Observers need to use CLASS®?
The goal of the test is to insure that classroom observers know how to use the CLASS® tool “Classroom Assessment Scoring System”. CLASS® is used to measure the elements that really matter in supporting the Teacher-student interaction through a scoring system.
Research supports CLASS
How does CLASS impact children?
CLASS is the most evidence-based and widely used assessment of teaching quality. Over 200
research studies have demonstrated that children in classrooms with more effective teacherstudent interactions, as measured by CLASS, make gains in areas critical for success in school and
life. Here's what the research shows.
Problem
When Classroom observers need to get certified they need to go through a Cumbersome reliability testing process that takes long time to complete. Also, customer service get many misdirected calls that can easiy be ovidable with a better design.
The existing test tool is not offering a fair experience for observers to understand what they need to do, so when they fail, it could be becuase they didn't understand the directions correctly.
Some competitors like ECRS has expanded their platform to offer certifications to observers which might cause Teachstone to lose market share if it doesn't evolve too.
Goal
Improve the UX/UI of the certification tool to be more user-centric and interoperable.
Integrate the most up-to-date testing techniques to attract more users and expand our market share, which will support clients to get certified.
Transfer some features from the paper version to digital to prepare for future paper-digital transformation.
Can anybody just use CLASS® or they need to get certified first? 🤔
They absoultely need to be certified before conducting observations to ensure a standardized and reliable evaluation process. Certification typically involves training individuals on CLASS® assessment tool.
But, before I go into further details with design, I decided to see what other types of users we have, because I didn't want to create an experience that doesn't fit into the holistic experience of Teachstone.
• School Admins
Administrators work with data generated from CLASS assessments
and other tools to analyze teaching quality and identify areas for improvement.
They use this data to make informed decisions about professional development priorities.
• Coaches
They're responsible for providing professional development and training to educators, including teachers and childcare providers, to help them understand and implement the CLASS framework effectively.
• Educators
Educators at Teachstone often work on developing resources, and tools that align with Teachstone's mission of improving teaching quality and classroom interactions. This may involve creating lesson plans, instructional guides, or assessment materials.
• Observers
Yes! this is ☝️ what we're focusing on today! They Conduct Classroom Observations. They're responsible for visiting early childhood education
settings, such as preschools and child care centers, to observe and assess classroom interactions.
They use the CLASS framework to evaluate the quality of teacher-child interactions.
Hmm.. 🤔 now that we've learned about all of our users, let's build a context around observers to build them something they love!
1 Discovery
In this phase I started with a foundational research to evaluate the users expectations, understanding and usefulness in the environments Data Collection tool, to identify any pain points and opportunities in the usability and navigation of the different features in the assessment tool such as the Data entry form, radio button selections, and data display.
2 Outline of scope
The interviews I
conducted earlier, left
me with some confusion
and overwhelming
unsorted data. Both the
client and the users
need similar features. I
thought maybe if I try
to break the data down
into two divisions, it
might help define their
requirements better. So,
I serperated them as the
following:
3 Insights from Stakeholders
Team's communication
We used Slack for collaboration,
Zoom for video conferencing, and
Jira Tickets to enable us to organize and prioritize
projects.
JJ was our PM. He
was responsible for ensuring the team follows the agile values
we are working with. I conducted 12 iterations until we all
agreed on the final visual mockup below.
What happens behind the scene?
I actively engaged with the developer "Charlos" to ensure
the feasibility and implementation of design elements.
The product manager "JJ" and I held regular sync-ups to align design
choices with Teachstone business objectives, while "Hannah" our
product owner provided valuable user insights for a user-centric
approach. Additionally, close coordination with "Katie", allowed
for a cohesive integration of design elements into promotional
materials, ensuring a consistent and compelling user experience
across all touchpoints. Our collaborative approach involved constant
communication, iterative design reviews, and a shared commitment to
delivering a product that seamlessly merged functionality with a
user-centric design.
4 Persona
Based on my previous
findings, I created
provisional persona with
4 distinct audience
group profiles. I synthesized the data and looked for overlaps of goals, pain points, patterns
To create more reliable and realistic representations of Teachstone key audience segments for reference. These representations were based on analytics from the user interviews planned above.
5 Whiteboarding
In this phase I started working with JJ, my product manager on trying to see where we are exactly in the process of certification. Our observers have to get a tocken that their admins purchase on our platform, then comes the test.
6 Information Architecture
I decided to break down the process into 3 main phases. Pre certification, in progress, and post certification.
7 Wireframe
A problem I always run into with my product managers, developers and stakeholders is that they
always get bogged down by visual design elements when I show them.
Therefore I provided them here with a skeletal visuals that outlines the structure
and layout of the UI, just to establish the overall information architecture, content hierarchy, and user flow
of a product, to align their understanding of the project's objectives
and user requirements before investing time and resources into detailed design and development.
img/teachwire1.png
Once those low-fidelity wireframes have been reviewed with PM and refined,
high-fidelity wireframes are created in the following section. The following wireframes incorporated
more detail, including specific fonts, colors, and interactive elements.
I offered more polished representation of the final
product, allowing stakeholders to gain a clearer picture of the design
direction. Throughout the process, I iterated upon them based on
feedback from usability testing and stakeholder input to ensure the best
possible UX.
8 Final Deliverable
I wanted here to create an emotional connection with users. In this phase, I paid meticulous attention to every detail, ensuring that the visual elements resonate with the Teachstone's identity and the Associate Trainers' preferences. I made Typography choices of (Proxima Nova) to enhance readability and convey the desired tone.
I selected the following color palette to evoke the right emotion of trustworthiness and guide users through the interface intuitively. Imagery here is just a variable or a placeholder to what they could be. I chose a friendly clear Iconography to complement the content and enhance trainers engagement. I aimed to not only make it aesthetically pleasing but also to be highly functional and user-friendly.
A Observer activates tokens
B Instructions & Agreement
C Go through the Test
D Review Page, Pass vs Fail
E Quotes from usability tests
" It looks light and
airy, which
indicates positive
future results "
" I took tests like this when I got TEFL teaching English as a foreign language. Loved it! "
" Pretty self explanatory. "
" The pop-up of the questions in the end and jumping back and forth is a big plus and very solid. "
Microinteractions
Let's zoom in a bit to show you 1 of the small components I was proud to design. PMs and stakeholders wanted to drop it because they didn't expect it could be implemented, but I made it work.
It's a (matching selection) in the test. To test if our test takers can correctly match right selections together. Let me show you!
Low-Fed of Matching Selections
I thought of different ways to allow the user to pick 2 matching selections and I came up with this idea. Engineers were happy with it because it works perfectly on different viewports.
How can we make the action reversible?
There is a basic logic I borrowed from the real fixed world.
If you know how to flip the light switch up to turn light on,
clearly flipping it down will do the opposite action, right?
So applying the same logic here will
allow the user to revirse the matched items without any guessing.
Let's make it High Fidelity?
To ensure a universally inclusive experience, I incorporated alternative cues like the distinct check mark iconyou see on the left, and sufficient contrast ratios for the selected items, making the design accessible to our diverse audience with varying abilities and preferences.
User in this hypothetical scenario would have to match between a country and it's capital.
Separate or Match with the same button.
I left the action button as is and chaned the word from
"Match" to "Separate". Usability testings validated it this
interaction big time. This touches on usability heuristic #2: Match between system and
the real world.
9 Design System
The complex nature of the platform necessitated more than 40 pages covering on-boarding of our observers, Wi-fi setup, support and power user features like Honor Code Agreement.
To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states, such as cards, list items, and controls. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user.
Please feel free to interact with the prototype
🙏 Praise
Nice words from nice stakeholders
What have I learned
from this project?
• Defining proper measurements for success is one of the keys to validate the test results.
• The testing groups gave some real important insights about their daily activity in the classroom and what
they wished for.
They helped me understand their real needs and how we could improve usability. I wish we could have
done more testing cycles, as I believe that the end product could be more user-centered.
• Understanding the value of user research and planning to synthesize findings in the most helpful way to our users.
