Houston We Have A Problem:
In the web applications current state, a user could not complete their user journey, connect to their wallet for key verification, nor find out where they were within the fren.tools process. It was only functional on the backend of the application.
Mission:
Design the UX/UI for a web3 web application that represents the brand, aligns with web3 design patterns, and fully develop the frontend ensuring that all facets are connected for functionality.
Toolbox:
- Figma
- next.js
- Typescript
- TailwindCSS
- Rainbow Kit
Exploring Business Challenges:
- Users could not begin their journey as intended which would affect early adoption rate of the web application
- If the application could not be launched in a timely manner, future investors may not take notice.
Identifying User Opportunities:
- Did not connect to user crypto wallets
- Did not display or notify the user where they had progressed within their user journey
- Did not push users to the discord server affiliated with their keys
- Did not display critical information pertaining to user accounts or wallets
Research & Development:
Methods:
- User Testing via Prototyping
- User Surveys
- Competitive Analysis
Findings:
-
Users are used to modal style logins to access wallet information
- Most competitors keep to a minimal design style, few actions for quicker user journey
- Users tend to have various crypto wallets so access to various end points is necessary
Accomplishing Our Mission:
As this was my first project within the web3 space and had a quick turnaround of 4 weeks, my first step was to do a competitive analysis to see what other companies were doing, how they were designing their spaces, what were common design patterns and choices made that should be included for easy user adoption. With my findings in hand I consulted the client about the intended user journey, and what the MVP looked like. My next step would be to start iterating on low fidelity wireframes within Figma taking a mobile first approach as the client believed it would be used the most through mobile with desktop being secondary. I tested the first round of low fidelity prototypes on a relatively small user base given the time restraints. This was inclusive of the client themselves and other developers working on the backend scope of the project. I had them fill out a survey to point out any pain points or areas of improvement that they felt should be addressed in the next round. After taking the feedback, I released another prototype at mid-fidelity to the same test group and received 100% approval across the board with very minimal feedback that could be easily addressed on the road to high fidelity. I presented the final mock up to the client for final approval and was given the greenlight to begin development. The transition from high fidelity screens to lines of code went smoothly with the use of next.js and tailwindcss in order to create a clean and responsive web application. When it came to connecting user wallets, I discovered an adoption issue to a new system in place within next and ultimate found my solution with Rainbow Kit, which I wrote an article about on medium to help other developers linked here.I ended up finishing a week earlier than anticipated and asked the client if they would like to add a small but welcomed function for the user experience with the addition of light and dark mode, tailored to the users preferred system mode setting. They were happy to hear my suggestion and attitude to keep adding more to the user experience and green lit this immediately. I finished this with a few days to spare, tightening up functionality and ensuring all breakpoints were covered.