Ecommerce Dashboard
Our product dashboard was outdated, complex, and impossible to navigate on mobile. My team and I built a new dashboard to provide a modern, simplified, mobile-friendly experience.
Overview | Design | Process | Screenshots
Overview | Design | Process | Screenshots
Overview
For enterprise clients, Eventgroove offers a private label version of its software so that organizations can present a fully branded experience to their own customers. The back-end management of these private label sites has always been handled by the Eventgroove team. The client would contact our team whenever they required any additions/changes. With a growing client base, this was becoming difficult to manage, and frustrating for some customers who didn’t want to wait for changes to be made. So, we decided to build a simplified version of our back-end software that could be client-facing.
Team
Product designer (myself), Developer
Design
As with all Eventgroove projects, we needed to work quickly, with a small team (myself and one developer). We agreed on a UI framework so we could bypass the prototype phase and the developer could build directly from my mockups and streamline our workflow. The internal dashboard we use is pretty utilitarian, and we figured anything would be a huge improvement design-wise over our current solution.
Process
I compiled a list of features, and created a diagram to visualize the current flow of creating, editing, and modifying a private label site. I then identified which features should be available for clients, and which features should be only available to the Eventgroove team, or applied automatically. Then, I provided mockups on how we should organize these features in the UI for clients. The developer and I continued to collaborate and iterate on the design as he was building.
When the basic dashboard was built, we did a series of demos for existing clients and other members of our team. We took their feedback, and created a list of ‘phase 2’ features, including urgency, time required, and estimated impact (how many customers would benefit from the feature). We then prioritized this list with our CEO and continued adding the features that we felt were required to launch.
Overview
For enterprise clients, Eventgroove offers a private label version of its software so that organizations can present a fully branded experience to their own customers. The back-end management of these private label sites has always been handled by the Eventgroove team. The client would contact our team whenever they required any additions/changes. With a growing client base, this was becoming difficult to manage, and frustrating for some customers who didn’t want to wait for changes to be made. So, we decided to build a simplified version of our back-end software that could be client-facing.
Team
Product designer (myself), Developer
Design
As with all Eventgroove projects, we needed to work quickly, with a small team (myself and one developer). We agreed on a UI framework so we could bypass the prototype phase and the developer could build directly from my mockups and streamline our workflow. The internal dashboard we use is pretty utilitarian, and we figured anything would be a huge improvement design-wise over our current solution.
Process
I compiled a list of features, and created a diagram to visualize the current flow of creating, editing, and modifying a private label site. I then identified which features should be available for clients, and which features should be only available to the Eventgroove team, or applied automatically. Then, I provided mockups on how we should organize these features in the UI for clients. The developer and I continued to collaborate and iterate on the design as he was building.
When the basic dashboard was built, we did a series of demos for existing clients and other members of our team. We took their feedback, and created a list of ‘phase 2’ features, including urgency, time required, and estimated impact (how many customers would benefit from the feature). We then prioritized this list with our CEO and continued adding the features that we felt were required to launch.
Screenshots
Here are some screenshots of the new dashboard. The first image in each section shows the old version of the page.
Home
We added an analytics overview, as well as some help resources to the homepage. When users initially log in, there is also a help video to guide them through their experience.
Storefronts
We simplified the storefronts page. Each storefront now has its own card, containing storefront settings, as well as links to other commonly used tools. The process for creating a storefront takes 20-30 minutes in our internal system. In the dashboard you can do it in about 4 minutes. The developer and I worked on a process to automate some of the storefront creation tasks to cut out the more mundane aspects of the process.
Products
The products page was probably the most difficult page to tackle, and the one that still has the most usability issues today. Our internal catalog is massive, and our names for products sometimes aren’t intuitive for customers. We created an easier way to filter various products and add them to the site, but I think we still have a long way to go in terms of filters, and product creation.
Pages
The pages listing probably required the least amount of UX updates of all the pages. It’s a simple listing of all the pages on the site, which includes the key information about each page.
Page Editing
This page had received a number of updates over the years, all of which were added in different ways which made for a confusing experience. We re-organized and re-named many of the page elements to make it more user friendly and to better explain the various options.
Categories
Categories offer a way for users to create more granular navigation within their site. The system of creating these categories in our internal system is very labor intensive. The developer and I worked together to automate some of the work required for this, and it’s much more efficient in the customer dashboard.
Analytics
We wanted to give users access to their site data – both at a glance, and more granular reporting based around order data and revenue data. Previously, this information had only been available internally, so adding it to the dashboard made our team’s lives easier, as well as empowering our users to understand what was working well with their site.
Account
The account page gave our team an easy way to find contact details for a store owner.
Users
We gave storefront owners the ability to create user roles and permissions for various different users within their organization.
Takeaways
- Because we have a small team, we don’t often get the opportunity to go back and iterate on existing features. This was the first time we had the opportunity to re-build an existing product from scratch. While it can still use a lot of improvement, I can say it is a huge upgrade from the previous version. We still have the old dashboard for internal use (there are still more advanced features that haven’t been built into the new dashboard yet). But, I still use the new dashboard whenever I can because it is so much more lightweight and intuitive.
- Since we launched the new dashboard, 100% of new private label sites have been created using this tool. This represents 30% of all private label sites in our system. It has been a huge weight lifted off of our team internally, and organizations are now empowered to make their own changes, and gather their own reporting.
Want to see a demo?
I created a demo video for this product. You can watch it here.
