Bond
Crossfunctional Product Design
Bond is a hot desking application created as part of a hack-a-thon style industry challenge given during my UX Design bootcamp at BrainStation.
In this industry challenge, the design team and I worked with a team of developers from BrainStation’s Web Development bootcamp to ideate and build a solution that will assist employers and employees facilitate a “return to work” from the primarily “work from home” environment of the pandemic era.
Role
Co-Designer
Timeline
2 weeks
April 2022
Scope
Product design
Team
UX Designers: Mladen Beganovic, Amy Xie, and myself
Web Developers: Duncan MacDonald and Duane Imambaksh
Design Challenge
Many companies have spent tens of thousands of dollars planning for the “return to work”. From in person, to hybrid, to digital—by-design, this has quickly become a priority for employers and employees.
Discover Phase
User Interviews
With the limited time frame given to us, the team and I got to work conducting user interviews to research the thoughts of individuals towards transitioning back into the office. The team focused on interviewing their coworkers to collect data.
The interview notes were then reviewed to generates insights summarizing the thoughts and concerns regarding the back to work transition.
Insights
Lack of Connectivity
Individuals who work from home tend to miss the casual interactions caused by proximity to their coworkers.
“I miss the interaction with co-workers… I like going over to a co-workers desk and seeing what they are doing or asking for help”
Lack of Confidence
Many individuals are concerned if companies will be taking the necessary precautions in the new hybrid environment.
“How safe will the space I am working in be?” “Is the employer taking this seriously and making all the necessary precautions.”
Managing Comfort Levels
Within the group of individuals interviewed there was a varying level of comfort regarding going back into the office. Companies, especially larger ones, would need to consider how it would address each employees comfort level in the transition into a hybrid environment.
Define Phase
The Proto-Persona
The research conducted fed into the sections of the define phase beginning with the proto-persona.
The proto-persona I created encompasses insights and common points collected across the interviews. In particular, it focuses on one’s need for a productive work space and a hub casual social connection while maintaining a safe work environment. With all these points in mind, we turned to the concept of hotdesking as it focuses on the management of space at a workplace.
User Stories
To settle on the the features that would be required in this product, we’ve created a list of user stories along with the justifications for each item.
After creating the initial iteration of the list, the items were then prioritized from core features to nice-to-haves.
Desk booking flows and questionnaire flows were prioritized as key features for our product. The ability to see the less populated areas of the office on any given day was prioritized as third because it addresses the third insight of managing the different comfort levels of individual workers, with red zone areas appealing to those who want to exercise strict social distancing and the green zone appealing to individuals who more welcome to casual interaction while at the office.
The ability to book meeting rooms was marked as last and then subsequently cut from the features list due to the lack of resources from the dev team for implementation.
Main User Flow: Booking a Desk
The booking a desk flow entails logging into the service and selecting the option to book a desk. From there the user is brought to the desk booking screen where they then select their date of visitation, select which zone they want a desk in and then the desk itself.
Main User Flow: Completing a Questionnaire
The questionnaire flow features a straightforward process which mimics the flow presented in government formulated questionnaires containing a symptom page and one or more questions page. The questions screens can possibly be broken into separate consecutive screens depending on the number of questions which result in either the booking being confirmed or cancelled based on whether or not the user complies with the questions/statements presented. For the purposes of conserving space, the questions section is represented as one screen on this flow.
Develop Phase
Initial Inspiration
Upon reaching this phase, the team focused on gathering initial inspiration for the screens a user would see when going through each of the main user flows. For the questionnaire section of the app we looked towards government websites to how they format their questionnaires. As for the desk booking section, we envisioned the user selecting their date and preferred zone and then choosing their desk on a layout drawing of their office. When looking for inspiration, we noticed this flow used on existing hot desking products as well as on apps such as the Cineplex app for when the user reserves seating at a movie theater.
Desk Booking
Initial sketches for the screens involving the desk booking were created from the initial inspiration board. The image displayed shows the main screens involved. From left to right there is the home screen, date and zone selection screen, desk selection screen and booking confirmation screen. These sketches were expanded upon to create a complete flow ensuring the core features were covered.
Completing the Questionnaire
For our questionnaire, we adapted the format used in many existing government based questionnaires. The lo-fi flow diagram displayed shows the typical process a user would go through. The decision was made to send the user directly to the “cancelled booking” screen if they do not comply with regulatory standards.
Deliver Phase
Hi-Fi Finalization
In this phase we created a style guide, encompassing clean and professional theme, and applied this guide to all of the screens.
The transition into the hi-fi iteration also entailed communicating closely with our developers to cut features that were infeasible to implement and to polish the key features of the product.
Desk Booking Iterating
In the transition from med-fi to hi-fi we’ve expanded upon interaction within the “Book a Desk” and “Available Desks” screens, focusing on optimizing how information is communicated to the user.
Helping users understand the zone system while booking a desk
There was concern in the group regarding strong labeling of the different zones as well as how the users would understand the difference between them.
The use of the colour system could be seen as vague and could possibly set an uninviting tone to the desk selection process due to the association of the colours red and yellow to danger and hazards. To remedy this, the zone names were changed from red and yellow to “Socially Distanced” and “Collaborative” zones respectively, setting a more neutral standard for what each zone entails.
Next, we wanted to better communicate the key specifics for each zone. Given that there are only 2 options when selecting zones, the team settled on changing the drop down menu to radio buttons. Doing so allows the space for the options to be listed out along with their specific details without the user needing to look for them.
Simplifying the “Available Desks” screen
In the transition to hi-fi we scrapped the “Busy Times” bar at the top of the screen, implemented a legend at the bottom of the screen and optimizing the pop up card that appears when a desk is selected.
Questionnaire Iterating
Given the simple nature of the task, little was expanded upon when creating the hi-fi iteration of the questionnaire. Key changes include, applying the brand styling to the screens, button repositioning from side to side to a stacked orientation, and adjusting the copy of the questionnaire results to be more neutral in tone. These final changes created a fresh and straightforward final result.
Next Steps & Key Learnings
1. Communicating in a crossfunctional team
Throughout my course with Brainstation, all of my group projects have been with others who have been taught and are familiar with the design process. This project marked the first experience working as a designer in a cross-functional context and taught me the importance of communication between devs and designers. From the designer standpoint, it was important for us to communicate the value of the design process so that we can tie every feature we propose to a user need. On the flipside, communicating with our devs helped us understand what was possible from an implementation standpoint and how to workaround any barriers.
2. Creating multiple personas to showcase the broader appeal
One of the key insights derived from our interviews was that employee comfort levels when transitioning back into the office can vary greatly from person to person. To outline this in our proto-persona, we tried to incorporate points of people with different comfort levels one person. Looking back, however, doing so weakly represented either population of low-comfort and high-comfort employees. If I could do this again, I would leverage two separate proto-personas with their own specific needs to showcase how my product could help opposing demographics.