Sofvie Reporting

Responsibilities

I was one of four designers who worked on building the final experience. I was responsible for market research, product design, and UX/UI iteration.

Understanding user and business needs

During the first call, Sofvie defined their business needs and their users. Sofvie offers custom reporting forms to industrial workers so they can document and collect EHS data. However, they do not have a custom data synthesis and visualization reporting feature. Our team consolidated Sofvie's introduction into the following takeaways:

• Sofvie's clients need an out-of-the-box solution for building data visualizations and reports.
• The solution must be simple enough to accommodate varied levels of data analysis experience.
• The new feature must be consistent with the rest of the web application to avoid overwhelming existing users.

Scoping the solution

We needed to build an end-to-end feature to enable users to create custom data visualizations and place them into personalized report dashboards.

While we had a core outline for the four main steps of the flow, we needed to define the granular dashboard-building experience. I started developing the core user journey around how and what users would edit in different dashboard sections. I needed to balance user experience, resource constraints, and simplicity in the interaction design.

Finding inspiration

My team conducted a competitive analysis of other products to understand different solutions in the market.

We each reviewed three products in the report and website builder industries. I found inspiration in the following features:

• Data and non-data component libraries that could be added to the report workspace.
• Drag and drop interactions with elements moving across workspace sections or grids.
• Significant customization abilities within the report builder to customize visual components.

Prototyping the solution

Following our market research, we each sketched different iterations of the report builder screen. We discussed and consolidated the sketches into high-fidelity prototype screens and iterated with stakeholder feedback. From sketch to prototype, we made the following core changes:

1. Organized the title step inside the "Information" icon to give users more flexibility with the heading layout.
2. Replaced the open grid layout with sections to simplify defining component locations in development.
3. Added a header bar for consistency across existing pages and to allow users to close and save the report.

Iterating with feedback

We conducted several UX audits with stakeholders to test the product and collect feedback. Along with overall UI updates, we ranked the prototype issues and iterated on the following core areas:

1. Updated the page navigation titles and added tooltips on hover to help users understand their functions.
2. Streamlined the button UI style and location to give more weight to the most important buttons.
3. Created more interaction differences between sections and components, and introduced more menus for moving, editing, and deleting components.

Reflections

At the end of the project, we received approval from leadership and customer stakeholders to push the project forward to production.

If I had more time to work on this project, I would continue to work with the Engineering team and other designers to ensure responsive design across different devices and discuss the first MVP version of the new feature.

This project had interesting challenges regarding compromising specific design and usability choices with engineering resources. I enjoyed collaborating with other designers and discussing improvement opportunities within the existing constraints.