Overview
About
Established in 1968, the American Club Taipei (ACC) provides a blend of sports, entertainment, relaxation and a range of high quality dining options. They guarantee top-notch services in premier facilities.
Challenges
Since outdated website design and non user-friendly complaints from customers, ACC consider their website is lacking the user experience usability, desiring to revamp their digital platform.
Moreover, we faced with the development side’s challenges towards to booking system and membership. Considering the back-end built in the Wordpress, there are a bulk of flow problems we need to address in the design process.
My Role/ Responsibilities
UX research, UI design, Brand identity, Art direction
Project Process
Discover
Stakeholder interview
We had a stakeholder interview meeting to discuss with the users and the finds-out for the current site performance. The Majority of the users are new, and only 19% of returning visitor shows very little traction from the original member.
The feedbacks from membership user said that they would rather booking or requesting for receptionist at front-desk than using the online system and website.
Define
Project Goal
Before starting the overall analysis, we narrowed down the essential needs to align with the project goals and outlined a few key points to achieve.
A healthy mix of both for website new and returning visitors.
Mobile-first design for current users.
Optimization for user experience and site performance.
Persona & Empathy Map
The reason why we started with persona is that our team lacked experience with middle age group users. We were trying to understand this group perspective, standing on their side and be empathic with user experience.
Here are some point of this group would be concerned:
Not good at using digital device, need someone's help
Too small font size for the readability
Familiar with the flow and interface of the original website
Information Architecture
The original website was confusing, with too many unnecessary pages and dead ends. Building the information architecture is a crucial step in designing a multi-functional website, which includes public sites, four types of booking systems, and member dashboards. This structure helps clarify the different levels of access for various pages.
User flow
We started to create the user flow trying to wireframe any possible condition the user will counter. There’re multiple functions in this blueprint, like public & private site, member accounts and different types of booking systems. We also met a big challenges here, the communication with their IT team, to clarify the implement of website development matching the idea of our design flow.
Design
Brand identity & Photography guide
Considering the plenty use of logo on the facilities and print materials, we remained the logo but strengthen the brand identity by brightening the primary red color. Based on photography guide, we focus on the expression of ACC brand core vale, showcase their presence of elegance, quality and belonging.
Moreover, the primary use of a sans-serif font, complemented by light touches of a handwritten style, strikes a perfect balance between classic elegance and modern simplicity.
Solution
Prototype
We use the method of MVP to validate the design of dashboard and booking system which includes Racquet court, dining, fitness class and event booking. In the design process, we start with a mobile-first breakpoint to visualize our ideas, then transition to wider layouts as we progress toward full website development. After usability test, we collected the feedbacks and reviews to iterate our flow and design to ensure each aspects of design works appropriately for target users.
Public site & Dashboard
Booking system
Dliver
Deliverables
UI style guide
We set up the brand principles and a comprehensive style guide to move forward with development efficiently. The style guide defines the foundation of design, including grid and layout, typography, color scheme, icons, etc., and also covers the versatile use of components, addressing element states and interactions.
flow guide
For the handover files, we created detailed high-fidelity flow deliverables for the development team to clearly convey both functionality and aesthetics of the final design. These files serve to ensure that every visual and interactive aspect is accurately translated into the final product.
