1-on-1s Mobile App Feature

Quantum Workplace wanted to bring a mobile app to market to have a competitive advantage over our competitors. 6 months prior to this decision, Quantum released a web browser extension to continue to meet people where they were working. The earliest proof of concept of the mobile app that was released to users was based on this web extension, where users could complete simple tasks outside of the platform such as give feedback, give recognition, and take notes. This launched in April of 2019, but only garnered around 50 downloads from our users. After solving many technical hurdles to get a basic app developed, it was time to take this tool to the next level with a more useful set of features and closer parity with our web platform.

• How to increase usage of the mobile app.

• How to bring a more useful feature to the mobile app.

• How to meet users where they were while working.

• Determine the scope for a major feature that could be predominantly built in 3 days offsite with an additional month of fine tuning and testing. 

• Deliver a minimum viable product (MVP) of one of the 5 main features from the Quantum Workplace platform within the product set in the mobile app.

• Product Designer, Researcher, and Front-end Engineer - Erica Boyle
• Product Manager & Researcher - Graden Hudson
• Lead Engineer - Dan Murphy
• Additional Engineers - Jason McEvoy, Sean Erickson, Platte Grueber
• Quality Engineer - Matt Krauel

When looking at our robust web feature set, we knew a successful new version of our app would need to focus on the most important feature that users needed to complete when away from their desktop computer. Our assumption was that the 1-on-1 feature would be the most useful to have on mobile due to the nature of 1-on-1s often happening outside of the office or without a computer screen present*. When a computer isn’t present, but someone needs to take notes, they often turn to their mobile phone anyways. 

Our 1-on-1 feature also relied on participants answering questions and preparing for these conversations prior to the physical meeting. Completing this step was something direct reports often didn’t do until the last minute, an issue we saw in our own data when analyzing how often the direct reports forgot to share their results with their manager. We hoped having an app for these employees to use to fill out these questions before their meeting would be desired.

* This project was completed prior to the pandemic, where working in an office with others, plus going to lunch for a 1-on-1 were completely normal! Now, when most 1-on-1s are completed via Zoom, a feature like this may not be as useful. 

The first release of the mobile app did not look like a traditional app that most people are used to. It lacked top or bottom navigation, and all existing functionality was basically filling out forms without seeing that output anywhere in the app. We still relied heavily on the web platform for viewing a lot of information. Introducing 1-on-1s to the mobile app would be the first time a user would be able to view the output of using one of our features, just just completing a form.   

In order to build the 1-on-1s feature, the app's navigation first had to be restructured for there to be a place for it to live. I created basic wireframes of a desired mobile app layout to determine what the navigation items would be on both the top and bottom of the page. I used this wireframe to facilitate conversation with stakeholders and design team members to communicate the strategic direction of the app. 

I quickly iterated from low fidelity to high fidelity based on weekly feedback from design critique meetings. This restructure and redesign work was completed prior to building any of the 1-on-1 functionality so that we would be able to scale the new look and structure of the app for the many new features to come. 

Quantum enjoyed going off site once a year to build a major piece of their product. The MVP would be predominantly built in this 3 day offsite or “Hack-a-thon”. We knew an entire feature that had taken years to perfect on the web couldn't be built on mobile over 3 days. But I still designed the entire process of completing a 1-on-1 on the mobile app so we could work backwards to decide what a solid minimum viable product would be after our offsite. We wanted to be able to walk away with a good start on a first version release. 

The main components of a 1-on-1 were:

• Filling out your responses to the agenda questions
• Have the manager or 1-on-1 facilitator add their responses to questions 
• Allow each participant to view the other's responses alongside theirs
• Support for note taking and commenting on responses during a 1-on-1
• Finalizing the conversation and questions after the in-person meeting

While we knew that the ability to last minute edit your 1-on-1 or add comments to responses in app would be desired features, we also knew that it wasn't feasible for our team to add that functionality in the first version due to the complexity of constantly updating the 1-on-1 being shown in app. What we knew we could create in 3 days, and still meet the needs of our users, was a view only version of their 1-on-1 that they could at least refer to during conversation away from their computer. On top of that, we added support for note taking in first version if there were thoughts you would like to add as comments or items for later discussions. To handle the scenario for when users would need quick access to complete their 1-on-1 if they forgot, we added callouts with a link to our web platform for the user to add or edit to their 1-on-1 and share it with their manager on a mobile web browser popup within the app. 

Once we knew what we wanted to tackle in this time frame, I worked closely with my squad’s product manager to determine what exactly we would be building and the scope for the project.

I created a high fidelity interactive prototype of the 1-on-1 feature, focusing on bringing as much parity from the web platform to the mobile app as possible. I took the extra step of making this a prototype instead of a mockup because it was key to show the various interactions our developers would be building. 

After a design critique with my 3 other design peers, it was brought to my attention that many of the web patterns that I had implemented into the mobile version didn’t match typical mobile patterns. I iterated on my design based on this feedback - making this feature feel like one continuous column when on web there was a 2 column design. 

The final meeting on these designs was with the product manager on my squad to make sure they matched the scope of the project. A few nice-to-have items were removed, but the bulk of my design remained and was finalized for development.

We set off to hack at the end of July 2019, and right away when we started our 3 days of work, large printed versions of my designs were taped to the wall in the conference room. My designs became the meeting point for many major decisions, where we’d physically point and talk about different elements. Not only was I the designer of this project, but I also was the front-end engineer. I worked side by side with the other engineers to bring my ideas to life. We walked away from the event with my designs rendering on a mobile screen, with about 80% completion of the work. The following images show what we released after a sprint of refinement.