Visier

Custom Content Export Page

2022

Streamlining content sharing between Visier’s developers.

Scroll

Duration

4 Weeks

Role

UX Design Lead

Team

Fatemeh Rahaghi

Product Manager

Amrit Kumar

Developer

Visier is an HR analytics platform that helps business leaders make informed business decisions. Visier provides two products: Analytics, which is customer-facing, and Studio, designed for backend use.

Visier's Studio platform serves as the backbone for their developers to create custom content tailored to a client’s analytics needs. However, the existing process for sharing this content among developers lacked efficiency, hindering collaboration and productivity. To address this issue, I was tasked to design an Export Page feature aimed at streamlining the sharing process and enhancing the developer experience.

Project Overview at a Glance

Problem

The lack of a content-sharing system within Visier's Studio platform resulted in wasted time for developers, negatively impacting productivity and impeding the seamless exchange of custom-made content.

Solution

Implement a dedicated export page feature within Visier's Studio platform that streamlines content sharing and optimizes productivity by providing a standardized and user-friendly mechanism for packaging and exchanging custom-made content.

The Design Solution

A New Export Page for Content Packaging

The export page serves as a central hub for assembling custom content into a single, shareable package, which can then be imported into another project with ease.

The export page serves as a central hub for assembling custom content into a single, shareable package, which can then be imported into another project with ease.

The export page serves as a central hub for assembling custom content into a single, shareable package, which can then be imported into another project with ease.

Different Ways of Exporting Content

Users can effortlessly include multiple items in their export by utilizing the quick action in the content list. For times when users are actively editing content, they can conveniently export it directly within the content page, eliminating the need to navigate back to the content list.

Different Ways of Exporting Content

Users can effortlessly include multiple items in their export by utilizing the quick action in the content list. For times when users are actively editing content, they can conveniently export it directly within the content page, eliminating the need to navigate back to the content list.

Alerts With a Link to the Export Page

As users browse and select content for the export page, an alert confirms the addition, with a clickable link guiding them to the export page, ensuring clarity on its location.

Alerts With a Link to the Export Page

As users browse and select content for the export page, an alert confirms the addition, with a clickable link guiding them to the export page, ensuring clarity on its location.

How I Got There

First Iteration: Designing for Efficiency

Given the solution's aim to enhance Visier's developers' productivity, my primary focus was efficiency for users. This led me to design a workflow that consolidates content discovery and package exporting into a single page, minimizing the time required to complete tasks.

Discovering Technical Limitations

So, I shared my progress with the developer I was working with on this project, but it became clear pretty quickly that the design wasn't going to meet the requirements of the project. What I overlooked initially was the complexity of custom content creation. It turns out that content often relies on other elements, known as dependencies. To give you an example, think about trying to open someone else's After Effects file—you need not just the file itself, but also all the video files it references. Similarly, for Studio's export feature to function properly, it needs to include not only the main content but also all its dependencies.

In the setup of my current design, the developer pointed out that it wasn't feasible to automatically update the list to include dependencies when a content is selected, which is a problem because users can’t see the dependencies that will be included in the export!

Gathering Insight and Collaborating with Developers

With a clearer grasp of the technical constraints and the developer now aligned with the design direction, we collaborated to devise a solution. The developer proposed a fresh approach, dubbed the "shopping cart model," inspired by typical eCommerce workflows. Here's how it works: users browse for desired content, add it to the export page, review the selections there, and then export the package. Taking this model, I crafted screens for each step, integrating new buttons into existing pages, implementing alerts for system status updates, and designing entirely new screens for the export page.

Shopping cart model

Key Learnings

Efficiency Doesn’t Always Mean Better Usability

Designers are taught to use efficiency to measure good design, but it's not the only consideration. In this project, a design emphasizing efficiency failed to keep users fully informed about the contents of their export package, which would’ve likely resulted in frustration.

The Developer - Designer Relationship is Important and Developers Play a Key Role in the Design Process

Through this project, I experienced first-hand that developers play a key role in the design process by offering valuable feedback on the feasibility of design solutions and suggesting alternative approaches based on technical limitations. By collaborating with the developer, I successfully designed a feature and witnessed its release and adoption by my colleagues.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.