top of page
Group 63245.png

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!

mockrocket-capture (1).png

Project Overview

search_FILL0_wght400_GRAD0_opsz24 (4) 1.png

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.

rebase_edit_FILL0_wght400_GRAD0_opsz24 (1) 1.png

The process

Research on dark mode interfaces, exploration of colors and style, wireframing, style guide, and development handoff

person_FILL0_wght400_GRAD0_opsz24 1.png

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

Group 48098046.png

02

Communicate elevation with lighter surface

image 79.png

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.

image 84.png

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

Group 48098057.png

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

image 97.png

Hi-Fidelity screens

Presented below are a few high-fidelity screens

image 81.png
image 80.png
Dashboard - Expand - Desktop.png
Account creation.png
Funds - Fiat withdrawal - multiple methods - Desktop.png
Refer a friend- Desktop.png
TT platforms - Desktop.png

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

iMockup - iPhone 15 Pro Max.png
bottom of page