tpa_3_cover.jpg

TPA Connect

Android & iOS, UI Design

CLIENT: Swire Properties

CONTEXT: Taikoo Place Apartments is a premium serviced residence in the eastern business district, Quarry Bay, Hong Kong. They're known for their luxury design, top-notch facilities, and 24-hour concierge service.

TEAM: I led the UI design of Taikoo Place Apartment's concierge app and collaborated closely with Kim (UX designer) to make the user flows as simple and intuitive as possible.

  BUSINESS PROBLEM:  While their round-the-clock service adds tremendous value to their brand, it's paradoxically difficult to facilitate.   USER PROBLEM:  Their transient residents are often visiting Hong Kong for the first time on short business trips, or staying for year-long work contracts. Relocating to a new city for short periods of time can be stressful and overwhelming for newcomers.

BUSINESS PROBLEM: While their round-the-clock service adds tremendous value to their brand, it's paradoxically difficult to facilitate.

USER PROBLEM: Their transient residents are often visiting Hong Kong for the first time on short business trips, or staying for year-long work contracts. Relocating to a new city for short periods of time can be stressful and overwhelming for newcomers.

SOLUTION

SOLUTION

In order to ease stress on the business’ human resources, we designed a digital concierge service—a native application that fulfills the resident’s needs, 24 hours a day, 7 days a week.

We educate residents on the services and amenities offered at Taikoo Place Apartments while empowering them to make reservations for the spas, schedule laundry services, order fresh bed sheets and silverware, order a car, file a maintenance request, all with a tap of a button.

ADVOCATE FOR UXR

ADVOCATE FOR UXR

CONSTRAINTS: Working within an agency model can sometimes feel like an uphill battle. Not only was time a constraint (which means no iterative testing), but there was a general lack of support for user research (due to misaligned philosophy, lack of resources, & budget constraints).

SOLUTION: I found ways to bring user empathy into the process with on-site visits to Taikoo Place Apartments.

IMPACT: My learnings significantly changed the direction of UI and interaction design. Our client was excited about the new direction.

DYNAMIC NAVIGATION

DYNAMIC NAVIGATION

After exploring several unique interfaces, I designed a dynamic scrolling primary navigation. The interface takes cues from the interior design in Taikoo Place Apartments and moves in sync with the user's scrolling.

SIMPLE USER FLOWS

SIMPLE USER FLOWS

Our goal was to simplify the daily lives of our users at Taikoo Place Apartments, so it was essential to clear away any extraneous steps. Here's an example flow from our restaurant booking service. The progress bar at top reassures the user that there are only a few steps to completion. Each step is uncluttered and straightforward. A confirmation screen at the end signals to the user that the task is complete.

PROTOTYPING INTERACTION

PROTOTYPING INTERACTION

I prototyped interactions and transitions in Principle and After Effects. For the rest of the user flows, I created a clickable prototype in InVision.

IMPROVING THE UX

IMPROVING THE UX

I took Kim's wireframes and continued to iterate on both UX and UI, often removing and adding different functionalities and interactions.

2.0 Leave a Message: I added the photograph and name of the concierge answering the user's questions. This helps makes the application feel less alien and more friendly.

2.5.5 Car Confirmation: I changed the background color in order to strongly signify a state change (confirmation). I also added iconography and hierarchy to the typography to further communicate the state change.

  2.2.6 - Car request overview : I added the additional states, "submitted" and "confirmed" with iconography and differentiating color. I also decided to show the user's history in order to give the user a better picture of her usage.   6.0 - News & events:  Instead of a uniform design, I chose to highlight a single event with dynamic cards. When the user scrolls, the next event will come into focus by enlarging.

2.2.6 - Car request overview: I added the additional states, "submitted" and "confirmed" with iconography and differentiating color. I also decided to show the user's history in order to give the user a better picture of her usage.

6.0 - News & events: Instead of a uniform design, I chose to highlight a single event with dynamic cards. When the user scrolls, the next event will come into focus by enlarging.

CRAFT

CRAFT

Craft is a critical component to UI design. I take precision seriously, creating consistent interaction patterns and UI patterns throughout an experience.

Software constraints: Text bounding boxes in Sketch are inaccurate, which causes padding and margins to change slightly after designs are translated into code. Guides are great starting points and are expected to change while designing for multiple devices and operating systems.

RESULT

RESULT

Within 6 months of launch, we saw over 50% of residents download and adopt TPA Connect. The native app has offered round-the-clock services for residents, while easing the demand on human resources at Taikoo Place Apartments. Our service has bolstered their brand value as top-of-the-line service providers in the luxury apartment space in Hong Kong.

LEARN & IMPROVE

LEARN & IMPROVE

PROBLEM: One of our limitations was lack of time, budget, and support for user research. Additionally, affluent residents expect greater incentives in exchange for their time.

LOW-COST FEEDBACK: Build more opportunities for learning by asking residents to rate their experience after services are completed to. We could include “Feedback” or “Help & Support.”

PROBLEM: Our app makes it difficult for new residents to compare restaurants and make quick decisions.

COMPARISON-SHOPPING: We could utilize the Yelp API to pull in ratings and reviews, and short restaurant descriptions. This content should exist on one page so the user can quickly and easily make their selection.

PROBLEM: The lack of problem discovery diminishes our opportunities to deliver a truly powerful application.

VARIETY OF STAKEHOLDERS: Spend more time in and out of the facilities. Talk to a variety of stakeholders, not just residents, but also service personnel, managers, concierge, and travelers and locals shopping for apartments.

PROBLEM: The large background image can cause latency in older devices.

TILED PATTERNS: Explore tiled patterns which diminish size of the app and increase download speeds.

PROBLEM: There was little time spent on iterating on the icons in the primary navigation.

ELEGANT ICONOGRAPHY: Push the icons further and add sophistication to the visual language to communicate brand value.