Develop a design system prototype using Figma. The design system is for an existing website, software, or mobile app, and aims to standardise and streamline the visual elements and components across different devices.
Work type
Independent project
Timeline
4 weeks
The design system required 5 foundational elements, including a cohesive set of at least 12 re-created icons and 5 components.
To establish a comprehensive visual design language, I focused on defining the colour palette, typography, language, and photography. For the components, I prioritised designing buttons, dropdowns, microinteractions, the timeslot picker, and search autocomplete.
My design system is based on the desktop view to create a familiar experience for users who frequently shop online. Data from the Commerce Commission's report from July 2021 suggests that many consumers still favour using desktop websites over mobile apps for grocery shopping. This indicates that users appreciate the desktop experience for its comprehensive features and ease of navigation.
To align my design system with New World’s website, I carefully reviewed its interface, breaking down key design elements. Using the inspect tool, I explored the font choices, header structure, and spacing patterns such as padding and margins. This process gave me a clear understanding of the site’s design language, ensuring my system remained consistent with the brand.
The result is a comprehensive and interactive design system that captures the essence of the New World brand. It incorporates key visual elements and utilises the friendly tone of voice that reflects New World’s signature Kiwi hospitality.
By unifying the visual elements, the design system ensures a consistent and seamless user experience across all touchpoints.
For consistency, future iterations should incorporate more of New World’s interactive components, such as the mailer and recipe sections of the website. Continually adding sections would enhance the design system's alignment with the full product offering.
The design system should be flexible enough to accommodate changing user needs and behaviours to ensure the system remains relevant in a dynamic digital landscape.
A key focus should be on ensuring the design system is responsive across all screens and accessibility features to meet WCAG standards. This would provide a seamless and inclusive experience for all users.
Breaking down website components in detail gave me a clear understanding of New World’s design framework. This deep dive into the website allowed me to create a design system that not only reflects the brand’s visual identity but also enhances the user experience across key touchpoints. A key skill I developed was reinforcing the foundations of a successful design system. Beyond usability, I focused on clarity, consistency, and scalability. By ensuring the system is intuitive and adaptable, it is well-equipped to meet New World’s current needs and scale as the brand evolves.
