Role
User Interface Designer
Tools
Figma
Duration
5 days
Context
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.
How I added value
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 Problem: Inconsistent design makes development and collaboration difficult
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.
As you can see, many components lacked consistency. For example, the margin size for the navigation header was different from the hero section, and the header was an oversized 344px tall. This was just one of many examples of the design's lack of uniformity.
This disorganization was slowing down both designers and developers, making it hard to maintain a cohesive design and difficult for developers to implement.
Solution: Develop a design system for cohesive design and development
As soon as I spotted the issue with the designs, I let the stakeholder know right away. I explained that the current setup wasn’t developer-friendly and could cause even bigger headaches down the line if we didn’t fix it. Once they understood the problem, they asked me for a solution.
I suggested creating a streamlined design system with clear, easy-to-follow documentation—and then applying it to the website to make everything more developer-friendly and cohesive. The catch? We had to build the design system and redesign the whole website, all in just 5 days!
THE CHALLENGE
Create a cohesive design by building a design system and redesigning the entire website—all within 5 days.
Starting with the A,B,C's of a design system
I knew I couldn't afford to be sloppy here, so I had to get it right. This meant building the design system from the ground up, starting with the basics: grids, spacing, typography, and styles like colors and focus rings.
By defining these elements, I could fix most of the inconsistencies in the design. It also helped both designers and developers stay aligned, ensuring the coded website followed the design accurately.
Setting breakpoints for Desktop, tablet and Phone
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 to work with our grids
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 a uniform sizing for our typgoraphy: Header, body text, etc.
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 like colors and focus rings
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.
Deep in the website redesign trenches
I spent the first day focusing on the design system and making sure that it was solid. Now, all I had to do was apply those foundations into our website. And, with the deadline looming, I knew I had to make some hard decisions on the designs and change things around so that we could actually hit the deadline.
Pivoting from a multi-page website to a 1-page website
With just 4 days left, I realized we couldn’t stick to the original plan of a multi-page website. Although that would have been ideal, time wasn’t on our side. I had to pivot the team to shift our focus to creating a one-page landing site instead.
This way, we could make sure everything was polished, aligned with our design system, and, most importantly, we’d meet our deadline—even if it was going to be tight.
Once the team was on board, I quickly redesigned the key sections to make it happen.
Redesigning the Header Navigation
The first element I redesigned was the Header Navigation. The old design was too big and didn’t follow standard sizing for headers.
To fix this, I resized the logo (which was taking up more than half of the header height) and applied the 4px spacing from our design system to make the spacing between elements more uniform. I also made sure the navigation bar fit properly within our desktop grid.
Redesigning the Hero Section
The second element I redesigned was the Hero section. The original layout was misaligned, and its size was too large to fit within the 1280px desktop width, which could have caused issues during development.
To fix this, I adjusted the margins to align with the grid system and added 4px of spacing for more breathing room, so it didn’t feel so cramped. I also combined the graphics into a single image to prevent them from shifting when the site is resized.
Redesigning the About Section
The third element I redesigned was the About section. There wasn’t a lot that needed changing, but I made sure the paragraph width and image sizes were consistent. I cleaned up the type hierarchy using our design system and got rid of any elements that could move around when the site is resized (like the blurred purple background behind the picture).
Once that was all sorted, I added some fun icons to liven things up a bit. I also checked in with our stakeholder to make sure they were happy with the text copy.
Redesigning the Newsletter Section
The fourth element I redesigned was the Newsletter section. It took a bit longer because I wasn't happy with the original design; it seemed to discourage users from subscribing instead of inviting them to sign up.
To make it more engaging, I changed the background to purple, helping it stand out and adding some visual interest. I also included subtext below the header to give users more context about what they’re subscribing to. Finally, I added an input field so users can easily enter their emails, which serves as the call-to-action for this section.
Redesigning the Contact Section
The fifth element that I redesigned was the Contact section, there weren’t too many problems, but I wanted to give it a visual refresh. Instead of cramming everything into one frame, I split it into different groups, using negative space to separate them. This made it look cleaner and a lot more interesting.
Redesigning the Footer Section
Finally, the last element I redesigned was the Footer. I knew that it needed a complete overhaul because the original design didn’t get the attention it deserved. I believe a footer can be both fun and functional, so I aimed to make it visually appealing while also helping the company convert more users.
To add interest, I used the company colors and included important details like the navigation tabs from the header, allowing users to easily navigate the site from the footer as well. I also added contact information, including the company’s phone number, email, and location. Lastly, I included a call-to-action for donations since they’re a non-profit. This way, users who feel connected to the company can easily donate and show their support.
After many days of designing and iteration, here’s the finished product!
After spending the second and third days redesigning the website and integrating the design system, all that was left to do was fix the copy and document everything (which included adding comments for the developers to help them understand our vision). I completed all of that by the fourth day.
Once everything was tidied up, I finished the website and officially handed it off by the fifth day. After a hectic 5-day design sprint, I’m really proud of how the final designs for the Learnovation website turned out.
Designing Under Pressure and Learning Along the Way
This project was my first experience building a design system in an agile environment, and I learned a lot from it. While I’m proud of what I accomplished under tight deadlines, there’s always room for improvement. Here’s what I would have done better in an ideal scenario:
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.
