Overview
I collaborated with a team to redesign the Teach to One marketing website, focusing on improving user conversion.
My Roles
UX/UI designer
Concept artist
Walkthrough writer
Interactive prototype expert
Tools Used
Figma
SimilarWeb
Assets provided by New Classrooms Innovation Partners
Teach to One, part of the non-profit New Classrooms Innovation Partners, develops web-based math tools used by educators across the U.S. for students from 4th grade to algebra. Its flagship program, Roadmaps, provides a personalized learning environment using tailored resources and adaptive content.
Over the course of three weeks, I collaborated with a team to redesign the Teach to One marketing website, aiming to improve user conversion and better showcase the available learning programs.
My team began our redesign project by meeting with key members of the Teach to One team—Michelle Ward, Emily Doerr, Kelly Morgan, and Geneva Dill. They identified several areas for improvement:
Confidence: Users should feel confident in the product from their first website visit.
Product Matching: The website’s design didn’t align with the actual look and feel of Teach to One: Roadmaps.
Micro-Interactions: Adding subtle micro-interactions could boost user engagement.
Navigation Bar: The navigation was outdated, featuring a discontinued product.
Non-Profit Connection: The site needed to better emphasize the relationship between Teach to One and New Classrooms, the founding non-profit.
Success for the redesign would be measured by an increase in scheduled meetings with potential users.
Using SimilarWeb, a Chrome extension that analyzes web traffic and performance, my team and I assessed the Teach to One homepage.
Breaking down the SimilarWeb analysis:
Website traffic is nearly evenly split, with 46.54% of users on mobile and 53.46% on desktop.
Users spend an average of one minute on the site.
The bounce rate, or the percentage of visitors who leave after viewing only one page, is 72.53%.
Key Takeaways
When we compared the SimilarWeb analytics with the stakeholder interviews, we identified potential areas to improve in order to increase user retention: increasing the average user visit duration and reducing user bounce.
Competitor Analysis
To get familiar with other learning software products and marketing, we conducted a competitor analysis. Below are our results.
Zearn
The Teach to One team identified Zearn as one of their most direct competitors during our preliminary meeting. In order to understand what might make Zearn a competititor, my team and I analyzed the Zearn website to evaluate their marketing strategies and ideate on how we might design our own site.
Heuristic Analysis
Next we looked at the heuristics of the Teach to One website, comparing the Teach to One with Zearn.
Competitor Analysis Insight
The Zearn website offered a more engaging experience, using compelling language and icons to guide users through the content. Many buttons linked to internal pages, keeping users on the site longer.
In contrast, while the Teach to One website provided more comprehensive and informative content, its organization made navigation difficult, which hindered users from easily finding relevant information.
In order to understand what might motivate the user conversion for educators and admin, my team and I conducted user interviews with potential users.
Three demographic groups we interviewed were:
A public school SPED teacher.
A teacher with 10+ years of experience teaching at Montessori schools.
Two parents with elementary-aged children.
Interview Insights:
Public School Teacher:
Wants a more personalized math learning system for students.
Open to using online tools to help students learn.
Montessori Teacher:
Wants to ensure learning materials are presented in a way that helps students be successful.
Uncertain about the efficacy of educational technology systems.
Parent:
Concerned about the cost of educational technology programs.
Prioritizes the safety of online learning environments.
User Insight Statement:
Interviews revealed that, overall, educators and parents seek confidence in supporting students' math learning. This reinforced our belief that an engaging, informative website could highlight the benefits of Roadmaps and encourage user conversion.
We wanted to understand how users might move through different parts of the existing website before we began wireframing. To do this my team and I drafted a user workflow in order to organize these movements visually. This allowed us to better consider the overall structure of our redesign.
Our goal was to use the wire flow as a framework to consider how users might move through the website, and areas where we might be able to apply more engaging content.
Low-Mid Fidelity Prototype
Sketches
We started the redesign process by sketching ideas, experimenting with layouts, and brainstorming how to create a more engaging website.
My team and I started the ideation process by individually brainstorming ideas and then sharing our ideas during virtual meetings. At each meeting we would make a list of design choices from each individual's sketch that we wanted to investigate further.
Various ideas we explored included incorporating an interactive hero image, utilizing persuasive icons inspired by Zearn, and theming the website around real-life tools that teachers commonly use, such as file folders.
Once we had some general ideas, each team member polished their designs in Figma based on feedback. We then met virtually again to continue ideating.
In our second meeting, we encountered a challenge: the designs weren’t delivering the level of engagement we had envisioned.
To address this, we returned to the drawing board, brainstorming new concepts that better aligned with the experience we wanted for the Teach to One redesign.
Ultimately, these sketches became the basis for our final redesign.
Wireframes
Next, we began wireframing.
Our goal remained increasing user engagement, which we aimed to achieve by wireframing more polished versions of the product while incorporating design choices that aligned with the Teach to One Roadmaps product.
Some notable additions include:
Thematic breadcrumbs.
Eye-catching graphic elements, such as a paper plane that subtly draw user attention to the website's footer, where they can sign up for the newsletter.
Click-throughs with interactive elements that also provide quick, informational text.
Style Guide
We collaborated with the Teach to One team to acquire essential elements such as graphics, color stories, font styles, logo guides, and more. Using these provided brand guidelines, we crafted an original style guide for our redesign.
Hi-Fidelity Designs
We next applied our style guide to our wireframes, resulting in a mid-to-high-fidelity design
Prototype
After applying style, my team and I started prototyping the kinds of interactions we wanted to see in the redesign.
The biggest challenge when prototyping was creating micro-interactions on Figma, mainly due to the complexity of our envisioned interactions.
We were able to overcome this challenge by using nested animated components.
After implementing our redesigned prototype, we began user testing the mid-fidelity prototype. To do this we tasked eight people with using the prototype.
Our user testing objective was to determine if users could easily navigate and understand the interactive features incorporated into the design.
Some feedback we recieved:
The "About Us" section is too heavy.
Button text is too small and difficult to read.
Some animations are unclear and confusing.
Integrating User Testing Feedback
Some users had difficulty understanding how to get to the next page from the home page, so we added a visible next button
We also implemented back buttons during our home screen sequence. This helped users navigate forwards and back to specific pieces of information, giving them more control.
We revised the About Us page to be less text-heavy and introduced a dynamic animated slideshow to enhance engagement on the page, accompanied by additional micro-interactions.
We also updated our "Schedule a Call" button, redesigned the bottom navigation bar, and increased the text size of primary navigation items to improve legibility.
Conclusion
Looking ahead, key next steps include additional testing, mobile and tablet optimization, expanding the design, and exploring advanced prototyping techniques. These steps aim to further enhance the usability and impact of the redesigned website.
The redesigned prototype of the Teach to One marketing website offers a much more engaging user experience by utilizing user-friendly design, interactive elements, and enhancements based on user preferences.
Visual appeal, easy navigation, and clear indicators guide users through the site, encouraging visitors to stay and explore.
The incorporation of enjoyable micro-interactions and design details aligns with the Teach to One product, creating an immersive and enjoyable journey.
These improvements collectively ensure a website that connects user needs with organizational goals, delivering a more compelling and engaging user experience.