Case study: An office map built by the whole office

As a company, Wizeline was a design thinking space from its inception. As such, everyone was encouraged to define and tackle problem spaces within our office. This is how I got assigned to the project that sought to make it easy for Wizeliners to find other people around the office.

I took on the challenge of designing an interactive office map that enabled:

• All employees to find others, meeting rooms, or general points of interest
• Office managers to assign and keep track of employee seating

Role: Product Designer & Owner

Client: Wizeline

Skills:

• Continuous user research
• Product definition
• Interaction design
• Interface design
• Prototyping and continuous testing
• Overseeing implementation
• Documenting component style guide and documentation
• Metrics definition

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 the obstacles they encounter. The outcome of this effort was a user persona that would guide product requirements.

Another focus was the Wizeliners themselves, and their habits around the office or in 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 as well as power users.

The office management team participated in our persona workshop to provide their insights.

Office Manager persona

Ideation

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 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 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!

Whiteboarding exercises I facilitated with the development team and sketching 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 on the way to the meeting.
For all modes, I provided developers with wireflows 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 components 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, and with impact/effort assessments, we prioritized next steps.

The map

View mode

The map has two modes: Edit mode and View mode. In View mode, any Wizeliner can use the search feature to type a name, Slack handle, role, or team.

They can also browse the map to see meeting rooms and general points of interest, like bathrooms, exits, the coffee shop, etc.

Searching

Search results as a list and highlighted in Darker Blue, its designation in the color palette.

Search for a Wizeliner

View profile

A profile includes the Wizeliner’s name, Role, Slack handle link, and location in the office.

Browsing the map and viewing a profile.

Edit mode

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 became a three step task.

Metrics Definition

My manager mentored me in defining initial metrics, so I could begin improving 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 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. Yet another contribution by the community.

Team and community

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 them!

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.

Sadly, as of Spring 2021 and because of COVID, this project has been shelved until we go back to the office…

The map 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.