Learnovation-- August 2024
Role
User Experience Designer
Tools
Figma, Adobe Illustrator
Duration
5 days
In late August, I joined Learnovation as part of a second wave of designers to help redesign their website. With just five days until the deadline, I quickly noticed a problem: the designs weren’t optimized for developers, making their work more difficult.
As the User Interface designer on this project, I worked closely with the team to streamline the development process. I created a clear, easy-to-use design system to build the foundation for the website and documented everything to ensure a smooth handoff from design to development.
The context — what I spotted
In late August, I jumped into a project as part of a second wave of designers tasked with revamping the Learnovation website. It was crunch time and the deadline was just five days away, but right away I noticed a major problem….the designs were not optimized for development.
THE PROBLEM
The website designs were not optimized for development at all!
Chaos in the details
Many components lacked consistency, like the navigation header’s margin differing from the hero section and its oversized 344px height. This lack of uniformity made it hard to maintain a cohesive design and slowed down both designers and developers.
Fix the Impossible in Five Days
As soon as I spotted the issue, I alerted the stakeholder, explaining how the design’s lack of structure could cause bigger problems later. They asked for a solution, so I proposed a streamlined design system with clear documentation—while also redesigning the entire website. The challenge? We had just five days to do it all.
THE CHALLENGE
Create a cohesive design by building a design system and redesigning the entire website—all within 5 days.
Setting up breakpoints
The first step was establishing breakpoints and grids for desktop, tablet, and phone to ensure the website would be responsive across all devices. I prioritized this because the original design was set at 1923px, which isn’t ideal for development.
Using the 4px spacing
Next, I created tokens using the 4px spacing rule to keep everything consistent with the grids I set up. I made sure to do this early on because if there are any spacing inconsistencies, it can be confusing for both designers and developers
Setting up uniform type sizes
After that, I turned my attention to typography, ensuring that all headers and body text were consistent in size and thickness throughout the website. This step is important because having uniform typography can really enhance the design, making it look cleaner, more cohesive, and more professional.
Tokenizing our styles
Finally, I reviewed the original design and added elements like colors, focus rings, and shadows to our design system. This helped me stay true to the work of the first wave of designers while keeping track of which elements to keep and which ones to remove.
Pivoting to a 1-page website
With four days left, I pivoted the team from a multi-page site to a one-page landing site to meet the deadline. This ensured everything was polished, aligned with our design system, and, most importantly, met our deadline—though it was going to be tight.
Shrinking the Super-Sized Nav
The first element I redesigned was the Header Navigation. The old design was too big (because of the logo size) and didn’t follow standard sizing for header nviagation.
Taming the Oversized Hero
I redesigned the Hero section to fix misalignment and oversized dimensions that could cause development issues. I adjusted margins to fit the grid, added 4px spacing for better balance, and combined graphics into one image to prevent shifting on resize.
Polishing the About Section
I refined the About section by ensuring consistent paragraph width and image sizes, cleaning up the type hierarchy, and removing shifting elements. To add flair, I included fun icons and checked with the stakeholder to confirm the text copy.
Making the Newsletter hot, hot, hot
I redesigned the Newsletter section to feel more inviting rather than discouraging. I switched the background to purple for visual interest, added subtext for clarity, and included an input field to make subscribing easy.
Refreshing the Contact Section
I redesigned the Contact section to improve its visual appeal. Rather than cramming everything into one frame, I grouped elements separately and used negative space for better organization. This made the layout cleaner and more engaging.
Giving the Footer a Purpose
I completely redesigned the Footer to make it both fun and functional. Using company colors, I added key details like navigation tabs, contact info, and a call-to-action for donations. This made it more engaging while also helping the company convert more users.
Wrapping Up the Redesign
By day four, I had finalized the copy, documented everything, and added developer notes. On the fifth day, I completed the website and handed it off. After a fast-paced sprint, I’m proud of how the Learnovation redesign came together.
If Time Had Allowed...
Design System Improvements
With more time, I would have fleshed out the design system even more, including things like fail states, comprehensive branding guidelines, and some interactive elements.
Better Developer Collaboration
Due to time zone differences, I wasn’t able to communicate directly with the head developer. I relied on my experience to make the design developer-friendly, but closer collaboration would have made the designer-to-developer handoff much smoother.
More Time for Iteration
I love iterating and A/B testing, but the tight timeline didn’t leave much room for that. In a perfect world, I would’ve had more time to experiment and improve based on real user feedback.
