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, and enhance mobile usability — while honoring the company’s 35+ year legacy.
As part of Cranberry’s 2025 rebrand, I redesigned the “Our History” page to improve storytelling, align with the updated brand, and enhance mobile usability — while honoring the company’s 35+ year legacy.
The Challenge
the original layout lacked structure and visual rhythm. It didn’t reflect the updated brand direction or accommodate modern browsing habits. The page also needed to strike a respectful tone while remaining visually dynamic.
The Solution
I led a full brand refresh, creating a cohesive identity that balances sustainability with modern aesthetics:
- Introduced a modular scroll layout for easier storytelling
- Refined typography and spacing for readability.
- Integrated brand colors, icons, and visual language from the rebrand.
- Designed for both desktop and mobile responsiveness.
- Improved SEO structure to boost indexing and discoverability.
The Research
I reviewed feedback from internal teams and customers noting dense copy and unclear storytelling, and analyzed competitors like Aurelia and Ansell. These insights guided a cleaner, modular layout that improved flow and connected Cranberry’s history to its 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
Purpose - the sitemap provides a clear structural overview of the Cranberry website. It highlights how content is grouped into intuitive categories like Products, Resources, and Partnerships, and reveals how the “Our History” page fits within the broader navigation.
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
Purpose - this low-fidelity wireframe establishes the layout logic of the “Our History” page. It focuses on hierarchy, spacing, and content flow before any visual design is applied.
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
Purpose - this wireframe translates the desktop layout into a mobile-optimized view. It ensures that the timeline remains digestible and visually engaging on small screens.
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
Desktop Mockup
Purpose - The high-fidelity mockup transforms the wireframe into a fully branded experience using Cranberry’s updated 2025 visual system.
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
Moblie Mockup
Purpose - This mockup showcases how the final design adapts to mobile devices while preserving the integrity of the brand story.
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
"OUR HISTORY" Page
Purpose - This visual serves as a reference point to compare the old version with the new redesign.
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
Desktop & Mobile View
Bringing the Brand History to Life - This mockup highlights the fully responsive design of the “Our History” page, with the desktop version using bold visuals and a structured pace to guide users through key milestones.
On mobile, the timeline transforms into a seamless scroll that preserves the narrative flow. Both views reflect Cranberry’s updated identity through consistent typography, color, and iconography, offering an intuitive and visually engaging journey through more than 35 years of innovation.
On mobile, the timeline transforms into a seamless scroll that preserves the narrative flow. Both views reflect Cranberry’s updated identity through consistent typography, color, and iconography, offering an intuitive and visually engaging journey through more than 35 years of innovation.
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
