Overview
We had a problem scaling the product after launching it for a year and a half because we developed many features while not improving the experience of the current version. Also, there’s the design debt and the technical debt. We’ve begun completely redesigning the interface to be compatible with the existing product features.
Challenge
- The amount of technical debt and the blockchain limit makes it difficult to design.
- Many design debts here and we do not have time to revise.
- The issue with the current version is not the same as the design.
The Solution
- Onboarding a design token to front-end developers to set the process of how we work together. We create a Storybook so that the designer can ensure that components and properties are compatible with the design and requirements.
- Draft a new flow to present a back-end, smart contract developer to get them to know a new requirement.
- Focus on a thing we miss in the current version. for example, micro-interaction, layout, and responsive design are not good enough.
01 - Review the feedback
I started with the feedback and survey I conducted last year to see what people thought about our product. And listing a user’s pain that a new design can solve. I categorize the feedback into three groups. the first group is feedback that can be solved and improved by designs, the second is that we need to change the business flow and logic, and the third is about technical or blockchain limits. I’ll focus on the first and second groups because they use the least amount of resources.
02 - Analytic the data
Examine the data that we are tracking for analytic purposes. The main thing I focus on is a heat map in Hotjar to see what most users interact with in order to improve the experience. I focus on the important features. Like a homapage, Gashapon and NFT.
03 - User Flow
I begin by reviewing a current design flaw such as duplicate components, some user flows that can be combined and used in the same flow. For example, the NFT and Gashapon checkout flow separated the flow and logic. However, it can combine them into a single checkout flow. As a result, we will have less trouble maintaining the product in the future.
04 - Research and research …
The next step is to start researching other NFTs platforms in the field regarding interface layout design. I researched grid, layout and UI components to compare the pros and cons of each platforms. And adapt to create own.
05 - Wireframing
I begin rapidly wireframing the entire platform. by improve a user experience and match with new business requirement.
06 - Internal discussion
Bring a wireframe to present to the product team and discuss. Talk about how I improve the user experience through design and new user flows. We discuss and compare the wireframes to decide which one is the best version to continue with the UI. And get feedback for further improvement.
07 - Final result
I create a final UI component, a design token, and mobile responsive to deliver the design to the developer. After we have a solid requirement and have successfully tested a new user flow. We are still developing a product by each feature, and the new design is still in the works.
What did I learn
I have learned user behavior so much from Google Analytics and Hotjar. Examine how customers interact with our product. and know the mistake we have the design. And how to enhance the user experience. How to make business requirements compatible with blockchain limit thru design. How to design to save the company cost by reducing the server load. To deliver the design to the developer, we create a new UI framework and process of design handoff which the designer can ensure that the components created do not deviate from the design.