Teach to One
UX/ UI Non-Profit Website Redesign
Other Team Members:
-
Donaldo Zarate-Rincon (UX/ UI Designer)
-
Omi Wilson (UX/ UI Designer)
Project Overview
Teach To One, founded by the non-profit organization New Classrooms Innovation Partners, is an organization dedicated to the research and development of web-based math learning tools. These tools are used by educators throughout the country to assist students learning math at a range of grade levels from 4th grade up to algebra.
Teach to One's flagship program is Roadmaps, a toolkit that establishes a personalized learning environment for students through the use of adaptive resources and comprehensive content.
The Teach to One website is a helpful resource for educators who want to use Roadmaps and other web-based learning programs to tailor students' learning experiences. The website provides information about the Roadmaps toolkit and allows educators to directly connect with the Teach to One team.
My Role
Over the course of three weeks my team and I assisted in designing and prototyping a new experience for visitors to the Teach to One website. We started by interviewing the Teach to One website team and analyzing product competitors. We next performed user interviews and conducted user tests. Finally, we incorporated Teach to One's existing logos, colors, and style rules into the development of a high-fidelity clickable prototype.
For this project we used Figma, Trello, Slidesgo, Dropbox, and SimilarWeb.
Defining the Problem
Stakeholder Interview
To understand the current website design and plan our redesign, my team met with key members of the Teach to One website team—Michelle Ward, Emily Doerr, Kelly Morgan, and Geneva Dill. During this meeting, the Teach to One team highlighted areas that need improvement:
-
Confidence: The Teach to One team wanted users to feel more confident in their product from the first time they visited the website.
-
Product Matching: The Teach to One team felt that the current website looked and felt much different from the actual Teach to One: Roadmaps product.
-
Micro-Interactions: The Teach to One team felt that user engagement could be improved with the addition of micro-interactions.
-
Navigation Bar: The website's primary navigation was out of date and featured a product that was no longer available.
-
Non-Profit Connection: The Teach to One team wanted their website to highlight the connection between Teach to One and New Classrooms, the founding non-profit organization behind their product.
We also discussed the mark of successful website redesign: more scheduled meetings with potential product users.
Website Analytics
After the meeting, we used Similarweb, a Chrome extension that analyzes web traffic and performance, to assess the Teach to One website homepage.
Using this tool we were able to see that:
-
The traffic was almost evenly divided, with 46.54% of users accessing the site via mobile and 53.46% via desktop.
-
On average, users spent one minute on the website.
-
The user bounce rate, or the percentage of website visitors who navigate away from the site after viewing only one page, was high at 72.53%.
Key Takeaways
After meeting with the Teach to One team and analyzing the site, it became clear that our redesign needed to focus on:
-
Boosting user engagement.
-
Increasing the average time spent on the site.
-
Lowering the bounce rate.
My team and I felt that by improving these metrics, our redesign could help attract and retain Teach to One users.
User Research
Before diving into redesign ideas, we first wanted to identify our user motivations. Our goal was to balance the needs of Teach to One with what potential users are looking for. We wanted to know what information users prioritized when visiting the teach to one website and what information might motivate users to contact the Teach to One team to utilize the Roadmaps toolkit.
User Interviews
First we considered the demographics of teachers who might be interested in using Roadmaps and came up with three groups:
-
Elementary or middle school math teachers.
-
Parents of children in elementary school.
-
Math tutors for students in elementary or middle school.
We then conducted interviews with four potential Roadmaps users, including:
-
One teacher with experience in the public school system currently teaching SPED Pre-K.
-
A teacher currently working at a Montessori school teaching 3rd grade students.
-
Two parents of elementary-aged children.
Interview Insights
From these interviews, we learned that educators and parents want confidence in supporting students on their math learning journey. This confirmed our belief that an engaging yet informative website would help emphasize the benefits of Roadmaps for students and persuade potential users to schedule a call with the Teach to One team.
Competitor Analysis
We also wanted to look at Teach to One's competitors to get familiar with other learning software products and understand how their products are marketed towards educators.
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
We observed that the Zearn website provided a more engaging experience. The organization of informational content moved users through the site using compelling language and icons. On top of this, many buttons linked to internal pages rather than serving as direct call-to-action buttons, keeping users on the site for longer.
While the Teach to One website experience was not as engaging as Zearn, it presented more comprehensive and informative content. However, this content was often difficult to find as navigating the Teach to One website was difficult due to the way content was organized on the website.
Research Synthesis
After finishing our user research, we analyzed the data to understand the needs of educators and administrators. We then created targeted user personas and made design decisions that matched user expectations. Our goal was to ensure the updated Teach to One website met both the organization's requirements and the needs of its users.
User Persona
My team and I developed our user persona by first consolidating insights from our user interviews. We then organized our insights, drawing key insights from each organizational category. This enabled us to focus directly on the goals, needs, and frustrations of a typical user.
Our user persona is a sixth-grade public school math teacher who is passionate about using innovative teaching methods. She faces challenges in providing individual attention due to diverse learning styles and is exploring options to help students learn, such as supplemental math learning programs.
As an educator, her main goal is to help students learn and enjoy math while fostering their confidence in the subject.
Her personality reflects strong advocacy for her students, evident in her volunteer role as a street crossing guard, showcasing her commitment to the school community.
Key Takeaways
Through our research we were able to find a common insight:
Teachers and school administrators want to feel confident supporting their students in math. When they visit the Teach to One website, they seek assurance that it provides effective and engaging educational content while ensuring a safe environment for student use.
Wireframing
User Workflow
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.
In analyzing the existing website, we observed that users could easily navigate from page to page, with each page guiding them towards scheduling a call with the representative team. However, our aim was to enhance the user experience, taking them on a journey through the pages for a more engaging and seamless interaction.
Wireframe 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 a pool of ideas, we polished our designs individually in Figma, again meeting virtually to share our wireframes and continue ideating.
In our second meeting, we encountered a challenge in the redesign process- we didn't feel like any of our designs were engaging in the way we had envisioned.
To overcome this challenge, we decided to start fresh, sketching new ideas that captured the experience we wanted for the Teach to One redesign.
Ultimately, these sketches became the basis of our final design.
Wireframing
Once we settled on an idea we began to wireframe with Figma.
As we began wireframing, our focus was on making the website more engaging. We aimed to achieve this by incorporating enjoyable micro-interactions and design details that align with the Teach to One product. This involved adding thematic breadcrumbs resembling a car, reflecting Teach to One's flagship software, Roadmaps, as well as a newsletter sign-up section featuring a paper plane to draw attention to the sign-up area.
Mid-Fidelity Wireframing
As my team's ideas began to come together, we were eager to begin adding color, so rather than user test and then add color and detail, given the scope of time, my team and I opted to add color to the prototype and user test with a mid-fidelity model.
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.
Applying Style to Wireframes
We next applied our style guide to our wireframes, resulting in a mid-to-high-fidelity design
Prototyping
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.
This is one of the components we designed, the wheel and text, which appears as a section on one of our prototyped pages. It encourages users click on one of the four icons on the wheel to reveal more information about the Roadmaps product.
This component also contains another component, the wheel itself, which contains another component, the icon buttons. By nesting components we were able to streamline the process of UI development.
Here is an example of our mid-to-hi-fidelity prototype, which contains multiple multi-layered components:
User Testing
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:
Key Takeaways
Users identified issues with the clarity of certain interactive animations. Users also felt that the homepage sequence needed back buttons in order to improve navigation. People felt that the "About Us" section was too-text-heavy and suggested we either reduce the text or enhance its presentation.
While users generally found this iteration of the website engaging, they pointed out inconsistencies in button colors, text spacing, and styles.
Integrating User 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-heave 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.
By integrating user feedback and changing aspects of our design, we were able to develop an engaging prototype that allowed users to have more control over their experience visiting the Teach to One website.
The Final Prototype
Over the course of this design project, my team and I aimed to enhance the Teach to One website experience through UI engagement.
We collaborated with the Teach to One team, conducted user interviews and competitor analysis, sketched and designed a mid-fi prototype which was refined during user testing, and developed an engaging prototype that aligns with both user expectations and the goals of the Teach to One organization.
Future Development Opportunities
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.
In Conclusion
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.
