Event Management Dashboard
Our event dashboard had been using the same UI since the early 2000s, and it looked…old. We were in desperate need of a refresh to help us maintain confidence from our existing customers, and help attract new ones.
Overview | Design | Process | Screenshots
Overview | Design | Process | Screenshots
Overview
The Eventgroove Events software offers online event management with a robust set of features that allow event hosts to create a completely custom event, publish an online event landing page, and sell tickets to the event. The feature set is world-class and offers a lot of functionality that its competitors do not. However, the UI was very old and tired. There were huge inconsistencies across the navigation and UI elements that made it confusing for users, and made the platform look increasingly untrustworthy to new customers. I was eager to update the UX as well, but after discussing with our CEO, we decided to focus on the UI for the first phase so we could move faster.
Team
Product designer (myself), 2 Developers
Design
Given the UI inconsistencies across the platform, I knew we needed to develop a design system. For me, this would fix a number of issues, as well as improve our process. From a design efficiency standpoint, our developers could build directly from a sketch so they wouldn’t have to wait for me to deliver a polished UI mockup. With a small team, this was an attractive benefit. It would also help them to be overall more efficient when building pages because they wouldn’t have to re-create a button every time. I would have loved to create a design system from scratch, but given our desire to move quickly, and my division of time, we decided to use the tried-and-true Material Design System from Google. It’s widely used, so we knew it would be familiar and comfortable for our users.
Process
To organize our project, I created a slide deck which included each page to be designed, along with an analysis of what UI updates should be made. We offer a white label version of the platform, so I wanted to ensure we considered that use case as we worked.
We decided to focus on what we called “external” pages first–these were pages that didn’t require a login, and were primarily ticket-buyer-facing. The thinking was that these pages are the ones that directly generate revenue, and they are usually the first pages a new customer sees as they browse.
Next, we updated the “dashboard” pages–the ones that require a login to access. And, we did manage to sneak in a few UX updates that were glaring, and easy to address, which I will point out in the screenshots below.
Overview
The Eventgroove Events software offers online event management with a robust set of features that allow event hosts to create a completely custom event, publish an online event landing page, and sell tickets to the event. The feature set is world-class and offers a lot of functionality that its competitors do not. However, the UI was very old and tired. There was huge inconsistencies across the navigation and UI elements that made it confusing for users, and made the platform look increasingly untrustworthy to new customers. I was eager to update the UX as well, but after discussing with our CEO, we decided to focus on the UI for the first phase so we could move faster.
Team
Product designer (myself), 2 Developers
Design
Given the UI inconsistencies across the platform, I knew we needed to develop a design system. For me, this would fix a number of issues, as well as improve our process. From a design efficiency standpoint, our developers could build directly from a sketch so they wouldn’t have to wait for me to deliver a polished UI mockup. With a small team, this was an attractive benefit. It would also help them to be overall more efficient when building pages because they wouldn’t have to re-create a button every time. I would have loved to create a design system from scratch, but given our desire to move quickly, and my division of time, we decided to use the tried-and-true Material Design System from Google. It’s widely used, so we knew it would be familiar and comfortable for our users.
Process
To organize our project, I created a slide deck which included each page to be designed, along with an analysis of what UI updates should be made. We offer a white label version of the platform, so I wanted to ensure we considered that use case as we worked.
We decided to focus on what we called “external” pages first–these were pages that didn’t require a login, and were primarily ticket-buyer-facing. The thinking was that these pages are the ones that directly generate revenue, and they are usually the first pages a new customer sees as they browse.
Next, we updated the “dashboard” pages–the ones that require a login to access. And, we did manage to sneak in a few UX updates that were glaring, and easy to address, which I will point out in the screenshots below.
Ticket Buyer Screenshots
Here are some screenshots of the new ticket-buyer-facing pages. The first image in each section shows the old version of the page.
Homepage
I wanted to make the browsing experience more visual, and make the search function more prominent on the page. The modular approach of event ‘cards’ also allowed us to offer additional customization to our private label customers if they want to add an ‘About’ section, for example.
Event Page
There was a huge discrepancy between our desktop and mobile experience for the events page. We also had 3 different image upload possibilities: event image, background, and banner. I wanted to reduce this down to 1 image upload to make the user’s life easier so we decided to programmatically generate a banner background by blurring the event image and making it darker.
Sign In/Up Page
The sign in and sign up pages are one of the first interactions users have with our site. I figured we could make a better first impression by branding the page with our colors (and offering our private label partners to do the same).
Dashboard Screenshots
Here are some screenshots of the new dashboard (login required pages). The first image in each section shows the old version of the page.
Manage Events
I wanted to make the event management page more visual, so I decided to modify the overall layout from a list to cards so individual events were easier to identify at a glance. I also designed the cards so you could easily identify various aspects of the event without having to click into the event itself. We had some challenges with the varying sizes of event images and ended up standardizing the size, which also helped with the event page.
Create Event
We re-crafted the event wizard so the desktop and mobile versions were more congruous with an accordion layout, and we also made some of the more confusing aspects of creating an event easier to understand, such as copying previous events, and completing drafts. It’s difficult to see the full effect of this one in a screenshot so I recommend checking out the video at the top of the page.
Event Detail
The event detail page wasn’t very useful, so we completely revamped it to provide all the important high-level details for an event, as well as providing quick access to relevant tools.
Analytics
The updates to the analytics page were largely cosmetic. We just modernized the UI.
Guests
I felt the guests page was missing some useful context around the key points of interest for an event host. So I added the key metrics to the top of the page, while updating the UI for the rest of the page elements.
Orders
Similar to the analytics page, I added the key metric to the top of the page, and re-designed the UI for the customer chart and search function.
Promote Event
On this page (and all pages), I decided to separate the page elements with cards to make it easier to differentiate the tasks available to complete.
Takeaways
It was difficult to set UX aside as we worked on this project, but it’s still a huge improvement from the previous version. The small UX updates we were able to make (primarily to the Create Event page) have been really well received by our customers.
