2024 Intern at Rubrik
Aura Visual Enhancement
Duration: 4 weeks
ROLE: visual designer
TEAM: design system team
Rubrik’s design system Aura needed a redesign of the hero section across all component pages to help users quickly understand the purpose and distinctions between components.
How can we create a series of consistent and easily maintainable visual elements while ensuring each page retains its unique identity?
Design Scope
The goal was to enhance the current design of 24 component pages by introducing more visual appeal and ensuring alignment with Aura’s design language.
I was responsible for the exploration of visual and motion design, iterating 4+ times to refine the concept, guided by Binan (senior designer and my mentor) and Reuven (design lead).
Final Deliverable
Compared to the previous version, the new (not yet finalized) version includes four key updates:
Increased font size, added component examples, aligned color style with the brand tone, and introduced motion for enhanced visual appeal.
Brfore
After
Illustration Exploration
In the first 2 rounds of exploration, I transformed the existing component card element into a master illustration design. As components changed, the background illustration changed to a similar shape.
PROS: This approach emphasizes component content and enhances visual storytelling.
CONS: High manual effort for developers and scalability challenges for the design system team, especially with component modifications.
Master Design
Component card
Version 1 hero section design
Version 2 hero section design
Color Exploration
In the 3&4 rounds of exploration, I simplified the illustration into a unified rolling background, focusing on building a gradient guideline and using color to differentiate component pages.
PROS: The high contrast and saturated gradient background enhance visual appeal, while being easy to maintain and scalable.
CONS: Although all colors are from the brand color palette, having 40 pages with different color may still lack tonal alignment and consistency.
Master Design
Gradient Guideline
Version 3 hero section design
Version 4 hero section design
Motion Exploration
To add more dynamism to the background visuals, I explored different ways of illustrating motion to find the most eye-catching yet least distracting approach for the audience.
Linear Loop
Zoom-in and zoom-out
Opposing
Ease-in and ease-out
Say Something
For the latest final delivery version, we removed the illustration and focused the visuals on the key branding color gradient. Throughout the design process, I learned that maintaining a balance between creativity and consistency is key to sustainable design. I am truly grateful for the team's support throughout the process, providing me with insightful guidance and valuable learning experiences.