SUN NINJA
Proposal for a redesigned desktop website and future mobile-responsive experience for Sun Ninja, focused on elevating the brand’s visual identity, improving layout clarity, and and enhancing overall usability and accessibility for the user.
The product:
Figma, Procreate, Canva, OpenAI
Tools:
Key words:
Designed and executed an end-to-end product redesign, including user flow mapping, information architecture, wireframing, interaction design, prototyping, and visual refinement. Focused on improving usability, content hierarchy, accessibility, and conversion paths while aligning user needs with business goals and maintaining a cohesive brand experience.
The process:
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:
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 protectioon 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 wireframes.
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.
.png)
