호두앱 - HODU APP
+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
+ HOUSEWITHK@GMAIL.COM
BASIC
TOOLS
Figma
Figma
Photoshop
Photoshop
Illustrator
Illustrator
Affinity
Designer
Affinity
Designer
Affinity
Photo
Affinity
Photo
2018-21
CALENDAR
WEB · APP
DESIGN · HTML/CSS/JS (100%)
PLANNING (80%)
HODU SERIES
HODU SERIES
An all-in-one schedule management system to control the daily flow in one place. Centering on the calendar, users can manage personal and group schedules, chats, and files in real-time. It includes premium features like medical bookings and visitor management for a wide range of use.
호두는 캘린더를 중심으로 개인과 그룹의 일정, 채팅, 파일을 한곳에서 관리할 수 있는 올인원 일정 관리 시스템입니다. 단순한 일정 관리를 넘어, 병원 예약과 실시간 현황 확인을 지원하는 호두닥, 주차 등록과 장소 탐색을 돕는 호두홈 등
호두는 캘린더를 중심으로 개인과 그룹의 일정, 채팅, 파일을 한곳에서 관리할 수 있는 올인원 일정 관리 시스템입니다. 병원 예약과 실시간 현황 확인을 지원하는 호두닥, 주차 등록과 장소 탐색을 돕는 호두홈 등 프리미엄 기능을 제공합니다.
프리미엄 기능을 하나의 앱 안에서 유기적으로 연결해 제공합니다. 이를 통해 여러 앱을 오가야 하는 번거로움 없이, 일상의 다양한 흐름을 끊김 없이 관리할 수 있습니다.
이러한 기능들을 하나의 앱 안에서 유기적으로 연결하여 일상의 다양한 흐름을 끊김 없이 관리할 수 있도록 돕습니다. 이를 통해 사용자는 여러 앱을 오가야 하는 번거로움 없이 모든 일정을 효율적으로 관리합니다.
DAILY MANAGEMENT
HODU APP
DAILY MANAGEMENT
HODU APP
DAILY MANAGEMENT
HODU APP
I integrated new features organically, keeping schedule management as the central focus of the project.
I integrated new features organically, keeping schedule management as the central focus of the project.
I integrated new features organically, keeping schedule management as the central focus of the project.
I integrated new features organically, keeping schedule management as the central focus of the project.
1
1
PROBLEM
PROBLEM
1
PROBLEM
Structural Complexity
& User Confusion
Structural Complexity
& User Confusion
Structural Complexity
& User Confusion
As features expanded, the service became overly complex and lost design consistency. Mixing basic and premium features in one app led to user confusion and information overload. I focused on resolving these structural challenges to better accommodate future premium functions.
As features expanded, the service became overly complex and lost design consistency. Mixing basic and premium features in one app led to user confusion and information overload. I focused on resolving these structural challenges to better accommodate future premium functions.
Difficulty navigating due to
overly integrated features.
Inconsistency
Overload
Delays
WORKS
GROUP
BASIC
DOC
GROUP
HOME
WORKS
GROUP
BASIC
Difficulty navigating due to
overly integrated features.
Inconsistency
Overload
Delays
WORKS
GROUP
BASIC
DOC
GROUP
HOME
WORKS
GROUP
BASIC
Unintuitive distinction between
Basic and Premium features.
Blurred
Confusion
Low Awareness
BASIC
PREMIUM
BASIC
Unintuitive distinction between
Basic and Premium features.
Blurred
Confusion
Low Awareness
BASIC
PREMIUM
BASIC
Users losing track of their flow
when switching between features.
System Inconsistency
Friction
Indecision
Users losing track of their flow
when switching between features.
System Inconsistency
Friction
Indecision
2
2
SOLUTION
SOLUTION
2
SOLUTION
Simplified Experience through Connection
Simplified Experience through Connection
Simplified Experience through Connection
As more features are integrated, the complexity felt by the user often increases. To resolve this paradox, I designed every touchpoint—discovery, transition, and expansion—into a single, seamless flow.
As more features are integrated, the complexity felt by the user often increases. To resolve this paradox, I designed every touchpoint—discovery, transition, and expansion—into a single, seamless flow.
Solution A
Solution A
An Interface that
Maintains Context
An Interface that
Maintains Context
An Interface that
Maintains Context
Group Interface
Swipe Entry
Contextual Link
Group Interface
Swipe Entry
Contextual Link
Designing Entry Points Based on Context
Designing Entry Points
Based on Context
Instead of separating premium features into unfamiliar menus, I naturally integrated them within the group lists that users access daily. By introducing left-to-right swipe interactions, I created a seamless experience where users can instantly switch to premium services when needed without going through complex navigation layers.
Instead of separating premium features into unfamiliar menus, I naturally integrated them within the group lists that users access daily. By introducing left-to-right swipe interactions, I created a seamless experience where users can instantly switch to premium services when needed without going through complex navigation layers.
Instead of separating premium features into unfamiliar menus, I naturally integrated them within the group lists that users access daily. By introducing left-to-right swipe interactions, I created a seamless experience where users can instantly switch to premium services when needed without going through complex navigation layers.
Solution B
Solution B
Different Functions,
One Way to Use
Different Functions,
One Way to Use
Different Functions,
One Way to Use
Unified Dashboard
Seamless Flow
Design Consistency
Unified Dashboard
Seamless Flow
Design Consistency
Maintaining Consistency in Experience
Maintaining Consistency
in Experience
Although the nature of services like hospital appointments and parking management varies, I kept the core layout and hierarchy of the dashboard consistent. This ensures that users maintain a stable brand experience without feeling any disconnect, regardless of which feature they use, allowing for intuitive navigation and control within the app.
Although the nature of services like hospital appointments and parking management varies, I kept the core layout and hierarchy of the dashboard consistent. This ensures that users maintain a stable brand experience without feeling any disconnect, regardless of which feature they use, allowing for intuitive navigation and control within the app.
Although the nature of services like hospital appointments and parking management varies, I kept the core layout and hierarchy of the dashboard consistent. This ensures that users maintain a stable brand experience without feeling any disconnect, regardless of which feature they use, allowing for intuitive navigation and control within the app.
HODU
Core Platform
HODU
DOC
Medical Health
HODU
HOME
Living & Space
HODU
NEXT
+ New Version
Solution C
Solution C
Scalable Guidelines
that Maximize
Operational Efficiency
Scalable Guidelines
that Maximize
Operational Efficiency
Scalable Guidelines
that Maximize
Operational Efficiency
Color Identity
Work Efficiency
Scalability
Color Identity
Work Efficiency
Scalability
Building a Sustainable System
Building a Sustainable System
I established a unique color system optimized for each service to ensure clear visual distinction. Additionally, by designing a universal design standard, I completed a scalable system that allows for an efficient end-to-end process—from planning to development—even when new premium versions are launched in the future.
I established a unique color system optimized for each service to ensure clear visual distinction. Additionally, by designing a universal design standard, I completed a scalable system that allows for an efficient end-to-end process—from planning to development—even when new premium versions are launched in the future.
I established a unique color system optimized for each service to ensure clear visual distinction. Additionally, by designing a universal design standard, I completed a scalable system that allows for an efficient end-to-end process—from planning to development—even when new premium versions are launched in the future.
3
3
USERFLOW
USERFLOW
3
USERFLOW
Premium Version
User Flow
Premium Version
User Flow
Premium Version
User Flow
I designed the flow so users can explore and choose between regular and premium versions within the group. The process is structured to lead naturally from the same screen to subscription, creating a seamless connection: Selection -> Subscription -> Immediate Use without any unnecessary transitions.
I designed the flow so users can explore and choose between regular and premium versions within the group. The process is structured to lead naturally from the same screen to subscription, creating a seamless connection: Selection -> Subscription -> Immediate Use without any unnecessary transitions.
HODU
HODUDOC
HODUHOME
4
4
MASCOT
MASCOT
HOBOT
HOBOT is the lead character of the Hodu series, enhancing the brand experience through user interaction. I designed it with a friendly, cute aesthetic to build rapport as a chatbot. By using consistent design and series-specific point colors, I ensured the character remains approachable and helps distinguish between different products.
5
5
VISUAL IDENTITY
VISUAL IDENTITY
Visual Identity
Visual Identity
I established a visual system for the organic integration of the Hodu series. The defined typography and color system maintain brand consistency across all environments and provide an intuitive experience for the user.
5
VISUAL IDENTITY
Visual Identity
I established a visual system for the organic integration of the Hodu series. The defined typography and color system maintain brand consistency across all environments and provide an intuitive experience for the user.
Prentendard
Prentendard
Medium
Medium
Semibold
Semibold
Prentendard
Medium
Semibold
HODU
HODU
#0051F2
#0051F2
BG COLOR
BG COLOR
#FFFFFF
#FFFFFF
FONT COLOR
FONT COLOR
#11171F
#11171F
HODU
#0051F2
BG COLOR
#FFFFFF
FONT COLOR
#11171F
HODUDOC
HODUDOC
#C2BECF
#C2BECF
HODOHOME
HODOHOME
#C2BECF
#C2BECF
HODUDOC
#C2BECF
HODOHOME
#C2BECF
4
4
MASCOT
MASCOT
4
MASCOT
HOBOT
HOBOT
HOBOT
HOBOT은 호두 시리즈의 세계관을 이끄는 대표 캐릭터로, 브랜드 경험의 중심에서 사용자와 상호작용하는 핵심 캐릭터입니다. 챗봇이라는 기능적 역할을 기반으로, 사용자에게 심리적 안정감과 친근함을 제공하는 데 중점을 두었으며, 동시에 자연스럽게 호감을 형성할 수 있는 귀여운 비주얼로 설계되었습니다.
또한 시리즈별로 포인트 컬러를 적용하여 각 제품 및 콘텐츠를 직관적으로 구분할 수 있도록 했으며, 부드럽고 이질감 없는 디자인 언어를 통해 다양한 사용자층에게 편안하게 다가갈 수 있는 브랜드 상징성을 강화했습니다.
HOBOT is the lead character of the Hodu series, enhancing the brand experience through user interaction. I designed it with a friendly, cute aesthetic to build rapport as a chatbot. By using consistent design and series-specific point colors, I ensured the character remains approachable and helps distinguish between different products.
HOBOT is the lead character of the Hodu series, enhancing the brand experience through user interaction. I designed it with a friendly, cute aesthetic to build rapport as a chatbot. By using consistent design and series-specific point colors, I ensured the character remains approachable and helps distinguish between different products.
HODU
HODUDOC
HODUDOC
6
6
UI / INTERACTION
UI / INTERACTION
Selected Pages
Selected Pages
I organized the main screens in one place so that the overall structure and functional flow can be understood at a glance. You can review the overall user experience, focusing on the connectivity between pages and the flow of use.
DASHBOARD
[VIDEO]
SCHEDULE
[IMAGE]
CALENDAR
[VIDEO]
FILEBOX
[VIDEO]
WEB VERSION
[VIDEO]
GROUP
[IMAGE]
CHAT
[IMAGE]
HODUDOC
[VIDEO]
MAKE APPOINTMENT
[VIDEO]
HODUHOME
[VIDEO]
PLACE
[VIDEO]
5
UI / INTERACTION
Selected Pages
I organized the main screens in one place so that the overall structure and functional flow can be understood at a glance. You can review the overall user experience, focusing on the connectivity between pages and the flow of use.
DASHBOARD
[VIDEO]
SCHEDULE
[VIDEO]
CALENDAR
[VIDEO]
FILEBOX
[VIDEO]
WEB VERSION
[VIDEO]
GROUP
[VIDEO]
CHAT
[VIDEO]
HODUDOC
[VIDEO]
MAKE APPOINTMENT
[VIDEO]
HODUHOME
[VIDEO]
PLACE
[VIDEO]
[00]
[01]
[02]
[03]
[04]
[05]
[END]
[00]
[01]
[02]
[03]
[04]
[05]
[END]