Penn Play Booking Management Enhancement

Feel free to pop into the Figma file, take a look at my workflow.

Figma File
  • How I redesigned the Penn App’s booking management feature to allow users to alter or edit their bookings, reducing user complaints and decreasing the frequency of customer calls and front desk visits.

  • MY ROLE

    I took on the role of UI/UX Designer and Interaction Designer for this feature enhancement.

  • Timeline

    Deliverables

    Tools

    Feb - May 2024
    (12 weeks)

    Audit of Current System
    Competitive Analysis
    Wireframes
    Interactive Prototype

    Figma, Notion, Google Docs, Miro, Maze

COMPETITIVE ANALYSIS

Hilton Booking Platform

The Hilton System offers:
The ability to select a specific room or alter your room choice with the following available information:
• Photos
• Room Descriptions
• Amenities

The Reservation Details Page offers:
The user the option to review their room selection while still being able to edit their choice with the following available information:

• Room and Plan Selection
• Total for Stay
• Guest Information
• Payment Information

AUDIT OF CURRENT SYSTEM

Web Booking System

Static Information:
• Room Photo
• Room Type
• Room Rate

CTA’s:
• Deposit and Cancellation Policy
• Room Rate Breakdown
• Booking Button

CHALLENGE

Users cannot select or alter the room in their reservations. This yields a higher number of complaints from users and a high instance of calls and visits to the front desks.

SOLUTION

Having customizable room selection for the check-in experience.

Allowing user to select a room during check-in improves not only the users experience but reduces friction for the hotels as well.

ITERATION # 1

In-page links for efficiency and collapsible cards for reduced mental load.

The plan for my first iteration included in-page links and collapsible cards, the main priorities here was to mimic key funcitonalities within the Hilton booking system, merge this feature into the Penn Play app while staying consistent with our I.A and design style, and doing both of these without creating too much friction for the user while accessing this new functionality.

In-Page Links to Information

• Efficiency: Booking a hotel room involves a lot of information, in-page links reduce the screen space taken up by extraneous content.
Improves Mental Load:  This layout highlights content users prefer i.e. their room type, it's cost and so on, putting the heavy content on its own pages allows users to scan the page for relevant content and actions more easily. 

Room Selection in Cards

Improves Mental Load : Selecting a room requires users to have a lot of information for each option, condensing that information into cards allows users to scroll through room quickly.
Intuitive Infrastructure : Drop-down collapsible cards are frequently used in other mainstream booking apps but primarily are frequently used within Penn Play's design style.

BUILDING EMPATHY & TESTING USERS

To maintain objectivity, I ensure my design decisions remain unbiased by my personal experience.

I tested a group of 15 randomized users to stay mindful of my assumptions regarding the Penn Play app, it's functionality, and it's design style

The majority of participants found the in-app room change feature easy to use and navigate.

Room photos were generally considered helpful, though some participants desired more detailed views.

Room cost information was clear, but there were suggestions for additional breakdowns.

VALUABLE INSIGHT

User were able to easily and quickly navigate flows but found themselves wanting more information regarding the rooms appearance and all additional costs that come with switching rooms.  

SKETCHING IDEAS

Sketching to iterate rapidly and exceed business needs within project timeline.

After testing and interviewing users and discussing my findings with my Product Owner and another Designer on my team, I quickly jotted down changes and acquired consensus on all the changes I intended to make to the app.

MAINTAINING DESIGN SYSTEM AND CONSISTENCY

Incorporating new hotel components and button styles

The hotel flows required adapting some of our pre-existing components, I was responsible for updating the design system with these new components and the new buttons.

Maintaining cards style throughout

Style Consistency: In-page links did the job but they weren't consistent with the style throughout the flow and app.
Improves Scanability:  I added cards with icons, instead of needing to scan text for each option on the page, the icons provide context as to the cards value.

Reducing Redundancy + Adding Content

Speeds up Flow : Removing a whole screen that provided no new information allowed users to successfully complete their flow quicker and with less friction.
Intuitive Infrastructure : Drop-down collapsible cards are frequently used in other mainstream booking apps but primarily are frequently used within Penn Play's design style.