CLIENT
  • DefiPlatform
ROLE
  • Branding
  • User Interaction Design
  • High Fidelity Designs
  • Front-end Development
TECHNOLOGIES
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • React.js
  • Next.js
  • Tailwind

Developing great User Experience for Crypto investors

When I was hired to work on this project, the brief was simple. Create beautiful and usable user experiences that make it easy to digest financial information for both desktop and mobile users. Execution was far from simple though.

Defi Platform by Peter Garcia Dashboard Defi Platform by Peter Garcia Homepage Defi Platform by Peter Garcia Homepage Defi Platform by Peter Garcia Homepage Defi Platform by Peter Garcia Homepage Defi Platform by Peter Garcia Homepage Defi Platform by Peter Garcia Homepage
Defi Platform by Peter Garcia Homepage
Defi Platform by Peter Garcia Homepage
Defi Platform by Peter Garcia Dashboard

Usually financial applications have a marquee component to track stocks that have went up or down all throughout the day.

Repurposing this to show off related news would be a good idea.

BUT the problem is, due to the nature of a marquee, users might not read the whole content before it slides to the side. So I added an anchor “Related news” with an eye catching icon so that if the user wants to see a list of the things in the marquee (Related News), they can just click on it.

Defi Platform by Peter Garcia Dashboard

When the marquee is hovered, it will pause, and when an ARTICLE LINK is clicked, the news modal will slide from the right, and show off the article (NOT ARTICLE LIST)

when the related news CTA is clicked, a modal with the list of articles relating to that graph will be shown.

I didn’t go with a dark theme as the default for the news section since people with normal vision or corrected (wearing glasses) perform better when reading information in article form

Defi Platform by Peter Garcia Dashboard

Depending on how an article will be parsed on the backend so that it will be related to the data to the dashboard, but my guess would be thru keywords(?). If that is the case, highlighting the keywords that was used to correlate the article to the data in the dashboard might be a good idea.

When clicking on a news article, the user is not redirected to an outgoing site but instead the article will just be loaded on the same modal with a SLIDE LEFT ANIMATION to emphasis that the user clicked on the same article that they will be reading.

This also makes it easier for the user because they can toggle the modal on and off while checking the article and the data on the dashboard instead of alt-tabbing to different tab.

This is especially useful for mobile since you won’t to switch to multiple tabs to peruse data from each article

Tools used

About this project

This project was designed for an upcoming Decentralized Finance platform that tracks Ethereum Gas Prices as well as other Crypto assets an investor would want to know about to improve their investing portfolio.

I was tasked to deliver a fully working UI/UX design, and branding direction from scratch with the sole purpose of creating a fully realized vision of a company for the future.

Aside from developing the branding direction, UI/UX and everything related to the design of the whole website. I was also part of creating the front-end code of the application. The application was coded in React/Next.js using styled components and among other development tools.

This project is still currently in development.