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
The H gallery is a digital product operating comprehensive system that includes a web-based solution that allows administrators to manage tours, facilities, and class reservations in Hyundai Hillstate Gallery and an app-based solution for the sales team to make a reservation for the facilities.
I worked closely with collaborating one product manager and two developers (Web, iOS & Android) to ensure that the outputs were developed as the clients' requests.
As a lead product designer, my primary role was to comprehend HT Beyond's internal products and apply the key features to the client's product while fitting their needs. I started with the information architecture to communicate with them and designed a Hi-fi wireframe and final design to be implemented for development. We iterated quickly to revise design and features with repeated user testing.
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.
