CASE STUDY
Overview
Coorest DApp
Decentralized App built to manage crypto tokens and NFTs
Navigate faster!
How it started
I got hired to build the DApp after I successfully built the company website so the CTO thought I could be a good fit to do a redesign of the current DApp which looked like this:
WHAT WERE THE ISSUES? 🤔
The current UI design was very outdated and it wasn’t respecting any UX laws and principles so I had to redo the whole interface from scratch, only saving the token icons because they were the official ones.
TAKING THE PRODUCT FROM 0 TO AN MVP 🚀
Coorest needed the DApp to basically grow from 0 to 1, from a stage of a mock-up to a Minimum Viable Product which eventually happened but I'll let you find out 👀
NEXT 👇
I had a meeting with the CTO shortly after and I went along within the current DApp so I can brainstorm my ideas and check if it meets the requirements of the DApp because I was new to the whole crypto space.
After some Figjam ideations, we got the main important features on the dashboard so I could take care of the brand identity
NOW LET'S BRING THIS SKETCH TO LIFE 🔥
I had the brand identity already settled out because I was respecting the website so next I browsed the top DApps in the market, logged in my wallet to all of them and noted that all of them were confusing at first, fully crowded with irrelevant elements for a dashboard so I wanted to make this as simple and understandable as possible
I came up with this design 🥳
Click to see it bigger
Typography, inputs, components and icons used
GREAT, NOW LET'S PRESENT THIS 🤩
After this high-fidelity wireframe, I scheduled another meeting with the CTO and the sole developer that I was working with at that time, so I could present my work, showcase the important items on the menu, the main features on the dashboard, and as well the right container that included the leaderboard and statistics
They were pretty impressed with what I came up with in a short amount of time, but the CTO had some personal preferences in terms of the design, trying to make it look more natural so the developer’s idea was to add a forest image in the background and then to make the background a bit transparent so the forest will be visible. I articulated my decision that in this way the accessibility is altered but personal preference won, so I had to accept this and finalize the design in the preferred manner and I adjusted it as much as I could
The final design looked like this ✨
How it went
Based on the current style and guidelines I created the other pages.
To be able to continue with the next pages I scheduled again meetings with the CTO to iterate in order to get the correct requirements so the DApp can fully meet the customer’s needs based on the CTO’s expertise and also based on my research on the top DApps in the industry.
Here are the results
COOL, WHAT'S NEXT? 📱
Next, I turned the Web App into a tablet version as well into a mobile version so it can be accessed on every device at any time!
THAT'S IT? 😵
Not even close, our next sprint consisted in turning the whole light theme into a dark theme because, like myself, there are a lot of users that prefer a dark theme
It's Live!
The DApp it's currently live with limited functionalities on https://app.coorest.io/ but the UI is not finished and the process is still ongoing, and if you don’t want to click on the link I’ll save the effort so here’s how it looks like now, as of 18th of September 2022:
Click to see it bigger
RESEARCH ONGOING 🔎
Currently, we’re almost close to launching the DApp on Mainnet so I’m responsible for watching users’ experience on Hotjar in order to optimize the user’s journey and clear out any confusion for them.
My plan from that point will be to conduct user interviews, surveys, and usability testing using Maze and then synthesize everything into Dovetail to find trends and validate our assumptions.
Final thoughts
WHAT NEEDS TO BE IMPROVED?
Simplifying UI as much as possible to make a better User Experience because we are targetting people from outside the crypto world and we need to make them comfortable using the DApp to manage their NFTrees and CCO2 Tokens so right now it's just in the beta phase but soon enough I'll be conducting more User Research to understand user's pain points in getting introduced to the DApp.
WHAT MISTAKES HAVE I MADE AND WHAT TO DO TO PREVENT THEM?
Using Finity Design System provided by our partner Polygon made it pretty hard for me to implement because of the different brand identity differences that we had so I had to constantly adjust it throughout the process. I'll prevent this from happening by creating a unique design system for following sprints, but since this project was done by 1 designer and 1 developer in a timely manner, a design system wasn't necessary.
Thanks for reading!
Let's work together!