Design system creation and prototyping for Uxcel
University project
Role
UX Designer
Timeline
Dec 2023
Tasks
Design system
Interaction design
UI design
Tools
Figma
Figjam
Uxcel started in 2020 to help professionals and product teams learn practical skills in UX Design, and have since expanded to include PM and AI skills. They partner with leading experts to bring real-world industry knowledge in their bite-sized personalised courses and resources.
The project
Defining a reusable design blueprint for Uxcel
As part of the 402 Digital Product Design course in the Master of User Experience Design programme, we were given two key tasks:
Select an existing software and evaluate their visual design language and guidelines, and recreate a set of icons and UI components.
Design a website and create a clickable Figma prototype to present the design system and recreations.
I chose Uxcel as it’s a valuable tool I personally used to teach myself the UX Design process and heuristics principles before I decided to complete a Masters degree.
Website design containing the Uxcel design system in a clickable Figma prototype.
The fun part
Reverse engineering the Uxcel learning product
I analysed the colour, typography, language, and illustrations from the Uxcel product to develop a set of visual design guidelines for the design system.
As part of the Figma prototype, I also recreated a set of 12 icons and commonly used UI components such as buttons, cards, dropdowns, sheets, tabs, and tooltips.
Reflection
Strengthening my understanding of design systems
I enjoyed working on this project as it significantly improved my understanding of design systems, on top of my existing knowledge of atomic design principles. It also allowed me to improve my UI design and prototyping skills in Figma, as well as how designs translate into code.
As part of the project, I also took a look at design systems by companies such as Atlassian, Shopify, Google Material Design, Sainsbury’s and Zendesk, to explore how they each structure design tokens, components, and content design, as well as how they structured their documentation websites.
Overall, I’m proud of the analysis I did on Uxcel to create a working prototype of a design system for their learning product.