Client
Year
Role
Duration
6 weeks
Agency
RedRadix
As lead UX/UI designer, I handled wireframing, design tokens, a user-friendly design system, and a custom illustration to enhance visual appeal. I ensured smooth collaboration with developers and a seamless experience for template users.
About the client
Penpot, developed by Kaleidos, is an open-source design and prototyping tool that empowers designers and developers to collaborate seamlessly.
With a focus on bridging the gap between both disciplines, Penpot has rapidly gained popularity, with over 250k users worldwide from its base in Madrid, Spain.
The challenge
Penpot needed a toolkit that would not only showcase the power of their API but also provide an exemplary UX/UI experience. The project aimed to streamline the creation of event landing pages by offering a flexible, easy-to-customize template.
The design had to be modular to accommodate different event needs (online, hybrid, or in-person) and fully adaptable to diverse brand identities. Additionally, this was my first time using Penpot, so I had to quickly adapt to the tool and master it in a short timeframe to deliver a high-quality result.
The technical integration of design tokens into the website’s code required close alignment with developers to ensure real-time synchronization.
The process
01. Benchmark & Wireframes
I started by exploring the Penpot tool and researching various event websites. The goal was to define a set of modules that could serve a wide range of event types.
Creating a flexible wireframe structure that adapted to different event scenarios, such as online, offline, or hybrid events, and whether registration was open or closed.
02. Design Tokens
Developing typography and color tokens was essential. I worked closely with developers on implementation and naming, enabling seamless switching between corporate typography styles.
We tested fonts with matching x-heights for added flexibility.
03. Landing Page Design
I focused on maintaining an organized structure, with careful attention to layer and page naming for easy modifications.
Penpot’s flex-layout feature and components were utilized to automate actions and ensure consistency across the design.
04. Illustration
To make the landing page more visually engaging, I created custom illustration that complemented the overall design and added personality to the template.
05. User Documentation
A detailed tutorial was designed, making the template intuitive for any user, whether they had previous experience with Penpot or not.
This self-explanatory document guides them through adapting the design tokens to their brand’s identity.
06. Testing
We conducted several tests with brands from RedRadix’s ecosystem to ensure that the tokens and components worked smoothly across different environments.
The solution
We created EasyFest, a customizable event website template built with modular components and design tokens for typography and color. This allowed users to quickly adapt the site to match their brand identity.
A key part of the solution was a detailed tutorial that guided users step by step, explaining Penpot’s interface and how to modify each part of the design. This made it easy to adjust the look & feel to any brand, even for users with or without prior experience using Penpot.
The template was intuitive, enabling users to confidently create their event website.
Conclusion
EasyFest was a great success, presented at the Ubuntu Summit 2023. The template received positive feedback for its ease of use, especially regarding the design tokens and the smooth collaboration with developers, which allowed for effortless brand customizations.
