Client
Year
Role
Duration
1 month
Agency
RedRadix
I handled the UX/UI design of all materials, the landing page, and prototyping, as well as detailed handoff documentation for developers. I also crafted the storytelling and copywriting to ensure an immersive learning experience.
About the client
CLASS(E) is a code academy by developers for developers created by RedRadix, a company with over 10 years of expertise in the industry.
The challenge
The main challenge was crafting the entire storytelling for the materials, writing all the UX copy, and delivering detailed assets and handoff documentation for asynchronous use by developers.
Time constraints and priorities meant that illustrations were sourced from resource libraries. Additionally, another requirement was to use Google Fonts.
The goal was to create engaging designs that made learning web layout enjoyable, while maintaining a consistent UX/UI experience across all tasks.
The process
01. Visual Research
I explored existing UI patterns and references, studying futuristic themes in gaming interfaces to inspire the design.
02. Storytelling & Concept Creation
The creative freedom allowed me to develop the narrative of “Alter,” a fictional video game company launching “Last hope,” an intergalactic survival adventure.
The central concept revolves around humanity facing extinction due to resource depletion on Earth, leading to a robotic expedition to save the planet. Each design element—from the landing page to the boarding pass and newspaper—supports this story.
The robotic characters, Maeve, Lis and Dana, not only contribute to the futuristic aesthetic but also engage users emotionally in the mission to save humanity.
03. Design Exploration
Experimented with Google Fonts, color schemes, and illustrations to create a cohesive, futuristic aesthetic.
04. Style Guide & UI Kit
Designed a modular set of components based on atomic design principles, ensuring scalability and reusability across different course exercises.
05. Newspaper Design
Styled a mock futuristic newspaper with a focus on visual storytelling, incorporating responsive grid layouts and carefully selected typography for readability.
06. Boarding Pass Component
Created a futuristic boarding pass that followed the visual and narrative coherence of the overall design.
07. Animation Loader
Designed and animated a custom loader, providing detailed documentation on timing, easing, and direction.
08. Custom Form Design
Developed a form with a custom checkbox, balancing both visual appeal and functional clarity.
09. Landing Page Prototype
Designed and animated the landing page for “Last hope,” incorporating parallax transitions to challenge students and give them the opportunity to apply their acquired knowledge during the course.
The solution
The final design materials created for the course included a cohesive set of assets that seamlessly integrated storytelling and visual consistency. Each element, from the landing page to the boarding pass, reflected the narrative of “Last hope,” ensuring an immersive learning experience for students.
Most of the illustrations used in the design come from resources by Craftwork Design, Storytale, and Freepik, and were carefully modified to match the visual style and narrative cohesiveness.
Conclusion
The designs received positive feedback, with CLASS(E) highlighting the materials as a key differentiator. Students noted increased motivation and engagement, emphasizing how the immersive, well-structured approach made the learning experience seamless and inspiring.