UI Design
Applying Playful Design to Revolutionise the Dashboard’s Emotional Experience
Project type
Dashboard UI Design
ROLE
UI Designer
Tools
Figma
YEAR
2024
UI Design
Applying Playful Design to Revolutionise the Dashboard’s Emotional Experience
Project type
Dashboard UI Design
ROLE
UI Designer
Tools
Figma
YEAR
2024
UI Design
Applying Playful Design to Revolutionise the Dashboard’s Emotional Experience
Project type
Dashboard UI Design
ROLE
UI Designer
Tools
Figma
YEAR
2024
Project Description
Project Description
Project Description
This project involves designing a responsive personal dashboard with a given UI theme in both light and dark modes. The designer is responsible for selecting the data theme and defining the visual style.
I was tasked with creating a dashboard featuring a "playful" theme.
This project involves designing a responsive personal dashboard with a given UI theme in both light and dark modes. The designer is responsible for selecting the data theme and defining the visual style.
I was tasked with creating a dashboard featuring a "playful" theme.
This project involves designing a responsive personal dashboard with a given UI theme in both light and dark modes. The designer is responsible for selecting the data theme and defining the visual style.
I was tasked with creating a dashboard featuring a "playful" theme.
Visual Concept Interpretation
Visual Concept Interpretation
Visual Concept Interpretation
Before selecting the dashboard’s data theme, I first interpreted the "playful" visual theme to identify the aesthetic feeling it would evoke for users. This helped me choose a data set that aligned well with the visuals.
Before selecting the dashboard’s data theme, I first interpreted the "playful" visual theme to identify the aesthetic feeling it would evoke for users. This helped me choose a data set that aligned well with the visuals.
Before selecting the dashboard’s data theme, I first interpreted the "playful" visual theme to identify the aesthetic feeling it would evoke for users. This helped me choose a data set that aligned well with the visuals.
Characteristic of Playful Design
Characteristic of Playful Design
Characteristic of Playful Design
Incorporate diverse shapes, forms, and colours
Utilise depth and dimensions
Add the unusual within the usual
Incorporate diverse shapes, forms, and colours
Utilise depth and dimensions
Add the unusual within the usual
Incorporate diverse shapes, forms, and colours
Utilise depth and dimensions
Add the unusual within the usual
The Vibe of Playful Design
The Vibe of Playful Design
The Vibe of Playful Design
Fun
Engaging
Vibrant
Fun
Engaging
Vibrant
Fun
Engaging
Vibrant
Data Set Selection
Data Set Selection
Data Set Selection
I brainstormed various data from my daily life and grouped it under a similar theme. This helped me explore multiple options and choose the data that best aligned with my visual theme.
I brainstormed various data from my daily life and grouped it under a similar theme. This helped me explore multiple options and choose the data that best aligned with my visual theme.
I brainstormed various data from my daily life and grouped it under a similar theme. This helped me explore multiple options and choose the data that best aligned with my visual theme.
Selected Data
Selected Data
Selected Data
University study-related data
As a university student, I noticed that tracking progress across classes and assignments can be overwhelming and mundane. I wanted to create a playful study dashboard to help students stay organised and engaged, highlighting important data and making the visuals fun and less boring.
University study-related data
As a university student, I noticed that tracking progress across classes and assignments can be overwhelming and mundane. I wanted to create a playful study dashboard to help students stay organised and engaged, highlighting important data and making the visuals fun and less boring.
University study-related data
As a university student, I noticed that tracking progress across classes and assignments can be overwhelming and mundane. I wanted to create a playful study dashboard to help students stay organised and engaged, highlighting important data and making the visuals fun and less boring.
Visual Research
Visual Research
Visual Research
I gathered samples of playful designs in various formats to help define the visual style I would use for my dashboard, ensuring consistency and style throughout my design.
I gathered samples of playful designs in various formats to help define the visual style I would use for my dashboard, ensuring consistency and style throughout my design.
I gathered samples of playful designs in various formats to help define the visual style I would use for my dashboard, ensuring consistency and style throughout my design.
The UI Design Process
The UI Design Process
The UI Design Process
My design process starts with finalising the homepage screen in light mode for tablet size. This helps me establish the design style, which I can then replicate and adjust for other pages, screen sizes, and dark mode.
My design process starts with finalising the homepage screen in light mode for tablet size. This helps me establish the design style, which I can then replicate and adjust for other pages, screen sizes, and dark mode.
My design process starts with finalising the homepage screen in light mode for tablet size. This helps me establish the design style, which I can then replicate and adjust for other pages, screen sizes, and dark mode.
Layout Design
Layout Design
Layout Design
I experimented with several layout designs inspired by my visual research, starting with low to mid-fidelity designs.
Through multiple trials, I was able to combine the elements to create the ideal study dashboard layout.
I experimented with several layout designs inspired by my visual research, starting with low to mid-fidelity designs.
Through multiple trials, I was able to combine the elements to create the ideal study dashboard layout.
I experimented with several layout designs inspired by my visual research, starting with low to mid-fidelity designs.
Through multiple trials, I was able to combine the elements to create the ideal study dashboard layout.
Swipe through the images to view the content
Colour Selection
Colour Selection
Colour Selection
For the design, I chose a deep purple tone as the primary colour, as it is gender-neutral and gives an energising vibe.
I also used complementary colours to distinguish data from different subjects and add a playful touch to the UI.
For the design, I chose a deep purple tone as the primary colour, as it is gender-neutral and gives an energising vibe.
I also used complementary colours to distinguish data from different subjects and add a playful touch to the UI.
For the design, I chose a deep purple tone as the primary colour, as it is gender-neutral and gives an energising vibe.
I also used complementary colours to distinguish data from different subjects and add a playful touch to the UI.
Swipe through the images to view the content
The First Screen Finalisation
The First Screen Finalisation
The First Screen Finalisation
After finishing the first high-fidelity draft, I sought feedback from peers and my lecturer to make adjustments before finalising the design.
I desaturated less important elements, like the background, to highlight the data, and adjusted the layout to fit more information.
After finishing the first high-fidelity draft, I sought feedback from peers and my lecturer to make adjustments before finalising the design.
I desaturated less important elements, like the background, to highlight the data, and adjusted the layout to fit more information.
After finishing the first high-fidelity draft, I sought feedback from peers and my lecturer to make adjustments before finalising the design.
I desaturated less important elements, like the background, to highlight the data, and adjusted the layout to fit more information.
Swipe through the images to view the content
Designing the Subpage
Designing the Subpage
Designing the Subpage
I continued designing the subpage based on the finalised homepage style to maintain consistency.
I used fewer colours on the subpage to differentiate it from the homepage and ensure consistent colour meaning across the dashboard, as the subpage displays single-unit data, eliminating the need for subject-specific colour codes.
I continued designing the subpage based on the finalised homepage style to maintain consistency.
I used fewer colours on the subpage to differentiate it from the homepage and ensure consistent colour meaning across the dashboard, as the subpage displays single-unit data, eliminating the need for subject-specific colour codes.
I continued designing the subpage based on the finalised homepage style to maintain consistency.
I used fewer colours on the subpage to differentiate it from the homepage and ensure consistent colour meaning across the dashboard, as the subpage displays single-unit data, eliminating the need for subject-specific colour codes.
Swipe through the images to view the content
The Responsive Design
The Responsive Design
The Responsive Design
Once I finalised the tablet size for each page, I duplicated the information and style for desktop and mobile screens.
I added and removed data to ensure the design fit well and suited each screen size.
Once I finalised the tablet size for each page, I duplicated the information and style for desktop and mobile screens.
I added and removed data to ensure the design fit well and suited each screen size.
Once I finalised the tablet size for each page, I duplicated the information and style for desktop and mobile screens.
I added and removed data to ensure the design fit well and suited each screen size.
Swipe through the images to view the content
The dark mode
The dark mode
The dark mode
I created a dark mode for the desktop homepage, using dark purple for the background to maintain consistency with the primary colour.
I applied bright complementary colours to the text and element borders to group the same subject data together, similar to the light mode.
I created a dark mode for the desktop homepage, using dark purple for the background to maintain consistency with the primary colour.
I applied bright complementary colours to the text and element borders to group the same subject data together, similar to the light mode.
I created a dark mode for the desktop homepage, using dark purple for the background to maintain consistency with the primary colour.
I applied bright complementary colours to the text and element borders to group the same subject data together, similar to the light mode.
Swipe through the images to view the content
Result
Result
Result
The design received a compliment from the lecturer
“You have worked hard for this project, and your design shows! You have done a wonderful job responding to the visual style and you have developed a fun, creative interface that could comfortably sit as a real-world outcome.
The chosen colours are bright and cheerful, aligning with the playful and lively visual concept. The visual hierarchy is clear and the data sets are logically structured.”
Jiyoon Lee - Lecturer
The design received a compliment from the lecturer
“You have worked hard for this project, and your design shows! You have done a wonderful job responding to the visual style and you have developed a fun, creative interface that could comfortably sit as a real-world outcome.
The chosen colours are bright and cheerful, aligning with the playful and lively visual concept. The visual hierarchy is clear and the data sets are logically structured.”
Jiyoon Lee - Lecturer
The design received a compliment from the lecturer
“You have worked hard for this project, and your design shows! You have done a wonderful job responding to the visual style and you have developed a fun, creative interface that could comfortably sit as a real-world outcome.
The chosen colours are bright and cheerful, aligning with the playful and lively visual concept. The visual hierarchy is clear and the data sets are logically structured.”
Jiyoon Lee - Lecturer
Reflection
Reflection
Reflection
This project has pushed my UI design skills to the next level. The playful design style contrasts with my usual flat and minimal approach, making the design process and layout ideation quite challenging.
Additionally, designing a dark mode was a new experience for me, and it wasn’t as easy as I expected. I believe there is significant room for improvement in my dark mode design, and I’m eager to further develop this skill to enhance my UI design abilities.
This project has pushed my UI design skills to the next level. The playful design style contrasts with my usual flat and minimal approach, making the design process and layout ideation quite challenging.
Additionally, designing a dark mode was a new experience for me, and it wasn’t as easy as I expected. I believe there is significant room for improvement in my dark mode design, and I’m eager to further develop this skill to enhance my UI design abilities.
This project has pushed my UI design skills to the next level. The playful design style contrasts with my usual flat and minimal approach, making the design process and layout ideation quite challenging.
Additionally, designing a dark mode was a new experience for me, and it wasn’t as easy as I expected. I believe there is significant room for improvement in my dark mode design, and I’m eager to further develop this skill to enhance my UI design abilities.
