APTNER pass v2.0
APTNER, an IT company based in South Korea, focuses on enhancing residential convenience within apartment complexes. I improved the user experience of its service, APTNER pass, which allows residents to reserve communal spaces and amenities.
ROLE
UI/UX Designer
Design System
TEAM
Jungho Yoo
Doohyeon Kim
Jungkoo Lee
Hyekyung Park
TOOL
Figma
Illustrator
DURATION
Feb - Mar 2023
OVERVIEW
OVERVIEW
APTNER pass is a service embedded within APTNER's app, designed to help residents reserve communal activities and amenities in advance. As the sole UI/UX Designer in a team of five (Project Manager, Frontend Engineer, Backend Engineer, and pass Customer Service Manager), I was responsible for revamping the user experience for APTNER pass users to v2.0. This involved creating a seamless user flow and integrating a user interface that aligned with APTNER's existing design system. I took full ownership of the project across all stages, from research and design to execution, making numerous design decisions that optimized key user touchpoints.
APTNER pass is a service embedded within APTNER's app, designed to help residents reserve communal activities and amenities in advance. As the sole UI/UX Designer in a team of five (Project Manager, Frontend Engineer, Backend Engineer, and pass Customer Service Manager), I was responsible for revamping the user experience for APTNER pass users to v2.0. This involved creating a seamless user flow and integrating a user interface that aligned with APTNER's existing design system. I took full ownership of the project across all stages, from research and design to execution, making numerous design decisions that optimized key user touchpoints.
PROBLEM STATEMENT
PROBLEM STATEMENT
APTNER pass is designed in an aspect that is not uniform with the rest of the app’s design system and has a convoluted user flow that disrupts the user experience.
APTNER pass is designed in an aspect that is not uniform with the rest of the app’s design system and has a convoluted user flow that disrupts the user experience.
While the APTNER mobile app has undergone multiple redesigns over the past five years, APTNER pass had remained untouched. The original user interface, developed by engineers without user research, lacked empathy and convenience.
While the APTNER mobile app has undergone multiple redesigns over the past five years, APTNER pass had remained untouched. The original user interface, developed by engineers without user research, lacked empathy and convenience.
SOLUTION
SOLUTION
Simplify the user flow by aligning the UI with the APTNER design system and removing unnecessary complexities to focus on the minimum viable product.
Simplify the user flow by aligning the UI with the APTNER design system and removing unnecessary complexities to focus on the minimum viable product.
INITIAL IDEA
INITIAL IDEA
Identifying opportunities, frustrations, and needs.
Identifying opportunities, frustrations, and needs.
By defining the information architecture of the existing UX of APTNER Pass v1.0, interviewing residents of Ansan Granx1—one of the largest and most representative apartment complexes using our service—and analyzing customer service invoices collected by our team, I identified key areas that frustrated our users the most and needed redesign of the user flow.
By defining the information architecture of the existing UX of APTNER Pass v1.0, interviewing residents of Ansan Granx1—one of the largest and most representative apartment complexes using our service—and analyzing customer service invoices collected by our team, I identified key areas that frustrated our users the most and needed redesign of the user flow.
Key Insights and Design Decisions
Key Insights and Design Decisions
Design inconsistency
Design inconsistency
Design inconsistencies between APTNER and APTNER Pass caused confusion among users, especially in finding the Pass service within the APTNER mobile app. Additionally, the typography and colors were inaccessible to the full target audience, aged 20 to 60.
Design inconsistencies between APTNER and APTNER Pass caused confusion among users, especially in finding the Pass service within the APTNER mobile app. Additionally, the typography and colors were inaccessible to the full target audience, aged 20 to 60.
Solution
Solution
APTNER has a clear, organized design system that is consistent across all services except APTNER Pass. Redesign the APTNER Pass interface using existing design system components and create new components as needed.
APTNER has a clear, organized design system that is consistent across all services except APTNER Pass. Redesign the APTNER Pass interface using existing design system components and create new components as needed.
Unempathetic user flow
Unempathetic user flow
Identified frustration with app features that were dysfunctional, unorganized, and unnecessary, slowing down the reservation process.
Identified frustration with app features that were dysfunctional, unorganized, and unnecessary, slowing down the reservation process.
Solution
Solution
Based on the information architecture, categorize amenities by type that share the same reservation process and design a more comprehensive, seamless user flow.
Based on the information architecture, categorize amenities by type that share the same reservation process and design a more comprehensive, seamless user flow.
DESIGN SYSTEM
DESIGN SYSTEM
Design System Implementation Process.
Design System Implementation Process.
To create a cohesive experience, I used the APTNER design system and developed additional UI components for APTNER pass's unique features.
To create a cohesive experience, I used the APTNER design system and developed additional UI components for APTNER pass's unique features.
↓ ↓ ↓
↓ ↓ ↓
For a better look, refer to this case study
For a better look, refer to my design system figma file, viewable through desktop
APTNER pass - Design System
Style Implementation
Visit Page
UX SOLUTION
UX SOLUTION
Categorized into four reservation types.
Categorized into four reservation types.
From my research, I identified that all amenity reservation methods can be categorized into four types: room, seat, cafe, and program. Focusing on these, I recreated the user flow to provide a simpler, more intuitive reservation process.
From my research, I identified that all amenity reservation methods can be categorized into four types: room, seat, cafe, and program. Focusing on these, I recreated the user flow to provide a simpler, more intuitive reservation process.
This simplified the UX of the APTNER pass app by creating four templates that can be easily applied across different amenities and apartment complexes. Users will find the app more familiar and easier to navigate as well, reducing confusion.
This simplified the UX of the APTNER pass app by creating four templates that can be easily applied across different amenities and apartment complexes. Users will find the app more familiar and easier to navigate as well, reducing confusion.
DESIGN CHOICES
DESIGN CHOICES
Final Designs.
Final Designs.
TYPE ONE
Room Type
I redesigned the calendar component using primary and secondary colors and added key indicators to help users distinguish "today" from "selected" dates.
Room Type
I redesigned the calendar component using primary and secondary colors and added key indicators to help users distinguish "today" from "selected" dates.
TYPE ONE
TYPE TWO
Seat Type
Seat Type
I redesigned the seat component by adding labels to individual seats for easier identification of reservation availability. Additionally, I implemented spacing guidelines across all screens.
I redesigned the seat component by adding labels to individual seats for easier identification of reservation availability. Additionally, I implemented spacing guidelines across all screens.
TYPE TWO
TYPE THREE
Program Type
Program Type
I improved the interface by removing a non-functional dropdown for program types and eliminating a redundant instructor profile button on the program card. By making the instructor name itself a clickable button that opens the profile pop-up, I streamlined the design, reducing confusion and simplifying the card component.
I improved the interface by removing a non-functional dropdown for program types and eliminating a redundant instructor profile button on the program card. By making the instructor name itself a clickable button that opens the profile pop-up, I streamlined the design, reducing confusion and simplifying the card component.
TYPE THIRD
TYPE FOUR
Cafe Type
Cafe Type
I added a new screen to improve user flow by separating the menu browsing and ordering processes, which were previously combined on a single screen. This change provides a wider view of menu items and eliminates infinite scrolling. I also refined the checkout process with toast notifications, ensuring a smoother and more intuitive experience.
I added a new screen to improve user flow by separating the menu browsing and ordering processes, which were previously combined on a single screen. This change provides a wider view of menu items and eliminates infinite scrolling. I also refined the checkout process with toast notifications, ensuring a smoother and more intuitive experience.
TYPE FOUR
HOW MIGHT WE?
Problem Statement
While the Guggenheim Museum's official website offers in-depth guides and assistance, the on-site experience falls short, leading to frustration and limited engagement for visitors.
What are the existing pain points during in-person visits to the Guggenheim?
How can visitors interact and augment their experience at the museum?
TAKEAWAY
TAKEAWAY
The outcome.
The outcome.
After presenting my work, my team proceeded with the development and coding of the project. Due to my departure to attend a graduate program in New York, I was unable to engage fully in the development process. A few months later, my teammate updated me that the coding phase was complete and the project was awaiting deployment to the community.
After presenting my work, my team proceeded with the development and coding of the project. Due to my departure to attend a graduate program in New York, I was unable to engage fully in the development process. A few months later, my teammate updated me that the coding phase was complete and the project was awaiting deployment to the community.
What I learned.
What I learned.
The project provided me with hands-on experience in a real-world scenario, allowing me to identify key user needs and understand the significance of UI consistency for a seamless user experience.
This experience sharpened my skills in refining the user journey by simplifying and leveraging common patterns and pathways to enhance app learning. Additionally, it improved my ability to collaborate and communicate effectively across different teams.
The project provided me with hands-on experience in a real-world scenario, allowing me to identify key user needs and understand the significance of UI consistency for a seamless user experience.
This experience sharpened my skills in refining the user journey by simplifying and leveraging common patterns and pathways to enhance app learning. Additionally, it improved my ability to collaborate and communicate effectively across different teams.
APTNER pass v2.0
APTNER, an IT company based in South Korea, focuses on enhancing residential convenience within apartment complexes. I improved the user experience of its service, APTNER pass, which allows residents to reserve communal spaces and amenities.
ROLE
UI/UX Designer
Design System
TEAM
Doohyeon Kim
Hyekyung Park
Jungkoo Lee
Jungho Yoo
TOOL
Illustrator
Figma
DURATION
Jan - Mar 2023