Report building made flexible…
Sofvie Reporting—
Enabling customized data visualization and report building
Sofvie is a risk and safety management software company that assists its clients in minimizing inefficiencies and uncertainties in high-risk workplaces, such as construction sites and mining fields, by collecting and reporting EHS data. Sofvie provides critical insights through system-generated reports, but an increasing number of clients are looking to create their own reports and have expressed the need for greater customization capabilities with the information stored in Sofvie’s system.
One notable aspect of our project journey was the absence of a comprehensive discovery phase. We found ourselves navigating through a terrain where key information had been passed down, urging us to adapt. As a team of 4, we were tasked to mainly design an accessible custom report-building dashboard to optimize users’ report-building experience.
PROJECT OVERVIEW
Tool
Figma, Figjam
Medium
Web application
Role
UI/UX designer as part of a team of 4
main focus: editing panels, menu bars, and prototype animation
Timeline
5 weeks
KEY FEATURE HIGHLIGHTS
Feature 1: Data selection
Select data sources and filters needed for the report
Feature 2: Data visualization
Built-in data visualization feature to allow users full customizability and flexibility
Feature 3: Report building
An easy-to-use report-building dashboard that accommodates users of varied levels of experiences
Alright, let’s dive into the nitty gritty of the design process.
THE CHALLENGE
Business perspective
Sofvie currently utilizes a fixed template for generating reports. However, when it comes to custom client requests, Sofvie’s internal team often finds themselves fulfilling these requests manually. These custom requests have created a backlog, impacting the efficiency of Sofvie’s internal team.
User perspective
The current fixed reporting template is no longer sufficient to meet Sofvie’s clients’ reporting needs, as many of them wish to include more fields and elements in the final report than what is currently offered in the template.
PROBLEM STATEMENT
How might we create a report-building experience that is simple and customizable for Sofvie’s clients?
THE APPROACH
Discover
Constrained by both time limitations and project scope, a comprehensive discovery research phase wasn't initially within our scope. To navigate this absence, we engaged in extensive discussions with the UX lead and the core project team throughout our first week. These conversations delved into both the business's and users' perspectives, allowing us to inherit crucial information pivotal for designing the solution.
UNDERSTAND THE BUSINESS NEEDS
Sofvie needs a custom report-building solution not only to enhance efficiency within its internal team but also to provide its users with greater flexibility in generating reports
The solution should be in line with Sofvie’s existing web applications to avoid confusion
UNDERSTAND THE USER NEEDS
Sofvie’s clients need a reporting solution that would allow them to create and modify elements shown in a report
The solution should accommodate users with varied levels of data analysis and reporting experiences
USER DIAGRAM
Having gained a better understanding of the needs of both sides, we came up with a user diagram to guide us throughout the project. We summarized the user’s goals, frustrations, needs, and wants below.
Define
As mentioned in the beginning, with very limited user insights, the user diagram is key to moving the project forward as a critical reference point. Having mapped that out, we were able to come into the define phase identifying user stories and the user flow for the project.
USER STORIES
As an EHS manager, I need a way to….
...create reports with each step of the report-building process offering easy-to-use and customizable features
...create data visualizations based on the data I select and incorporate them in my final report
USER FLOW
The two user stories could be dissected into 3 core functions of the report building experience.
Users need to be able to select and filter data
Once they have the desired data, they should be able to visualize and edit the data visualization
Finally, they should be able to assemble data visualizations and other report elements together to create a simple yet comprehensive report
Ideate
Coming into ideation, we decided to divide our work and find inspirations independently before converging as a team again. We each found 3 to 4 existing solutions that enable users to create custom data visualization or presentation dashboards to analyze and see inspiration.
COMPETITIVE ANALYSIS
I chose the following products:
Infogram: a tool for creating infographics and reports that allow users to create data visualizations while adding other elements such as text, images, and more to the finalized report
Flourish: a data visualization tool with a presentation-building feature
Canva–a platform for creating various types of 2D visuals and graphics with the ability to add basic charts
Since this was the first time the 4 of us worked together as a team, in order to understand each other’s design process and style better, we each created one sketch of the report builder screen based on the inspiration we drew from our own competitive analysis.
We then presented all 4 screens to Sofvie’s core UX team which included the UX lead and an UI designer to get their feedback. Based on their feedback on the screens, we assigned each other a main focus area to work on. I was responsible for designing and aligning the style for all editing panels wherever they would appear in the flow. Natalia was our main person for the builder’s workspace and data selection space. Tamara worked on the data visualization workspace while Kathy worked on the final preview screen.
INITIAL WIREFRAME
As a B2B platform, Sofvie, with a limited client base, didn’t feel comfortable tapping into users for usability testing at this stage. Post-project, I consulted with other B2B designers on the lack of usability tesitng. They confirmed the challenge and mentioned designers need to be strategic when contacting clients in the B2B context.
Direct testing with Sofvie clients wasn't feasible, so we relied on an assumption log, discussing and iterating on user behavior aspects internally, such as workspace entry, panel interactions, menu functions, and navigation design.
MAJOR CHALLENGE
DESIGN AUDITS
We then sought some validation while conducting several rounds of design audits with Sofvie’s UX lead (who is also a main stakeholder), UI designer, and UX/web developer to ensure the technical feasibility, usability, and style consistency of the current design. During these design audits, we made the following changes:
Added a save button to allow users to more flexibility when working on the report
Consolidated the progress bar with the header to save vertical property on the screen
Changed the vertical menu bar to a horizontal menu bar in order to save horizontal space for both editing panels and workspace
Added a new entry point for editing in the workspace
Further contemplated the interaction and functionality of the editing panels
Iterate
The design audits in the ideation stage were really helpful, but we were still not completely convinced by the validation that we were receiving. We wanted real user inputs. We then decided to conduct informal usability testing with people around us who have experience with report-builder like tools to gain more insights for the iteration phase.
We then offered alternative solutions to Sofvie’s core team and incorporated the design solutions they also agreed with in the high fidelity screens.
USER FEEDBACK ON HI-FI SCREENS
Added back and forward chevrons to the stepper to help users navigate back and forth of the report builder; eliminated the back and continue buttons completely as seen in initial wireframe above
Changed save and close buttons to icons while adding save options as a dropdown for the auto-save icon; added a preview CTA button
Further adjusted the menu bar so that it aligns with all functionality of the report builder–added filter icon so that users could adjust filter each step of the way and preview button to preview the report.
Reduced the editing panel card size to save vertical space and reduce scrolling
Updated the workspace editing entry point to clearly indicate to users which section they are currently working on
Added editing options to the right-hand side panel to align with editing panels in other Sofvie’s web applications
EDITING PANEL HIGHLIGHTS
I was responsible for all editing panels in the product. I would like to showcase all the finalized editing panels below for each main function of the user flow, inspired by editing panels in Figma, Google suite, and other data visualization tools.
RESULTS
We presented the final prototype to the stakeholders which included Sofvie’s chief technology officer, lead solution engineer, lead UX designer, the UI designer, and the UX developer. The prototype was well received by stakeholders and they were ready to push the project to production.
The CTO believed the prototype would not only empower their clients to create impactful custom reports but also help increase efficiency for Sofvie’s internal team.
THE REFLECTION
Next steps
If I were to take Sofvie’s report builder a step further, I would focus on the following:
I would spend more time on user research in the discovery stage to help validate assumptions from users directly
I would conduct usability tests early on and with more targeted users (ideally Sofvie’s clients)
After the product is launched, I would do NPS testing to measure impact and satisfaction
Learnings and highlights
Learning on the process and working in a startup environment:
The UX process can never be perfect due to certain constraints. However, it is up to the team and the UX designers to be creative and find alternative ways to get as close as possible to the truth we are seeking, especially in a startup environment.
Learning on working collaboratively:
It was a valuable experience to work with different designers and developers, gathering their inputs at every step of the way. Their insights play a critical role in how we design and iterate, guiding what's feasible and what is not. They offer a fresh and practical perspective to the process.
Collaborating with fellow designers was interesting, considering we all worked virtually from different time zones. We adapted to each other's schedules and styles. If someone couldn't attend a design meeting, we made an effort to share notes, recordings, and highlights to keep everyone informed and up to speed.