Product design: ai saas grammar product
Document Dashboard
A doc dashboard is a space to store and organize documents; you might have seen this feature in Grammarly’s webpage tool, but certainly you’ve seen this in Google Drive or other cloud-based storage products.
Overview
Role
Product designer
Team
Me, product manager, engineers
Platforms
Desktop, mobile, tablet
Project timeline
8 weeks
The problem: nowhere to store documents
Grammar Coach users had nowhere to store their documents, or the option to export. A single page was meant to be recycled over and over.
The solution
Design a responsive document dashboard feature
Assess usability
Tools
Research
Cross-analyzing competing models
Writer.com
Grammarly
Dropbox
Google Drive
Repetitive patterns between sites inspired confidence in these types of content models, such as:
List or block content view
A search bar
A vertical navigation bar
Headers; including the title and “recent”
CTAs “upload” and “create new”
UI Design
Early designs
Initial sketch wireframes started out simple. The bare minimum included a header with simple navigation, a title for the page, the documents, and the action/ability to start a new document.
Then I introduced the search bar and the vertical sidebar menu.
Empty state, including the premium “Upload Documents” feature
Empty state with an open menu for premium accounts
The evolving design process
At this portion of the process, the team and I were running through all possible use cases, including the:
Empty state
Process of uploading and downloading documents
Overall look and feel of the premium vs. free version dashboard
Premium feature: the ability to download documents
Premium account with menu open and snackbar
There was a point where I realized how unwieldy my Figma files were becoming. I was sourcing components from multiple different locations, so I created/compiled my own repository, which eventually became the Grammar Coach design system.
Final designs that shipped
Originally, the vertical sidebar menu was meant to be accessible by the hamburger menu icon only, but based on competitive research, I saw how imperative it was to have those actions available at all times.
→ This was an instance where I had to advocate strongly for the user experience.
Not only does it make more sense from a usability perspective, but also visually, the vertical sidebar menu makes use of the space more elegantly.
Empty state
Upload in progress toast; action: “Upload Document”
Premium dashboard
Download document; action: kebab menu
Post-completion iterations
The main component that’s different in post-completion iterations is the option to customize the dashboard by being able to switch between list and block view.
→ There wasn’t an opportunity to test usability at this stage, so I applied some of the patterns from competitive research.
A block view of the document dashboard
A list view of the document dashboard
Impact
Success metrics
After I left the team, Grammar Coach was ultimately sunset in late 2023 because it didn’t perform the way leadership had expected.
→ If I were still on the project, I would iterate based on usability testing. And for future evaluation, metrics to take into account to measure success would include:
User feedback, via customer service
Usability, via qualitative testing to establish whether users are able to find the pages they seek
Retention, to determine if users are understanding, staying, and returning
Reflections
Personal growth
Due to an aggressive timeline, time wasn't built into the project schedule to allow for user interviews or testing during the design process. So, design crits within the team were my primary source of feedback.
→ As a result, the user base had always been low, and the product struggled to reach table stakes at a time that would’ve made it competitive with Grammarly. The redesign, while a vast improvement over its previous iteration, sadly came too late to make a real impact.
I accepted that the months of work I had done was ultimately sent out to a very honorable viking's funeral. I still gained extremely valuable experience co-owning a product, brandished my Figma skills, and grew as an advocate for the user experience.
What I would do differently
I would like to have organized weekly check-ins with my teammates to better understand how their projects were progressing, so it could have been easier to transition to the project in the case that the designer left the team (which is what happened).
Also super important!!: in the future, I would also make sure to double-triple-quadruple check the spelling for a product that checks for spelling. (Check under the mouse in the image below.)
This was originally an animation, but under the mouse read the misspelled word "execeptional".
