leonardbetz.com

2024 | RESEARCH | UX | UI

Jurassic Hive

Crafting a

Digital Diner Experience

Jurassic Hive is a full-scale UX/UI design project, that combines user research, wireframing, prototyping, branding, and usability testing to craft a visually immersive, user-friendly experience for a futuristic dinosaur-themed diner.

2024 | RESEARCH | UX | UI

Jurassic Hive

Crafting a Digital Diner Experience

Jurassic Hive is a full-scale UX/UI design project,

that combines user research, wireframing, prototyping, branding, and usability testing

to craft a visually immersive, user-friendly experience

for a futuristic dinosaur-themed diner.

Jurassic Hive is a full-scale UX/UI design project,

that combines user research, wireframing, prototyping, branding, and usability testing

to craft a visually immersive, user-friendly experience

for a futuristic dinosaur-themed diner.

PROBLEM STATEMENT

The primary challenge of the Jurassic Hive project

was balancing the playful, immersive nature

of a futuristic dinosaur-themed diner

with modern UX/UI principles, ensuring

the design remained both visually captivating

and functionally seamless.

The primary challenge of the Jurassic Hive project

was balancing the playful, immersive nature

of a futuristic dinosaur-themed diner

with modern UX/UI principles, ensuring

the design remained both visually captivating

and functionally seamless.

The primary challenge of the Jurassic Hive project

was balancing the playful, immersive nature

of a futuristic dinosaur-themed diner

with modern UX/UI principles, ensuring

the design remained both visually captivating

and functionally seamless.

Key hurdles included crafting a cohesive brand identity,

maintaining usability despite the highly imaginative theme

and creating a responsive design that appealed

to diverse user personas while preserving the site's unique charm."

Key hurdles included crafting a cohesive brand identity,

maintaining usability despite the highly imaginative theme

and creating a responsive design that appealed

to diverse user personas while preserving the site's unique charm."

Key hurdles included crafting a cohesive brand identity, maintaining usability despite the highly imaginative theme and creating a responsive design that appealed to diverse user personas

while preserving the site's unique charm."

POSSIBLE SOLUTION

To address these challenges, I developed a design strategy

that combined user-centered research, iterative wireframing

and prototyping to ensure usability and accessibility.

To address these challenges, I developed a design strategy

that combined user-centered research, iterative wireframing

and prototyping to ensure usability and accessibility.

To address these challenges, I developed a design strategy that combined user-centered research, iterative wireframing and prototyping to ensure usability and accessibility.

By integrating a cohesive branding system with nostalgic

and futuristic elements, I balanced creativity with clarity.

By integrating a cohesive branding system with nostalgic

and futuristic elements, I balanced creativity with clarity.

By integrating a cohesive branding system

with nostalgic and futuristic elements,

I balanced creativity with clarity.

Responsive layouts and intuitive navigation patterns were implemented

to cater to diverse user needs, while engaging visuals and interactions

brought the unique theme to life without compromising functionality.

Responsive layouts and intuitive navigation patterns were implemented

to cater to diverse user needs, while engaging visuals and interactions

brought the unique theme to life without compromising functionality.

Responsive layouts and intuitive

navigation patterns were implemented

to cater to diverse user needs,

while engaging visuals and interactions

brought the unique theme to life without compromising functionality.

Challenge

A key challenge was balancing the creativity

of the dinosaur-themed concept with usability,

ensuring the design remained

intuitive and user-friendly.

A key challenge was balancing the creativity

of the dinosaur-themed concept with usability,

ensuring the design remained

intuitive and user-friendly.

A key challenge was balancing the creativity

of the dinosaur-themed concept with usability,

ensuring the design remained

intuitive and user-friendly.

I also faced the task of maintaining

a cohesive brand identity that blended

whimsical elements with UX/UI best practices

for accessibility and readability.

I also faced the task of maintaining

a cohesive brand identity that blended

whimsical elements with UX/UI best practices

for accessibility and readability.

I also faced the task of maintaining

a cohesive brand identity that blended

whimsical elements with UX/UI best practices

for accessibility and readability.

Lastly, creating a seamless user experience

that captured the fun and energy

of the Jurassic Hive diner without compromising

performance was a complex task.

Lastly, creating a seamless user experience

that captured the fun and energy

of the Jurassic Hive diner without compromising

performance was a complex task.

Lastly, creating a seamless user experience

that captured the fun and energy

of the Jurassic Hive diner without compromising

performance was a complex task.

Background

The inspiration for this project

came from my 4-year-old nephew,

a huge dinosaur fan, who sparked the idea

during a family burger night.

The inspiration for this project

came from my 4-year-old nephew,

a huge dinosaur fan, who sparked the idea

during a family burger night.

The inspiration for this project

came from my 4-year-old nephew,

a huge dinosaur fan, who sparked the idea

during a family burger night.

As we sat together, I was struck

by how much he loved everything

related to dinosaurs, which led me

to envision a fun, imaginative world

where dinosaurs could enjoy

the same experiences we do

— like dining at an American diner.

As we sat together, I was struck

by how much he loved everything

related to dinosaurs, which led me

to envision a fun, imaginative world

where dinosaurs could enjoy

the same experiences we do

— like dining at an American diner.

As we sat together, I was struck

by how much he loved everything

related to dinosaurs, which led me

to envision a fun, imaginative world

where dinosaurs could enjoy

the same experiences we do

— like dining at an American diner.

Having just completed my training

in web design and UX/UI design,

I saw this as the perfect opportunity

to refine my skills and showcase

my creative craftsmanship in a playful,

yet professionally executed, project

that combined my love for design

with a fun, unique theme.

Having just completed my training

in web design and UX/UI design,

I saw this as the perfect opportunity

to refine my skills and showcase

my creative craftsmanship in a playful,

yet professionally executed, project

that combined my love for design

with a fun, unique theme.

Having just completed my training

in web design and UX/UI design,

I saw this as the perfect opportunity

to refine my skills and showcase

my creative craftsmanship in a playful,

yet professionally executed, project

that combined my love for design

with a fun, unique theme.

Team

Me only

Only me

Only Me

My Role

Illustration

Illustration

Illustration

Branding

Branding

Branding

Product Design

Product Design

Product Design

Content Strategy

Content Strategy

Content Strategy

User Research

User Research

User Research

Usability

Usability

Usability

User Testing

User Testing

User Testing

Project Duration

weeks

Sections

tools used

Figma

Sketch

Adobe Photoshop

Adobe Firefly

ChatGPT

Google Forms

design process

The process began with a discovery phase,

where I explored the concept of a futuristic,

dinosaur-themed diner and conducted user research

to define the needs and goals of the fictional audience.

The process began with a discovery phase,

where I explored the concept of a futuristic,

dinosaur-themed diner and conducted user research

to define the needs and goals of the fictional audience.

The process began with a discovery phase,

where I explored the concept of a futuristic,

dinosaur-themed diner and conducted user research to define the needs and goals of the fictional audience.

In the define phase, I created user personas,

mapped out user flows, and designed a site map

that would guide the structure and navigation

of the imaginative website.

In the define phase, I created user personas,

mapped out user flows, and designed a site map

that would guide the structure and navigation

of the imaginative website.

In the define phase, I created user personas,

mapped out user flows, and designed a site map

that would guide the structure and navigation

of the imaginative website.

During the design phase, I developed high-fidelity mockups,

crafted illustrations, and established a unique brand identity,

followed by prototyping and usability testing to ensure

the creative concept was both engaging

and aligned with UX/UI principles.

During the design phase, I developed high-fidelity mockups,

crafted illustrations, and established a unique brand identity,

followed by prototyping and usability testing to ensure

the creative concept was both engaging

and aligned with UX/UI principles.

During the design phase, I developed high-fidelity mockups, crafted illustrations, and established a unique brand identity, followed by prototyping and usability testing

to ensure the creative concept was both engaging

and aligned with UX/UI principles.

Discover

Analysis

User Interviews

User Research

Discover

Analysis

User Interviews

User Research

Discover

Analysis

User Interviews

User Research

Define

Personas

Empathy Map

Journey Map

Define

Personas

Empathy Map

Journey Map

Define

Personas

Empathy Map

Journey Map

Ideate

User Flow

Card Sorting

Information Architecture

Ideate

User Flow

Card Sorting

Information Architecture

Ideate

User Flow

Card Sorting

Information-Architecture

Design

Wireframes

Visual Design

Design

Wireframes

Visual Design

Design

Wireframes

Visual Design

Test

Usability Testing

Implementing Feedback

Test

Usability Testing

Implementing Feedback

Test

Usability Testing

Implementing Feedback

Discover PHASE

AnalysIs of target Groups

Since the Jurassic Hive website was a fictive Project,

I came up with the following key user groups:

Since the Jurassic Hive website was a fictive Project,

I came up with the following key user groups:

Since the Jurassic Hive website was a fictive Project,

I came up with the following key user groups:

Families with young children
Young Adults & Millennials
Adventurous Foodies
Pop Culture Fans
Event Seekers & Social Diner

Families with young children
Young Adults & Millennials
Adventurous Foodies
Pop Culture Fans
Event Seekers & Social Diner

Families with young children
Young Adults & Millennials
Adventurous Foodies
Pop Culture Fans
Event Seekers & Social Diner

If this weren't a fictive project,

I would conduct user research through

surveys and interviews to gather insights

into dining preferences and interests.

If this weren't a fictive project,

I would conduct user research through

surveys and interviews to gather insights

into dining preferences and interests.

If this weren't a fictive project,

I would conduct user research through

surveys and interviews to gather insights

into dining preferences and interests.

Additionally, I would perform competitor analysis

to study similar themed restaurants and use

behavioral analysis with tools like Google Analytics

to understand audience engagement.

Additionally, I would perform competitor analysis

to study similar themed restaurants and use

behavioral analysis with tools like Google Analytics

to understand audience engagement.

Additionally, I would perform competitor analysis

to study similar themed restaurants and use

behavioral analysis with tools like Google Analytics

to understand audience engagement.

Lastly, trend reports on consumer behavior

and themed entertainment would help validate

the assumptions and guide design decisions.

Lastly, trend reports on consumer behavior

and themed entertainment would help validate

the assumptions and guide design decisions.

Lastly, trend reports on consumer behavior

and themed entertainment would help validate

the assumptions and guide design decisions.

Target Groups

Families with Young Children

Interested in fun, interactive experiences that are

entertaining and educational

for kids, especially dinosaur fans.

Interested in fun, interactive experiences that are

entertaining and educational

for kids, especially dinosaur fans.

Young Adults & Millennials

Drawn to unique,

Instagram-worthy experiences

that combine nostalgia

with modern design.

Drawn to unique,

Instagram-worthy experiences

that combine nostalgia

with modern design.

Adventurous Foodies

Enthusiasts of quirky, themed restaurants and new dining experiences that offer something outside the ordinary.

Pop Culture Fans

Interested in themed environments that celebrate popular culture, including dinosaur-related entertainment and collectibles.

Event Seekers & Social Diners

People looking for a fun, social dining atmosphere, such as themed parties or group gatherings, where the experience is just

as important as the food.

People looking for a fun, social dining atmosphere, such as themed parties or group gatherings, where the experience is just

as important as the food.

Hypotheses

Although this is a fictive project,

I wanted to showcase how I would approach

determining user group requirements

for the website’s structure and content.

Although this is a fictive project,

I wanted to showcase how I would approach

determining user group requirements

for the website’s structure and content.

Although this is a fictive project,

I wanted to showcase how I would approach

determining user group requirements

for the website’s structure and content.

By formulating detailed hypotheses

about each target group's needs

and behaviors, I could create a framework

to guide design decisions and

validate assumptions.

By formulating detailed hypotheses

about each target group's needs

and behaviors, I could create a framework

to guide design decisions and

validate assumptions.

By formulating detailed hypotheses

about each target group's needs and behaviors,

I could create a framework to guide design

decisions and validate assumptions.

This process mirrors a professional approach

to user research, ensuring the design

remains both creative and user-focused.

This process mirrors a professional approach

to user research, ensuring the design

remains both creative and user-focused.

This process mirrors a professional approach

to user research, ensuring the design

remains both creative and user-focused.

Hypotheses and Questions

Survey

The fictive survey was conducted

with 150 participants via Google Forms

to validate the design decisions

for the Jurassic Hive website.

The fictive survey was conducted

with 150 participants via Google Forms

to validate the design decisions

for the Jurassic Hive website.

To better understand the needs and preferences

of our target groups, we conducted a survey

with Google Forms focusing on their demographics,

online behavior, and interests.

Below is the compiled data,

broken down by question, with

key insights derived from the responses.

Below is the compiled data,

broken down by question, with

key insights derived from the responses.

To better understand the needs and preferences

of our target groups, we conducted a survey

with Google Forms focusing on their demographics,

online behavior, and interests.

General Questions

The survey revealed that 45% of participants

dine out monthly, with a strong representation

from the 18–34 age group (60%).

The survey revealed that 45% of participants

dine out monthly, with a strong representation

from the 18–34 age group (60%).

The survey revealed that 45% of participants

dine out monthly, with a strong representation

from the 18–34 age group (60%).

While 65% do not typically dine with children,

family-focused options remain important for inclusivity.

While 65% do not typically dine with children,

family-focused options remain important for inclusivity.

While 65% do not typically dine with children,

family-focused options remain important for inclusivity.

The primary factors influencing restaurant choice

are menu appeal (35%) and atmosphere (30%),

while 40% engage with restaurants weekly on social media,

emphasizing the importance of a strong online presence.

The primary factors influencing restaurant choice

are menu appeal (35%) and atmosphere (30%),

while 40% engage with restaurants weekly on social media,

emphasizing the importance of a strong online presence.

The primary factors influencing restaurant choice

are menu appeal (35%) and atmosphere (30%),

while 40% engage with restaurants weekly on social media, emphasizing the importance of a strong online presence.

Families with young Children

This group values easy navigation

and kid-friendly content, with 70% preferring

engaging visuals or games to entertain children

and 65% prioritizing a clearly advertised kids' menu.

This group values easy navigation

and kid-friendly content, with 70% preferring

engaging visuals or games to entertain children

and 65% prioritizing a clearly advertised kids' menu.

This group values easy navigation

and kid-friendly content, with 70% preferring

engaging visuals or games to entertain children

and 65% prioritizing a clearly advertised kids' menu.

A family-friendly focus is essential

to capture their attention and drive visits.

A family-friendly focus is essential

to capture their attention and drive visits.

A family-friendly focus is essential

to capture their attention and drive visits.

Young Adults & Millenials

Modern aesthetics and interactive features

resonate strongly with this group,

as 75% prioritize stylish design

and 85% are drawn to social media sharing options.

Modern aesthetics and interactive features

resonate strongly with this group,

as 75% prioritize stylish design

and 85% are drawn to social media sharing options.

Modern aesthetics and interactive features

resonate strongly with this group,

as 75% prioritise stylish design and 85%

are drawn to social media sharing options.

Creating a vibrant and shareable

online presence is key to engaging them.

Creating a vibrant and shareable

online presence is key to engaging them.

Creating a vibrant and shareable

online presence is key to engaging them.

Adventorous Foodies

Detailed food imagery and creative storytelling

are vital for this group, with 85% influenced

by vivid descriptions and 90% intrigued

by unique restaurant concepts.

Detailed food imagery and creative storytelling

are vital for this group, with 85% influenced

by vivid descriptions and 90% intrigued

by unique restaurant concepts.

Detailed food imagery and creative storytelling

are vital for this group, with 85% influenced

by vivid descriptions and 90% intrigued

by unique restaurant concepts.

Immersive visuals and signature menu

highlights will captivate their interest.

Immersive visuals and signature menu

highlights will captivate their interest.

Immersive visuals and signature menu

highlights will captivate their interest.

Pop Culture Fans

Immersion through thematic storytelling

and pop culture references appeals to this group,

with 80% drawn to humor and 70% valuing a website

that fully reflects the restaurant's theme.

Immersion through thematic storytelling

and pop culture references appeals to this group,

with 80% drawn to humor and 70% valuing a website

that fully reflects the restaurant's theme.

Immersion through thematic storytelling

and pop culture references appeals to this group,

with 80% drawn to humor and 70% valuing a website

that fully reflects the restaurant's theme.

Engaging branding and narrative

are central to attracting them.

Engaging branding and narrative

are central to attracting them.

Engaging branding and narrative

are central to attracting them.

Event Seekers & Social Diners

Group-friendly features, like reservation systems

and themed event details are crucial for this group,

with 85% prioritising easy booking options.

Group-friendly features, like reservation systems

and themed event details are crucial for this group,

with 85% prioritising easy booking options.

Group-friendly features, like reservation systems

and themed event details are crucial for this group,

with 85% prioritising easy booking options.

Providing tailored event information

and booking tools is essential for conversion.

Providing tailored event information

and booking tools is essential for conversion.

Providing tailored event information

and booking tools is essential for conversion.

Key Insights derived from the Survey

Ease of Navigation:

Across all user groups 80%+ of participants
valued websites with clear navigation,
emphasizing the need for a seamless structure.

Ease of Navigation:

Across all user groups 80%+ of participants
valued websites with clear navigation,
emphasizing the need for a seamless structure.

Ease of Navigation:

Across all user groups 80%+ of participants
valued websites with clear navigation,
emphasizing the need for a seamless structure.

Visual Appeal:

85% of Millennials and Adventurous Foodies
prioritized vivid imagery and interactive features,
highlighting the importance of a modern design aesthetic.

Visual Appeal:

85% of Millennials and Adventurous Foodies
prioritized vivid imagery and interactive features,
highlighting the importance of a modern design aesthetic.

Visual Appeal:

85% of Millennials and Adventurous Foodies
prioritized vivid imagery and interactive features,
highlighting the importance of a modern design aesthetic.

Family-Friendliness:

70% of families preferred websites with engaging,
kid-friendly content, indicating the need for
elements like games or vibrant visuals.

Family-Friendliness:

70% of families preferred websites with engaging,
kid-friendly content, indicating the need for
elements like games or vibrant visuals.

Family-Friendliness:

70% of families preferred websites with engaging, kid-friendly content, indicating the need for elements like games or vibrant visuals.

Thematic Storytelling:

90% of Adventurous Foodies and Pop Culture Fans
found creative storytelling about the restaurant’s
concept highly appealing, supporting immersive branding.

Thematic Storytelling:

90% of Adventurous Foodies and Pop Culture Fans
found creative storytelling about the restaurant’s
concept highly appealing, supporting immersive branding.

Thematic Storytelling:

90% of Adventurous Foodies and Pop Culture Fans found creative storytelling about the restaurant’s concept highly appealing, supporting immersive branding.

Group Reservations:

85% of Event Seekers considered easy-to-use
reservation systems crucial, emphasizing
the need for functional and accessible booking features.

Group Reservations:

85% of Event Seekers considered easy-to-use
reservation systems crucial, emphasizing
the need for functional and accessible booking features.

Group Reservations:

85% of Event Seekers considered easy-to-use
reservation systems crucial, emphasizing
the need for functional and accessible
booking features.

Define Phase

Empathy Map

The Empathy Map served as the

first step in the Define phase,

laying the foundation for

a truly user-centric approach.

The Empathy Map served as the

first step in the Define phase,

laying the foundation for

a truly user-centric approach.

The Empathy Map served as the

first step in the Define phase,

laying the foundation for

a truly user-centric approach.

By mapping out what each persona

says, thinks, feels and does,

it helped identify their core needs,

motivations, and challenges.

By mapping out what each persona

says, thinks, feels and does,

it helped identify their core needs,

motivations, and challenges.

By mapping out what each persona

says, thinks, feels and does,

it helped identify their core needs,

motivations, and challenges.

This process provided a clear direction

for prioritizing features and informed

the overall structure and content

of the website, ensuring alignment with

the target audience's expectations.

This process provided a clear direction

for prioritizing features and informed

the overall structure and content

of the website, ensuring alignment with

the target audience's expectations.

This process provided a clear direction

for prioritizing features and informed

the overall structure and content

of the website, ensuring alignment with

the target audience's expectations.

Empathy Map

personas

By grounding the design process in realistic user profiles,

personas ensured a user-centered approach

that addressed specific challenges

and enhanced the overall user experience.

By grounding the design process in realistic user profiles,

personas ensured a user-centered approach

that addressed specific challenges

and enhanced the overall user experience.

By grounding the design process in realistic user profiles, personas ensured a user-centered approach that addressed specific challenges

and enhanced the overall user experience.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

Personas

Customer Journey Maps

I mapped the entire user experience

—from the initial interaction to the final goal—

to identify key touch-points and potential pain points.

I mapped the entire user experience

from the initial interaction to the final goal

to identify key touch-points and potential pain points.

I mapped the entire user experience —

from the initial interaction to the final goal —

to identify key touch-points

and potential pain points.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

By analyzing these journey maps,

we resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

By analyzing these journey maps,

we resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

By analysing these journey maps,

I resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

Customer Journey Maps

Ideate Phase

User Flow

The User Flow marked the first step

of the Ideate phase, focusing on

defining a seamless journey

for users to navigate the website.

The User Flow marked the first step

of the Ideate phase, focusing on

defining a seamless journey

for users to navigate the website.

The User Flow marked the first step

of the Ideate phase, focusing on

defining a seamless journey

for users to navigate the website.

By visualizing how each persona would

interact with key touchpoints,

the flow highlighted opportunities

to simplify navigation and ensure

a logical progression from discovery to action.

By visualizing how each persona would

interact with key touchpoints,

the flow highlighted opportunities

to simplify navigation and ensure

a logical progression from discovery to action.

By visualizing how each persona would

interact with key touchpoints,

the flow highlighted opportunities

to simplify navigation and ensure

a logical progression from discovery to action.

This step was essential in creating

a smooth, intuitive experience, ensuring

users could quickly find the information

or features they need while staying engaged

with the brand’s narrative.

This step was essential in creating

a smooth, intuitive experience, ensuring

users could quickly find the information

or features they need while staying engaged

with the brand’s narrative.

This step was essential in creating

a smooth, intuitive experience, ensuring

users could quickly find the information

or features they need while staying engaged

with the brand’s narrative.

User Flow Diagram simple

Here you can see a more advanced user flow,

based on insights from research.

Here you can see a more advanced user flow,

based on insights from research.

Here you can see a more advanced user flow,

based on insights from research.

This shows how i would refine the initial flow in an iterative process,

ensuring it alignes with user expectations and behaviors.

This shows how i would refine the initial flow in an iterative process,

ensuring it alignes with user expectations and behaviors.

This shows how i would refine the initial flow in an iterative process,

ensuring it alignes with user expectations and behaviors.

User Flow Diagram advanced

The advanced flow now has too many sections

and redundant CTAs, usability testing

revealed it confuses the users.

The advanced flow now has too many sections

and redundant CTAs, usability testing

revealed it confuses the users.

The advanced flow now has too many sections

and redundant CTAs, usability testing

revealed it confuses the users.

By flatten the sections into five cohesive sections

with intuitive CTAs, I was able to ensure that all actions

are focused on fulfilling the website's goals.

By flatten the sections into five cohesive sections

with intuitive CTAs, I was able to ensure that all actions

are focused on fulfilling the website's goals.

By flatten the sections into five cohesive sections

with intuitive CTAs, I was able to ensure that all actions

are focused on fulfilling the website's goals.

The result was a simplified navigation,

with an optimised information structure,

ensuring the journey felt intuitive

for all target groups.

The result was a simplified navigation,

with an optimised information structure,

ensuring the journey felt intuitive

for all target groups.

The result was a simplified navigation,

with an optimised information structure,

ensuring the journey felt intuitive for all target groups.

User Flow Diagram tidied up

Scoping

Problems

Overwhelming Navigation Options

Overwhelming Navigation Options

Overwhelming Navigation

Lack of Visual Hierarchy

Lack of Visual Hierarchy

Lack of Visual Hierarchy

Accessibility Gaps

Accessibility Gaps

Accessibility Gaps

Unclear Brand Identity Representation

Unclear Brand Identity Representation

Unclear Brand Identity

Limited User Feedback Loops

Limited User Feedback Loops

Limited User Feedback Loops

Content Overload

Content Overload

Content Overload

Mobile Usability Issues

Mobile Usability Issues

Mobile Usability Issues

Interpretations

Interpretation

Too many sections or redundant CTAs

can confuse users, leading to higher drop-off rates.

Too many sections or redundant CTAs

can confuse users, leading to

higher drop-off rates.

Too many sections or

redundant CTAs can confuse

users, leading to higher

drop-off rates.

Inconsistent visual cues make it hard for users

to identify primary actions or navigate effectively.

Inconsistent visual cues make it hard

for users to identify primary actions

or navigate effectively.

Inconsistent visual cues

make it hard for users

to identify primary actions

or navigate effectively.

The initial design lacked sufficient contrast

and inclusive elements, potentially alienating

users with visual impairments.

The initial design lacked sufficient

contrast and inclusive elements,

potentially alienating users

with visual impairments.

The initial design lacked

sufficient contrast and

inclusive elements,

potentially alienating users

with visual impairments.

The creative theme of Jurassic Hive

needed a stronger visual and interactive

identity to resonate with users.

The creative theme of Jurassic Hive

needed a stronger visual

and interactive identity

to resonate with users.

The creative theme of

Jurassic Hive needed a

stronger visual and interactive

identity to resonate with users.

Without direct user feedback mechanisms,

it’s harder to iterate and improve

the design based on real user needs.

Without direct user feedback

mechanisms, it’s harder to iterate

and improve the design based

on real user needs.

Without direct user feedback

mechanisms, it’s harder

to iterate and improve

the design based on

real user needs.

Excessive text or cluttered layouts

can overwhelm users, detracting from the experience.

Excessive text or cluttered layouts

can overwhelm users,

detracting from the experience.

Excessive text or cluttered

layouts can overwhelm users,

detracting from the experience.

Early prototypes were not fully optimized

for smaller screens, leading to subpar

user experiences on mobile devices.

Early prototypes were not fully optimized

for smaller screens, leading to subpar

user experiences on mobile devices.

Early prototypes were not fully

optimised for smaller screens,

leading to subpar user

experiences on mobile devices.

Solutions

Streamline navigation into five cohesive sections

with intuitive CTAs, ensuring all actions are focused

on fulfilling the website’s goals.

Streamline navigation into five

cohesive sections with intuitive CTAs,

ensuring all actions are focused

on fulfilling the website’s goals.

Streamline navigation

into five cohesive sections

with intuitive CTAs,

ensuring all actions

are focused on fulfilling

the website’s goals.

Establish a clear visual hierarchy

through consistent typography, bold colors for CTAs

and a logical content flow.

Establish a clear visual hierarchy

through consistent typography,

bold colors for CTAs

and a logical content flow.

Establish a clear visual

hierarchy through

consistent typography,

bold colors for CTAs

and a logical content flow.

The initial design lacked sufficient contrast

and inclusive elements, potentially alienating

users with visual impairments.

Enhance contrast ratios,

integrate alt text for images,

and ensure all interactions are keyboard-

and screen-reader-friendly.

Enhance contrast ratios,

integrate alt text for images,

and ensure all interactions

are keyboard- and

screen-reader-friendly.

Use consistent branding, from quirky

dinosaur illustrations to cohesive color palettes

and emphasize the unique concept in the Experience section.

Use consistent branding,

from quirky dinosaur illustrations

to cohesive color palettes

and emphasise the unique concept

in the Experience section.

Use consistent branding,

from quirky dinosaur

illustrations to cohesive

color palettes.

Add feedback forms and integrate lightweight analytics

to monitor user behavior and gather insights for continuous improvement.

Add feedback forms and integrate

lightweight analytics to monitor

user behavior and gather insights

for continuous improvement.

Add feedback forms and

integrate analytics

to monitor user behavior

and gather insights for

continuous improvement.

Prioritize concise content with bite-sized sections

and visuals to balance text-heavy areas, especially on mobile devices.

Prioritize concise content

with bite-sized sections

and visuals to balance text-heavy areas,

especially on mobile devices.

Prioritize concise content

with bite-sized sections

and visuals to balance

text-heavy areas,

especially on mobile devices.

Refactor designs for mobile-first responsiveness,

ensuring smooth navigation and functionality across all devices.

Refactor designs

for mobile-first responsiveness,

ensuring smooth navigation

and functionality across all devices.

Refactor designs for

mobile-first responsiveness,

ensuring smooth navigation

and functionality across

all devices.

Key Design Guidelines

Simplify Navigation:
Use a streamlined five-section structure
with clear, goal-driven CTAs.

Simplify Navigation:
Use a streamlined five-section structure
with clear, goal-driven CTAs.

Simplify Navigation:
Use a streamlined five-section structure
with clear, goal-driven CTAs.

Enhance Accessibility:
Ensure high-contrast design, keyboard navigation
and screen-reader compatibility.

Enhance Accessibility:
Ensure high-contrast design, keyboard navigation
and screen-reader compatibility.

Enhance Accessibility:
Ensure high-contrast design, keyboard navigation
and screen-reader compatibility.

Create Visual Consistency:
Establish a cohesive color palette,
consistent typography and clear visual hierarchy.

Create Visual Consistency:
Establish a cohesive color palette,
consistent typography and clear visual hierarchy.

Create Visual Consistency:
Establish a cohesive color palette, consistent typography and clear visual hierarchy.

Strengthen Brand Identity:
Incorporate custom illustrations, engaging visuals
and storytelling to highlight the Jurassic Hive theme.

Strengthen Brand Identity:
Incorporate custom illustrations, engaging visuals
and storytelling to highlight the Jurassic Hive theme.

Strengthen Brand Identity:
Incorporate custom illustrations,
engaging visuals and storytelling
to highlight the Jurassic Hive theme.

Prioritize Mobile-First Design:
Optimize all layouts and interactions
for mobile responsiveness.

Prioritize Mobile-First Design:
Optimize all layouts and interactions
for mobile responsiveness.

Prioritize Mobile-First Design:
Optimize all layouts and interactions
for mobile responsiveness.

Iterate Based on Feedback: Use user testing and analytics
to refine the design iteratively

Iterate Based on Feedback: Use user testing and analytics
to refine the design iteratively

Iterate Based on Feedback: Use user testing and analytics
to refine the design iteratively

Focus on Usability: Ensure concise content,
uncluttered layouts and intuitive navigation paths.

Focus on Usability: Ensure concise content,
uncluttered layouts and intuitive navigation paths.

Focus on Usability: Ensure concise content,
uncluttered layouts and intuitive navigation paths.

Design Phase

SCRIBBLES

In the design phase, I began by scribbling initial concepts

based on the simplified user flow diagram I had created.

In the design phase, I began by scribbling initial concepts

based on the simplified user flow diagram I had created.

In the design phase, I began by scribbling

initial concepts based on the simplified

user flow diagram I had created.

While these sketches didn’t incorporate

every feature suggested by the research,

I opted to focus on a minimum viable product

to ensure rapid prototyping.

While these sketches didn’t incorporate

every feature suggested by the research,

I opted to focus on a minimum viable product

to ensure rapid prototyping.

While these sketches didn’t incorporate

every feature suggested by the research,

I opted to focus on a minimum viable product

to ensure rapid prototyping.

This allowed for user testing and iterative refinements,

balancing time constraints with user-centric improvements.

This allowed for user testing and iterative refinements,

balancing time constraints with user-centric improvements.

This allowed for user testing and iterative refinements, balancing time constraints

with user-centric improvements.

WIREFRAMES

Using Sketch, I progressed from mid- to high-fidelity wireframes,

building on the initial scribbles to create

a more detailed and polished structure.

Using Sketch, I progressed from mid- to high-fidelity wireframes,

building on the initial scribbles to create

a more detailed and polished structure.

Using Sketch, I progressed from mid- to high-fidelity wireframes, building on the initial scribbles to create

a more detailed and polished structure.

The primary goal was to develop a clickable prototype

that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

The primary goal was to develop a clickable prototype

that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

The primary goal was to develop a clickable prototype that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

This step ensured the design was both functional

and aligned with UX/UI standards.

This step ensured the design was both functional

and aligned with UX/UI standards.

This step ensured the design was both functional

and aligned with UX/UI standards.

Mid-Fidelity Wireframes

High-Fidelity Wireframes

Prototypes

Using Sketch, I progressed from mid- to high-fidelity wireframes,

building on the initial scribbles to create

a more detailed and polished structure.

Using Sketch, I progressed from mid- to high-fidelity wireframes,

building on the initial scribbles to create

a more detailed and polished structure.

Using Sketch, I progressed from mid- to high-fidelity wireframes, building on the initial scribbles to create

a more detailed and polished structure.

The primary goal was to develop a clickable prototype

that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

The primary goal was to develop a clickable prototype

that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

The primary goal was to develop a clickable prototype that would showcase the core user flows

and functionalities, providing a foundation

for user testing and further refinements.

This step ensured the design was both functional

and aligned with UX/UI standards.

This step ensured the design was both functional

and aligned with UX/UI standards.

This step ensured the design was both functional

and aligned with UX/UI standards.

Test Phase

Usability Test

For usability testing, I utilized the thinking-aloud method,

inviting participants to navigate the clickable prototype

while verbalizing their thoughts and challenges.

For usability testing, I utilized the thinking-aloud method,

inviting participants to navigate the clickable prototype

while verbalizing their thoughts and challenges.

For usability testing, I utilised

the thinking-aloud method, inviting

participants to navigate the clickable prototype

while verbalising their thoughts and challenges.

Participants navigated through

carefully designed user scenarios

and tackled specific tasks,

providing real-time feedback.

Participants navigated through

carefully designed user scenarios

and tackled specific tasks,

providing real-time feedback.

Participants navigated through carefully

designed user scenarios and tackled

specific tasks, providing real-time feedback.

My role encompassed the creation,

moderation, recording, and evaluation

of these tests, ensuring actionable insights

for refining the design.

My role encompassed the creation,

moderation, recording, and evaluation

of these tests, ensuring actionable insights

for refining the design.

My role encompassed the creation, moderation,

recording, and evaluation of these tests,

ensuring actionable insights for refining the design.

Usability Test

refinement

Refined Wireframes

Final Design

To finalize the design of the Jurassic Hive Website,

I created a polished design in Figma,

ensuring a cohesive visual identity

aligned with the overall website.

To finalize the design of the Jurassic Hive Website,

I created a polished design in Figma,

ensuring a cohesive visual identity

aligned with the overall website.

To finalize the design of the Jurassic Hive Website,

I created a polished design in Figma,

ensuring a cohesive visual identity aligned

with the overall website.

The design was adapted to be fully responsive,

with layouts tailored for desktop

and mobile to guarantee a seamless

user experience across devices.

The design was adapted to be fully responsive,

with layouts tailored for desktop

and mobile to guarantee a seamless

user experience across devices.

The design was adapted to be fully responsive,

with layouts tailored for desktop and mobile

to guarantee a seamless user experience

across devices.

ImplementED Feedback

Feedback-Driven Refinements

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

These findings guided me in refining the design,

ensuring it met the users' needs more effectively.

These findings guided me in refining the design,

ensuring it met the users' needs more effectively.

These findings guided me in refining the design,

ensuring it met the users' needs more effectively.

Prototypes

With the redefined Design, I built functional prototypes

to enable interactive testing,

showcasing intuitive navigation

and an optimized information structure.

With the redefined Design, I built functional prototypes

to enable interactive testing,

showcasing intuitive navigation

and an optimized information structure.

With the redefined Design, I built functional

prototypes to enable interactive testing,

showcasing intuitive navigation

and an optimised information structure.

This approach ensured the design was ready

for real-world implementation while maintaining

a user-centered focus.

This approach ensured the design was ready

for real-world implementation while maintaining

a user-centered focus.

This approach ensured the design was ready

for real-world implementation

while maintaining a user-centered focus.

Mobile Prototype

View Prototype

Desktop Prototype

View Prototype

However, design is never truly finished.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

RESULTS

The Jurassic Hive redesign was a game-changer,

creating a seamless, engaging, and high-converting user experience.

The Jurassic Hive redesign was a game-changer,

creating a seamless, engaging, and high-converting user experience.

The Jurassic Hive redesign was a game-changer,

creating a seamless, engaging, and high-converting user experience.

These numbers reflect industry benchmarks and realistic improvements

based on a well-executed redesign with usability testing,

better navigation, and optimized CTAs

These numbers reflect industry benchmarks and realistic improvements

based on a well-executed redesign with usability testing,

better navigation, and optimized CTAs

These numbers reflect industry benchmarks

and realistic improvements based on

a well-executed redesign with usability testing,

better navigation, and optimised CTAs.

The Jurassic Hive redesign delivered massive improvements

not only in user experience and performance.

The Jurassic Hive redesign delivered massive improvements

not only in user experience and performance.

The Jurassic Hive redesign delivered massive improvements not only in user experience

and performance.

The new design didn’t just improve usability —

it transformed how users interacted with the brand.

The new design didn’t just improve usability —

it transformed how users interacted with the brand.

The new design didn’t just improve usability

— it transformed how users interacted

with the brand.

This project proves that strategic UX/UI design

isn’t just about aesthetics, but about driving real impact,

creating excitement, and making every digital touchpoint unforgettable.

This project proves that strategic UX/UI design

isn’t just about aesthetics, but about driving real impact,

creating excitement, and making every digital touchpoint unforgettable.

This project proves that strategic UX/UI design

isn’t just about aesthetics, but about driving real impact, creating excitement, and making every digital touchpoint unforgettable.

" What Drove

These Results ? "

Clearer CTAs & Interactive Elements

Clearer CTAs

& Interactive Elements

Clearer CTAs

& Interactive Elements

Improved discoverability of key sections (Menu, Events, Reservations).

Improved discoverability of key sections

(Menu, Events, Reservations).

Improved discoverability

of key sections

Faster Page Load Speed

Reduced bounce rate and increased engagement.

Reduced bounce rate

and increased engagement.

Reduced bounce rate

and increased engagement.

Mobile Optimization

Mobile Optimisation

Carousels, improved navigation, and engaging imagery boosted mobile interactions.

Carousels, improved navigation,

and engaging imagery boosted

mobile interactions.

Carousels, improved navigation,

and engaging imagery

boosted mobile interactions.

Revamped Visual Hierarchy

Better storytelling, animations, and intuitive layout increased conversions.

Better storytelling, animations,

and intuitive layout

increased conversions.

Better storytelling,

animations, and intuitive layout

increased conversions.

Data-Driven Usability Testing

Direct Insights led to a more intuitive experience, reflectes in higher usability scores.

Direct Insights led to a more

intuitive experience,

reflected in higher usability scores.

Direct Insights led to

a more intuitive experience,

reflects in higher usability scores.

Bottom Line:

Higher Reservations = More Revenue

Better User Experience = More Returning Visitors

Stronger Brand Engagement = Higher Event Attendance

By combining data-driven usability testing

with strategic design improvements,

the redesign boosted conversions, engagement, and revenue.

By combining data-driven usability testing

with strategic design improvements,

the redesign boosted conversions, engagement, and revenue.

By combining data-driven usability testing

with strategic design improvements,

the redesign boosted conversions,

engagement, and revenue.

Clear navigation, optimised performance,

and interactive experiences turned visitors

into loyal customers, proving the ROI of great UX/UI.

Clear navigation, optimised performance,

and interactive experiences turned visitors

into loyal customers, proving the ROI of great UX/UI.

Clear navigation, optimised performance,

and interactive experiences turned visitors

into loyal customers, proving the ROI of great UX/UI.

Thank You for your time

Feel free to contact me

and check out my other use cases!

Feel free to contact me

and check out my other use cases!

Feel free to contact me

and check out my other use cases!