I entered Convex as a Sr. Product Designer right after their Series B, so I came in during a period of extreme growth.
This era is also when a brand graduates from the frameworks and libraries necessary during its youth, and begins crafting something more mature. This is especially important when attempting to disrupt an industry like we were, You want to show the customer you are investing in the future of your platform.
Our platform UI was built on the Material Design system and it was starting to show its age. Constant new features were being introduced, so were a number of custom patterns, iconography and other miscellaneous components that slowly started straying from the system.
It was clear we needed a new design system. One that would support the growth of our product with new components and patterns, as well as a new visual style.
As a design team, we each redesigned the “Opportunity” view. This view, where users move prospects through a funnel, was a good candidate for a visual study because it contained most of the pieces of a component library.
During onboarding I presented a UI/UX audit of our application to leadership, so I already knew some of the problem areas of the app that I wanted to address.
It was of my opinion that we needed a redesign that signals to the market we are a fresh approach to the 20th century tools you’ve been using and that we care about the user’s experience.
My top issues concerning the visual design were:
The navigation drawer was dark and heavy. It weighed down the left side and offered too much distraction.
Our blue was too “dingy” in that it was way too desaturated. It made the application feel cold and lifeless.
There was no clear typographic scale. Lots of information on the page is presented as the same importance when there should be clear focal points for the user to scan.
In the Activity feed, all items are centered, along with the text so the user is jumping back and forth from the middle to the left, to the right for the date and back again. The most important text in an activity card is the user who submitted it, which is likely the least important information.
Even something as simple as adding margin where the timeline meets the entry cards and icons. By not intersecting the vertical line with the entry cards, it allows this area to breathe.
Even a little bit of extra space in a few areas can really make it feel less crowded which is especially important in workflow and data tools where hierarchy is king and real-state is sparse.
.png)
.png)
.png)