Cross-App Product Development

Cross-team collaboration to enhance shared functionality.

Role: Senior UX Designer

Team: Essam Almansouri (Lead Developer for Sponsored Projects), Nick Brosas (UX Designer), Caitlyn Holland (Sr. UX Designer), Nate Owen (Product Manager for Admin and Platform), Chelsea Phelan (Product Manager for Sponsored Projects), Jeff Uhlorn (Product Owner for Sponsored Projects), Emily Yeomans (Product Content Manager)

My Contribution: UX Design, Project Management, UX Research, Moderated Usability Testing

Employer: Cayuse

Skills: UX Research, Cross-Team Collaboration, Internal Usability Testing

Tools: Lucidchart, Figma, Lyssna, Pendo

Timeline: 9 months

User Problem

Cayuse had two main products with basic “Task” functionality: Sponsored Projects (SP) and Platform. Users had the ability to assign a "to-do" to an individual, give a description of the task, and enter a due date. But users needed more, including the ability to add comments, tags, reminders and attachments. Additionally, the current task functionality was inconsistent between the two products, reflecting a lack of shared code that ultimately hurt the user experience.

Before: Modal design without the functionality to add an attachment.

Goal

Give users the ability to add attachments to a task. We wanted a single solution that would work across multiple products and be efficient with design and development time. That meant a lot of collaboration, communication, and compromise across SP and Platform teams.

Adding attachments was the first phase in the long term plan to enhance Tasks. We knew that if we did it right, we could build a unifying piece of robust functionality in an otherwise very siloed portfolio of products.

Please note: Due to confidentiality, only work that is currently in production is displayed.

Process

Draft and prioritize a work plan
Develop low-fidelity workflows in Lucidchart
Develop high-fidelity designs in Figma
Conduct moderated usability testing
Revise Figmas and draft Acceptance Criteria (AC)

Draft and prioritize a work plan

Working with the Product Managers (PMs), Product Owners (POs), and lead developers from Sponsored Projects and Platform, I drafted a written document of desired cross-app functionality. It included a brief description of the feature enhancement, any existing epics or user stories, notes, questions, potential snags and a rough estimate of developer effort.

From there, the PMs and POs reviewed their own road maps, previous client commitments, etc. and compromised on the preferred order to tackle the enhancements. I set up a weekly 30 min meeting so we could touch base on design developments, prioritization, and keep communication open between the two teams.

2. Develop low-fidelity workflows in Lucidchart

Since basic functionality to create and update a task already existed across our products, I used Lucidchart to document the current workflows and discover where we could improve the user experience. With all the plans we had in mind for “Tasks” beyond adding and deleting attachments, I quickly realized that the current modal design was not going to cut it. My first recommendation was to move to a new page, and the team agreed. White space, here we come!

Low-fidelity Lucidchart workflows to create, view, edit and delete an attachment.

3. Develop high-fidelity designs in Figma

Once our workflows had team approval, I moved to Figma to create high-fidelity designs and click-through prototypes. Working with the content developer, we got into the details and explained the technical restrictions on attachment size, quantity, and any error states that could be triggered. Our two-person UX team then built out the prototypes to make sure every workflow was accounted for.

High-fidelity Figma layouts for adding one or more tasks.

4. Conduct moderated usability testing

I conducted moderated usability testing with internal, customer-facing stakeholders to discover ease of use for adding and deleting an attachment. As always, it revealed areas for improvement (even functionality we were not intentionally testing- like scroll position) and places we could improve consistency across products.

5. Revise Figmas and draft Acceptance Criteria (AC)

After reviewing the testing feedback with the team, we revised the Figma designs to develop an MVP solution that solved the business objective and was user-friendly. With a final thumbs up from engineering, I drafted Acceptance Criteria to hand off with the designs so that everyone would be on the same page about expectations for look, feel and functionality.

Final designs in production for adding an attachment to a new task.

Results

Users love the ability to add attachments to tasks. We observed a spike in usage after implementation and in a follow-up meeting, a Customer Advisory Board member said "Tasks was rudimentary before the latest enhancement and ability to add an attachment.” While this was only the first step in the “Tasks” enhancement work, it was a critical one. Our weekly meetings fostered a more collaborative, transparent environment that reduced siloing and increased communication between products. This set a precedent for growing shared functionality efficiently and easily.

"Tasks was rudimentary before the latest enhancement and ability to add an attachment.”

— Customer Advisory Board member

New Task: Before

New Task: After

“Caitlyn is highly organized and very detail-oriented in all aspects of her research, usability testing, design thought process and Figma file creations. Her Acceptance Criteria documents are well-organized and written with such clarity it makes my job as Product Owner a breeze.”

— Bridget Barr, Product Owner

About Resume More