Could UI Improvements Lead to More Conversions for Educational Software?
Tools: Figma • Notion
Skills: Research • Web Design • Branding • Collateral design
Overview
I was approached to redesign a marketing website for an educational platform. The goal was a complete overhaul of the site to address major usability and design challenges. As the sole designer on the project, I worked closely with the marketing team to reimagine the site and create a more user-friendly and visually engaging experience.
Problem
The original site had been launched quickly under duress, leaving several critical issues:
Usability Challenges: Users struggled to navigate the site, with key information hard to find or buried in confusing layouts.
Poor Site Architecture: The pages were disorganized, and the overall structure didn’t support a logical flow of information.
Outdated Design: The site’s look and feel didn’t align with the brand or meet modern design standards.
Complete Overhaul Needed: Both the layout and content needed to be reconfigured, requiring a fresh approach to site architecture and design.
These challenges called for a strategic redesign to address user needs, improve navigation, and refresh the site’s visual identity.
Site Architecture
Taking Inventory
I started by taking inventory of the existing site architecture. I analyzed the current structure, identifying areas for improvement. I collaborated with the marketing team to understand their priorities and determine what content and pages were most critical. To gather inspiration, I also researched other proficient software platform marketing sites to benchmark best practices.
The before image of the educational website (on desktop) with notes on the site navigation
Using this information, I created a new site architecture diagram that streamlined the structure and improved the flow of information. I presented this to the team, gathered feedback, and iterated on the diagram until everyone was aligned.
Rebranded the "Products" section as "Platform" to better showcase the different options available.
A new "Solutions" folder was created to cater to specific user groups, such as teachers, administrators, and students, or allow searches by state.
The "Resources" folder was streamlined to include training materials, a knowledge base, and a news and blog section.
Consolidated company-related content into a "Company" folder, housing pages like About, Contact, and other essential information.
The new site architecture diagram
Once the site architecture was finalized, I built out the site navigation, ensuring it was intuitive and reflected the new structure. This step laid the foundation for the rest of the redesign, providing a clear framework for the project.
Desktop designs for the new navigation on the educational site
Design
Design System
With the site architecture finalized, I moved on to the design phase by creating a design system in Figma. This included revamped colors, fonts, and UI elements to modernize the site and align it with the brand’s vision.
To ensure clarity across the site, I organized the design system and pages by specific color assignments. Elementary, middle, and high school levels each had their own background colors, main colors, and gradients. Additionally, two sister products were given distinct palettes, maintaining differentiation while adhering to the overall design system.
A sampling of some of the design system for the educational website
Site Design
Once the design system was in place, I started reworking the pages of the website for desktop and mobile. I tackled the redesign section by section, completing parts of the site and sending them over to the marketing team for review. This iterative process allowed me to gather feedback, make adjustments, and ensure each part aligned with the team’s vision.
After refining each section, I moved on to the next, keeping the project moving smoothly while maintaining a cohesive design throughout. Once all the pages were finalized, the complete set of designs was ready for implementation.
One of the site state pages before the redesign and after, providing clearer CTA's, easier navigation through grades, and revamped colors.
Original webinar cards vs. new webinar cards with less copy and restructured layout.
Additional Contributions
Beyond the website redesign, I supported the company in other areas to enhance their overall brand and user experience.
Designed trade show banners to align with the refreshed branding, helping them make a strong visual impact at events.
Provided redesign suggestions for their platform to improve usability and aesthetics, ensuring a more cohesive experience for users.
Offered feedback and recommendations for the redesign of their sister site, contributing to a more unified and polished digital presence across platforms.
The trade show banners in action!
Outcome
I consider this project a great example of web design collaboration under a tight deadline and with a quick turnaround. The whole team was proud of the work we accomplished together. While the site has not yet been fully redesigned, some elements of the new design have already been incorporated into the existing website. Go check it out here!