Hayoon Jung

About

Journal

Hayoon Jung

About

Journal

Hayoon Jung

About

Journal

Hayoon Jung

Hero image of Penguinn
Hero image of Penguinn

Background

Where it began 🌱

Today, people move around the world more than ever before. They relocate for work, study, marriage, and many other reasons. While moving to a new place can be exciting, it can also be tough. People might feel lonely and have trouble settling in, which can sometimes affect their mental health as they get used to new environments and cultures.

Challenge

Are we connected?

Getting involved locally can help, but communities today aren't as close-knit as they used to be. Even though we're connected globally, we often don't know neighbours.

How might we

Build a connected community?

Instead of just offering direct help, how might we foster a culture where neighbours welcome and support each other? This way, everyone—newcomers and long-time residents alike—can benefit from a warm, supportive community.

Challenge

Project Overview & Design Process

  • Timeline: 8 Weeks (Mar 2024~May 2024)

  • Tool: Figma, Figjam

  • My Role: UX/UI Designer

Image of project timeline for the design process from March to May
Image of project timeline for the design process from March to May
Image of project timeline for the design process from March to May
Image of project timeline for the design process from March to May

Overview

Project Spotlight ✨

Mockup image of four final product screens for Penguin app.

Jump to Final Design

Jump to Final Design

Jump to Final Design

Discover

User Interview

I conducted in-depth interviews with five individuals who have experienced moving either internationally or domestically, and ever used online local community services. The goal was to:

  • Understand their feelings and actions after moving.

  • Learn what helped them adjust.

  • Explore how they used community apps (what they liked, didn't like, and how they used them).

I conducted in-depth interviews with five individuals who have experienced moving either internationally or domestically, and ever used online local community services. The goal was to:

  • Understand their feelings and actions after moving.

  • Learn what helped them adjust.

  • Explore how they used community apps (what they liked, didn't like, and how they used them).

I conducted in-depth interviews with five individuals who have experienced moving either internationally or domestically, and ever used online local community services. The goal was to:

  • Understand their feelings and actions after moving.

  • Learn what helped them adjust.

  • Explore how they used community apps (what they liked, didn't like, and how they used them).

I conducted in-depth interviews with five individuals who have experienced moving either internationally or domestically, and ever used online local community services. The goal was to:

  • Understand their feelings and actions after moving.

  • Learn what helped them adjust.

  • Explore how they used community apps (what they liked, didn't like, and how they used them).

Affinity diagram

Affinity diagram from user interviews
Affinity diagram from user interviews
Affinity diagram from user interviews
Affinity diagram from user interviews

Insights

People start using community apps for practical needs

People start using community apps for practical needs

People are leaving the app because of scams and ads

People are leaving the app because of scams and ads

People seek seamless access to desired information

People seek seamless access to desired information

People want to find meaningful connections

People want to find meaningful connections

What I am focusing on

What I am focusing on

Streamlined Information

Streamlined Information

Streamlined Information

  • Improved Search

  • Organised categories

  • Easy navigation

ID Verification

ID Verification

ID Verification

  • Verify identities

  • Create a space for approved ads

Groups/Forum

Groups/Forum

Groups/Forum

  • Create groups for shared interests and goals

  • Create forums

Define

User Persona

Define

User Journey Map

User Journey Map

Define

Competitive Analysis

I conducted a competitive analysis of three platforms that offer online community services. Among them, I performed a SWOT analysis specifically for Nextdoor, which is a direct competitor.

Competitive analysis image comparing Nextdoor, Meetup, and Facebook
Competitive analysis image comparing Nextdoor, Meetup, and Facebook

Define

Sitemap

Penguin project sitemap showing key categories including home, groups, makret and discover
Penguin project sitemap showing key categories including home, groups, makret and discover
Penguin project sitemap showing key categories including home, groups, makret and discover
Penguin project sitemap showing key categories including home, groups, makret and discover

Wireframing

Balancing Security & User Experience in Verification

Through research, I learned users prioritise security in community apps. To keep Penguinn safe, I implemented a single-step mobile verification after testing user preferences.

See the full process (opens in a new tab)

Wireframes of the signup process
Wireframes of the signup process
Wireframes of the signup process
Wireframes of the signup process

Wireframing

Wireframing

Wireframes for signup, group, and market pages.
Wireframes for signup, group, and market pages.
Wireframes for signup, group, and market pages.
Wireframes for signup, group, and market pages.

Design

Hi-Fi Design

Sign Up

Sign Up

Hi-fi design of the signup process.
Hi-fi design of the signup process.
Hi-fi design of the signup process.
Hi-fi design of the signup process.

Group

Group

Hi-fi design of the group pages
Hi-fi design of the group pages
Hi-fi design of the group pages
Hi-fi design of the group pages

Market

Market

Hi-fi design of the market pages
Hi-fi design of the market pages
Hi-fi design of the market pages
Hi-fi design of the market pages

Design

Design Iteration

Image showing the iteration process of the group page.
Image showing the iteration process of the group page.
Image showing the iteration process of the group page.
Image showing the iteration process of the group page.

Design System

Style Guide

Screenshots of design system including colors, fonts, and reusable components.
Screenshots of design system including colors, fonts, and reusable components.
Screenshots of design system including colors, fonts, and reusable components.
Screenshots of design system including colors, fonts, and reusable components.

Accessibility

Designing Penguinn for everyone

I focused on making Penguinn to use for all kinds of people, so that everyone can have a meaningful experience with us. I followed the WCAG 2 Guideline to ensure my design is accessible.

  • The contrast ratio between the background and foreground colors is 15.12:1, which is higher than the WCAG minimum standard of 4.5:1.

  • The contrast ratio of the primary button color is 5.18:1.

  • The smallest font size is 12pt, and users can adjust the font size in the settings.

Image showing settings, light and dark mode, and different font sizes for accessibility.
Image showing settings, light and dark mode, and different font sizes for accessibility.
Image showing settings, light and dark mode, and different font sizes for accessibility.
Image showing settings, light and dark mode, and different font sizes for accessibility.

Key Takeaways

Learnings

Inclusive & Customisable Experience

Incorporating adjustable font sizes, high-contrast color schemes, and other flexible options helps people from all backgrounds use the product comfortably.

Flexible Information Structure

Designing a scalable content structure ensures the product can adapt to evolving community interests and remain supportive over time.

Reusable UI for Consistency & Efficiency

Building modular, reusable components fosters a cohesive user experience across the app and cuts down on design and development time.

Explore More Projects

Back to Home

Plody: Centralised supplier ordering platform for Hospitality