Wizeline Maps
Onsite project
Role: Product Designer & Owner
Client: Wizeline
Description: I designed an interactive office map that enabled:
All employees to find others or meeting rooms
Office managers to assign and keep track of employee seating
Skills:
Continuous user research
Product definition
Interaction design
Interface design
Prototyping and continuous testing
Overseeing implementation
Documenting component style guide and documentation
Metrics definition
Wizeline Maps
Let me show you the tool.
View mode
The map has two modes: Edit mode and View mode. In View mode, any Wizeliner can browse the map to see meeting rooms and general points of interest. They can also use the search feature to type a name, slack handle, role, or team.
Browsing the map and viewing a profile: Search results are shown as a list and highlighted in Darker Blue (its designation in the color palette).
Edit mode
In Edit mode, the office management team can quickly assign and keep track of free desks. This helped them relocate entire teams to empty areas.
Another feature is to reserve desks for visiting clients with custom notes for everyone’s context.
Assigning a seat is accomplished in few clicks.
Mobile version
One of my initial findings was that some users would look for a meeting room while on the way to a meeting. And that is how the mobile version was born.
The process, in-depth:
Discovery
During initial research, we worked closely with the office management team to empathize with their day-to-day needs, learn their workflows around seat track-keeping, and locate the obstacles they encounter daily. From this effort, I created a user persona to guide the product requirements.
Another focus was on the Wizeliners themselves, and their habits around the office or their firsts days. In fact, the tool eventually became key to new employees’ onboarding. At later stages, research focused on the experience of new and non-users and power users.
Office management persona definition workshop.
Definition & Ideation
By studying our potential users’ activities, pain points, and journeys I could ideate the desired state of these flows and how they could be transferred to a digital tool.
I also ran whiteboarding exercises with my development team to leverage their perspective and input on technical matters and feasibilities, as well as keeping them empathized with the product design. Having them present at the ideation stage, allowed them to define the resources they needed to set up. This way, design not only unblocked but also enabled developers.
Before jumping into digital design, both modes were sketched and iterated. Thanks to all the designers in my team who provided design reviews and feedback!
-
User flows
I established user flows that followed the tasks of the admin role and the viewers.
-
Wireflows
The mobile portion of the project was crucial, since some users reported looking for a room, while on the way to the meeting.For all modes, I provided developers with wireflows to communicate the interface and interaction design of the tools, facilitating greatly the implementation.
-
Styleguide anf UI Kit
I provided the developers with detailed style-guides and components inventories for mobile and desktop. We consistently ran design-development UI and interaction checks.
-
Usability testing brief
After conducting usability testing with volunteer Wizeliners, I briefed my team on these findings that drove product and design decisions.
Metrics definition
My manager mentored me in defining initial metrics, so I could begin iterating based on data
(thanks, Joel).
I devised two funnels that I tracked with Mixpanel:
Activation, by measuring new users who logged in for the first time, succeeded in locating another person or a meeting room.
Retention, by measuring those who logged in to experience the value proposition again.
I used these metrics to discuss product decisions with my team and usability improvements, which were complemented by HotJar recordings.
Branding
Emilio (tigre.ciego), from the Visual team, helped us by designing an awesome logo for the map.
Team and community
After the initial launch announcement, I got into the habit of sending general Slack messages with updates or new features. I also recruited users for testing like this, and they were always willing to lend an eye and give engaged feedback.
Hands down, the team was the one key aspect to the fruition of the project. It was a side project for all of us for years, in which we learned, ventured, ideated, iterated, and gave it our all. Cheers to that.
Sadly, as of Spring 2021 and because of COVID, this project has been shelved until we go back to the office…
This project was possible thanks to the astounding front end and back end developers in my team, the supportive Design management team, and the collective eagerness to contribute by all Wizeliners.