Guest Experience App • UX Research & Design • Android App
LeiaGuest
Project Overview
Background
LeiaGuest elevates the hotel guest experience by leveraging Leia’s proprietary 3D content. As a sales driven initiative, the goal of LeiaGuest is to provide the client (boutique hotels) with the ability to upsell items and increase in-app conversion rates.
Challenge
Identify competitors, define market opportunities, and establish a flexible design language that suits a wide range of potential customers as well as the needs of stakeholders.
Design
Conducted UX & market research to support the viability of my design concept. Worked with key stakeholders to create an initial design for their proof of concept app.
Deliverables
Competitive Analysis
Client Analysis
Moodboard + Brand Direction
Home Screen Design
Project Info
My Role: Lead UX Designer
Timeline: 4 Weeks
Project Type: Android App
Tools: Figma, Jira, Confluence
Research & Synthesis
Competitive Analysis
Working with the product manager, we defined a list of five guest experience (GX) apps that we would focus on for secondary competitive research by looking at the most competitive apps in the GX space according to Hotel Tech Report.
The purpose of this competitive analysis is to identify key features and design patterns in order to define the GX Home Screen design.
Guiding Questions:
What features are competitors heavily advertising?
How is the UI structured?
Card Sorting
After collecting claims, quotes, categories, and features from competitor’s websites, I conducted independent open card sorts to synthesize the initial data.
I then asked testers to participate in a closed card sort to synthesize initial findings by Persona (Hotel or Guest) only. This helped me define the key features that competitors heavily advertise.
Type: Open and Closed Card Sort
Participants: Four (randomly selected)
Insights: Testers were commonly sorting cards by Persona (Hotel or Guest), Product Feature, or Category of Product Feature.
First Round: Synthesized Open Card Sort
Second Round: Synthesized Open Card Sort
Define Key Features
I defined these key features to answer our initial research question: What features are competitors heavily advertising? We also wanted to make sure that we were designing a product that can be sold and competitive in the current market.
Digital Menu
Amenities/Hotel Info
Content Management
Customization of branding
In-app calling and messaging
Revenue generation (Via notifications, upselling, advertizing)
Place requests/orders
Scheduling and event
Collected samples of competitors UI to analyze the layout of home screens amongst successful players in the guest experience app landscape.
UI Competitive Analysis
-
UI Layout Patterns
Analyzed competitors UI to establish layout patterns. Layouts were varied and did not follow a particular structure aside from many having card-based content. Since the goal of LeiaGuest was to upsell I decided to move forward with a 2/3 image, 1/3 informational layout. This allowed us to have a large piece of Home Screen real estate to showcase 3D content on 2/3 on the screen. The 1/3 info panel allows users to have quick access to actions they want to perform quickly.
-
Navigation Placement Patterns
We decided to move forward with a top docked navigation bar. This was the most common UI pattern amongst competitors. It keeps the app structure flat and allows users to have quick access to all sections of the app without having to search. It also allows users to easily navigate between sections from any page in the app.
-
Templated Design
We looked at MGM Casinos for inspiration on how to use a single template that is flexible enough to accommodate different hotels’ branding, assets, and varying amounts of copy. We learned that the layouts stay the same but the main changes are using different logos and the brand’s accompanying accent color.
Brand Analysis
Summary
LeiaGuest needed branding different from the Leia Inc. brand guidelines in order to stand on it’s own, look, and feel like a product that would be shown in a luxury hotel room.
Gathered brand inspiration by looking at 5 potential clients’ websites.
Created Moodboard based on look and feel of potential clients branding.
Created Color scheme based on Moodboard.
Looked to MGM resorts for inspiration on templated design that would account for customization of:
- Logo
- Brand accent color
- Image Assets & Copy
Design Ideation
Mid-fi Wireframes
Iteration 1
Created a wireframe using the 2/3 image 1/3 info layout with top navigation as decided in the research/analysis.
Included features as defined by the PRD (product requirements document) in the info panel.
Tested using icons for action buttons in the info panel.
Iteration 2
Added padding around overlay, top nav, bottom bar, guest info, wifi) to create more white space.
Anchored image overlay to bottom of image to make covered space more predictable in the templated design.
Removed icons from quick actions and info panel to simplify overall design.
Hi-fi Mockups
In this iteration I added branding to start to evaluate look and feel. Tested serif and sans serif font pairings with varying weights to create hierarchy and give an elegant feel. Stakeholders selected Option 2 (Playfair Display & Poppins).
Option 1
Option 2
Design Deliverables
-
Templated Customization • Elements & Assets
The templated customization of the design includes flexibility for brands through editable elements in the image carousel, bottom bar. These elements include: Accent Color, Image Assets, Copy & CTA, Logo.
-
Navigation & Bottom Bar
Navigation design was specified through competitive research. It gives users quick access to all app features and includes space for future PRD items to be added. Notifications are prioritized for quick acknowledgement by user.
Bottom bar contains the logo and hotel info, both are customizable by the client. It also provides quick access to general settings, as well as displayes battery life (important when users take tablet out of dock). -
Info Panel & Quick Actions
Info Panel creates a personalized user experience with guest name, room number, date, time, location, & weather.
The quick action buttons give the user the ability to easily access common actions: DND (Do Not Disturb), Front Desk (Chat), Wake Up Call, Language, Wifi, & Feedback.
Templated Customization Examples
-
Next Steps
Deliver home screen specs to FE developers
Collaborate with FE devs on templated customization implementation
Create design for in-room dining menu that leverages 3D content to upsell menu items
-
Impact
Through this exploration, I was able to prove the importance of UX and market research within the company to stakeholders. Establishing a design process at Leia that values and includes research was an ongoing goal of mine. I also created a base design to bring a new Leia product to the market that could bring the Lume Pad to the hospitality market.