Improving floor plan interactivity to increase customer engagement
Roles
Lead Designer, Copywriter
Year
2021
Duration
1 month
What is Viana?
Viana is an anonymous vision analytics product that helps businesses measure how people work, shop, move, learn, and play in physical and digital spaces.
Within Viana is a suite of AI-powered service applications such as People Counting, Zone Engagement, Traffic Measurement, and more.
Background
Before joining the Viana team in May 2020, there was an existing MVP in production. We had a baseline location hierarchy composed of Network → Sites → Zones → Devices → Sensors that basically enabled users to input their sites and zones in a list and tag devices and sensors to their assigned zones. All of this is a digital simulation of what you could possibly see in their site.
Although this was functional, it raised more questions and assumptions, such as:
Are these zones all in one floor space?
What are the boundaries of each zone from one another? Where do they overlap?
What insights can we gain from having zones in a site?
And so when I stepped in as Viana's principal designer in early 2021, my first task was to design a lean version of Manage Floors where users can create, read, update, and delete floors.
Floors have properties such as a name (eg. first floor, second, third), a description, and a floor plan image.
I saw it as an opportunity to make it more useful and appealing to customers and integrate Floors into our location hierarchy.
We had a couple of questions to start with:
How might we integrate Floors into the existing location hierarchy?
How might we improve the navigation between site elements (eg. zones, sensors)?
We tried to come up with a solution by running a two-day design brainstorming session on Miro. The benefits of our solution included: easy navigation between multiple floors, digital representation of zones and sensors in a physical space, real-time people counting data, visual zone boundaries, and more. Our baseline design was enough to integrate floors into our location hierarchy and show floor plan markers simulating what one can find in physical spaces.
Understanding Floor Plans
What is a Floor Plan?
A floor plan is a scale diagram depicting the top-view structure of a building floor. These floor plans are exported to png or jpeg format and uploaded into the Viana portal.
Sample from https://en.wikipedia.org/wiki/File:Siteplan.jpg
Once uploaded, Viana floor plans can be configured with the following elements:
Zones — are spaces defined within a bounding box or polygon
Sensors — are devices that detect and measure real world events, shown as a marker
Doorways — an entrance to a room or building, shown as a marker
NEW:Tables — are pieces of furniture with a flat top and one or more legs
Users can configure and interact with these elements in a floor plan.
Problem Context
Our solution made it to production and definitely there was feedback from the products team, design team, as well as QA team that were raised later on in the development cycle.
Although our current implementation passed as a baseline, the design posed challenges such as:
1. Unnecessary elements taking up space
Based on stakeholder feedback, there were too many elements above the fold that wasn't of value to our users.
There were more words and empty spaces than visuals
We wanted our floor plan to show and tell, get valuable insight in just a glance. Our current design didn't convey that clearly.
There were insights below the floor plan that weren't visible
2. Floor Plan image is too far and low
Users would first direct their attention to the floor plan but they would have to scroll down to see the full view
Floor plan features were limited, users couldn't play around
Shift the focus towards the floor plan's interactivity — Stakeholder suggestion
3. No clear button hierarchy
Buttons were all over the place
There is no clear button hierarchy and structure to help users understand the relationship between elements making it difficult for them to perceive
Archive button, a dangerous action, is displayed in plain sight
4. Unfiltered data showing
Zones with no service applet* data is showing, which confuses the users
Naturally, users would assume that there is missing data due to the UI showing a green/red pill
5. Lacking common editor functionalities
Our products team specifically requested for a zoom in/out functionality to help them zoom in on specific areas in the floor plan
This meant that there are additional tools they need: a select/move tool and a hand tool to enable them to pan around the floor plan
6. No indicator for unsaved changes
There's a lack of system feedback - Users are not be informed if they made changes or when was the last time they made changes
Save Changes button is active despite not making changes
Requirements
There was an additional requirement to include an add table functionality for the workplace experience solution.
Tables can be resized and rotated depending on user need
There will be table templates to help users get started
Personas
We zoomed into the problem solution and found two main personas:
👩💼 Jamie aka “The Presenter”
Jamie is currently working as one of Viana’s salespeople. She is smart, eloquent, and diligent. She is one of the company’s top performers and she directly reports and works with executives. She wants to be able to successfully sell Viana to customers through sales presentations and walkthroughs. She likes to read self-help books, play the piano, and watch improv in her spare time.
Her challenges:
Floor Plan feature isn't a selling point for Viana
Wants to be able to interact more with the floor plan
Wants to filter relevant data for a specific use-case on a floor plan
👩🔧 Hannah aka “The Organizer”
Hannah is the Jarvis or Alfred of the customer success team. She makes sure that all devices, sensors, floors, sites, and zones have been correctly set up for the customer. She wants to make sure that everything is accounted for and properly working. She is responsible, meticulous, and smart. She is married, has 2 kids, and works from 9 to 5. She loves to cook in her free time.
Her challenges:
She mistakenly clicks on Edit Floor instead of Edit Floor Plan when she's about to customize the floor plan
She finds the floor plan too small when editing
She wants to be able to edit the floor name while editing the floor plan
She wants to be informed if she has any unsaved changes
We will redesign the floor plan to empower these two personas perform their job with ease.
Solution Sketches
I took inspiration from these three products' experience that would greatly improve our current implementation:
Google Maps & Google Earth - their zoom in and zoom out animations, markers, layers
Google Docs - view, edit, suggest modes
Robinpowered - floor plan editor tools and table templates
Some of my initial sketches showing the improved user flow & lo-fi design iterations:
Wireframe
I conducted an internal A/B testing with our team and decided on which worked flow better for adding tables into the floor plan.
There were two solutions presented:
Flow A was voted by the team as the better experience. This focuses on the the drag-and-drop table functionality.
Designs
3 major improvements in design
1. Emphasis on Floor Plan view & improved marker design
Based on the products team feedback, we centered in the floor plan view to increase user engagement
Hidden Archive Button within the more button to keep dangerous actions out of sight
Includes new ways to view and explore the floor plan: View, Configure, Learn
Zoom in and out of the floor plan
Choose what mode you want to access the floor plan (varies on the user's access permissions)
Filter layers on the floor plan - customize your view the way you want
Mode switching
3. Improved floor plan editor
Includes new editor features (move tool, hand tool, doorway marker, table templates, floor plan opacity, and redo / undo)
Ability to see if there are new changes or when the floor plan was last saved
Drag and drop functionality for tables
Key Learnings
This has been my first attempt at redesigning an existing feature (most of what I worked on were first versions of a feature). It was a good opportunity to look back from my first design and improve the entire experience that would not only help Jamie generate more sales for our product and empower them to present towards clients, but also make Hannah's experience in setting up floor plans easy as 1-2-3 as compared to before.
Designs are hypotheses. In the v1 of our floor plan, we didn't focus on what our primary personas wanted. It's important to always factor in how your designs will be used by different personas, from actual users to people selling your product. Talk to the people closest to your users (Ideally, you should talk to your users. But when there is limited time and resources, talk to people closest to your target market). You won't get it right the first time that's why it's important to validate and iterate.
Validate and iterate. Explore solutions. There are multiple methods you can try to brainstorm, crazy 8's, storyboarding, card sorting, and more. Don't limit yourself and involve others in your design process. Fail fast.
Progress over perfection. There is no one-size fits all solution, there is only the best at a certain point in time. But market demands change, and so do the experiences we are designing.
Build for scale. Our product is an ever expanding multiverse of service applets. Consider different use-cases for a certain feature and how you can reuse it in future developments.
Future State
Working in an agile development cycle means that time and resources will be limited. Therefore, you will have to simplify to make things happen fast.
If given more time, I would also like to add and do the following:
3D floor plan view where users can move the floor plan around
Camera facing representation to help users see the field of view of their sensors
Ability to zoom in on a zone and see insights
Floor insights to help measure day to day density
Conduct user testing to check if the solution works as intended
