UX/UI Case Study - NFT Product Prototype
This case study is based on a product I designed in a Dribbble UI certification class. Below is a case study about the product explaining my processes and the product as a whole.
The Objective
Aiming to create a clean and visually appealing product, I was tasked to create an NFT marketplace. After research, a lot of the NFT products have a 'gaming' feel to them. Dark colors, bright neon gradients & 3D elements. I wanted to go against the grain and create something completely opposite. Below is a screenshot of the brief from a fictional client.
The Process
- Research
- Visual Direction
- UI Design
- Systems Creation
- Prototype
Research & Visual Development
After researching some prototypes & mockups, the majority of NFT marketplaces have a similar aesthetic. I wanted to create a product that was light, airy & easy to use. Above are some images of my mood board exploration. I really enjoyed both styles, but the idea of white space, shapes, line work & images really stood out to me.
Using 2 wireframes then creating 2 type systems & color palettes, I created 2 splash screens and home screens. It was difficult finding a type system that worked. Branding wasn't provided, so my visual system had to be concise with branding as well.
Final Concepts
Above are my 2 splash screen explorations and after critique from colleagues and more research, I decided to go with the option on the left. The aesthetic directly agrees with my initial visual research and goes with the theme I wanted to develop.
UI Design & System Creation
Wireframing
After creating the splash screen & home screen I was ready to develop the other visual systems for a search page, profile & NFT card page. The wireframes above are the building blocks of the MOON design system.
While creating these screens, I created components & variants that were used across the design for scalability and easy changes.
After creating my initial screens and setting up my wireframes, I created the components needed to create a scalable product. Creating components and a system that made it easy to create variable changes helped me understand from a user perspective how things needed to work and where things needed to go. Creating components and modules made it easy to create new screens and a functional prototype.
It was so inspiring to see my prototype come to life, being able to understand how to prototype the different screens and see CTAs work, this product came to life. Seeing and feeling this UI function in real life and testing it on a few candidates helped me understand how others use this product and how I can improve on initial wireframes & designs in the future. See above for a video of the prototype.
Final Designs
While creating all of these UIs my main concern was usability, consistency & readability. It was such a challenge making sure all of the type, components and modules all functioned properly with Auto Layout in place. I had a few changes after completing all of the screens, getting some feedback helped me understand what needed more work. After creating a partially functioning prototype I found where one of strong points are...
Video of the working prototype
It was so inspiring to see my prototype come to life, being able to understand how to prototype the different screens and see CTAs work, this product came to life. Seeing and feeling this UI function in real life and testing it on a few candidates helped me understand how others use this product and how I can improve on initial wireframes & designs in the future. See above for a video of the prototype
Conclusion
If this product was in a real development phase, I would aim to complete more screens and explore more visual directions. The final MOON app would be only partially sufficient for an end user. There needs to be more prototyping and further development of screens. Overall, this product was a good experiment to help better my design thinking and understand the Figma application in depth. I look forward to creating further products and scaling mobile UIs to larger screens.
Check out the full case study Here
