byb
Product Design

Timeline
Dec 2019 - Present
Role
Product Design,
UX/UI Design
Platforms and Tools
iOS, Android, Desktop
Figma, Teams, Jira, Miro
Company
HT Beyond
1.1
Overview

byb is an IoT-based residential platform providing an incorporated service for an apartment complex, including amenities, neighborhood communities, local commerce, and IoT service.

As a product designer joined as an early member of HT Beyond, I was in charge of building the fundamental structure of byb from scratch such as solving the main verification problems and bringing the product concept, IA, wireframes in the beginning as well. I recently led the team to create a responsive web app of byb for expanding our service area for all ages friendly.

Started with UX team just including 3 designers and 1 PM, our Product team are now increased with 4 product designers, 5 product managers and 1 director. Since our official launch on Sep 29th, 2020, we've refined all the frictions of usability and been fast-growing with over 50,000 residents.

2.1
Research ... Interview

I started with competitor analysis and user research to gain ideas of how the actual market and user’s needs were going on. In terms of understanding users in depth, I participated in residential communities for user research and got to find residents' pain points of registering in their apartments.

While conducting user research, I also interviewed residents who use amenities in their apartments to gain insights by using Google Forms.

2.2
Identify problem space

Organising all the researched sources on a board on Miro, I found the main problems that the residential platforms faced and identified this problem to discuss with a product manager and CTO, which could be our strong features of service if we solve.

How can we automate resident verification process?

2.2.1
Constraints

There has been manual process and abuse to verify resident identification for using facilities in an apartments.

I discovered the current two ways of resident verification and identified the constraints as below. Throughout this insights, I investigated more about residential types and all possible cases for seeking our solutions.

2.3
Solutions

Discussing with our team and CTO closely, we agreed on 2 ways of automated solutions provided when residents sign up on our product. If residents who don't have provided code, they can be still available to sign up with requesting approval to administrators.

This system can automate the resident verification process without a lot of hassle for both residents and administrators and improve entire user flow and life quality for living in apartments.

3.1
Product concept

Based on discussion with CTO, I visualised the fundamental concept of byb and specified the external subjects for brainstorming as many as possible that we can cooperate in the next stage.

We decided to focus on the first step of providing total solutions for apartments partnered with byb first. In this stage, our target users to help are administrators and each household including individual users using apartments' facilities.

4.1
Features

Our utmost solutions are focused on providing comprehensive features in terms of living in and managing apartment for both residents and administrators.

5.1
IA of APP

I organised the features into same range of group and each navigation tab with simple visualisation, constructuring information architecture for App first.

We went for progressive discussion of wether each feature is on the right group. Through this visualisation, we got to refine easily the grouping as our original intention toward our product.

5.1.1
IA of Admin tools

Based on the IA of App, we listed required menu to manage the overall app service from admin side.

After identifying IA of admin tools, we specified detailed function under each menu, which enabled me to prepare to design wireframes more smoothly.

5.2
Onboarding flow

To connect all the functions and information through a seamless user experience, I visualised user flow from the onboarding of our app.

Users will get in welcoming entry on the onboarding process first and then they will enter their validated apartment society on the app.

Let me walk you through byb's main UX and my task in each experience.

6.1
UX - Feed

Feed-based communities

byb's main user experiences is consumed with feed-based structure in terms of viewing a notice, reserving a service, and communicating between residents. Users can follow services and talk channel that they are interested in to see their posts and get notifications of new posts as well.

...My task

Analysing type of posts on each feed and define actions to be asked to users

To decide actions such as like, commenting, report, and delete, I organised the type of posts on each feed. Discussing based on the analysis, we got to compose the design components for posts.

6.2
UX - Reservations

Reserve to use community amenities

byb's IoT-based technology allows apartments to make a reservation for all community amenities. Residents can simply reserve facilities, cultural classes of their apartment services on byb.

...My task

Organising reservation type — subscriptions, accomodations, fixed slots, classes, and etc. — and components and double-confirming user experience and flow of each reservation

Cooperated with another product designer, I consisted the reservation elements and double-checked the user flow when it comes to creating our responsive web service.

6.3
UX - Smart Home

Controlling IoT devices easily with app by interworking with home network service

byb provide Smart Home service, which enable users to control IoT device easily. We've partnered with a home network company, Hundai HT Co Ltd, which is a parent company of HT Beyond, so we can connect entire home experience smoothly within our product.

...My task

Changing user experience to enable users to control IoT devices by rooms

Previously, we used floor plan for user to select the room and show devices in each room. However, using a floor plan has a problem in terms of customisation for each apartment. My task was to change the user flow without a floor plan so I figured the another page to show the details of each room and guided user to find where the room is.

6.4
UX - My reservations

Checking my reservation status and details

Reserving facilities and cultural program in apartments is available on app with byb. Residents can confirm their reservation status at a glance and view the details.

...My task

Adding tabs for user to view the reservations by category

It was inconvenient to view the reservations lists by status since each type of reservation has different components. For the solution, I added tabs and a filter for status on the top so that user can check the list by category. This idea was agreed with other team member so it was applied to next version on byb.

6.5
UX - History

Checking the overall history of my card and the usage of community amenities at a glance

All the payment history and records with resident card will be listed on a page. User can track the history through app and manage their spending.

...My task

Re-structuring the user experience and flow of viewing history

Previous design pages were unnecessarily separated with different pages. The design component of history also had a problem of not fulfilling our requirement. After we figure out this problem after launching version 1.0, I conducted to identify all the problems we had and re-design overall 'History' flow by combining with one page with tabs and discussing closely with a product manager.

6.6
UX - Visitors parking system

Registering visitors' vehicle in advance with applying discounted hours for parking fee

Residents can registered visitors' vehicle in advance and administrators can manage the registered vehicle list on admin tools.

...My task

Designed entire visitors parking system including App and admin tools from the ground collaborating closely with a product manager

I started with user research to understand the market of visitors parking system and the allowed IoT-based data to design the system. I designed from the scratch including the entire flow of registering the vehicles, applying discounted hours, and managing the parking hours and delivered to UI designer for enhancing the optimised GUI design.

6.7
Admin tools

Creating sitemap from scratch and designing overall pages for management system with consideration of physical devices and data.

Discussed and collaborated closely with other product designers, we've built admin tools from scratch. Specified all the menu we need, I delivered wireframes and final design with understanding interconnection between machine in offline settings and data we receive.

7.1
Design system

Keeping our design system on overall user experience design by applying a brand new look and improving efficiency.

Under the lead by an UI-focused product designer, we systemised our design components for byb product. Enhancing design system approach, our product's branding identity is constantly increasing with user friendly.

8.1
Testing ... User feedback

In order to conduct functional testing, we creates high fidelity prototype to communicate new solution to the team.

We've also proceeded thorough usability testing across Android and iOS devices, identified bugs, and refined the imperfect user experience quickly for the updated version. In addition, through service operation team, we've been collecting actual residents' feedback on byb, which helps us to develop better product.