The H Gallery Admin
Web & APP
Timeline
Sep 2020 - Feb 2021
Company
HT Beyond, Hyungdai E&C (Client)
Role
Product Design Lead, UX/UI Design
Platforms
iOS, Android, Desktop
Designing a digital system for tour, facility, and reservation management
The H Gallery is a digital system with a web platform for administrators to manage tours, facilities, and reservations, and an app for the sales team to book facilities.
I collaborated with a product manager and two developers (Web, iOS, Android) to align outputs with client requests.
As lead product designer, I adapted HT Beyond’s key features to fit client needs, starting with information architecture. I then designed Hi-fi wireframes and final UI, iterating rapidly through user testing to refine design and features.
Our client, Hyundai Hill States Gallery is a complex cultural space to promote Hyundai E&C’s premium housings and provide valuable experiences to customers such as indoor tours, exhibitions, music concerts, and lifestyle classes.
Without an automated reservation system, clients has operated manually entire reservation tasks and promotional business.
So, our goal was to provide enterprise software solutions for the group to make them easy to operate their promotional business seamlessly and automatically.
We started with understanding the main user group and client’s request first.
The focused user groups in our client includes two type of users — administrators who manage and operate gallery's facilities and reservations schedule and sales team who makes reservations for their promotional business for Hyundai Hill States Gallery.
Comprehending the mainly required actions and overall flow from the two user groups, we gained insights of creating seamless product experience.
The main feature is structured in order to manage reservation system, considering each type of reservation.
In addition, we constructed basic functions such as creating users, posts, and surveys which are needed for overall management in admin tools.
We designed IA of APP for sales team to be able to mainly make a reservation and check its details through application.
Besides those primary features, they can view a notice from administrator and get notified of their reservation progress.
Designing a system is more complex than a simple graphic design. We discussed closely development capability within timeline and defined a range of possible functions as per type of reservation.
I provided wireframes as a communication tool with the client and validation of our user flows and definition.
Through sharing wireframes with both for admin and app, we enabled clients to confirm wether the requests were fulfilled and developers to start building the back-end.
I applied byb’s UI structure which is HT Beyond’s internal product to The H Gallery overall, adding the client’s brand colour as a primary colour and secondary colours for differentiation.
Checking & Approving a Reservation
The gallery administrators can check all reservations at a glance on monthly calendar and approve new reservations. I defined the way of displaying title on calendar and designed entire flow and UI.
* Play with the prototype below!
Creating a post
In order to notify important notice to sales team, the administrators use Posts menu. They can create and manage posts. This flow is mainly followed by posting flow from byb's admin tools.
* Play with the prototype below!
Creating a survey
In addition to the reservation system, the clients wanted to build own survey system to attach to tour and class reservation for gathering feedbacks from participants. As this flow is not included in byb's product, I designed overall flow from the scratch and discussed closely with a developer to create the entire user experience smoothly.
* Play with the prototype below!
Making a reservation
The key feature on APP is for sales team to make a reservation conveniently. While checking a reservation schedule on calendar, they can reserve a time slot for tours, facilities, and classes.
Viewing posts
Sales team can view notices from the gallery administrators. The basic flow of viewing posts was based on byb's APP. This UX helps the communication between sales team and administrators by leaving comments.
Checking reservation details
Sales team can get notified automatically of their booking status and check the details on APP. We fulfilled the client's main request which is sending notifications instantly to sales team without administrator's extra management through this UX flow.
Testing is a major aspect of designing a product. We conducted rigorous internal test by registering bugs to issues on Jira and communicating with developers closely to fix them for both admin websites and App.
Collecting feedback through official user testing with the client, we refined the product quickly and launched the App on both Android and iOS successfully.
It has been a great and enlightening journey for me in terms of designing entire system from Web to App. As a lead product designer, I got to design from scratch and understand the overall flow of admin and sales team. Not only designing visually, but also defining and planning details in a system has been amazing experience for me while working closely with developers.
