Science in Storyform

The Beginning

Some projects start with a technical challenge.
Zitazi started with a giraffe.

Zitazi was an online store specializing in telescopes, microscopes, and monoculars, but the company wanted to expand into something more imaginative — a children’s science and discovery brand.

They were rebranding, building a new website, and introducing a mascot named Zizi, a curious yellow giraffe who loved to explore.
My task was twofold:

1. Introduce the new brand identity and mascot through a landing experience that children (and parents) would remember.
2. Redesign their eCommerce website to match the brand’s new creative direction — more playful, more human, and more usable.

This project was my first real chance to blend storytelling, branding, and UX in one living canvas.

‍

Setting the Scene

Before designing, I met with Zitazi’s art directors, marketing team, and brand consultants to understand their new identity and goals.

Their ambition was clear:

• Bring scientific curiosity to children’s lives, not just sell products.
• Turn Zizi the Giraffe into a storytelling mascot that introduces children to the wonders of science.
• Use the website as both a store and a playground — a space where imagination meets education.

To make this real, I needed to design an experience that felt like a storybook, sounded like a dream, and worked like a store.

‍

Designing the Storyteller Landing Page

Building the Flow

I began by sketching the user flow for the landing page — an immersive journey that unfolds like a digital storybook.
The goal wasn’t to sell immediately; it was to make visitors curious.

Each section introduced a part of Zizi’s story:

• “Meet Zizi” — who she is and what she loves to explore.
• “Discover the World” — microscopes, telescopes, and toys through her eyes.
• “Join the Adventure” — a subtle lead-capture area inviting users to continue Zizi’s stories.
• “Explore the Store” — a soft nudge toward the eCommerce site for parents and young explorers.

‍

Music and Motion

I collaborated with the marketing team to compose an AI-generated background soundtrack, a calm and uplifting tune that evoked curiosity — like music from a children’s science show.

The entire design was illustration-based, with parallax movements, soft transitions, and interactive micro-elements (like Zizi blinking or the stars twinkling).

I prioritized mobile-first design, knowing that most parents and children would discover Zitazi through phones or tablets.

‍
‍

‍

Making It Feel Alive

Every page element had to feel hand-drawn, friendly, and alive.
I worked closely with the art director to create custom illustrations — Zizi exploring the stars, peeking through a telescope, and playing with toy microscopes.

To keep the story immersive, I designed transitions where Zizi “walked” between scenes as users scrolled.
For accessibility, I balanced playfulness with readability — large typography, gentle contrast, and touch-safe interactions.

And because no story should end without a spark, the landing page ended with a simple form:

“Want to hear Zizi’s next story? Join the adventure!”

This small engagement element helped collect early user data while keeping the spirit of storytelling intact.

‍

Redesigning the Store Experience

After launching the storyteller landing page, I turned to the main eCommerce platform.
The goal was to connect creativity with conversion — bringing Zitazi’s new brand identity into a usable shopping experience.
‍

Identifying Pain Points

I started by analyzing:

• User behavior data (using Hotjar and GA).
• Abandonment metrics across the product flow.
• Search performance and categorization (AI-based product suggestions were underperforming).

The data revealed:

• Poor categorization of products (microscopes and toys were mixed together).
• Overcomplicated purchase flow.
• UI inconsistencies and outdated interactions.

‍

Redesign Strategy

I created a new UI kit aligned with Zitazi’s updated brand book — cheerful yet clean, with an emphasis on simplicity and childlike warmth.
Key changes included:

• Simplified navigation and categorization for product discovery.
• Rebuilt checkout flow with fewer steps and visual progress cues.
• Introduced featured product carousels with Zizi guiding the user visually.
• Added responsive illustrations and icons consistent with the mascot’s personality.

The result: an eCommerce site that felt less like a catalog and more like a journey of exploration.


‍

Collaboration & Execution

‍

Throughout the process, collaboration was everything.
I worked side-by-side with:

• The art direction team, to keep illustration and brand tone unified.
• Marketing, to test early visuals and narrative structure with real parents.
• Developers, to ensure animations and responsive layouts performed smoothly on all devices.

Our shared vision was to make science fun, approachable, and emotionally engaging — and it worked beautifully.


‍

‍

Outcomes

The redesigned experience became a milestone for Zitazi’s rebrand.

Key Results:

• The storyteller landing page increased user engagement and newsletter signups within the first month.
• Parents praised the brand for its friendly, educational tone.
• Bounce rate dropped significantly on both mobile and desktop versions.
• The store redesign helped raise average time on site by 40% and improved conversion flow consistency.
• Zizi became the face of Zitazi’s marketing campaigns, appearing across packaging, emails, and social media.
  
  ‍

‍
‍

Reflection

Zitazi was one of those projects that reminded me why I love design.
It was equal parts imagination, brand identity, and user psychology.

I learned that sometimes, the most strategic thing you can do is tell a story first and sell second.
When users emotionally connect with a brand’s character, every interaction — from landing page to checkout — becomes part of a larger narrative.

“In Zitazi, science met storytelling —
and the giraffe named Zizi taught me that curiosity is the best design brief of all.”

‍