This project was developed as part of a 7-week UX Skills Bootcamp
project goals
The objective was to design a dashboard to provide the conference organisers with the following insights:
○ Total net sales
○ Number of spaces left
○ Latest orders
○ Customer location
○ Website traffic origins
○ Filter data by location and date range
but first: content
The organisers had their sales data stored as an Excel sheet. Although useful, it's a sub-optimal way to easily find information. The first step was to extract the relevant information from it so it could be better presented in the dashboard in a more human way.
The next step is to think of what elements are needed for the dashboard itself starting from the tiles, which can be resized, collapsed, moved and closed. Other elements include filters to sort the data, an admin area to change the dashboard preferences and the different types of notifications a system like this can offer.
To get a clearer idea of how the information can be arranged, I started to design a lo-fi wireframe. This allowed me to understand how this dashboard could successfully fulfil the brief whilst providing a great user experience.
styling
After the direction was set, it was time to fully flesh out the design.
I started by choosing the colour palette, taking the dominant orange and pairing it with a deep blue to provide contrast. I expanded the blue palette to give me a few more options since the orange colour can induce users to think there is an issue.
The font chosen was IBM Plex Sans, a sleek modern font that fits the theme nicely.
fleshing out the components
I continued to iterate the wireframe design until I was happy with the final result. I ended up leaving only the notifications on the top bar, while the admin area was moved to the left bar at the bottom. It felt a bit more natural that way.
The orders panel shows the dates in a friendlier way and in case the same user bought multiple tickets we can immediately tell how many were on-site and remote. There's also the option to edit details, refund the order or print the invoice.
before / after
