Implemented the systemical design into the NFT platform
Tool
Figma
Whimsical
Company
Articoin
Role
UIUX Designer
Duration
2022 - 2 month
Understanding
After researching the present and the other versions of designs and having internal discussions, we concluded that handling our design more systematically would also be a better way to align with the development team.
Strategy
Art-first
Neat
Based on the branding visual of Articoin
Make the NFT display in the primary place
Align with the buying experience from Web2
Friendly
Identify Team needs
-
Know our users
-
Feature site map
-
Trade flow
Building design
-
Defining ingredients and structure
-
high fidelity mockup
-
UI library
Design Process
1. Know our users
After having several quick discussions and interviews with the Product Owner to recognize what our users look like, starting like this helps to empathize with the user and staying focused on their needs.
Identify Team needs
Building design
2. Feature site map
Building the site map to have discussions with stakeholders on which features should be built first, also helps to check if the hierarchy of the menu items makes sense and if the parts are grouped properly and are easy to navigate through.
3. Trade flow
Before getting into design, build trade flow on Figjam to quickly discuss the status, which needs a better user experience.
2. Defining ingredients and structure
Building the low-fidelity wireframe to check the content and layout with the team.
3. High fidelity mockup
To communicate the final designs with stakeholders and developers, UI mockups were built in Figma. It helped to convey the flow of several features.
4. UI Library
To accelerate the development, I implemented the atomic design for the project. That also helps the product have a more consistent structure to follow in the future when building a new feature.
How might we first catch the user's eyes on the primary info and artworks?
On the left, you can find the old design, in which the information hierarchy is not friendly for the users; the secondary details got more space instead.
1. Recognizing Existing Problems
Being a new designer in the company, gave me the opportunity to look at the current product with fresh eyes. This helped identify several “versions” of designs used throughout the project.
The design without using components and UI library systems resulted in a fragmented experience.
Challenge
Articoin is the world's first Green NFT platform; it also allows users who do not have a crypto wallet to trade in fiat currency. Now it needs to redesign its primary pages related to trade and marketing. The challenge was making sense of NFT and helping prioritize the info showing for the users.
Outcome
The outcome of this project consists of the main page design, priority providing desktop design, and UI library for the team as a better user experience to reference.
Identify Team needs
Building design
Explore other works
A selection of UX and UI projects.
.png)
The primary info and the artwork space on-screen ratio
increased by 30%
Through optimization, the new one on the right has a clearer classification of information, giving the visual feeling more breathing room.
