Skip to main content
Logo
Overview

Bitkub NEXT 2.0 CI

Revamping the CI and design system for Bitkub NEXT 2.0 to improve product personality and user experience.

UX/UI DesignDesign SystemBrandingResearch
Bitkub NEXT 2.0 CI

Overview

Initially, this product is only an MVP to test and proof of concept the blockchain wallet. We develop this product within 2-3 weeks. We continued to work on it and added more features than we initially thought. And this product lacks a design system. So the product cannot scale up well, the user will have a bad experience, and there is also design debt and technical debt. As a result, we are beginning to completely fully revamp the product in terms of both design and technique.

Challenge

  • No CI and design system on the old version.
  • There are few resources and the time is limited.
  • The product’s direction is unclear, making it difficult to plan work.

Solution

  • Create a product personality by survey the internal employees and C-level executives to make everyone has participate.
  • Mock up a user interface to test out a fresh design based on product personality and research.

Design Comparison

01 - Research a product personality

The first step is to create a list of product personality keywords and then choose a term that may be relevant to our product.

Personality Research

02 - Grouping keywords

We now have a list of keywords that we chose before. We develop a survey by grouping those with the same meaning.

Grouping Keywords

03 - An internal survey

At this point, we want everyone to be involved in the development process. So we created a survey based on the meaning of the keywords we grouped before. We asked internal employees and C-level executives what they wanted the new version to look like based on these keywords.

Internal Survey

04 - Conclusion of the internal survey

As a result of the survey, we got five keywords that employees most selected as our product personality.

Survey Conclusion

05 - An external survey

The next thing I want to know is how to get customers to recognize the way we want to be. So we have created a survey to question customers. For example, if we want to know how to make a customer feel our product is “Innovative” then we ask a customer “When you talk about innovative, what comes to mind?” As a result of this process, we’ll know how to make customers feel and recognize our product personality. For example, if most customers say “Micro interaction makes me feel this product is so innovative”. The thing we will do is use more effort to create a micro interaction in our product.

External Survey

06 - Let’s start researching the product interface

After we have the product personality to describe our product and know how to make customers feel and receive the message that the product wants to convey. Now we start to research other global products with direct and indirect competition to compare and know what is trending globally now.

Interface Research

The result

I have tried many rough designs to explore our new interface by using product personality. For example, the overall product look and feel, What icons and illustrations should be, and the color palette in the black and white theme. After getting feedback and revising we finally have a solid user interface concept for the new version design.

Final Design

What did I learn

After I saw the five keywords of our product, I imagine and have some hypotheses about the result of the user interface. But after I saw the result of the survey and knew what they thought, It’s quite different than I thought. For example, “Innovative” is one of five product personalities. I think the illustration to use in the new version is probably a 3D graphic, but the result of the survey says 2D isometric is more innovative. So I’ve learned that we can have a theory but not use it to overcome the outcome.