top of page
ThinkPortal
Dark theme
What is ThinkPortal?
ThinkPortal is our companies account management portal where our users can manage their trading accounts, deposit and withdraw as well as access our trading services and more!
Project Overview
The problem
Our account management portal is regularly used by our users. The availability of a supplemental theme proves advantageous for those who prefer or are more accustomed to using dark mode on their devices, for various reasons. Currently we do not provide this to our users.
The process
Research on dark mode interfaces, exploration of colors and style, wireframing, style guide, and development handoff
My role
I designed the dark mode interface, produced Hi- Fidelity designs, created the style guide to provide to the developers and QA the screens from the staging environment.
Project Goals
Enhancing user satisfaction
Creating an exceptional dark mode has the potential to increase user engagement with our product, making it more dynamic and allowing users to personalize their experience, ultimately contributing to enhanced user satisfaction
Accessibility
One of the advantages of dark mode is its intention to reduce eye strain. Understanding the proper techniques and principles for a dark mode interface is crucial so it wont create the opposite reaction and cause eye strain from the color vibrancy.
Dark mode design principles
01
Avoid pure black and pure white
Less saturated colors improve legibility and reduce visual vibration
Communicate elevation with lighter surface
Meet accessibility color contrast standards
02
03
04
01
Avoid using pure black and pure white
To prevent eye strain, I used an 87% opacity of #FFFFFF for the standard text color, and lessened the opacity percentage for other text color variants. The darkest black that is presented on the portal is 0E161C that is being used on the menu
02
Communicate elevation with lighter surface
How does the light theme of ThinkPortal show elevation?
Drop shadows
We use drop shadows to visually bring elements forward
Lighter colored elements
The background color is #F9F9F9 and the cards are #FFFFFF
The method of using drop shadows isn’t effective for a dark mode UI design and won't achieve the same effect. Because of this, it is important to choose the colors for dark theme wisely to create a sense of depth
Process of choosing the hex colors
Design concepts
I aimed for the dark theme's color palette to maintain consistency with a prevalence of cooler dark tones rather than warmer dark tones
I designed for something relatively conventional, avoiding an excessive blue hue or similar deviations.
Technique
In order to keep everything within the same hue range, when creating the color palette I layered white at different opacity percentages to define the lighter shade colors.
03
Less saturated colors improve legibility and reduce visual vibration
Using the same green for our CTAs that we have for light mode doesn’t translate well on dark mode. I applied the same technique as above to the CTA color
04
Meet accessibility color contrast standards
I used the Stark accessibility tool plugin on Figma to properly identify the most ideal shade for the CTA that would create the best contrast against the dark background without creating visual vibrance against the dark surfaces. I continued to test the other colors with the Stark plugin when creating the rest of the color palette
I was able to determine using the stark tool that this HEX color for the buttons created the best accessibility.
HEX: #5AAA5D
#FFFFFF - 30% opacity
I was able to determine using the stark tool that this HEX color for the links created the best accessible contrast against the dark color palette
HEX: #71B674
#FFFFFF - 40% opacity
Styleguide
Hi-Fidelity screens
Presented below are a few high-fidelity screens
Next steps for ThinkPortal
A few years ago, my team and I revamped the account management portal. With our enhanced design expertise, we now recognize opportunities to further enhance this portal. I will lead this upcoming redesign and plan to improve the flows and navigation for user functionality, elevate the storytelling of the screens, and enhance the visual design.
Thank you for scrolling!
I appreciate you taking the time to view my work.
Michela Emmerich | UI/UX Designer
bottom of page