ProsperWorks is a relationship management (CRM) product for small businesses using Google apps.
I was brought onto the team to own all the reporting features of the product, features that had been missing at the time. I began the design process by engaging small business owners across the globe to determine how reporting is used in their businesses. It was clear that detailed reporting is a hugely important feature in CRM products and can answer critical questions like “do I have enough money to stay in business next month?"
I compiled questions that our users needed answered and began in-depth research into competitive products. If a product could answer each question, that tool or visualization was considered more effective.
Armed with research, user stories and Google’s Material Design as a guide, I designed, prototyped and tested new reporting features, all from the ground up.
Sketch proved to be perfect wireframing tool for these reports. With Sketch, I was able to design several new features quickly while utilizing the built-in Material Design library for common elements.
Prototypes were essential in defining the behavior of our reports. Working with HTML, CSS and Highcharts.js I could prototype, test and iterate quickly.
|STAGE||% OF TOTAL||OPPORTUNITIES||AVG DURATION||TOTAL||WEIGHTED TOTAL|
|Contract Sent||13%||3||10 Days||$9,341.55||$7,150.55|
The Material Design style guide includes numerous options for color use and iconography. I tested several color combinations to ensure contrast would be adequate across a variety of usability concerns and data scenarios. Ten color swatches were chosen as a repeating system, important to the dynamic nature of reporting data.
A UI guide was created to document all UI elements and data scenarios.