Charlotte Pan
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M 0 3 L 0 0 L 36 0 L 36 3 Z M 0 28 L 0 25 L 36 25 L 36 28 Z M 0 15.5 L 0 12.5 L 36 12.5 L 36 15.5 Z" fill="rgb(227, 227, 227)" height="28px" id="ZqHE2J2u8" width="36px"/></svg>)
Touchscreen Kiosk Design for Ravir
Touchscreen Kiosk Design for Ravir
Touchscreen Kiosk Design for Ravir
Project Type
Project Type
From 0 to 1, B2B2C
From 0 to 1,
B2B2C
From 0 to 1, B2B2C
Time
Time
July 2024 - Sept 2024
July 2024
- Sept 2024
July 2024 - Sept 2024
roles
roles
UX Design, Visual Design
UX Design,
Visual Design
UX Design, Visual Design
Over 40%
Over 40%
Over 40%
of the project units pre-sold
of the project units pre-sold
of the project units pre-sold
Within 5 Months
Within 5 Months
Within 5 Months
after the touchscreens launched
after the touchscreens launched
after the touchscreens launched
Project Background
Project Background
Ravir was a brand new real estate project based at Coquitlam, BC. Since there was no sample home, a presentation centre was built up instead for potential buyers to visit.
Ravir was a brand new real estate project based at Coquitlam, BC. Since there was no sample home, a presentation centre was built up instead for potential buyers to visit.
Project Goals
Project Goals
Several touchscreens were needed, which enabled potential buyers to discover home features and unit types by interacting with the screens. Also provided an efficient visual tool for sales team for better presenting the projects in order to drive more sales.
Several touchscreens were needed, which enabled potential buyers to discover home features and unit types by interacting with the screens. Also provided an efficient visual tool for sales team for better presenting the projects in order to drive more sales.
My Role
My Role
My role was to design an intuitive and interactive touchscreen experience, including smooth user flow, easily understandable interactive features as well as compelling visuals.
My role was to design an intuitive and interactive touchscreen experience, including smooth user flow, easily understandable interactive features as well as compelling visuals.
Wireframes
Wireframes
Challenges & Solutions
Challenges & Solutions
Challenge 1
Challenge 1
Vertical wall-mounted screens made it hard to display wide content like floor plans effectively.
Vertical wall-mounted screens made it hard to display wide content like floor plans effectively.
Solution to Challenge 1
Solution to Challenge 1
Gathered screen specs from the construction team for estimating average eye level and arm reach level.
Placed primary content and interaction areas based on ergonomic research.
Added a bottom full-width tab for easier navigation and reach.
Integrated gestures (swipe, zoom, pinch) to enhance content interaction.
Gathered screen specs from the construction team for estimating average eye level and arm reach level.
Placed primary content and interaction areas based on ergonomic research.
Added a bottom full-width tab for easier navigation and reach.
Integrated gestures (swipe, zoom, pinch) to enhance content interaction.
Challenge 2
Challenge 2
There were more than 25 floor plans in total, across both townhome and condo.
There were more than 25 floor plans in total, across both townhome and condo.
Solution to Challenge 2
Solution to Challenge 2
Designed a two-step filter system:
Select home type between Townhomes or Condos via tabs.
Use a dropdown to choose desired home size.
Floor plans are clicked to open in detail as a pop-up screen.
Designed a two-step filter system:
Select home type between Townhomes or Condos via tabs.
Use a dropdown to choose desired home size.
Floor plans are clicked to open in detail as a pop-up screen.
Challenge 3
Challenge 3
An engaging way was needed to showcase color schemes and features across various room types.
An engaging way was needed to showcase color schemes and features across various room types.
Solution to Challenge 3
Solution to Challenge 3
Created interactive tabs for comparing light/dark themes.
Embedded clickable icons in renderings to reveal home features.
Enabled room-to-room navigation via bottom-right tabs and swipe gestures.
Created interactive tabs for comparing light/dark themes.
Embedded clickable icons in renderings to reveal home features.
Enabled room-to-room navigation via bottom-right tabs and swipe gestures.
Usability Testing & Insights
Usability Testing & Insights
Who Had Joined the Testing?
Who Had Joined the Testing?
Members from both design team, programming team and sales team.
Representatives from the developer.
Friends and families
Members from both design team, programming team and sales team.
Representatives from the developer.
Friends and families
Tasks
Locate Mackin Park on the map.
View different living room color schemes.
Find refrigerator features in the kitchen.
Use filters to find “Plan F” on level 3 of the condo
Tasks
Tasks
Locate Mackin Park on the map.
View different living room color schemes.
Find refrigerator features in the kitchen.
Use filters to find “Plan F” on level 3 of the condo
Locate Mackin Park on the map.
View different living room color schemes.
Find refrigerator features in the kitchen.
Use filters to find “Plan F” on level 3 of the condo
Insights
Insights
Tabs were easy to find and use.
Location pins could be larger.
Some users preferred a full list of interior features instead of clicking icons.
Users were confused by small differences between floor plans on different levels.
Tabs were easy to find and use.
Location pins could be larger.
Some users preferred a full list of interior features instead of clicking icons.
Users were confused by small differences between floor plans on different levels.
Iteration
Iteration
Floor Plan Filters
Floor Plan Filters
A third-level filter was added in for selecting different floors of condo.
A third-level filter was added in for selecting different floors of condo.
A Full List of Home Features
A Full List of Home Features
Introduced a dedicated "Features List" page for full feature exploration, alongside interactive views.
Introduced a dedicated "Features List" page for full feature exploration, alongside interactive views.
Mid-Fi Screen Flow after Iterations
Mid-Fi Screen Flow after Iterations
Design System
Design System
Typography
Baskerville
Headlines & CTA
DM Sans
Body
Color Palette
buttons
Default
Pressed
Default
Pressed
tabs
Tab Name
Tab Name
Tab Name
Final Delivery
Final Delivery
Visit the live site of touchscreen ➡️ https://touch.liveatravir.com/
Visit the live site of touchscreen ➡️ https://touch.liveatravir.com/
Let's build
something magical together.
Get In Touch
Let's build
something magical together.
Get In Touch
Let's build
something magical
together.
Get In Touch
© 2026 Charlotte Pan’s Portfolio. ALL RIGHTS RESERVED
© 2026 Charlotte Pan’s Portfolio. ALL RIGHTS RESERVED