rj sunglasses — Initial Digital Design System
A concept design system translating the brand identity into a scalable e-commerce experience across desktop and mobile.
Case Study
RJ Sunglasses is an initial digital concept developed to help a prospective eyewear client visualize how their athletic, outdoor-focused brand could translate into a cohesive digital experience. The goal was to quickly establish a visual direction and demonstrate how an initial design system could support a website and mobile experience before moving into a larger-scale design and development phase.
Approach
From visual direction to scalable system
With the goal of creating a focused concept quickly, I established the visual direction first, then used Figma to translate it into a set of reusable design foundations, components, and responsive layouts.
Think → Define → Build → Apply
Foundations
Establishing the visual language
The foundational system establishes consistent rules for color, typography, spacing, and layout, creating a shared visual language for the digital experience.
Components
Designing for consistency
I translated the foundational rules into reusable components that can be consistently applied across pages, interactions, and screen sizes.
Responsive System
Designing for flexibility
I adapted the initial system across desktop and mobile to give the prospective client a clear visual direction and demonstrate how its core design principles can adapt consistently across screen sizes.
Desktop Application: Homepage | Product Details | Shopping Bag
Mobile Application: Homepage | Product Details | Shopping Bag
Outcome
A foundation for the next phase
The result is an initial design system that gives the prospective client a clear visual direction and a flexible foundation for future design and development.