Connecting sellers
and NFT lovers
overview
The market for NFTs (Non-Fungible Tokens) has grown exponentially in recent years, becoming a significant source of income for many people.
With the aim of further helping this market to grow in Brazil, the NFT Club was created. A platform for NFT transactions, both for creators and collectors.
AREA
UI Design
year
2022
Tools
Figma
CLIENT
Clube NFT
The problem
Create a website for the buying and selling of NFTs from absolute scratch.
Although the client provided a sketch of what would be necessary for the project’s development, the site had heavy and messy content, difficult to navigate and not personalized in any way.
Therefore, we wanted to create a website that would provide security for users, giving them a good experience for buying and selling NFTs.
Workflow
As important as my skills are, I care about communication, deadlines, and the progress of the project. A successful job is not just a beautiful design, but a process that meets everyone's expectations.
🚀
Kickoff
1/7
ZeroZ was in its early stages of creation, at the beginning of developing its product for monitoring solutions.
🔍
Pesquisa
2/7
Not only provide a visually appealing experience, but also have an accessible and user-friendly Design System.
📝
Conteúdo
3/7
Establish a visual identity for the Design System, with a special focus on scalability for a white label model.
🖥️
Wireframes
4/7
Organização das páginas e conteúdos.
🎨
Design
5/7
Finalização do wireframe com cores, tipografia e ilustrações.
🎮
Protótipo
6/7
Create comprehensive documentation to enable future teams to use the library consistently and error-free.
🤝
Handoff
7/7
Preparação dos arquivos e componentes para serem passados para o desenvolvimento.
Site Map
To have an overview of all the pages on the site, we list all the main contents that each user could access starting from the site's home page.
Alongside research and reference moodboards, wireframes are fundamental parts of my creative process. They start with sketches on paper and as the idea is validated, I turn them into medium-fidelity files.
Refinement
After the validation of the ideas, the wireframes are refined with the addition of colors, typography, icons, images, and brand elements.
Brand reinforcement
A purchase of NFT is not so easy to be accomplished, there can be technical and security doubts. That's why we wanted to ensure that the NFT Club should have a safe and targeted experience so that users have no doubts about what to do.
Prioritizing modernity, we establish a technological, neutral, consistent, flexible, and timeless visual language, ready to serve the brand for many years.
Dark and light mode
At the customer's request, dark and light mode versions were developed, giving the user the option to choose their preferred mode.
Responsive
It is no mystery to anyone that the majority of a website's access comes from mobile devices.
Therefore, one of my main concerns was to be able to design a website with a responsive design.
Micro interactions
In addition to making the website more dynamic, microinteractions are an option that help make the user experience memorable, especially by helping them visualize the results of their actions.
Reducing frustrations
Accessing an error page is not a good experience and can cause feelings of frustration.
To soften the situation, I used illustrations along with buttons and menus. This way, users can access the page they are looking for.
Modern, technological and safe
Retrospective
Without a doubt, this was a project that I really enjoyed participating in. Besides having all the freedom and support from the client's side, I felt a great evolution in my research skills and in the relationships/meetings with colleagues and also developers.
Designing for both desktop and mobile was another point I wanted to highlight. Although the content on both devices is the same, depending on the layout, it may not work as well as you imagined.
Creating the design in two versions, dark and light mode, was also a challenging task. It was a great learning experience to find colors that worked well in both situations.
Other projects
Check it out too
Let's talk 🙃
If you want to talk about a potential project or just say hi, send me an email.
© 2024 · Augusto Metz