As part of the redesign, Burger King had recently undergone a major brand identity transformation. This included a new logo, updated illustrations, and the color palette. These changes required a careful balance between staying true to the brand’s essence while ensuring the new design was consistent across all platforms.

Working with the updated visual elements, I needed to adapt existing images and create new ones that aligned with the new identity. Since the previous design was drastically different, it was crucial to redesign or rework images to match the brand’s new direction. By collaborating closely with Burger King’s team, I ensured that the images reflected the modern, fresh look while maintaining a strong connection with the brand’s core values.This is the color palette used in the design. All colors changed after the brand identity change of Burger King.

After gathering user insights and defining the site’s structure, I began working on the wireframes. Wireframing is a critical part of the design process as it allows for the early validation of ideas before investing time in high-fidelity designs.

I experimented with various wireframe combinations to ensure that the research insights were fully incorporated into the design. These wireframes served as the blueprint for the rest of the project, defining the layout, functionality, and interactions that would shape the user experience.

To ensure consistency, the wireframes were validated with developers, project managers, and Burger King’s designers working on other initiatives. This collaboration helped ensure that the wireframes were both functional and aligned with the overall vision.

Once the wireframes were finalized, the next step was to develop a compact design system in Figma to ensure consistency across all touchpoints and streamline the design process. The system was built according to best practices and usability guidelines, drawing from sources like Nielsen Norman Group. Alongside reusable components, I created a detailed style guide outlining the visual foundations of the platform, including grids, color palettes, typography, spacing, and iconography. This helped establish a cohesive visual language and provided clarity for both design and development teams. Some of the chroma used:

To bring the interface to life and enhance user engagement, I also designed a range of animations and microinteractions tailored to key user flows. These added a sense of responsiveness and polish to the experience while supporting usability. The system was intentionally designed to be flexible and scalable, enabling efficient reuse of elements without unnecessary duplication or detachment, which helped reduce design debt and ensured visual consistency throughout the site.