New UI design
All the other things I've designed
Cryptocurrency Trading Platform
A client needed redesign of the dashboard to create a stronger brand and differentiation from the competitors in the blockchain industry. As a result, I suggested a few alterations in the navigation sections and the overall UI.
The client needed a UI desktop redesign for the cryptocurrency trading platform. Once I analyzed usability mistakes, I started designing the final screens in Figma.
After examining provided competitors in the cryptocurrency space, I noticed the overall theme of the blockchain is on the darker shades and most of the platforms have an array of analytics and data which overwhelm the user as everything blends in. My goal was to create a minimalistic design to simplify the user's interaction with the platform.
The Old UI
In the old design, the shade of blue wasn't dark enough and it lacked the contrast and seriousness of the platform that the competitors were offering.
The navigation menu at the top and the left side was taking up space and the icons were unclear- inconsistent in the design system.
In the Redesign, all the functions of the navigation menu are in one location- a dropdown menu. A user can switch between different tabs easily and minimize the section to focus on the desired part of the platform.
In 1 and 2, incoherence between icons and text in the navigation menu makes it difficult to understand that both are navigation options. The lack of title under the icons in option 2 creates difficulty.
Slider (original): Difficult for the user to see and use as it blends in and it's positioned inside the table which makes it difficult to find.
Slider (redesign): Larger and it is outside of the table for better visibility.
Why it doesn't work: In the original design the dates blend in against the background and the selected day isn't clearly shown. The font needs more contrast for easier readability. The arrows fade and it's difficult to see there's a continuation in the timeline.
The darker UI creates better contrast between the background and font. The selected day is highlighted with a light blue tone, and the arrows are indicated using a minimalistic style. The dates act as a timeline and the arrow as a slider, combining two functionalities into one and creating more space. The BTC selector is yellow with a diagonal line across the entire y-axis to easier spot the balance, as opposed to relying on the blue dot, a shown in the old UI.
Two design alternatives
The Blue version is on the strict and traditional side. The Yellow version adds a bit of pop while keeping the serious nature of the platform.
Designing for the cryptocurrency platform was a challenge because of the new terminology I've encountered. However, as someone who has never used such a platform, I was able to look at it from the beginner trader's viewpoint first as this platform is geared towards the beginners and experts. After some exploration, I examined further and presented solutions through design enhancements and alterations.
I came across this screen when placing an order through the app and the following UI components stood out to me, so I decided to improve the screen experience.
The LCBO App: UI Design Error
What works (in terms of UI): Red font indicates an error in this scenario, the cart error message is telling the user they need to add $32.05.
What doesn't work
At a glance, the cart error, saving and deletion buttons are all in red which breaks the functionality of the design.
Delete Button: If the quantity is one, a deletion button appears. If the quantity is two or more a "-" sign appears in place of the Delete Button. By keeping to "-" for everything that's being deducted, the user is left with two options: plus and minus. By having three options plus, minus and deletion- in which, minus and deletion do the same function. It creates an unnecessary option.
Also, from the accessibility point of view, "x" and "+" are similar when placed together "x" acts as deletion and multiplication. Therefore having only two options is a better solution.
When the user hovers over the "+" the shade turns grey, the same should be on the deletion button instead of having a red hover over.
Savings: Everybody likes to see how much is saved when shopping. Saving corresponds to satisfaction and positivity, which should match with a correct colour mood that compliments the brand, such as the same shade of green. Although the red colour informs the user of savings, in this scenario savings blend with the error and deletion instruction making this component least effective.
Before & After
On the right screen, you can see the changes in UI where the error message is visible as it is the only red colour on the screen. The savings are in green, and the deletion hover over button is in grey. Overall, it's a much cleaner design in comparison to the original screen on the left.
I think the error message is important and needs to be clearly stated as well as the savings to increase user's satisfaction with the purchase, instead of generating cart abandonment.
Want to see the UX writing error? Yes