Stay calm, create designs

Share reports experience

 
 

Summary

I led designs and interaction design for Clarity share report experience

Project timeline:5-6 weeks

My role

User experience, Interaction Designer, Researcher

Tools: Sketch, Invision, Keynote, Clickstream

Who I worked with

Product, Engineer, UX Designers, Researcher


Problem

Since the launch of Clarity, users have really embraced the custom reporting functionality. For Clarity users we want to enable the ability to share custom report created with others members of the team. Currently, the only reports that are shareable are the standard reports created by PI.

Goal

  • Create an simple and intuitive experience for users to share reports with other users.

  • Flexible where users can define permissions for other users they share their report with.

Challenge

The challenge for me is to determine what is the best user path for our customers to successfully share a report. This includes understanding what users want from sharing reports, how are they currently sharing, who do they share with, what would they expect to find in share reports feature, and where would they expect to find it. As the lead ux designer, I was responsible for delivering an intuitive sharing reports experience in product for our customers. I conducted a series of design thinking sessions with my team for initial user flow solutions. I worked closely with our team of designers, product manager/owner, developers, and design bug bashes. Tactics include customer research, user flows, wire-framing, Hi-Fi screen design, prototyping and obtaining clickstream data to measure success.

I wish I could share my report with my teammates

Kick-off

Prior to this project, there was not prior recent research done. I circled back to stakeholders and asked this to be included in the sprint. I was able to piggy back off of a separate research project and include additional questions regarding sharing reports. I was able to interview 7 participants Although it did push back the project deadline by 1-2 weeks, it was crucial to get the most recent customer research done.

Insights from research

Since there’s no feature that will allow users to share their own custom reports with other users, they resort to jumping on calls to do step by step walk through which is not scalable and takes away scarred time out of their work day. Most users who want to share their custom report want to grant access to other users with read only permissions. Only in certain scenarios would a user want to give another user editing access to like a proxy or their manager. This will be a big driver in my design decision.

Customer problem

There’s no easy way or method available for users to share their own reports with their teammates.

Customer goal

Customers should be able to share their own customized reports with their teammates and peers quickly and efficiently.

 
Hannah - AM.png

“I want to share my own customized reports with my team” - Area Manager

 

Competitor analysis

I conducted a competitor analysis to get inspiration of what’s best in practice around sharing files or documents. I picked other tools that have similar restricted file sharing features as Clarity. I reference some common themes like a modal overlay and successful message banner as a selling point to influence stakeholders in the decisions I make in my design process.

Competitor analysis.png

What is inspiring?

I was inspired by Google Drive Document clear and focused approach with a modal overlay. In the share modal, customer can “Add people” or “Get link.” After customer successfully adds a person or group, the “Get link” disappears and prompts a modal overlay to keep the customer focused on the next task like updating permission role, notify people, message, or send.

Google share document experience

  1. Search bar

  2. Visible permission role label

  3. Share by link for users who still want to share with minimal effort

  4. Option to remove so user know it’s reversible

  5. Edit permission in a dropdown with intuitive labels

*Visuals from Google Drive share feature

*Visuals from Google Drive share feature

User flow iterations

I conducted a white boarding session with my design team to determine what is the best user flow. Since we were working from one due to COVID restrictions, this was done remotely with Invision freehand. Based on product permission structure, users of a shared report can have different access levels from two perspectives based on their permission role; can edit (Owner) and read only (Reader)

Starting with an owner of a report who wants to share their report, I’ve identify these user goals…

1. Share by a shareable link (copy link to clipboard)

2. Search and add user or group name to share

3. Manage permission

Owner perspective

Based on my competitor analysis, there are different flows for different needs. For my whiteboard session, I focused on user goal 2 where the competitors start to derive from very different user flow results. In my example, User flow A versus User flow B.

 

User Flow A.

User can add multiple users and groups and but are limited to one permission (Reader or Owner) to share. In order to add users and groups with Owner permissions, user would have to start over and go through the path again to share.

Pros and Cons

  • Pros user can add multiple readers or multiple owners at a single time

  • Cons: start back to share dialogue and redo same task

user flow A.png
 

User Flow B.

User can add multiple users and groups default to Reader permission, and have the option to update a Reader to Owner permission before clicking share.

Pros and Cons

  • Pros user can update a reader to owner in the same flow

  • Cons need to update a reader to owner one at a time

user flow B.png

Which flow best meets our customer’s needs?

After thoughtful discussions with my design team and using customer research to influence my design decision, I collectively decided with my team that User flow B is the best flow that fits our customer needs. In most cases, users would only want to share their report with another user with read only permissions. Rarely would they want another user as an owner unless it was their manager or proxy, someone they approve to make edits to their shared report.

 

Reader perspective (out of scope)

User Flow C.

  • C.1. Share by a shareable link (copy link to clipboard)

  • C.2. Edit this report to another version (save a copy)

During my white boarding session, I’ve also created user flows from the readers perspective, Users who have been shared a report with read only permission are limited to one action in a share modal. Through this flow, I identified that there is a need for not only a reader to want to make edits to a shared report, but an owner may want to edit their own copy to avoid overriding their shared version. My senior designer have determined that the readers perspective was out of scope for P0 of shared project, but I will reserve it as a fast follow-up to be later picked up after the P0 shared project is complete.

user flow c.png
 
Early iterations

Sketches

My earlier iterations was designed around a a previous technical constraint where the search box could only pull results by user name or user group.

Ultimately, the engineer was able to work around a solution and and unblock that constraint, which is something I need to remind myself as I’m going through my design process is to always design the best experience in mind, regardless of technical constraints because often times those constraints are temporary.

High Fidelity Designs

Taking in customer research, inspirations from our competitors, and 5 iterations later, these are the final designs that would best solve our customers problems and provide a delightful experience. My inspiration is heavily driven by competitor analysis. Since there are multiple steps and paths that a user can take in order to share a report, it and can be a complicated process if the flow isn’t natural. I followed similar patterns which influenced my designs decision which allows for flexible paths a user can take, with the focus on the primary action and keeps the user focused on that path until they end with sharing a report. Alternatively, if user doesn’t want to commit that path, they can opt out and share by link instead.

Share feature.png
 

Optimizing for the end user

As I demonstrated earlier in the user flows, User flow B would best fit our users needs. I tie this back to our principle, optimizing for the end user. in most common case, users want to share a report with other users as read only permissions. In this case, it’s defaulted for Reader permission. For the uncommon cases, user can still add an Owner to their shared report by updating the permissions with a drop-down select.

update permission.png
 

Predictability

We’ve decided adding auto smart populate and single add would be the best experience. User can select the correct user name and if user needs to add a team, they can also do so by adding group name. We considered a case scenario where a user may want to add multiple users at once, but not enough customer research to back it up and often times can lead to error if there is an incorrect spelling

Removing friction

Break information into chunks and use links to connect the relevant chunks so that you can support different uses of your content.

Smart autopopulate.png
 

Visible system status

Although, the message banner was not an original requirement for my project, but I refer to customer experience principles. I included a message banner as part of visible active share button this detail will create a much more delightful experience

Successful message banner

Timed destructive message banner, optionally user can have the option to click “X” icon if they prefer to dismiss banner. Placement relative to what is iIt can be destru

Active share button

Similar to Google and Quip, visual indicator to inform user this is a shared report. Since users can view any report with a link and any confidential metrics in a report would be displayed as a locked icon to user who doesn’t have the appropriate access to view the confidential metric, I decided a subtle visual indicator to inform user that this report is actively being shared with others.

success banner.png

Interactive prototype

Task: Share report with a shareable link

 
 

Task: Shares report with other user and group names

 
 
 

Results

Users who previously had to jump on chime calls just to share a report they created with another team member can now simply share a report with a simple and intuitive sharing feature in Clarity.

Your sharing feature rocks my world, absolutely amazing
— Quote Source

What I learned

Scoping is key, it was easily to get pulled into ideas and suggestions for this shared feature that was out of scope. This is one of the biggest learnings of this year. It’s ok to to push back, but let stakeholders know those will be considered as a fast-followup.

Design without the technical constraints, I initially started this project by designing around the technical constraints, where as I should be designing for the best experience for our customer, regardless of technical constraints. These are temporary that can be resolve and customer experience is not at risk.

Next steps

After the share reports feature was launched, we used clickstream to track user engagement for how many times a user shares a report by shareable link, share button, how many users they share with, what assigned permissions to users grant when they share a report.