Dashboard Account Menu

Some of my thoughts on designing a dashboard-type menu, specifically an eCommerce one 👇👇👇

I already knew what content needed to be present in this menu:
- information for an account manager
- when they were in or out
- their contact information
- a bunch of menu items, some of which had sub-menus to them

I started out with some general low-fidelity stuff, just laying out rectangles here and there to get a general sense of my layout (fig.01). I had three main ideas: one where all the content was together and the two main blocks of content where separated via whitespace, another where the content was physically separated, and another where a horizontal break was used.

Decided to run with the second (middle) option because while the two chunks are related, they don't really have anything to do with one another and the fact that not everyone needs do work through their account manager.

*this is the important part*

After plugging in all the content I pretty much thought I was done until I realized that for someone with red-green colorblindness, there was no way to tell if their AM was in or not 😅(fig.02)

I tried a simple fix of adding the words "in" and "out" to the status, effectively solving the problem but IMO those shades of red/green are pretty ugly for them to meet WCAG/508 compliance (fig.03)

Opting instead for a darker colored text on a lighter colored background makes it look a bit better and less brooding (fig.04) but still saw some room for improvement in the text links below

Rather than having the blue notch being the only indicator of what page people are on, I also thought it'd be easier to navigate by reducing the opacity of the inactive links and increasing the weight of the selected (fig.05)

Plus some additional screens where the accordion and dropdown are open (fig.06)

🤷‍♂️

More by Darío Figueroa

View profile