SUN NINJA
Redesigned desktop website for sunproof products — elevating brand perception and converting browsers into buyers.
CASE STUDY - 01
CRO Redesign - Product page - Clear CTA
TYPE
SCOPE
End-to-end - Desktop - IA - Design System
ROLE
UX/UI Designer — Solo project
INDUSTRY
E-commerce
FOCUS
Conversion - Brand perception
DELIVERABLE
Hi-fi prototype - Design system
1. Empathize
Sun Ninja is designed for people who enjoy spending time outdoors and want to fully enjoy the sun without compromising skin protection. The brand speaks to individuals and families who value comfort, aesthetics, and peace of mind, and who seek products that blend effortlessly into everyday beach and outdoor moments.
Target audience:
Sun Ninja is a minimalist, premium brand created for everyday use. The ninja acts as a symbolic character that represents care, precision, and protection. Its mission is to shield you and the people you love from harmful UV rays, allowing you to focus solely on enjoying the moment.
The visual identity is clean and refined, built around soft lines and circular shapes that convey calm, trust, and a modern sense of luxury.
Branding definition:
The product:
Redesigned desktop website and future mobile-responsive experience for Sun Ninja, focused on elevating the brand’s visual identity, improving layout clarity, and enhancing overall usability and accessibility for the user.
2. Define
The problem:
The existing website lacks a premium visual feel and clear hierarchy, making it harder for users to quickly understand the product value and feel confident moving toward purchase, especially across different screen sizes.
The goal:
To create a visually striking, modern redesign that strengthens Sun Ninja’s brand perception, improves user flow, and lays a strong foundation for a seamless responsive mobile experience.
Portable protection for effortless beach days.
3. Ideate
User Flow:
User Task: Use the Sun Ninja website to find a specific product.
Sitemap:
Low-Fidelity Wireframes:
Click on the wireframes to explore the design decisions and rationale behind key elements of the experience.
4. Prototype
High-Fidelity Wireframes:
The high-fidelity designs were developed in Figma, refining visual direction, typography, and layout to align with the brand’s premium and minimalist identity.
Using Figma’s comment sections, I documented the reasoning behind my design decisions, shared key insights from my process, and noted ideas for future iterations.
These notes can be explored directly within the Figma file, click on the icon to read them.
Mockup
I built an interactive prototype in Figma to simulate the user experience, test the flow, and visualize key interactions.
5. Going forward
Introduce more microinteractions to enhance the sense of modernity and polish, including subtle hover states, feedback animations, and interaction cues that feel quiet, intentional, and ninja-like.
Expand the design system by developing additional screens, starting with the product listing page, which already has a wireframe foundation and can be evolved into a high-fidelity experience.
Conduct user testing with Sun Ninja’s existing audience to validate usability, clarity, and conversion flow, using insights to iterate and refine the design.
Design transition screens and state animations (loading, success, hover, and scroll states) to create a smoother and more immersive experience.
Continue iterating on the experience as a living system, treating the design as an evolving product that consistently centers user needs, behavior, and feedback.
_edited.png)
