Software Design for Plato (YC W16)
Plato is a software tool that allows engineering managers to get mentorship from
engineering leaders at companies like Google, Facebook, and Spotify.
Funded by the likes of Y-Combinator, Slack, and Eric Yuan.
Pain Points
Plato's software has a feature where users can view past and upcoming mentorship sessions with thought leaders in the space. The cards on these pages that displayed information were cluttered, and this was utilizing a significant amount of unnecessary space, as well as making it difficult for the users to accurately understand which sessions they previously attended or which sessions they have scheduled for the future.
The Task
The task at hand was to redesign the information architecture, layout, and user flow of these pages, and then to transfer improved information architecture and layout to high-fidelity mockups using Plato's existing design system.
Process
We started by creating user stories for these pages and defining the most common use cases. We felt that it was essential to understand exactly what our user's common behaviors were within Plato's software.
After doing so, we pivoted our focus to defining the necessary functionality of these screens. Since Plato's original designs were clunky and had many features that weren't necessary for immediate display, I spent time using findings from user research to design better information architecture.
The previous card had tags, the mentor’s previous published works (i.e. articles, Medium posts), and the mentor’s bio. We decided that the user needed to be able to view the mentor’s name, title, employer, date, time, session topic, and be able to reschedule or cancel the session. This allowed for some flexibility while re-designing the layout of the cards, as we had a lot more space from the fields we removed.
Low Fidelity Mocks
Once we understood the user stories and the necessary functionality, I started with low-fidelity mocks.
I iterated multiple times with low-fidelity, primarily changing the information architecture. Here are the final designs before we moved on to high-fidelity.
High-fidelity Mocks
After I designed the low-fidelity mocks, I moved on to high-fidelity. I used existing brand guidelines for the cards, typography, colors, and buttons. Here are the final designs.
Final Wireframes
We created wireframes including low-fidelity and high-fidelity mockups. This was done to ease visualization for stakeholders.
Key Takeaways
I worked with a product manager and engineering manager to create and implement these designs. I believe that our iterations were successful, as we achieved our goal of simplifying the future/past sessions pages of Plato’s platform. Working with their team was a great experience- and I was glad to have an opportunity to work on another SaaS product, especially considering how I’m connected with the product personally (I love receiving mentorship).