Montessori Collective: redesign of existing website
Building trust with educators by empathizing with their needs, showcasing success stories, and providing free content.
Team:
Me; sole product designer
Director Emily Madison; business and product owner
Tools:
Figma, Figjam, Maze, Optimal Workshop
Deliverables:
User research, background research, new logo, Figma prototype
Duration:
Part time, June-August 2022
Educators starting or growing a Montessori program need to hire an experienced consultant they can trust.
USER PROBLEM
Original Montessori Collective website
Montessori Collective is expanding and needs to generate new leads and donations.
CLIENT PROBLEM
The Denver, CO education consulting group needed a complete revamp of their existing site
I was excited to leverage my work in education and design to help them demonstrate value for educators, the primary customer
Current status: Final designs approved, implemented, and live on website
A modern site that puts educators’ needs first
THE SOLUTION
Revamped IA and copy; modern branding and visual design; success stories; clear CTAs; an embedded contact form; and reorganized free classroom resources.
These changes will:
Help users quickly find what they need
Build trust
Prove services are a worthwhile investment
Resulting in:
Increased conversion rate
Increased donations
What is Montessori? Why do educators need help?
BACKGROUND
Montessori is a progressive, student-led approach to learning
Public schools don’t usually offer Montessori because training is expensive and integrating it with traditional standards is hard
The challenge
Montessori can help close the achievement gap in public schools
Demand for Montessori public education is growing, especially in CO which has the most number of programs in the US
The opportunity
Problem Space
CLIENT MEETING
Defining the goals
Increase new leads
Increase donations
Showcase new services
Meeting with Emily, the Director, we defined the business’s goals:
Public school teachers need support creating change in their classrooms
They need quality classroom resources they can trust
They want to quickly and easily get more information about creating a Montessori program
We also discussed user goals and hypothesized problems:
After this, my first task was to validate the hypothesized user goals and problems.
Talking to 5 educators to understand beliefs, needs, and problems
USER INTERVIEWS
Two key insights from educators who have worked with consultants:
To generate new leads and donations, Montessori Collective needs to build trust, showcase success, and prove why they are worth the investment.
Communicating who the product is for
USER PERSONA
Using insights from my interviews, I created a user persona:
Jillian wants to change her teaching methods to help struggling students, but believes that consultants are expensive and won’t understand her community’s needs.
Auditing the website to understand its problems
SITE AUDIT
The original site with my suggested improvements for Montessori Collective. Click each to view a larger image.
I found multiple problems including:
Exploring 7 competitors to understand the market and user expectations
COMPETITIVE RESEARCH
Competitors have features that help users understand the organization and easily make contact. Currently the Montessori Collective site lacks these.
Key insight
Most Montessori nonprofits and consulting organizations also have a dated UI and visual design patterns
There is a lot of room for Montessori Collective to demonstrate value for educators by making simple changes to their site like adding a contact form, About Us page, and links to donate
Solution Space
GOAL SETTING
Based on my work in the problem space, I outlined goals for my solution:
What now?
Testing the new information architecture before building it
TREE TEST
I had ideas for the site rearchitecture but didn’t want to move ahead without testing this new structure for the redesign. I ran a tree test with Optimal Workshop.
Key finding
On all 5 of the tasks, at least 6 of 7 users had direct or indirect success.
This gave me confidence to move ahead knowing that my proposed new structure was logical and intuitive
Mapping the site
SITE MAPPING + SKETCHING
I was confident my new site architecture was intuitive but I needed to plan how each page or section would be organized, so I created a site map in Figjam.
Working from the site map, I sketched some ideas for Montessori Collective to review.
Rebranding Montessori Collective with a modern, open look
BRANDING
Guided by conversations with the client, I created a mood board to guide branding decisions for images, typography, color palette, and logo redesign.
I sketched ideas for a new logo that would improve readability and connection to the brand identity and Montessori Collective’s Director landed on this:
Building the designs with wireframes
WIREFRAMING
Montessori Collective’s Director approved the sketches, so I moved ahead to wireframing
Click each image to view larger size.
Landing page
About us
Free resources
Download form
Contact form
Sign up form
MOCKUPS AND PROTOTYPE
High fidelity mockups
Landing page
Improved hero section with clear CTAs to get users interested and help them find what they need
Rewrote UVP and services section up so users understand the what and why
New success stories and testimonials to build user trust
Partner information to build social proof
Footer section to help users find what they need
Contact page
New embedded contact form so users don’t need to leave the site
Resources page
All free classroom resources combined on one page with new filtering capability
Testing my prototype and validating my solution
USABILITY TESTING
Using Maze, I ran a remote usability test with 3 tasks based on project goals with 14 users :
Submit the contact form
Locate, filter, and submit the download free resources form
Submit the study group form.
100% of users completed all three tasks, but during the last task, users had problems filtering and a 50% misclick rate, confirmed by a Maze-generated heat map.
Key insight
Users were uncertain how to exit the filter dropdown and how to clear the filter
Once users closed the filter, there was no visual cue for which subject they had filtered on
Users found the horizontal filter distracting when expanded because it hid some card images
Redesigning and retesting the filter to improve usability
USABILITY TESTING UPDATES
I studied common UI patterns to redesign my filter so that users would know which filter was applied and how to clear the filter.
Vertical filter, not horizontal
When the filter is applied, users now see pills at the top of the page which they can use to clear the filter.
Visual cues
Users will see the full range of options and easily see which filters are applied.
Then I ran another remote usability test with Maze to assess how intuitive it is to apply and remove filters with my new design.
100% of users completed the two tasks to apply and remove the filter. Importantly, there were no misclicks, as shown in the heat map below.
Key finding:
Users reported that the filtering was ‘simple and straightforward’ and ‘having the check boxes and tags were helpful in remembering what was filtered.’
With this information, I felt confident sharing my high fidelity mockups with Montessori Collective and discussing next steps.
Reflection and what’s next
1. Set realistic timelines with clients
Because I was working on this project over the end of the school year and into the beginning of the next, the client’s busy time, so it could be challenging to meet and get design decisions signed off on.
In the future, I plan to set client expectations early about timelines and steps in the design process to keep the project moving forward.
This was my first experience with remote user testing. The first task was for the user to explore the site, not anticipating Maze would count this activity as misclicks and increased average time spent on the screen.
Next time, I will separate these activities to get more accurate data.
2. Adjust remote user testing
When I was designing the filter, to save time, I based my design off of one nonprofit’s site. Users had difficulty with that UI and I spent more time researching common filter patterns, I realized just how much my design was off.
Next time, I’ll take my time doing this research during the sketching phase.
3. Study common UI patterns
What’s next?
Final designs approved, implemented, and live on website.