OVERVIEW—
Thrive is an inventory management and business analytics SaaS software that provides real-time inventory intelligence to help small and medium-sized businesses grow.
As we rebrand Shopventory to Thrive by Shopventory with new brand colors and guidelines, I'm creating a new design system with more accessible elements and intuitive navigation patterns. And with that, we saw an opportunity to add value to the Homepage Dashboard with a redesign. The existing homepage was clunky with little to no option for customization — the page's low engagement rates were proof enough.
Disclaimer: All views expressed here are my own and do not necessarily reflect the views of the respective company.
PROJECT TYPE
Web app, Page redesign
TIMELINE
1 quarter/ 3 months
MY ROLE
Product, Interaction, UX/UI design
TEAMS INVOLVED
Product Management,
Engineering, Customer Care, Sales
TOOLS
Figma, Mixpanel, Savio
DISCOVER—
Why a redesign?
Usage data from Mixpanel showed that over 72% of our users clicked away to a different page after logging on and landing on the Homepage.
A subsequent Competitor analysis showed that direct competitors like Shopify, Clover and ProfitWell and indirect competitors like HubSpot and MixPanel were offering more customizability in viewing business reporting that Thrive had yet to tap into.
Thrive's direct competitors for the Dashboard redesign
User feedback.
To better understand our users' needs and pain-points with the current Homepage Dashboard experience within our time constraints, we resorted to perusing customer feedback in Savio- a software we use to organize data that comes through the Customer Care team. Even without conducting user interviews, clear patterns began emerging.
Old Homepage Dashboard
"I want to view a comparison chart for weekly profits."
"This page should be allow better coordination with my team."
"I need to see the most up-to-date sales numbers daily for location A."
Quotes from user feedback on the old Homepage Dashboard
DEFINE—
The problem.
INFORMATION OVERLOAD
Users wanted to view a wide range of key metrics and analytics within one page at various levels of granularity— some wanted high-level summaries, while some wanted detailed metrics charts.
So, the question became:
"How might we allow users to customize their dashboard for tailored reporting without causing information overload?
Goals for the redesign.
Narrowing down the scope of the project and identifying the goals for the MVP that we would be releasing in a month, I began sketching the basic layout and navigation.
CUSTOMIZABLE REPORTING
Feature:
Metrics charts with detailed reports and Shortcut tiles with analytics summaries
ALLOW TEAM TO COMMUNICATE
Feature:
Bulletin board to create private or public notes for the team
TO VIEW RECENT ACTIVITY
Feature:
Recent Activity section so teams can stay updated on the state of a task or product
RESPONSIVE DESIGN
Feature:
Responsive design for mobile devices for quick updates on business activities
New Homepage Dashboard sketch
DESIGN —
Implementing the design system.
Our new Homepage redesign efforts aligned with the larger rebranding efforts to make the Thrive products more modern, accessible and approachable and provided the perfect jumping off point for the high fidelity designs.
OLD TYPOGRAPHY:
We had been using Open Sans across the web app previously. This felt non-contemporary now, inciting an uninviting and cold feeling within the app experience.
OLD TABLE:
The existing table didn't allow users to sort rows or use custom pagination to reduce scrolling. It also used lines to demarcate cells, reducing space for content and creating a dated look visually.
OLD BUTTONS:
Previously, there was differentiation between primary, secondary and tertiary actions to establish hierarchy. The buttons also didn't use the greens in our brand colors creating a disjointed experience.
Thrive Purchase Orders with old design system
NEW TYPOGRAPHY:
After an extensive search, we settled on Mulish for our web app. The type needed to be free and invite a welcoming yet modern feel to make inventory management workflows more engaging.
NEW TABLE:
The new table had no lines, giving it a cleaner visual. It also allowed users to sort rows and add custom pagination for easier scrolling.
New table designs with default, hover and empty states.
NEW BUTTONS:
For buttons, we used the primary green in our brand colors to establish the primary, secondary and tertiary buttons with clear rules for disabled, warning and error states.
New button styles for default, warning and error states.
New typography - Mulish for heading, subheading and body text
Feedback from internal stakeholders.
Designing this new homepage required continuous collaboration with the Engineering, Customer Care, Marketing and Sales teams to ensure we met all objectives within our technical and time constraints. I reviewed their feedback with our PM and engineering squad to determine which design revisions could be tackled before the beta release.
BEFORE
The first iteration of the "Add Tile" modal had a long list of summary tiles that could be added to the dashboard.
AFTER
The final iteration of the "Add Tile" modal allows the user to select a time range and view a description before adding a summmary tile to their dashboard.
BEFORE
The first iteration of the "Add Metrics Chart" modal required two steps to add a metric and and the location of products to view a chart.
AFTER
The final iteration of the "Add Metrics Chart" modal allows the user to select the metric type, location, as well as 3 other customizations within one modal.
BEFORE
The first iteration of the "Edit Note" modal allowed an expiration date to be set from a fixed options that spanned to only 30 days.
AFTER
The final iteration of the "Edit Note" modal has a date picker that allows a custom expiration date to be picked.
Key refinements before handoff.
ICONS AND TOOLTIPS
With the pin and lock icon, users can tell if a note is pinned (important) and private (not viewable by others).
MENU OPTIONS
We allowed users to quickly pin/ unpin or set a note as public/ private from menu options.
PAGINATION
To ensure users could add as many notes as they needed and find them easily, we added pagination to this section..
SECTION NAME
We renamed this section to "At a Glance" instead of "Summary" so its function is clearer to users.
REFRESH BUTTON
To view the most updated reporting, we added a refresh button and timestamp.
TOOLTIP
By hovering on the change % value, the user can view the original value from which the increase/ decrease occured.
FILTER BUTTON
The filter button allows the user to open our system-wide filter to apply filters like integrations, vendors, locations, etc to the entire Metrics section.
TIME RANGE OPTIONS
With the Time-range dropdown, the user can quickly change the date and view different reporting for the same chart configurations.
TOOLTIP
If the user hovers on the timestamp, they will be able to view the exact date and time, the activity occurred.
ICONS
The icons give a quick glance of which page under the nav bar the activity update is about.
VIEW ALL RECENT ACTIVITIES
If users want to view more than the ten most recent activities, they can easily do so on the Audit Log page.
Releasing final designs.
Three iterations later, our team was ready for the beta release. Below is a short demo of the implemented beta version of the new Home Dashboard.
Demo video of released Home Dashboard
DELIVER —
Impact of the redesign.
To ascertain the effectiveness of the new features introduced, we set up tracking filters on Mixpanel to gauge engagement. We're also tracking how many users that opt in to the beta of the Home Dashboard remain opted in. So far, 82% of existing users that opted in have continued to use the new Dashboard.
Feedback on the redesign and next steps.
As more users opt in to the beta, we've gotten valuable feedback for areas for improvement. Designs already underway, we plan to implement the following changes for the next iteration and next quarter's release.
Users want more note color options to help organize different categories of information for their teams.
FEATURE: BULLETIN BOARD NOTES
The At a Glance tiles need more configuration options to allow users to add product locations, sales channels and integrations for more granular reporting
FEATURE: AT A GLANCE TILES
To make workflows more efficient, users have requested the option to hide, move and resize sections to meet their teams' dashboard customization needs.