/

/

HELLENIC HORIZON

HELLENIC HORIZON

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