UI/UX Design

(Client) Cranberry
(Year) 2025

about the project

“Our History” Page Redesign -
As part of Cranberry’s 2025 rebrand, I redesigned the “Our History” page to improve storytelling, align with the updated brand system, and enhance mobile usability while honoring the company’s 35-year legacy.

The Challenge

The original layout lacked hierarchy and rhythm. It did not reflect the new brand direction or support modern browsing behavior. The redesigned page needed to balance respect for Cranberry’s heritage with an engaging, visually dynamic experience that worked seamlessly across all devices.

The Process

I led the redesign in Figma, focusing on content flow, interaction, and visual clarity. The goal was to make the brand story more engaging while improving usability for both desktop and mobile visitors.

I began by gathering feedback from internal teams and reviewing customer insights that highlighted dense copy and unclear storytelling. Competitive analysis with brands such as Aurelia and Ansell revealed the need for modular layouts that connect a company’s history to its innovation timeline. These findings guided the new structure.

The Solution

The final design introduced a clean, modular timeline that brings Cranberry’s history to life through structure and rhythm:

Developed a modular scroll layout that enhances storytelling and pacing.
Refined typography and spacing for stronger readability.
Integrated updated brand colors, icons, and imagery for consistency.
Designed responsive layouts optimized for both desktop and mobile.
Improved SEO structure to boost discoverability.

The Research

I reviewed feedback from internal teams and customer surveys that highlighted dense copy and unclear storytelling. To gather additional insight, I analyzed competitor sites such as Aurelia and Ansell, focusing on how they present legacy and innovation through modular design. These findings guided the development of a cleaner layout with stronger narrative flow, connecting Cranberry’s history to its ongoing product evolution.

Services Provided

UI/UX Design
Content Strategy & Layout
Brand Alignment
Responsive Web Design

Tool Used

Figma
Illustrator
Photoshop

A UI/UX approach rooted in clean structure, purposeful flow, and thoughtful interaction

DESIGN PROCESS

Sitemap

Created a clear structural overview of the website showing how the “Our History” page fits within key categories such as Products, Resources, and Partnerships. This established intuitive navigation and improved page hierarchy.

UI/UX Design

Built out components in Figma to match brand standards, optimized for web and mobile.

What it shows

User-first content organization.
Scannable paths for both product researchers and professional partners.
A foundation for designing page flows and navigation consistency.

DESIGN PROCESS

Desktop Wireframe

Outlined content flow and visual hierarchy before adding design elements. Focused on clean spacing, digestible sections, and modular milestones that guide the user naturally through Cranberry’s story.

Wireframes & Exploration

Early wireframes focused on structuring the content into digestible.

What it shows

Consistent spacing and modular milestone layout.
Alternating background tones to visually separate sections.
A timeline structure optimized for scannability on larger screens.

DESIGN PROCESS

Mobile Wireframe

Adapted the desktop design for smaller screens. Ensured touch-friendly spacing, readable typography, and clear vertical flow for a smooth mobile experience.

Mobile Optimization

Ensured responsive behavior across breakpoints, with attention to text legibility and image scaling.

What it shows

Touch-friendly spacing and content stacking.
Persistent header and scrollable vertical content.
Mobile-first prioritization of readability and flow.

DESIGN PROCESS

High-Fidelity Mockup

Applied Cranberry’s 2025 visual system with bold red and gray brand blocks that anchor the timeline. Integrated icons and product imagery to create visual rhythm and break up long text sections.

Visual Hierarchy

Strategic use of headers, icons, and imagery to break up content and guide user flow.

What it shows

Bold use of red/gray brand blocks to anchor the timeline.
Iconography and product visuals to support key moments.
Scalability of design across multiple screen sizes (1600px and 1200px).

DESIGN PROCESS

Responsive Design

Built layouts that scale across breakpoints, maintaining consistency at 1600px, 1200px, and mobile resolutions. The design preserves visual hierarchy and engagement regardless of device.

What it shows

Responsive timeline modules with consistent brand visuals.
Prioritized content: key year → product image → milestone summary.
Strong readability with maintained hierarchy.

comparison

The Original Version

The previous page lacked structure, interaction, and visual pacing. It presented long blocks of text with inconsistent design between sections, resulting in limited user engagement.

What it shows

Lack of visual hierarchy or interactive pacing in the original version.
Inconsistent visual structure between sections.
Missed opportunities for engagement and storytelling.

FINAL PRODUCTS

The Redesigned Version

The new page delivers a unified experience that reflects Cranberry’s modern identity. It uses consistent typography, color, and iconography to create a cohesive brand narrative, improving both readability and engagement.

Results

+25% increase in average time on page.
+20% reduction in bounce rate.
Improved internal feedback from marketing leadership.
Reinforced brand perception through cohesive digital storytelling.

Reflection

This project deepened my understanding of how user experience can bring brand storytelling to life. It showed me how thoughtful structure, visual pacing, and responsive design can turn a brand’s legacy into an engaging narrative that feels both informative and human.