Case Study: Luminary — Buy your NFT
Individual project at Ironhack, W4–5
Role 🧑🏼💻
Product Designer — UX/UI Designer
Duration ⏱
2 Weeks
Overview 🖼
During the fourth and fifth week of the Bootcamp at Ironhack, the students had to do an individual project. The project was to be about healthy habits or finances.
I chose finance, as I didn’t know anything about cryptocurrencies and wanted to investigate the subject, I conducted several guerrilla interviews and after presenting several Problem Statements, we defined that my first individual project would be about: “The difficulty of buying NFT’s (crypto art)”.
The Problem 😮
Our problem was interesting since, in the rapid research I did, I found that it was something that was problematic for both basic users and advanced users.
Through UX Research I better defined the problem posed by everything that encompasses the process of acquiring an NFT.
UX Research 🔍
After conducted 127 surveys and 13 interviews I found out that 83% of respondents felt identified with, minimum, one of the following situations:
“There is very little information about crypto”
“The process is unfamiliar and very complex”
“The instability of these things makes me insecure”
In my research I had to learn about these processes and discovered that NFTs can only be purchased with crypto so the process to obtain them starts to get complicated.
An exchanger is needed to make the trade and obtain crypto, then these crypto are recommended to be stored in a DEFI wallet and once these two steps are done, you must go to an NFT marketplace to acquire it.
But this is not all, because when we are talking about crypto we have to take into account the fluctuation of the currencies, it may be the case that we have carried out all the previous process and when we arrive at the marketplace we find that the currency has risen and that we don’t have enough, having to repeat the process again.
This whole situation is something that generates problems for advanced users, but the disconnection of each step makes it difficult for the basic user to get started.
These are some of the tools that I used in the research:
The Define Problem 🤔
For all those seen in UX Research we better define the problem as:
“The process of buying NFT’s is too complex.”
Now is the time to converge ideas using Brainstorming and Affinity Diagram
These tools are very useful because they allow us to generate concepts quickly, appreciate design opportunities and, most importantly for me, connect the concepts in our head in a semi-unconscious way.
In the case of our project even more, because the main problem is the complexity of a specific process and the approach with which it deals.
The solution 💡
The unification of different services in the same app that simplifies the purchase process, making it more intuitive, direct and familiar.
Using MoSCoW we see that there are 4 services that our app must have:
· Exchanger with which to buy, sell and convert cryptos
· Graphs where you can analyze the fluctuation of crypto
· Decentralized wallet that provides security
· Marketplace where to find NFT
Low-Fi & Mid-Fi 📝
In my experience, the best way to approach the design of a digital product is based on generating a coherent, intuitive and useful information architecture.
For this reason, before generating any design sketch, I start with a mind map, which shapes what the product is going to be.
With the mind map we begin to give structure, it is now time to create a site map where we can give more structure by generating levels and making it more visible how we are going to distribute sections.
After having generated the framework in which all the parts that make up the product are located, we develop a user flow. In this case, the user flow responds to a user who enters the app (having crypto), selects his NFT from the marketplace, pays it and accesses his wallet where he finds his owned NFTs and the crypto that he has available.
Now that we have a clear structure and user flow, it is time to design.
But we can’t design like crazy, times are tight and we have to be as efficient as we can, that’s why we use a Crazy 8 to throw up screens as if it were a visual brainstorming.
After this, we start with a low-fi design, in which we try to reproduce the screens that will be in the user flow.
The approach is to generate an MVP and for this we must be clear about our priorities with the product.
This low-fi is used to start testing with users and begin to iterate before moving on to more time-consuming processes.
After several live tests, we developed in Figma the mid-fi model with which we will test both live and digitally using Maze.
You can test the Mid-Fi prototype here
UI & HI-FI PROTOTYPE 🎨
From my point of view, before starting to choose colors and moving forward, it is necessary to define the personality that the product is going to have.
The brand attributes are a fundamental part on which the mood board rests and this is totally critical so that the designers themselves understand the product and don’t make decisions for pleasure, but rather that the decisions respond to the personality of the product.
There are many ways to do this, in this case we choose to select a series of keywords and associate them with other new keywords. From these keywords we try to find an archetype and brand values that help define the character of the product.
As we already have the most defined personality of the product, we can give it a name. Naming is a complex task since it has to be well linked to what the brand tries to reflect and this is a long process that needs to breathe but due to the time we had during the bootcamp it was a point that had to be resolved in an agile way.
Luminary
Luminary correctly reflects elitist brand values and is 8 letters long (divisible into 4 and 4).
The 4, as we will see below, is an essential number in our product but before seeing the importance of the 4 we continue to further define the brand with the inspiration of the mood board.
The choice of the color palette was possibly one of the most difficult tasks of the entire bootcamp for me, this is mainly due to the fact that I decided to make the product in dark mode.
Why do a dark mode when in the bootcamp they are not seen because it has a special treatment in the design?
The product tries to sell NFTs, which are mostly visual works, so to give NFTs visual priority the dark mode is a good tool. Therefore, I had reasons to use dark mode but none to do a light mode, and we have already said that design decision-making must be based on reasoned arguments.
Now, in the classes we hadn’t seen dark mode so I investigated how it worked, I spent a lot of time on this, since the color palette in this sense is essential to work well, both to be accessible and to generate depth.
Regarding the typographic choice, it was somewhat more intuitive
The next thing we faced was the logo, we have the name, the typography, the brand attributes and the colors. The unification of 4 services and the idea of being from a chosen elite, with special knowledge, enlightened.
For this reason we represent in the logo a “4-pointed star” (our isotype) symbolizing the 4 services (Marketplace, Exchanger, Graphics and Wallet) that we are unifying in the same product. We also add the name (8 letters) dividing it into 4 and 4 with “the star” (isotype) in the center:
But our love story with number 4 is not over yet, to make the design all the screens have a 4-point grid, this internal narrative that doesn’t reach a storytelling but has a certain charm was very funny to me.
Why 4-point grid instead of 8-point grid?
As I was exclusively designing the MVP for mobile and having stressed spaces, I chose 4-point grid since it allows greater flexibility when distributing spaces between our elements and components.
Seeing the importance of the internal narrative that the 4 services have, I saw the need to design my own icons that give the product more personality.
These icons had to have coherence between them and an intuitive alternation between their “active-inactive” states. I solved this problem by generating icons capable of filling and contouring.
Another notable part of the process is order and organization. This is the first individual project we tackled in the bootcamp and therefore the first time we faced something like this alone.
For all this, having all my frames named, each part of the project organized and a Design System that obeys some rules was something super important throughout the entire project.
By having this order, the entire design or change process was streamlined by incorporating the use of Figma components into my workflow, with variants included.
The result of all this process, in which I highlight the UX Research, the Information Architecture, the use of a Dark Mode and the obsession with the Pixel Perfect, is Luminary.
Monetization 💰
Any operation within the blockchain network carries a gas fee expense due to how this technology works, they are taxes that users must pay. In the same way, Luminary would charge a percentage of gas fee as a platform that enables these services.
Next Steps 👣
As next steps, you would have to include options to save an NFT to favorites or to follow.
Generate community through chats between users.
A desktop version, with which to work more comfortably on your investments.
Continuously iterate based on the data collected once our MVP is released.
Learnings 📚
This project has been a real challenge, it forced me to get out of my comfort zone and investigate an unknown topic for me, such as the crypto world.
All the research, understanding the problem, generating solutions, strategies to address each problem has made me have to give my best and that kept me motivated throughout the process.
Bumping into walls like dark mode, thinking about the digital product in a global way, learning in a self-taught way and applying it in my workflow has made me learn and improve many tools.
There is a Victor before and another after this project, I notice a lot of personal and professional growth and a change in my point of view when approaching a project.
Thanks to the colleagues with whom I talked about different approaches to the product, to teachers who advised me when I felt lost and to all the people who guided me with the interviews, surveys and tests.
Finally, thank you for taking the time to read this case study.
Feel free to leave me a comment with feedback here or talk to me on LinkedIn.
