TIMELINE
October 2023 -
November 2023
MY ROLE
UX/UI Designer
PROJECT GOALS
-
The project aimed to design a dashboard that would provide conference organisers with insights into total net sales, enabling them to assess the event's profitability.
-
It sought to optimise advertising strategies by presenting data on the number of available spaces, particularly as the conference date approached, to ensure efficient ad spend.
-
The project also focused on facilitating efficient booking management, data-driven decisions, and effective marketing campaigns through features like order management, customer location insights, and website traffic tracking.
INTRODUCTION
The clock is ticking, the excitement is palpable, and the pressure is on. I found myself in the midst of my UX/UI Design Bootcamp, armed with a fresh challenge: to design a dashboard for the UX Conference in Figma. The mission was clear, but the path to success was yet to be charted.
THE VITAL REQUIREMENTS: From Ideas to Action
The project's core requirements were like the ingredients of a grand recipe.
1. Total Net Sales: The dashboard needed to display the total net sales, giving conference organisers the key to understanding the event's profitability.
2. Number of Spaces Left: Another critical feature was the presentation of the remaining available seats, a fundamental data point for optimising advertising strategies, particularly as the conference date approached.
3. Latest Orders: The dashboard needed to provide insights into the latest orders, allowing quick actions like amendments, refunds, or receipt exports. Users should also find it a breeze to search for orders by the ticket buyer's name or order number.
4. Customer Locations: We decided to offer a feature that showcased the geographic distribution of customers. This insight empowered organisers to make informed decisions regarding targeted advertising campaigns and investments.
5. Tracking Success: Another pivotal feature was the tracking and display of website traffic sources, providing invaluable insights into the effectiveness of marketing campaigns.
6. Filtering by Location and Date: A dashboard that couldn't filter data based on location and date range was only half the story. We added this feature to provide users with a full, contextual overview.
THE DATA ANCHOR:
I sourced all data from a trusty Excel sheet, ensuring that the dashboard was constantly fuelled with the latest and most accurate information.
CHALLENGES:
Throughout the project, I encountered challenges related to data integration, data visualisation and prototyping. These challenges were addressed through meticulous planning, design iterations, and thorough testing... While trying to stay calm at all times :)
CRAFTING THE FUTURE: From Ideas to Reality
-
Data and Content Collection: As a crucial early step before creating wireframes, data and content were collected from the provided Excel sheet and seamlessly integrated into the dashboard.
-
Wireframing: I created a low fidelity wireframes to visually represent the dashboard's structure, focusing on effective data visualisation and user interactions.
-
Design and Development: The visual design was meticulously crafted, and the dashboard was developed to meet all functional requirements while maintaining a cohesive and responsive design. I also created tiles and pop-up windows to enhance the user interface and interaction.
.png)
LET'S GET DARK AND FANCY
So, I decided to sprinkle a little magic on my dashboard portfolio by adding a dark mode – not just because it's cool (though it totally is), but because it's also super practical. Here's how I pulled it off:
Designing the Dark Theme: First things first, I played around with colours and got creative with the design. I wanted a dark theme that looked sleek and sophisticated while ensuring that everything on the dashboard was easy on the eyes.
Night-mode switch: I didn't want to make it complicated, so I added 2 radio buttons to easily switch between light and dark mode – super user-friendly!
Testing and Feedback: This part was a blast! I had real users from my social media to test out the dark mode to see if it met their expectations.
.png)
Their feedback was invaluable, and I made some tweaks to make sure it was a hit with everyone. Most of the users actually preferred my night mode over the light mode!
-
To be continued...
PROTOTYPING
So, I decided to sprinkle a little magic on my dashboard portfolio by adding a dark mode – not just because it's cool (though it totally is), but because it's also super practical. Here's how I pulled it off: