Report Builder Project
Overview
To support users' needs to create custom reports, we implemented a report builder. This was created to be highly customizable to serve client needs and to emphasize current campaign performance and success.
The other consideration we needed to implement was respecting the current reporting structure and features. At the point prior to this project, users had reports but there hard coded and spread out across the platform.
Within this project, I led the design, product management, and overall ownership of the feature. Some responsibilities included: UI architecture, user testing/feedback, requirement gathering, user flow documentation and workflows, content and marketing strategy, engineering ticket creation, stakeholder feedback, and much more.
User Goals Documentation Examples
Feedback and Research
I worked closely with our users to gather feedback and requirements. I also audited existing features and factored them in with the new project goals. While constructing the overall architecture, I tried to ease user adoption by leveraging their current feature behavior and navigation elements.
I designed the user interface with several user goals. The main user goals I wanted to focus on were:
People who want to customize - These are the people that want to work with layouts and visuals for their clients
People who don’t have time or want to customize - I introduced a report template system (both system based and user based) so users can easily create scheduled reports.
Wireframes
User Interface and User Experience - Architecture
I did a lot of research on other report building tools and decided on two major screens. The first screen is the major settings and needs (i.e data sources, names, schedules, etc) and the second being the actual customize layout page. For the users who want to streamline their report creation, they never need to go to the Customize page thus saving time.
User Interface and User Experience - Customization
Users can easily customize their reports either: clicking or dragging or interacting with the buttons in the sidebar UI.
The edit widget form was also designed with a “top down” approach so the prior from elements inform the other settings available below.
Other Shorthand UI/UX micro interactions included were:
Placeholder naming generation based on settings (in the data sources and widget naming areas)
- UI scalability for future features (some UI elements were put in modals or in expandable layouts so they can grow based on feature needs)
- Keyboard shortcuts
- Quick navigation to live preview after saving
- Requests for Immediate reports being sent even if schedule (so user’s can preview the report prior to a client receiving it)
- And many more
Development Handoff
I wanted to make things easy for our engineers so in some instances instead of making full production screens I introduced shorthand UI documentation to account for UI interactions/states.
Engineering Hand Off Examples
