Product Design
/
Clipboard and Report section creation
About
The client, a company specializing in AI-based technology for defining and expanding targeted audiences for major market players, approached us with a project.
The goal was to create a report creation section that allows team members to share reports or use them for future PowerPoint presentations. This section was integrated with a clipboard feature, enabling users to pin various content throughout the application
and paste it into different sections seamlessly.
The goal was to create a report creation section that allows team members to share reports or use them for future PowerPoint presentations. This section was integrated with a clipboard feature, enabling users to pin various content throughout the application
and paste it into different sections seamlessly.
My role
UX/UI Designer
Timeline
October 2023 - November 2023
Problem statement
The client needed a seamless, efficient solution for creating
and sharing comprehensive reports, while users required the ability
to manage content across various sections of the application without disrupting their workflow.
Existing tools were fragmented and inefficient, lacking a cohesive content management system.
and sharing comprehensive reports, while users required the ability
to manage content across various sections of the application without disrupting their workflow.
Existing tools were fragmented and inefficient, lacking a cohesive content management system.
Value statement
By implementing a deeply integrated clipboard feature within
the report creation section, we addressed the client’s business need for a unified administrative control centre that significantly enhanced workflow efficiency and productivity. This solution enabled users
to save and transfer content effortlessly across the application, facilitating the creation of reports.
the report creation section, we addressed the client’s business need for a unified administrative control centre that significantly enhanced workflow efficiency and productivity. This solution enabled users
to save and transfer content effortlessly across the application, facilitating the creation of reports.
Clipboard creation
During development, we identified scenarios where users needed
to add components from one page to another. While we had libraries for such situations, switching to them would slow down the workflow. To address this, we introduced a clipboard feature to save and add content seamlessly across the application.
to add components from one page to another. While we had libraries for such situations, switching to them would slow down the workflow. To address this, we introduced a clipboard feature to save and add content seamlessly across the application.
How it works
1
For example, if a user encounters an interesting chart and wants to save it for a future report, they can use the clipboard.
2
The clipboard, accessible from the header, expands into a full-screen section for easy content management.
Here is this option, as well as adding to the reports directly.
Outcomes
After implementing the clipboard functions, we conducted usability tests with users, including colleagues and client-side employees who were not deeply involved in the project. While the feature addressed specific problems, users still had questions about its functionality
and potential uses. As a result, we compiled a list of clarifications
and further elaborations needed in these sections.
and potential uses. As a result, we compiled a list of clarifications
and further elaborations needed in these sections.
1
How should the clipboard and reports be integrated? Should they be combined or kept separate?
2
Which specific elements can be added to the clipboard in the initial stages, and which should be considered for future versions of the application?
3
How should we implement the collaboration feature in the report section, and what are the potential limitations?
4
What visualization would be optimal for managing the task pool within
the report section?
the report section?
Report section creation
Since the clipboard and reports were closely related and initially
the clipboard's primary function was to support report creation,
we decided to integrate them. The idea was to make
the administrative control centre the entry point for both features, unifying them in a single, convenient modal window within
the clipboard.
the clipboard's primary function was to support report creation,
we decided to integrate them. The idea was to make
the administrative control centre the entry point for both features, unifying them in a single, convenient modal window within
the clipboard.
In addition to the list view for reports, which is optimal for quick access when users know exactly what they need, I developed several other versions that display the contents of the reports in more detail with larger elements.
However
We planned to launch all visualization options and, over time, analyze which ones are most popular among different user types and understand the reasons behind their preferences.
1
Initially, this solution seemed workable, but it proved to be non-scalable
for future needs. Searching for reports within other sections would be inconvenient and confusing.
for future needs. Searching for reports within other sections would be inconvenient and confusing.
2
Additionally, we wanted to avoid overloading the clipboard with excessive elements and functionalities, especially since visually complex elements like cards and graphs were already intended to be housed there.
So, we decided to make Reports a separate section in the application
In the first iterations Reports supported only charts
Reports’ functionality
Create new Report
On the reports page, users can perform several actions: create new reports, edit existing ones, duplicate reports, or delete them.
Next, we'll explore the user journey for the primary actions, specifically creating a new report and editing an existing one.
Next, we'll explore the user journey for the primary actions, specifically creating a new report and editing an existing one.
This action has several entry points.
1
By adding the first graph to a new report, thereby going to the report creation page via confirmation in the modal window.
2
By pressing button “Create new Report” on the Clipboard full-screen page.
3
By pressing button “Create new Report” on the Reports page.
1
2
3
The Clipboard serves as primary tool for adding content to the Report
On any report page, the user may find an edit button for each report. Clicking this button takes the user to the editing screen, where various parameters may be managed.
Additionally, from the pages for creating a new report or editing
an existing one, you can navigate to the section for creating
a presentation template. This section serves as a bridge between
our application and uploading data to PowerPoint.
an existing one, you can navigate to the section for creating
a presentation template. This section serves as a bridge between
our application and uploading data to PowerPoint.
Edit Report
Modify the list of editors
Edit existing comments
and add new ones
and add new ones
Add new content via Clipboard to the report
Edit access permissions
for the report
for the report
Add or remove the report from the shortlist
Conclusion
This project was a testament to our team's ability to identify and solve complex user needs through innovative design and thorough usability testing. Despite the challenges of integrating new features
and ensuring a seamless user experience, we delivered a solution
that enhanced workflow efficiency and user satisfaction.
and ensuring a seamless user experience, we delivered a solution
that enhanced workflow efficiency and user satisfaction.
Working on the report section prompted us to refine the components with graphs in more detail. This effort resulted in the creation
of uniform templates for different types of graphs, ensuring they met the necessary size requirements and provided a consistent user experience.
of uniform templates for different types of graphs, ensuring they met the necessary size requirements and provided a consistent user experience.
