bellygom

User Experience Design

Designing a website for Korea's most popular pink bear

when
duration, year
8 weeks, 2022

Where

location, type
Seoul, Commercial

who

the team
Myself + team of 8

Which

skills, tools
Figma, Protopie, Discord

ROle

my responsibilities
UX/UI Designer, Researcher, Moderator

Methods

techniques used
User Testing, Content Strategy, Cross-functional Collaboration

Project Overview

01

Key Contributions

Website UX/UI Design:

  • Designed the official Bellygom NFT website in a team.
  • Implemented innovative features like night mode.
  • Proposed and experimented with new design ideas to improve user experience.

Social Media Assets:

  • Designed banners and promotional materials for various social media platforms.
  • Ensured consistent branding and visual appeal across all channels.

Community Management:

  • Moderated the international Discord channel and helped manage the server.
  • Created custom digital stickers from brand resources to boost community interaction.

02

Design Process

Research & Planning:

  • Conducted competitive analysis on NFT platforms to understand best practices.
  • Defined user personas and user journeys to guide design decisions.
  • Identified common user questions and concerns through research, which informed the structure of the FAQ page.

Wireframing & Prototyping:

  • Designed mid-fidelity wireframes and high-fidelity prototypes using Figma and Protopie.
  • Focused on seamless navigation and interaction to enhance the user experience during the NFT purchase process.

Visual Design:

  • Created a user-friendly and visually appealing interface with Bellygom’s playful brand identity.
  • Developed a night mode feature with a day/night toggle switch to personalize the user experience.
  • Refined the FAQ page design with expandable sections to minimize clutter and present answers in a clear, accessible way.

Research & Planning:

  • Conducted competitive analysis on NFT platforms to understand best practices.
  • Defined user personas and user journeys to guide design decisions.
  • Identified common user questions and concerns through research, which informed the structure of the FAQ page.

Wireframing & Prototyping:

  • Designed mid-fidelity wireframes and high-fidelity prototypes using Figma and Protopie.
  • Focused on seamless navigation and interaction to enhance the user experience during the NFT purchase process.

Visual Design:

  • Created a user-friendly and visually appealing interface with Bellygom’s playful brand identity.
  • Developed a night mode feature with a day/night toggle switch to personalize the user experience.
  • Refined the FAQ page design with expandable sections to minimize clutter and present answers in a clear, accessible way.

Fun and Engaging

Our team collaborated to create a playful and immersive homepage that reflects Bellygom's fun character while guiding users through the NFT journey.

We focused on balancing playfulness with clarity, ensuring that the website feels fun yet functional, with easy access to all relevant information.

Our team created an interactive storybook to introduce users to the world of Bellygom and its 10,000 unique powers. I contributed to the UI/UX design and worked on refining the story's copy, visuals and user experience to enhance engagement.

Collaborated on creating a fun, immersive story for users to explore Bellygom's journey and powers. Assisted with improving the story’s translation, ensuring the text flowed naturally and was grammatically correct for the international audience. This storybook helped users connect with Bellygom on a deeper level, driving curiosity and engagement with the brand.

Initially, the flow of the website looked like this. We used available resources, both 2D and pseudo-3D, to create the flow. The final product included most of these sections and a horizontal scroll in the middle. After Bellygom falls from the clouds, it walks to right right as the user scrolls the page.

We came up with this layout as a team after a very long workday at the office, around midnight 🥲. Then I finally got to go home 🥹.

This was another part I worked on mostly on my own. While small, the FAQ page played a crucial role in ensuring a smooth user journey for the Bellygom NFT project. Having been a moderator of the Bellygom Discord community, I led the design through several iterations, focusing on:

  • Simplifying complex information to ensure users, regardless of their familiarity with NFTs, could easily find answers to their questions.
  • Prioritizing the most common user concerns, structured them intuitively, and implemented clear, concise responses.
  • Designing expandable sections to keep the page clean and prevent information overload.
  • Ensuring the FAQ page worked seamlessly across devices for a consistent experience.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

03

Homepage

Fun and Engaging

Our team collaborated to create a playful and immersive homepage that reflects Bellygom's fun character while guiding users through the NFT journey.

We focused on balancing playfulness with clarity, ensuring that the website feels fun yet functional, with easy access to all relevant information.

04

Storybook

Our team created an interactive storybook to introduce users to the world of Bellygom and its 10,000 unique powers. I contributed to the UI/UX design and worked on refining the story's copy, visuals and user experience to enhance engagement.

Collaborated on creating a fun, immersive story for users to explore Bellygom's journey and powers. Assisted with improving the story’s translation, ensuring the text flowed naturally and was grammatically correct for the international audience. This storybook helped users connect with Bellygom on a deeper level, driving curiosity and engagement with the brand.

05

Website Flow

Initially, the flow of the website looked like this. We used available resources, both 2D and pseudo-3D, to create the flow. The final product included most of these sections and a horizontal scroll in the middle. After Bellygom falls from the clouds, it walks to right right as the user scrolls the page.

We came up with this layout as a team after a very long workday at the office, around midnight 🥲. Then I finally got to go home 🥹.

06

Night Mode

I was tasked with designing the night mode version of the website, so I decided to have a little fun with it and be innovative. It was a slightly different version than the final product:

07

FAQ

This was another part I worked on mostly on my own. While small, the FAQ page played a crucial role in ensuring a smooth user journey for the Bellygom NFT project. Having been a moderator of the Bellygom Discord community, I led the design through several iterations, focusing on:

  • Simplifying complex information to ensure users, regardless of their familiarity with NFTs, could easily find answers to their questions.
  • Prioritizing the most common user concerns, structured them intuitively, and implemented clear, concise responses.
  • Designing expandable sections to keep the page clean and prevent information overload.
  • Ensuring the FAQ page worked seamlessly across devices for a consistent experience.

08

Iterations

These are the earlier design iterations leading up to the final version of the FAQ page. Each iteration was easily refined, allowing for a smooth transition to the next as we focused on improving the overall user experience.

#1

#2

#3

09

Reflection

Working on the Bellygom NFT project was an invaluable experience in iterative design and user-centered problem-solving. Each iteration of the website, from the homepage to the FAQ, taught me the importance of being flexible and responsive to feedback. I gained a deeper understanding of how to balance fun, playful visuals with functional design elements that drive engagement and conversions.

Additionally, refining the FAQ page helped me recognize the value of clarity in reducing user friction. This project has further strengthened my adaptability in design and my focus on creating meaningful, intuitive user experiences.

10

Guiding Principle

More projects

this page is still in the works

Please check back again in a week.
Thank you :)
Animation by Artemiy on LottieFiles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Our team created an interactive storybook to introduce users to the world of Bellygom and its 10,000 unique powers. I contributed to the UI/UX design and worked on refining the story's copy, visuals and user experience to enhance engagement.

Collaborated on creating a fun, immersive story for users to explore Bellygom's journey and powers. Assisted with improving the story’s translation, ensuring the text flowed naturally and was grammatically correct for the international audience. This storybook helped users connect with Bellygom on a deeper level, driving curiosity and engagement with the brand.

Initially, the flow of the website looked like this. We used available resources, both 2D and pseudo-3D, to create the flow. The final product included most of these sections and a horizontal scroll in the middle. After Bellygom falls from the clouds, it walks to right right as the user scrolls the page.

We came up with this layout as a team after a very long workday at the office, around midnight 🥲. Then I finally got to go home 🥹.

This was another part I worked on mostly on my own. While small, the FAQ page played a crucial role in ensuring a smooth user journey for the Bellygom NFT project. Having been a moderator of the Bellygom Discord community, I led the design through several iterations, focusing on:

  • Simplifying complex information to ensure users, regardless of their familiarity with NFTs, could easily find answers to their questions.
  • Prioritizing the most common user concerns, structured them intuitively, and implemented clear, concise responses.
  • Designing expandable sections to keep the page clean and prevent information overload.
  • Ensuring the FAQ page worked seamlessly across devices for a consistent experience.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript