byb
Product Design
Timeline
Dec 2019 - 2021 Aug
Role
Product Design, UX/UI Design
Platforms and Tools
iOS, Android, Figma, Teams, Jira, Miro
Company
HT Beyond
byb is an IoT-based residential platform that offers a comprehensive service for apartment complexes. This includes amenities, neighborhood communities, local commerce, and IoT services.
As an early member of HT Beyond, I was a product designer responsible for byb's foundational structure, solving primary verification problems, and developing the product concept, Information Architecture (IA), and initial wireframes. I also led the team to create a user-friendly responsive web app for byb.
TLDR; Our Product team, initially three designers and one product manager, now includes four designers, five managers, and one director. Since launching on September 29, 2020, we've addressed usability issues and grown our user base to over 50,000 residents.
I studied our competitors, learned about our users, analysed market trends, and identified the problems they face when registering their apartments.
While conducting user research, I also interviewed residents who use amenities in their apartments to gain insights by using Google Forms.
After researching, I identified key issues in residential platforms and proposed solutions to our product manager and CTO to enhance our service.
How can we automate resident verification process?
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.
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.
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.
Our utmost solutions are focused on providing comprehensive features in terms of living in and managing apartment for both residents and administrators.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
