work hub

2021

A Customizable Digital Solutions for Hospitality Businesses

PeopleVine helps member-based businesses manage their operations and enhance customer engagement.

One of its main goals was to improve the modern member club experience. However, the old member portal required heavy developer support for customization. This made creating custom websites for hospitality businesses slow, hindering scalability and preventing consistent, branded digital experiences.

The new Member Portal transformed everything. With a sleek, modern design and easy customization options, businesses could quickly create tailored digital experiences without needing developers.

This cut website creation time from six months to just a few hours, enabling PeopleVine to scale rapidly, onboarding over 120 clients - up from just 10 - while helping clients deliver high-quality, branded solutions more efficiently.

01

peoplevine

The Journey Begins

I.

challenge

Expansion Requirements

The system needed to accommodate rapid expansion without excessive manual intervention.

Time Constraints

Lengthy setup times were no longer viable in a competitive, fast-paced market.

Diverse Needs

Hotels, restaurants, and event venues required vastly different features, such as loyalty programs, reservation management, and event promotion tools.

Customization Complexity

Businesses lacked the technical expertise to reflect their unique brand identity in their digital experiences.

Hospitality businesses need to focus on delivering seamless and personalized digital experiences for their guests. One major challenge we faced was the lack of control over customizing the Member Portal. Many clients requested tailored branding, but the old system made these changes time-consuming and difficult, relying heavily on PeopleVine’s developers. As a result, outdated portals failed to reflect our clients’ brand identities or meet their guests’ expectations, hindering their ability to enhance guest engagement and slow progress on key features.

II.

approach

Automate Customization

Core features like color palettes, logo management, and typography adjustments were built with automation in mind, drastically reducing setup time. Changing a single variable (e.g., base color) instantly updated entire design palettes across the platform.

Support Self-Sufficiency

Empowering businesses to customize their portals independently eliminated bottlenecks in implementation and allowed PeopleVine to onboard more clients simultaneously.

Ensure Consistency

By implementing a unified design system (named Ivy), all elements - from buttons to entire page layouts - adhered to a consistent structure. This made it easier to replicate, adapt, and scale the design for new use cases.

Accommodate Growth

The modular framework ensured that new industries, features, or templates could be added with minimal effort. For example, we initially focused on dining, events, and activities but later expanded to include wellness and spa services without redesigning core components.

Scalability was not an afterthought but a guiding principle throughout the project. To meet the demands of PeopleVine’s diverse clientele, the system was designed to:

III.

my role

I contributed to the development of a B2B CRM platform (PeopleVine) designed specifically for hospitality businesses. I conducted research to understand their unique needs, collaborated on brainstorming sessions, and led the design of a customizable member portal for clients. I developed a flexible, scalable design system that addresses diverse business requirements, continuously testing and iterating to ensure optimal functionality. I provided design support across the organization, ensuring consistency, quality, and alignment with business goals.

preface

02

peoplevine

Enhancing member Experience

Member portal

I.

main idea

Develop a user-friendly design system named Ivy, inspired by PeopleVine’s core identity, reflecting growth, interconnectedness, and adaptability. Ivy provides a robust set of customizable UI components, such as buttons in various styles (squared, rounded, with icons, without icons), forms, and layouts, designed to cater to diverse business needs while maintaining a polished and professional look.

The system emphasizes easy branding customization - allowing users to quickly adjust colors, typography, and logos - ensuring that every business can create a cohesive digital identity without requiring advanced technical expertise. Ivy is designed to be intuitive and navigable for all users, from marketers to developers, enabling seamless updates and rapid implementation.

By leveraging Ivy’s well-organized library and clear documentation, teams can save time, enhance collaboration, and deliver consistently beautiful and functional designs that align with PeopleVine’s mission of elevating the modern member experience.

II.

key features

Event & Engagement Tools

Organize events, promote activities, and provide exclusive content to enhance member experiences.

Management

Simplifies the management of member profiles, payment details, and access permissions, reducing administrative overhead.

Digital Wallet ID

Eliminates the need for physical ID cards, enhancing security and streamlining check-ins and access to restricted areas.

Member Applications

Enables hospitality businesses to capture prospective member information, manage the application process, and collect payment details efficiently.

To understand the specific needs of different types of hospitality businesses, I conducted research and identified key user groups (dining, events, appointments, activities, meeting rooms) and the must-have features for each.

03

peoplevine

Ensuring Scalability

design system

I.

main idea

Develop a user-friendly design system named Ivy, inspired by PeopleVine’s core identity, reflecting growth, interconnectedness, and adaptability. Ivy provides a robust set of customizable UI components, such as buttons in various styles (squared, rounded, with icons, without icons), forms, and layouts, designed to cater to diverse business needs while maintaining a polished and professional look.

II.

basement

To ensure scalability, I developed a robust design system grounded in atomic design principles. Each component utilized auto-layout with a centralized parent structure, eliminating the need to modify individual variants. This approach enabled seamless customization and ensured the system could easily adapt to evolving business needs.

III.

customization

The challenge was to make branding changes simple and accessible, even for non-designers. While PeopleVine’s CRM provided some customization capabilities, it was crucial to replicate this ease of use within Figma files. To solve this, I identified and implemented the Batch Styler plugin in Figma, which allows users to update multiple text and color styles simultaneously. This approach eliminated the tedious task of manually changing each style individually, significantly streamlining the branding update process.To further simplify the workflow, I created detailed guides for every customizable element, ensuring that users could easily navigate the process and make precise updates without design expertise. This solution empowered clients to maintain consistency and align their digital experiences with their unique branding effortlessly.

Key Flows

I designed customization flows for key features like reservation systems and checkouts. Each step of the process was built as separate components, similar to Lego pieces, making it easy for businesses to manage their operations independently. However, I encountered performance issues in Figma due to high memory usage, so I replaced key flows with a separate library to ensure smoother functionality and better scalability.

Typography

Fonts were easily updated using the Batch Styler plugin, ensuring consistent typography and reducing the need for manual adjustments across various design elements.

Colors

Developed 10-step palettes for primary, accent, gray, and text colors, enabling effortless adjustments with a single base color change. Leveraged the Batch Styler plugin to seamlessly convert updated colors into reusable styles for consistency across the design system.

Logotype

Centralized logo management ensures consistent application across all instances. By adding the logo to the parent element, all variations - such as type, color, or usage - are automatically generated and ready for use.

IV.

Guides

In the first section of Figma, I created an interactive map that outlined all key sections and guides. In the second section, I provided detailed instructions for each step of using the design system. These instructions covered connecting the design file to the library, customizing logos, typography, colors, layouts, and utilizing grids for different resolutions.

04

peoplevine

Driving Impact

results

We built three demo websites to showcase the system’s flexibility and usability, each tailored to a different hospitality business theme. 
Stress-tested the design system by adding new templates and workflows, such as those for spa and wellness services, without compromising design consistency or performance.

After testing, PeopleVine began proposing new features to both existing and potential clients. Some of their feedback included:

“I can’t wait to start building our own themes on the new Member Portal,” said Jerry Shi, WorkChew. “I’ve been wanting to revamp the appointment booking pages for a while now!”

“I love the new Member Portal design, it is so modern and sleek, it looks great!” saidShannon, mHub.

The new system enabled PeopleVine to onboard over 120 clients so far, a significant increase from just 10 - without straining resources. This growth was driven by the scalability and flexibility of the new platform, which reduced website creation time from six months to just a few hours.

This project didn’t just streamline processes - it elevated the entire customer experience, transforming a challenge into a valuable opportunity for sustainable growth.

05

peoplevine

to be continued...

what's next

After launching these features, PeopleVine has continued collaborating with the agency, initiating the next phase of reimagining their complex CRM system and check-in app. The design system continues to evolve, adapting to the needs of new businesses and ever-changing realities, ensuring long-term scalability and flexibility. PeopleVine is solidifying its position as a leader in CRM solutions within the U.S. hospitality market.