HELLENIC HORIZON’s GREEK POTTERY ARCHIVE
HELLENIC HORIZON’s GREEK POTTERY ARCHIVE
HELLENIC HORIZON’s GREEK POTTERY ARCHIVE
UI/UX
UI/UX
STUDENT PROJECT
STUDENT PROJECT
YEAR: 2024
YEAR: 2024
ROLE: UX/UI Designer · Research · Visual Design
ROLE: UX/UI Designer · Research · Visual Design
PLATFORM: Responsive Website
PLATFORM: Responsive Website
TOOLS: Figma, Miro, Adobe Photoshop, After Effects
TOOLS: Figma, Miro, Adobe Photoshop, After Effects

PROBLEM
PROBLEM
{1}
{1}
Museum collections feels static and text-heavy
Museum collections feels static and text-heavy
Greek pottery has survived for centuries, carrying stories of myth, everyday life, and history, yet these narratives are often presented in ways that feel distant and inaccessible to modern audiences.
Greek pottery has survived for centuries, carrying stories of myth, everyday life, and history, yet these narratives are often presented in ways that feel distant and inaccessible to modern audiences.
This sparked the question - How can we present Greek pottery in a way that feels engaging, interactive, and meaningful for modern younger audiences?
This sparked the question - How can we present Greek pottery in a way that feels engaging, interactive, and meaningful for modern younger audiences?
SOLUTION
SOLUTION
{2}
{2}
An interactive digital archive for Greek’s pottery
An interactive digital archive for Greek’s pottery
Transforming ancient artefacts into immersive narrative experiences.
Transforming ancient artefacts into immersive narrative experiences.
Animated Storytelling
Animated Storytelling
Illustrated scenes on the vases are animated to emphasise movement and meaning
Motion and sound design bring attention to key narrative moments
Interactive explanations helps users understand what is happening within each scene
Illustrated scenes on the vases are animated to emphasise movement and meaning
Motion and sound design bring attention to key narrative moments
Interactive explanations helps users understand what is happening within each scene


A Living Digital Archive
A Living Digital Archive
Over 60 Greek vases presented as an evolving, interactive collection
Pottery are organised through different types to avoid cognitive overload
Supports both focused exploration and open-ended discovery
Over 60 Greek vases presented as an evolving, interactive collection
Pottery are organised through different types to avoid cognitive overload
Supports both focused exploration and open-ended discovery
Responsive & Accessible
Responsive & Accessible
Designed across desktop, tablet, and mobile for modern user experience
A learning space explaining different types of Greek vases for newcomers
Designed across desktop, tablet, and mobile for modern user experience
A learning space explaining different types of Greek vases for newcomers

DESIGN PROCESS
{3}
Process Overview
Using the Double Diamond’s design process as guideline.
KICK OFF!
Brief
Choosing topic
User Persona
Problem space and Lo-fi concept
Key design considerations
Develop different screens
Animation design
Develop and iterates from feedback
User Surveys
Greek pottery research
Contextual Research
Define HMW question
User Research
Initial Feedback
Responsive design
Final usertest
Animatic
INFORMATION ARCHITECTURE
{4}
HELLENIC HORIZON have four main navigation that aligned with the user’s needs. The animation page rotate weekly, depicting movement within the vases. The archive page of over 60+ collections, the learning page to learn the fundamental and the news page.
INTRODUCTION
HOME PAGE
ANIMATION PAGE
WEEKLY ANIMATION 1
Micro Interaction
Description
Micro Interaction
Description
Micro Interaction
Description
WEEKLY ANIMATION 2
WEEKLY ANIMATION 3
Filter
Search Bar
Pages
INTERACTIVE TIMELINE
Shapes of Vases
Recent News
Readings
Technique of Pottery
Selected Shapes
Selected Technique
Description
Description
Selected Vase
Description
ARCHIVE PAGE
LEARN PAGE
NEWS PAGE
LOFI PROTOTYPE
LOFI PROTOTYPE
{5}
{3}
{3}

DESIGN SYSTEM
DESIGN SYSTEM
{6}
{4}
{4}
Hellenic Horizon’s Stylistic
Hellenic Horizon’s Stylistic

FINAL DESIGN
FINAL DESIGN
{7}
{5}
{5}






REFLECTION
REFLECTION
{end}
{end}
Hellenic Horizon came from noticing how easy it is to walk past Greek vases in a museum without really looking at them. I picked three vases with different myths (Apollo playing the lyre, Hercules fighting the Hydra, the Gods battling the Giants) and animated the figures in After Effects and Photoshop, separating each figure from its background then puppeteering the movement, with sound design built from combined effects clips.
The card sorting test caught something I didn’t expect: some vase photos were still monochrome, some were colour, and users sorted by photo colour instead of vase type, assuming black and white meant older. The real problem wasn’t the vases, it was my documentation. I reshot the whole 60+ piece collection so every photo matched.
The filter system didn’t fully work out. Figma doesn’t let you apply two Variables to the same layer, so only the “Technique” filter actually works in the Hi-Fi prototype, the rest are just visual. Next time I’d move that logic into code so people could filter by shape, era, and technique all at once.
Hellenic Horizon came from noticing how easy it is to walk past Greek vases in a museum without really looking at them. I picked three vases with different myths (Apollo playing the lyre, Hercules fighting the Hydra, the Gods battling the Giants) and animated the figures in After Effects and Photoshop, separating each figure from its background then puppeteering the movement, with sound design built from combined effects clips.
The card sorting test caught something I didn’t expect: some vase photos were still monochrome, some were colour, and users sorted by photo colour instead of vase type, assuming black and white meant older. The real problem wasn’t the vases, it was my documentation. I reshot the whole 60+ piece collection so every photo matched.
The filter system didn’t fully work out. Figma doesn’t let you apply two Variables to the same layer, so only the “Technique” filter actually works in the Hi-Fi prototype, the rest are just visual. Next time I’d move that logic into code so people could filter by shape, era, and technique all at once.
GET IN TOUCH
DESIGNED BY TAM METHACHAI
GET IN TOUCH
DESIGNED BY TAM METHACHAI
GET IN TOUCH
DESIGNED BY TAM METHACHAI