Remember offices? Yeah, me too. I miss those days of in-person collaboration before the pandemic, especially when we got to work on innovative projects that really captured the spirit of Wizeline. One of those projects was creating Wizeline Maps, an application designed to optimize the Wizeliner’s office experience.
Want to learn more and remember a time when offices were taken for granted? Join me as I take a walk down memory lane to tell you about an interesting product we created — and hope to use soon — to help Wizeliners interact better with office space and each other.
About Wizeline Maps
Wizeline has been a design thinking space since its inception. With this in mind, everyone has always been encouraged to define and tackle problem spaces within the office. This is how I got assigned to the project that made it easy for Wizeliners to find other people around the office: Wizeline Maps.
For the project, I took on the challenge of designing an interactive office map that enabled:
- All employees to find each other, meeting rooms, and/or general points of interest
- Office managers to assign and keep track of employee seating
Project at a Glance
Role: Product Designer & Owner
- Continuous user research
- Product definition
- Interaction design
- Interface design
- Prototyping and continuous testing
- Overseeing implementation
- Documenting component style guide and documentation
- Metrics definition
During initial research, we worked closely with the office management team to empathize with their day-to-day needs, learn their workflows around seat tracking and explore the obstacles they encountered. The outcome of this effort was a user persona that would guide product requirements.
Another focus was Wizeliners themselves and their habits around the office on their first days. The tool eventually became key to onboarding new employees. At later stages, research focused on the experience of new users, non-users, and power users.
The office management team participated in our persona workshop to provide their insights
Office Manager persona
Studying our potential users’ activities, pain points, and journeys, I could ideate the desired state of these flows and how we could transfer them to a digital tool.
I also ran whiteboarding exercises with my development team to leverage their perspective and input on technical matters and feasibility and keep them engaged in the product’s design. Having them present at the ideation stage allowed them to define the resources they needed to set up. This way, design is not only unblocked but also enables developers.
The map has two modes; Edit mode & View mode. 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!
Whiteboarding exercises I facilitated with the development team and sketches of various solutions.
With all this, I established user flows that followed the tasks of the admin role and the viewers.
The mobile portion of the project was crucial since some users reported looking for a room while going to the meeting. For all modes, I provided developers with wire flows to communicate the interface and interaction design of the tools, greatly facilitating implementation.
Implementation and Testing
I also provided the developers with detailed style guides and component inventories for mobile and desktop. We consistently ran design-development UI and interaction checks.
After conducting usability testing with Wizeliners who volunteered, I briefed my team on these findings to drive product and design decisions. With impact/effort assessments, we prioritized the next steps.
The Map: Edit Mode & View Mode
Any Wizeliner can use the search feature to type a name, Slack handle, role, or team in View mode. They can also browse the map to see meeting rooms and general points of interest, like bathrooms, exits, the coffee shop, etc.
Search results appear as a list highlighted in a darker blue with its designation in the color palette.
A profile includes the Wizeliner’s name, role, Slack handle link, and location in the office.
With 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. Re-assigning a seat also became a three-step task.
My manager mentored me in defining initial metrics to improve the tool 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 and 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 and HotJar recordings to discuss product decisions and usability improvements with my team.
Emilio from the Visual team helped by designing an awesome logo for the map. Yet another contribution from the community.
Team and Community
Hands down, the team was the one essential aspect to the successful completion 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 us!
After the initial launch announcement, I got into the habit of sending general Slack messages with updates or new features. I also used this method to recruit users for testing and interviews, and they were always willing to lend an eye and give valuable feedback.
As you might imagine, this project remains shelved until we return to the office. However, in a post-COVID world, I think Wizeline Maps might be more useful than ever to keep people properly distanced while helping to track who comes to the office, when, and who they interact with. While the recent past of Wizeline Maps has been quiet, I am certain the product has a bright future!