Ava Yoo

overview
problem&solution
final designs
design process
01. projects
02. work

06

03. about
04. contact

Minecraft

PRoblem

PRoblem

Minecraft’s Website Doesn’t Effectively Introduce Its World

Minecraft has a massive universe, but new users often struggle to understand what the game is about, how to start playing, which experience fits them because the website mainly functions as an information hub for existing players

Minecraft has a massive universe, but new users often struggle to understand

what the game is about

how to start playing

which experience fits them

because the website mainly functions as an information hub for existing players

solution

solution

A Cinematic Onboarding Experience for New Players

Revamped the experience into a cinematic, responsive website that introduces Minecraft’s universe to new players while highlighting the creative and educational value of the game.

Revamped the experience into a cinematic, responsive website that introduces Minecraft’s universe to new players while highlighting the creative and educational value of the game.

Duration

Duration

Duration

2 weeks

2 weeks

Project Type

Project Type

Project Type

Solo project

Solo project

My Role

My Role

My Role

Research

BI Design

Design System

Prototyping

Visual Design

Interaction Design

Usability Testing

Research

BI Design

Design System

Prototyping

Visual Design

Interaction Design

Usability Testing

Core Challenge

Core Challenge

How might we help new users explore and understand the adventurous and creative experiences of Minecraft?

Problem & Solution

Secondary Research

Secondary Research

Many Minecraft players are young, making parents key decision-makers

Minecraft’s player base has rapidly grown to 200M+ monthly players, with many users in their teens. As a result, parents often play a crucial role in the decision to purchase or allow gameplay.

Minecraft’s player base has rapidly grown to 200M+ monthly players, with many users in their teens. As a result, parents often play a crucial role in the decision to purchase or allow gameplay.

Minecraft Player Growth
Monthly Active Players (Millions)
Total Sales (Millions)
0
70
140
210
280
350
2020
2021
2022
2023
2024
2025

before & after

before & after

Focusing on Key Experience Gaps in the Minecraft Website

I focused on major issues in the current Minecraft website. News dominating the hero section, unclear differences between game titles, and the Marketplace not being strongly highlighted. Iexplored design ideas to better showcase the world, guide players to the right game, and emphasize community creations.

Before

after

Final Designs

loader+hero

loader+hero

Using a Cinematic Entry to Create a More Immersive Start

A cinematic loader builds anticipation before revealing the hero section. As users scroll, the hero transitions through descending pillars, creating the feeling of entering the Minecraft world and guiding users into the experience.

Before

Painpoints #1

News takes the main focus

The hero page shows news first instead of the Minecraft world and gameplay.

HMW #1

How might we make the hero section feel more like the Minecraft world, not a news page?

after

after

'Loader+Hero' Section

before

before

Game Introduction

Game Introduction

Helping New Players Understand the Game

To help users quickly understand the different Minecraft experiences, I designed a scrolling section where the background changes for each game. Short descriptions introduce the gameplay of each game, helping users compare them and decide which one they want to explore.

Before

HMW #2

How might we help players quickly understand which Minecraft game is right for them?

Painpoints #2

Hard to feel excited about the games

Players cannot easily know which Minecraft game they should play.

after

'Game Introduction' Section

after

before

before

marketplace

marketplace

Turning the Marketplace into a Discovery Experience

The original website made the Marketplace easy to miss. I redesigned the section to highlight community creations through a prominent carousel and clearer entry points, encouraging players to explore add-ons, maps, and skins that expand the Minecraft experience.

The original website made the Marketplace easy to miss. I redesigned the section to highlight community creations through a prominent carousel and clearer entry points, encouraging players to explore add-ons, maps, and skins that expand the Minecraft experience.

Before

HMW #3

How might we better highlight the value of the Marketplace in the Minecraft ecosystem?

Painpoints #1

Marketplace is not clearly highlighted

Even though the Marketplace is a big part of Minecraft, it is not strongly shown on the website.

after

'Marketplace' Section

after

before

before

why minecraft

why minecraft

Highlighting the Educational and Creative Value of Minecraft

To help new players and the guardians of young players understand the value of Minecraft, I highlighted its educational and creative aspects, showcasing the game’s potential for learning and broader educational use.

'Why Minecraft' Section

news

news

Bringing Clear Hierarchy to the News Section

Previously, news items were displayed in a flat list with little distinction in importance. I redesigned the section to introduce clear visual hierarchy, highlighting major updates such as patch notes with larger thumbnails and surfacing key information without relying on hover interactions.

Previously, news items were displayed in a flat list with little distinction in importance. I redesigned the section to introduce clear visual hierarchy, highlighting major updates such as patch notes with larger thumbnails and surfacing key information without relying on hover interactions.

'What's new?' Section

Design Process

Design system

Design system

Focusing on Key Experience Gaps in the Minecraft Website

I focused on major issues in the current Minecraft website—news dominating the hero section, unclear differences between game titles, and the Marketplace not being strongly highlighted—and explored design ideas to better showcase the world, guide players to the right game, and emphasize community creations.

I focused on major issues in the current Minecraft website—news dominating the hero section, unclear differences between game titles, and the Marketplace not being strongly highlighted—and explored design ideas to better showcase the world, guide players to the right game, and emphasize community creations.

Responsive Grid System

Desktop/Laptop: 1400px

Content width: 1040px · Margin: 80px

1040px

Tablet: 768px

Content width: 728px · Margin: 20px

728px

Mobile: 390px

Content width: 350px · Margin: 20px

350px

Components

Typography

Aa

Minecraft

Aa

Minecraft Seven

Aa

Oxanium

Color

Secondary

#6AC146

Accent

#FFEA6C

Main

#444444

Logo

Design System

Responsive Grid System

Desktop/Laptop: 1400px

Content width: 1040px · Margin: 80px

1040px

Tablet: 768px

Content width: 728px · Margin: 20px

728px

Mobile: 390px

Content width: 350px · Margin: 20px

350px

Components

Typography

Aa

Minecraft

Aa

Minecraft Seven

Aa

Oxanium

Color

Secondary

#6AC146

Accent

#FFEA6C

Main

#444444

Logo

Design System

Mid-fi

Mid-fi

Designing a Cinematic Onboarding Experience

To help new players understand Minecraft’s diverse gameplay, I designed a cinematic browsing structure. Through mid-fidelity wireframes, I explored how content hierarchy, scrolling interactions, and visual transitions could guide new users through Minecraft’s core experiences.

Mid-fidelity

Interaction Prototyping

Interaction Prototyping

Bringing the Website to Life

To bring a sense of liveliness to the Minecraft website, I developed the layout in Figma and then moved the design into Framer to test various interactions. Through this process, I was able to introduce more dynamic transitions and improve the overall sense of immersion and engagement across the site.

Tesing Interactions in Framer

Responsive Design

Responsive Design

Ensuring a Consistent Experience Across Devices

To ensure a consistent experience across devices, the website was designed responsively for desktop, tablet, and mobile. Layout, spacing, and interactions were carefully adapted to maintain clarity and usability on each screen size.

To ensure a consistent experience across devices, the website was designed responsively for desktop, tablet, and mobile. Layout, spacing, and interactions were carefully adapted to maintain clarity and usability on each screen size.

Reflections

take aways

take aways

Designing for Clear Information Hierarchy

This project pushed me to think deeply about how information should be structured and surfaced to users. Rather than simply adding more content, I focused on presenting key information in a way that helps users quickly understand the value of Minecraft and navigate the ecosystem with ease.

This project pushed me to think deeply about how information should be structured and surfaced to users. Rather than simply adding more content, I focused on presenting key information in a way that helps users quickly understand the value of Minecraft and navigate the ecosystem with ease.

Next steps

Next steps

Validating with New Players and Parents

Due to time constraints, usability testing was not conducted. As a next step, I would test the redesigned experience with new Minecraft players to evaluate whether the onboarding effectively communicates the value of the game. Additionally, testing with parents could reveal whether the experience successfully positions Minecraft as a safe and educational game worth recommending to children.

Due to time constraints, usability testing was not conducted. As a next step, I would test the redesigned experience with new Minecraft players to evaluate whether the onboarding effectively communicates the value of the game. Additionally, testing with parents could reveal whether the experience successfully positions Minecraft as a safe and educational game worth recommending to children.

Expanding Minecraft’s Educational Potential

Future work could explore Minecraft’s growth opportunities in educational and B2B environments. By validating its value for learning and creativity, the platform could further expand its role in schools and educational programs.

Future work could explore Minecraft’s growth opportunities in educational and B2B environments. By validating its value for learning and creativity, the platform could further expand its role in schools and educational programs.

More Projects

View all projects

View all projects

2025

Synctail

Because “Is my pet okay?” shouldn’t be a guessing game.

AI HEALTHCARE

AI AGENT

PET WELLNESS UX

2025

Synctail

Because “Is my pet okay?” shouldn’t be a guessing game.

AI HEALTHCARE

AI AGENT

PET WELLNESS UX

2025

Bitget

Copy trading shouldn’t mean copying blindly.

FINTECH

COPY TRADING

TRADER TRANSPARENCY

2025

Bitget

Copy trading shouldn’t mean copying blindly.

FINTECH

COPY TRADING

TRADER TRANSPARENCY