Personal Project: AccuWeather
Redesigning Weather Components
Refreshing the User Interface of a Popular Weather Website
February 2025
I specialize in building UI design system kits in Figma. Although I am unable to share examples of projects from my current job, this case study highlights my approach and showcases my design abilities.
SERVICES
UI & Visual Design: Colors, Fonts & Icons, Design Systems: UI Components, Modes & Themes
Project Overview
Create a visually appealing UI design for AccuWeather's website that is both responsive and modern.
This case study examines the redesign of AccuWeather's desktop website. The focus is on updating the UI while maintaining core functionality.
I've been using AccuWeather for years, and I find the website to be extremely accurate and useful. However, the UI feels really outdated. As a personal project, I decided to experiment with redesigning AccuWeather's UI components to give them a more modern look.
Approach
Radar and maps buttons redesign
My design process focuses on simplicity, responsiveness, and incorporating modern design trends such as gradients and transparency. The goal was to create a clean, engaging UI with contemporary elements. The result is a streamlined, visually appealing weather experience.
I used an 8px grid system to create consistent spacing and alignment across screens, ensuring visual harmony and improving readability. The uniformity in spacing throughout the design results in a clean, intuitive interface.
Process
I began by analyzing the front-end code of the AccuWeather website and creating corresponding components in Figma to replicate its design. After completing each component, I duplicated them and initiated the redesign process.
It was fascinating to explore how the current AccuWeather design was built. The spacing feels a bit off and lacks consistency. I managed to find the SVG files for each weather icon and incorporate them into the components I was building. Despite being somewhat outdated, I was really impressed by the level of detail in each component, and replicating them proved to be a fun challenge. The most exciting part of the project was definitely the redesign phase, where I got to experiment with colors, fonts, and spacing. I especially enjoyed redesigning the weather icons.
As a designer, I’m often tasked with reimagining an existing UI to give it a more modern look. While altering the layout or user experience may not always be an option, I can still create a fresh, contemporary feel by focusing on elements like spacing, typography, and color.
Final Design
The final design maintains a sense of familiarity for the user and stays true to the brand, while presenting a much more modern aesthetic.
The final UI design is clean, intuitive, responsive, and minimal. The changes that I made are subtle enough that they won't disrupt the user experience, but it brings the design into a more modern and sofphisticated realm.
Product Images
