Outfit7 - Dashboard design
Designing a new UI & improving the UX for a complex system of dashboards.
Over a period of a few months, I worked with the Outfit7’s team on the platform that helps them launch, develop & manage their products (mobile games), played by +230 million individual active monthly users.
The goal was to refresh the UI, work on the initial wireframes provided by their team & create a scalable design system that will be applied across many different dashboards.
The goal was to refresh the UI, work on the initial wireframes provided by their team & create a scalable design system that will be applied across many different dashboards.
COLOUR PALETTE & TYPOGRAPHY
Updated colour palette and typography
Outfit7 is known for their vibrant & colourful brand. Their primary audience are kids after all. However, for the sake of clean dashboard design the palette had to be altered a bit. I decided to go for a more simple approach, a palette made out of shades, a primary colour and to keep their original 7 accent colours, slightly altered to pass the accessibility standards.
For the typeface, I wanted something simple with good readability, since the dashboards are data-heavy. And something that can be used on the majority of web browsers.
For the typeface, I wanted something simple with good readability, since the dashboards are data-heavy. And something that can be used on the majority of web browsers.
DESIGN SYSTEM
Component based design system
The design system is robust, yet flexible enough to where the future designers can implement the same principles & components to new dashboards with different needs while following the patterns in the previous dashboards.
Building the documentation
The design system was complimented with simple documentation.
FILTERING PROBLEM
Creating a better filtering solution
The majority of dashboards & tables have rather complex filtering options and a lot of different filters. I had to find the best solution allowing for a better user experience and easy code implementation. Below are some insights and design decisions I thought of to attempt to solve the issue.
Complex, On select or Side-scroll filter display?
Complex gives a lot of flexibility at the expense of the complexity which could take more effort to use. On select allows for flexibility without being too complex. Side-scroll takes the least effort to implement but is problematic when displaying a lot of filters.
Ultimately, I wanted to prioritise flexibility and simplicity, so we went with the On select option where there are a lot of filters and Side-scroll where there aren't many filters.
Ultimately, I wanted to prioritise flexibility and simplicity, so we went with the On select option where there are a lot of filters and Side-scroll where there aren't many filters.
FORM DESIGN
How can we design complex forms that feel easy to navigate?
For the experience to feel easy and to avoid backtracking & frustration, I experienced with a variety of components to build forms with.
Setting expectations & tracking progress
I added a progress tracker, navigation bar & options to navigate to the previous step easily to each form in order to achieve clarity & context, encurage users to complete the form & give them a sense of percieved effort, reduce abandonment rate & give the user control over the process.
Providing immediate feedback
I added flags & error states that provide immediate feedback to the user.
Breaking down complex forms
Complex forms were broken down into multiple smaller steps in order to make the flow easier to complete and to reduce abandonment rate due to fatigue.
USER TESTING
Testing our solutions
On the first dashboard that we re-designed, we wanted to user test the changes & get feedback from real users.
Objectives
These are the 5 main objectives that I wanted to test.
Participants
The participants of the testing were QA engineers of Outfit7, these are the people that use this dashboard regularly, on a daily basis. 2 engineers volunteered for the test.
Objectives
These are the 5 main objectives that I wanted to test.
Participants
The participants of the testing were QA engineers of Outfit7, these are the people that use this dashboard regularly, on a daily basis. 2 engineers volunteered for the test.
Test results
Each participant went through 2 tasks, that covered all our objectives. Our team member (Ervin Prislan) monitored the participants in person, while recording them, so I could review the test results later.
Both of the participants completed the tasks without a problem, with some minor help from Ervin. Since they didn't make any critical errors I dove deep into their emotion while solving the tasks, the time of completion and trying to identify even the slightest hiccups that occurred during the test.
I came up with 12 findings that I documented in a Notion document and shared with the rest of the team. I made changes based on these findings and when I was finished, shared the final designs with Outfit7's team to try out again. They came back with no complains.
Both of the participants completed the tasks without a problem, with some minor help from Ervin. Since they didn't make any critical errors I dove deep into their emotion while solving the tasks, the time of completion and trying to identify even the slightest hiccups that occurred during the test.
I came up with 12 findings that I documented in a Notion document and shared with the rest of the team. I made changes based on these findings and when I was finished, shared the final designs with Outfit7's team to try out again. They came back with no complains.
PRODUCT SHOWCASE
IMPACT AND LEARNINGS
Large impact
Impacting one of the biggest companies in the region
It's an incredible privilege to know that my concepts will be used by so many people and have an impact on such a big platform.
Key success
Positive feedback from users
The re-design received praise for it's intuitive interface and streamlined processes as well as nice visual design, which helped reduce the time needed to complete daily tasks, hence leading to a smoother workflow & a better work experience.
Key learning
Get more feedback early and often
Getting feedback from the real users is the key to success of any project. What I learned is that on big projects, especially where design systems are being made, it's incredibly useful to include the user and stakeholders early and often to collect as much feedback and criticism as possible.
This saves a lot of headaches down the road and complications that might arise because of improper alignment. It is definitely something I will use in my future projects.
This saves a lot of headaches down the road and complications that might arise because of improper alignment. It is definitely something I will use in my future projects.
IMPACT AND LEARNINGS
Large impact
Impacting one of the biggest companies in the region
It's an incredible privilege to know that my concepts will be used by so many people and have an impact on such a big platform.
Large impact
Impacting one of the biggest companies in the region
It's an incredible privilege to know that my concepts will be used by so many people and have an impact on such a big platform.
Key success
Positive feedback from users
The re-design received praise for it's intuitive interface and streamlined processes as well as nice visual design, which helped reduce the time needed to complete daily tasks, hence leading to a smoother workflow & a better work experience.
Large impact
Impacting one of the biggest companies in the region
It's an incredible privilege to know that my concepts will be used by so many people and have an impact on such a big platform.
Key learning
Get more feedback early and often
Getting feedback from the real users is the key to success of any project. What I learned is that on big projects, especially where design systems are being made, it's incredibly useful to include the user and stakeholders early and often to collect as much feedback and criticism as possible.
This saves a lot of headaches down the road and complications that might arise because of improper alignment. It is definitely something I will use in my future projects.
Large impact
Impacting one of the biggest companies in the region
It's an incredible privilege to know that my concepts will be used by so many people and have an impact on such a big platform.