BRAND YOUR PLATFORM PAGE FOR DARK MODE IMPLEMENTATION
BRAND YOUR PLATFORM PAGE FOR DARK MODE IMPLEMENTATION
BRAND YOUR PLATFORM PAGE FOR DARK MODE IMPLEMENTATION
Contributions
Product Designer
Prototyper
User Interface Designer
Contributions
Product Designer
Prototyper
User Interface Designer
Team
Elliot Mah
Jimmy Foulds
Jordan Yep
Team
Elliot Mah
Jimmy Foulds
Jordan Yep
Timeline
7 months
June - Dec 2023
Timeline
7 months
June - Dec 2023
A set-up page for admins to update their brands colour, and considerations about accessibilities for the Dark Mode Implementation project.
A set-up page for admins to update their brands colour, and considerations about accessibilities for the Dark Mode Implementation project.
released work
released work
2023
The released look of the Brand Your Platform page
The released look of the Brand Your Platform page
Jostle Corporation is an employee success platform that has all the communication features and documents combined into one place.
Jostle Corporation is an employee success platform that has all the communication features and documents combined into one place.
This page is a part of the Dark Mode implementation project, the top requested feature by the clients in 2022-23 Customer Operations report. With the introduction of dark mode, organizations will need a way to set their values for both light and dark modes of the app.
This page is a part of the Dark Mode implementation project, the top requested feature by the clients in 2022-23 Customer Operations report. With the introduction of dark mode, organizations will need a way to set their values for both light and dark modes of the app.
THE PROJECT’S SCOPE
THE PROJECT’S SCOPE
THE PROJECT’S SCOPE
The Brand Your Platform page look in August 2023
The Brand Your Platform page look in August 2023
The Brand Your Platform page look in August 2023
most clients set up the platform during the onboarding stage, according to the Customer Operations team
most clients set up the platform during the onboarding stage, according to the Customer Operations team
The team and I assume that updating Brand Your Platform is a one-time setup journey for setting up both light and dark modes.
The team and I assume that updating Brand Your Platform is a one-time setup journey for setting up both light and dark modes.
The page’s layout needs to be updated
The page’s layout needs to be updated
The page’s layout needs to be updated
The page has only one set of values for the admins to add in
The page has only one set of values for the admins to add in
This project gives an opportunity to create consistency in section headers and descriptions, and add the missing context in sections.
This project gives an opportunity to create consistency in section headers and descriptions, and add the missing context in sections.
This project gives an opportunity to create consistency in section headers and descriptions, and add the missing context in sections.
Lack of text consistency
Lack of text consistency
MY PROPOSAL
MY PROPOSAL
This layout could be further developed if the the company opens opportunities for admins to customize more modes in the future
This layout could be further developed if the the company opens opportunities for admins to customize more modes in the future
The side-by-side layout is used to create a clear comparison between the both modes with visual representations of the elements and each mode’s colour customization. The borders around the visual elements limits the impact of the current background setting.
The side-by-side layout is used to create a clear comparison between the both modes with visual representations of the elements and each mode’s colour customization. The borders around the visual elements limits the impact of the current background setting.
The side-by-side layout is used to create a clear comparison between the both modes with visual representations of the elements and each mode’s colour customization. The borders around the visual elements limits the impact of the current background setting.
SIDE-BY-SIDE LAYOUT
SIDE-BY-SIDE LAYOUT
The Action Bar is updated to contain the “Save changes”, “Exit” and more options, and is updated to the more recent ActionBar standard.
The Action Bar is updated to contain the “Save changes”, “Exit” and more options, and is updated to the more recent ActionBar standard.
The Action Bar is updated to contain the “Save changes”, “Exit” and more options, and is updated to the more recent ActionBar standard.
UPDATED ACTION BAR WITH BUTTONS
UPDATED ACTION BAR WITH BUTTONS
The title of the input has been updated for each section that matches with the description of the section. More descriptive copy has been added for every section - with a description on where colour changes are applied, and how it would impact their platform.
The title of the input has been updated for each section that matches with the description of the section. More descriptive copy has been added for every section - with a description on where colour changes are applied, and how it would impact their platform.
The title of the input has been updated for each section that matches with the description of the section. More descriptive copy has been added for every section - with a description on where colour changes are applied, and how it would impact their platform.
UPDATED BODY COPY
UPDATED BODY COPY
This number is based on the test run made by a hackathon-style activity by the Development team
This number is based on the test run made by a hackathon-style activity by the Development team
The generator will not give the admins more than one suggestion to keep the implementation simple and straightforward.
The generator will not give the admins more than one suggestion to keep the implementation simple and straightforward.
The generator, placed under the dark mode image generator, uses the WCAG AA standard to find the best suited colour based on the existing brand colours. The admins can manually make edits before and after the generator.
CONSIDERATIONS FOR FUTURE COLOURS GENERATOR
CONSIDERATIONS FOR FUTURE COLOURS GENERATOR
ALERT AND ERROR CASE UPDATES
ALERT AND ERROR CASE UPDATES
Alerts are used in scenarios where the admins do not complete saving the changes to HEX values, and want to reset back to default branding colour branding. The alerts help admins to confirm their actions the second time before proceeding with the page.
Alerts are used in scenarios where the admins do not complete saving the changes to HEX values, and want to reset back to default branding colour branding. The alerts help admins to confirm their actions the second time before proceeding with the page.
A user decides to leave before saving the changes on the page
A user decides to leave before saving the changes on the page
The user wants to save the changes they make but has not enabled the dark mode setting on the page
The user wants to save the changes they make but has not enabled the dark mode setting on the page
The user would like to reset all the brand colours they had edited
The user would like to reset all the brand colours they had edited
REFLECTIONS
REFLECTIONS
REFLECTIONS
This was my first product design project in a corporate setup. Throughout the months I worked alongside other video projects during my co-operative position, the main skills I’ve learned are my communication skills through documentation and presentation. I learned to have confidence in my design decisions with strong explanations. I enjoyed the challenges and saw the potential in my career as a product designer. I would like to thank the design team for trusting me to work on this most requested project.
This was my first product design project in a corporate setup. Throughout the months I worked alongside other video projects during my co-operative position, the main skills I’ve learned are my communication skills through documentation and presentation. I learned to have confidence in my design decisions with strong explanations. I enjoyed the challenges and saw the potential in my career as a product designer. I would like to thank the design team for trusting me to work on this most requested project.
Me at the office :)
OTHER PROJECTS
OTHER PROJECTS
academic work
academic work
2022
2022
