Innocent Drinks
Clean, playful, user-friendly site, well thought out animations, accessible layout
UX / UI Design
Problem
Innocent Drinks is a beloved UK brand known for its fun, ethical branding, and healthy smoothies. (Wikipedia) However, their digital presence had several user experience and interface challenges that limited conversion, engagement, and brand consistency:
Inconsistent user flow and navigation
Users coming in from marketing campaigns or product pages often faced friction in finding relevant supporting content (e.g. “About Us,” sustainability, product ranges). Key pages like Things We Make or About were not always surfaced intuitively.
Visual and interaction inconsistency
The site’s UI elements (buttons, card styles, hover effects) varied across pages, making the experience feel disjointed. This weakened the brand’s premium, playful image.Mobile / performance constraints
Some pages were heavier than necessary—high-resolution images or animations slowed load times especially on mobile, impeding conversion and retention. (One commentary on the site noted that their sustainable toggle feature had been removed, hinting at performance / UX tradeoffs) (Ballyhoo)Weak integration of storytelling & product promotion
The content around their mission, sustainability, and product lines (e.g. Things We Make pages) had great narrative value but were not always linked into commerce or engagement pathways (newsletter signup, product exploration) in an optimal way.Scalability issues in design system
As Innocent’s site expanded to new product lines, campaigns, and content pages, the lack of a unified design system made it harder to maintain consistency and rapidly build new pages.
These issues meant that while the brand was strong, its digital interface was underleveraging that strength, causing drop-offs, inconsistent engagement, and lost potential for deeper connection or conversions.
Solution
Digital & Designs undertook a full UX/UI redesign for Innocent Drinks, built around clarity, consistency, performance, and brand storytelling.
1. User Experience (UX) Audit & Flow Mapping
Conducted heuristic and task-based audits across core user paths (e.g. homepage → product range → mission content → newsletter).
Mapped all primary personas (health-conscious consumers, eco-conscious buyers, curiosity visitors) and crafted optimized flows for each.
Streamlined the site architecture and menu to bring priority pages like Things We Make, Sustainability, and About Us into more visible navigation slots.
2. Design System & UI Unification
Created a modular design system (buttons, forms, cards, typography, spacing) to ensure UI consistency across all pages.
Standardized interaction patterns (hover, transitions, feedback states) for smoother user experience.
Developed responsive design components optimized for desktop, tablet, and mobile to ensure coherence and performance.
3. High-Fidelity Page Redesigns & Prototyping
Prototyped and redesigned core pages: Home, Things We Make, About / Mission, Sustainability, and Blog / Stories, with the updated design system.
Enhanced product or “things-we-make” pages with cleaner layouts, contextual overlays, and clear CTAs that guide users deeper.
Integrated storytelling elements (timelines, visual data, micro-interactions) that align with Innocent’s personality and brand ethos.
4. Performance & Accessibility Optimization
Optimized image assets (responsive formats, lazy loading, compressed formats) especially for mobile devices.
Reduced unnecessary scripts, minimized CSS where possible, and optimized animations to maintain fluid experience.
Ensured accessibility compliance (contrast ratios, keyboard navigation, ARIA labels) so all users can engage with content fully.
5. Iterative Testing & Refinement
Conducted usability testing sessions (remote and in-person) to validate flow clarity, engagement, and comprehension of brand messaging.
A/B tested variant versions of CTA placements, storytelling modules, and hero section designs.
Collected analytics on engagement (click-throughs, scroll depth, bounce rates) and iteratively refined layouts and content placement over time.
Concepts
Below are the principal UX/UI design principles and strategic concepts applied in the Innocent Drinks redesign:
Concept | Implementation / Benefit at Innocent |
Design System Governance | A unified set of UI components ensures consistency (buttons, cards, forms) across pages like Things We Make and Sustainability. |
Persona-Driven Flow Design | Different user types (e.g. mission-driven, product-curious) get optimized journeys through the site’s navigation and CTAs. |
Storytelling Integration | Visual storytelling is integrated into pages like About Us and Sustainability to strengthen emotional connection. |
Performance-First Interface | Design choices (lazy loading, efficient media, minimal scripts) safeguard speed and smoothness, especially on mobile. |
Accessibility & Inclusive Design | Ensured all new pages comply with accessibility standards (contrast, keyboard nav, ARIA etc.). |
Iterative Testing & Data-Driven Refinement | Ongoing feedback loops through usability tests and analytics guide incremental improvements post-launch. |
More Works
FAQ
01
What budget should we start with?
02
Do you produce creatives?
03
Can you work with our influencer program?
03
How soon to results?
Innocent Drinks
Clean, playful, user-friendly site, well thought out animations, accessible layout
UX / UI Design
Problem
Innocent Drinks is a beloved UK brand known for its fun, ethical branding, and healthy smoothies. (Wikipedia) However, their digital presence had several user experience and interface challenges that limited conversion, engagement, and brand consistency:
Inconsistent user flow and navigation
Users coming in from marketing campaigns or product pages often faced friction in finding relevant supporting content (e.g. “About Us,” sustainability, product ranges). Key pages like Things We Make or About were not always surfaced intuitively.
Visual and interaction inconsistency
The site’s UI elements (buttons, card styles, hover effects) varied across pages, making the experience feel disjointed. This weakened the brand’s premium, playful image.Mobile / performance constraints
Some pages were heavier than necessary—high-resolution images or animations slowed load times especially on mobile, impeding conversion and retention. (One commentary on the site noted that their sustainable toggle feature had been removed, hinting at performance / UX tradeoffs) (Ballyhoo)Weak integration of storytelling & product promotion
The content around their mission, sustainability, and product lines (e.g. Things We Make pages) had great narrative value but were not always linked into commerce or engagement pathways (newsletter signup, product exploration) in an optimal way.Scalability issues in design system
As Innocent’s site expanded to new product lines, campaigns, and content pages, the lack of a unified design system made it harder to maintain consistency and rapidly build new pages.
These issues meant that while the brand was strong, its digital interface was underleveraging that strength, causing drop-offs, inconsistent engagement, and lost potential for deeper connection or conversions.
Solution
Digital & Designs undertook a full UX/UI redesign for Innocent Drinks, built around clarity, consistency, performance, and brand storytelling.
1. User Experience (UX) Audit & Flow Mapping
Conducted heuristic and task-based audits across core user paths (e.g. homepage → product range → mission content → newsletter).
Mapped all primary personas (health-conscious consumers, eco-conscious buyers, curiosity visitors) and crafted optimized flows for each.
Streamlined the site architecture and menu to bring priority pages like Things We Make, Sustainability, and About Us into more visible navigation slots.
2. Design System & UI Unification
Created a modular design system (buttons, forms, cards, typography, spacing) to ensure UI consistency across all pages.
Standardized interaction patterns (hover, transitions, feedback states) for smoother user experience.
Developed responsive design components optimized for desktop, tablet, and mobile to ensure coherence and performance.
3. High-Fidelity Page Redesigns & Prototyping
Prototyped and redesigned core pages: Home, Things We Make, About / Mission, Sustainability, and Blog / Stories, with the updated design system.
Enhanced product or “things-we-make” pages with cleaner layouts, contextual overlays, and clear CTAs that guide users deeper.
Integrated storytelling elements (timelines, visual data, micro-interactions) that align with Innocent’s personality and brand ethos.
4. Performance & Accessibility Optimization
Optimized image assets (responsive formats, lazy loading, compressed formats) especially for mobile devices.
Reduced unnecessary scripts, minimized CSS where possible, and optimized animations to maintain fluid experience.
Ensured accessibility compliance (contrast ratios, keyboard navigation, ARIA labels) so all users can engage with content fully.
5. Iterative Testing & Refinement
Conducted usability testing sessions (remote and in-person) to validate flow clarity, engagement, and comprehension of brand messaging.
A/B tested variant versions of CTA placements, storytelling modules, and hero section designs.
Collected analytics on engagement (click-throughs, scroll depth, bounce rates) and iteratively refined layouts and content placement over time.
Concepts
Below are the principal UX/UI design principles and strategic concepts applied in the Innocent Drinks redesign:
Concept | Implementation / Benefit at Innocent |
Design System Governance | A unified set of UI components ensures consistency (buttons, cards, forms) across pages like Things We Make and Sustainability. |
Persona-Driven Flow Design | Different user types (e.g. mission-driven, product-curious) get optimized journeys through the site’s navigation and CTAs. |
Storytelling Integration | Visual storytelling is integrated into pages like About Us and Sustainability to strengthen emotional connection. |
Performance-First Interface | Design choices (lazy loading, efficient media, minimal scripts) safeguard speed and smoothness, especially on mobile. |
Accessibility & Inclusive Design | Ensured all new pages comply with accessibility standards (contrast, keyboard nav, ARIA etc.). |
Iterative Testing & Data-Driven Refinement | Ongoing feedback loops through usability tests and analytics guide incremental improvements post-launch. |
More Works
FAQ
01
What budget should we start with?
02
Do you produce creatives?
03
Can you work with our influencer program?
03
How soon to results?
Innocent Drinks
Clean, playful, user-friendly site, well thought out animations, accessible layout
UX / UI Design
Problem
Innocent Drinks is a beloved UK brand known for its fun, ethical branding, and healthy smoothies. (Wikipedia) However, their digital presence had several user experience and interface challenges that limited conversion, engagement, and brand consistency:
Inconsistent user flow and navigation
Users coming in from marketing campaigns or product pages often faced friction in finding relevant supporting content (e.g. “About Us,” sustainability, product ranges). Key pages like Things We Make or About were not always surfaced intuitively.
Visual and interaction inconsistency
The site’s UI elements (buttons, card styles, hover effects) varied across pages, making the experience feel disjointed. This weakened the brand’s premium, playful image.Mobile / performance constraints
Some pages were heavier than necessary—high-resolution images or animations slowed load times especially on mobile, impeding conversion and retention. (One commentary on the site noted that their sustainable toggle feature had been removed, hinting at performance / UX tradeoffs) (Ballyhoo)Weak integration of storytelling & product promotion
The content around their mission, sustainability, and product lines (e.g. Things We Make pages) had great narrative value but were not always linked into commerce or engagement pathways (newsletter signup, product exploration) in an optimal way.Scalability issues in design system
As Innocent’s site expanded to new product lines, campaigns, and content pages, the lack of a unified design system made it harder to maintain consistency and rapidly build new pages.
These issues meant that while the brand was strong, its digital interface was underleveraging that strength, causing drop-offs, inconsistent engagement, and lost potential for deeper connection or conversions.
Solution
Digital & Designs undertook a full UX/UI redesign for Innocent Drinks, built around clarity, consistency, performance, and brand storytelling.
1. User Experience (UX) Audit & Flow Mapping
Conducted heuristic and task-based audits across core user paths (e.g. homepage → product range → mission content → newsletter).
Mapped all primary personas (health-conscious consumers, eco-conscious buyers, curiosity visitors) and crafted optimized flows for each.
Streamlined the site architecture and menu to bring priority pages like Things We Make, Sustainability, and About Us into more visible navigation slots.
2. Design System & UI Unification
Created a modular design system (buttons, forms, cards, typography, spacing) to ensure UI consistency across all pages.
Standardized interaction patterns (hover, transitions, feedback states) for smoother user experience.
Developed responsive design components optimized for desktop, tablet, and mobile to ensure coherence and performance.
3. High-Fidelity Page Redesigns & Prototyping
Prototyped and redesigned core pages: Home, Things We Make, About / Mission, Sustainability, and Blog / Stories, with the updated design system.
Enhanced product or “things-we-make” pages with cleaner layouts, contextual overlays, and clear CTAs that guide users deeper.
Integrated storytelling elements (timelines, visual data, micro-interactions) that align with Innocent’s personality and brand ethos.
4. Performance & Accessibility Optimization
Optimized image assets (responsive formats, lazy loading, compressed formats) especially for mobile devices.
Reduced unnecessary scripts, minimized CSS where possible, and optimized animations to maintain fluid experience.
Ensured accessibility compliance (contrast ratios, keyboard navigation, ARIA labels) so all users can engage with content fully.
5. Iterative Testing & Refinement
Conducted usability testing sessions (remote and in-person) to validate flow clarity, engagement, and comprehension of brand messaging.
A/B tested variant versions of CTA placements, storytelling modules, and hero section designs.
Collected analytics on engagement (click-throughs, scroll depth, bounce rates) and iteratively refined layouts and content placement over time.
Concepts
Below are the principal UX/UI design principles and strategic concepts applied in the Innocent Drinks redesign:
Concept | Implementation / Benefit at Innocent |
Design System Governance | A unified set of UI components ensures consistency (buttons, cards, forms) across pages like Things We Make and Sustainability. |
Persona-Driven Flow Design | Different user types (e.g. mission-driven, product-curious) get optimized journeys through the site’s navigation and CTAs. |
Storytelling Integration | Visual storytelling is integrated into pages like About Us and Sustainability to strengthen emotional connection. |
Performance-First Interface | Design choices (lazy loading, efficient media, minimal scripts) safeguard speed and smoothness, especially on mobile. |
Accessibility & Inclusive Design | Ensured all new pages comply with accessibility standards (contrast, keyboard nav, ARIA etc.). |
Iterative Testing & Data-Driven Refinement | Ongoing feedback loops through usability tests and analytics guide incremental improvements post-launch. |
More Works
FAQ
What budget should we start with?
Do you produce creatives?
Can you work with our influencer program?
How soon to results?