UI/UX CASE STUDY
TAIKONZ
PLATFORM
Blockchain and Cryptocurrency
Role
UI/UX Designer
UI/UX CASE STUDY
TAIKONZ
PLATFORM
Blockchain and Cryptocurrency
Role
UI/UX Designer
UI/UX CASE STUDY
TAIKONZ
PLATFORM
Blockchain and Cryptocurrency
Role
UI/UX Designer
INTRODUCTION
About This Project
The Taikonz redesign project aimed to revamp the user experience and visual identity of a next-generation blockchain and crypto exchange platform. This case study highlights the process of improving the platform's usability, functionality, and aesthetic appeal across mobile, and desktop applications.
GET STARTED
Overview
Project Type: Redesign
The redesign focused on creating a seamless and intuitive user experience to cater to a diverse audience of crypto enthusiasts and traders. The objective was to enhance user engagement, trust, and functionality while aligning with modern design principles.
Platform
Android
INTRODUCTION
About This Project
The Taikonz redesign project aimed to revamp the user experience and visual identity of a next-generation blockchain and crypto exchange platform. This case study highlights the process of improving the platform's usability, functionality, and aesthetic appeal across mobile, and desktop applications.
GET STARTED
Overview
Project Type: Redesign
The redesign focused on creating a seamless and intuitive user experience to cater to a diverse audience of crypto enthusiasts and traders. The objective was to enhance user engagement, trust, and functionality while aligning with modern design principles.
Platform
Android
Client
Client Name: Taikonz
Industry: Blockchain and Cryptocurrency
Goal: To transform their platform into a user-friendly, visually compelling, and efficient solution for buying, selling, and trading digital assets.
Client
Client Name: Taikonz
Industry: Blockchain and Cryptocurrency
Goal: To transform their platform into a user-friendly, visually compelling, and efficient solution for buying, selling, and trading digital assets.
Problems
The Taikonz platform faced several critical UI/UX challenges:
Cluttered Interface: Overwhelming elements made navigation difficult for users, causing confusion, especially for first-time visitors.
Inconsistent Design Patterns: Disjointed visual styles and elements led to a lack of brand identity and coherence across platforms.
Complex User Journeys: Key processes like onboarding and trading were unintuitive, resulting in user frustration and drop-offs.
Poor Mobile Responsiveness: The mobile app experience was subpar, with layouts that didn't adapt effectively to various screen sizes.
Limited Accessibility Features: Neglected usability standards, such as insufficient contrast and no support for assistive technologies, excluded some users.
Outdated Visual Aesthetic: The interface looked dated, undermining the innovative reputation of blockchain technology.
Problems
The Taikonz platform faced several critical UI/UX challenges:
Cluttered Interface: Overwhelming elements made navigation difficult for users, causing confusion, especially for first-time visitors.
Inconsistent Design Patterns: Disjointed visual styles and elements led to a lack of brand identity and coherence across platforms.
Complex User Journeys: Key processes like onboarding and trading were unintuitive, resulting in user frustration and drop-offs.
Poor Mobile Responsiveness: The mobile app experience was subpar, with layouts that didn't adapt effectively to various screen sizes.
Limited Accessibility Features: Neglected usability standards, such as insufficient contrast and no support for assistive technologies, excluded some users.
Outdated Visual Aesthetic: The interface looked dated, undermining the innovative reputation of blockchain technology.
Problems
The Taikonz platform faced several critical UI/UX challenges:
Cluttered Interface: Overwhelming elements made navigation difficult for users, causing confusion, especially for first-time visitors.
Inconsistent Design Patterns: Disjointed visual styles and elements led to a lack of brand identity and coherence across platforms.
Complex User Journeys: Key processes like onboarding and trading were unintuitive, resulting in user frustration and drop-offs.
Poor Mobile Responsiveness: The mobile app experience was subpar, with layouts that didn't adapt effectively to various screen sizes.
Limited Accessibility Features: Neglected usability standards, such as insufficient contrast and no support for assistive technologies, excluded some users.
Outdated Visual Aesthetic: The interface looked dated, undermining the innovative reputation of blockchain technology.
Solutions
To address these problems, the redesign introduced:
Streamlined Navigation: Reorganized the platform’s structure, reducing the cognitive load and simplifying key workflows.
Unified Design System: Established consistent design rules, including colors, typography, and UI components, ensuring cohesion.
Responsive Layouts: Created adaptable designs for web, mobile, and desktop platforms to offer an optimized experience for every device.
Improved Accessibility: Integrated WCAG standards with enhanced contrast, clear icons, and support for keyboard navigation.
Beginner-Friendly Features: Introduced guided onboarding and helpful tooltips to ease the learning curve for new users.
Modern Aesthetic Redesign: Updated the visuals with a sleek, professional look that aligns with blockchain’s forward-thinking image
Streamlined Navigation: Reorganized the platform’s structure, reducing the cognitive load and simplifying key workflows.
Unified Design System: Established consistent design rules, including colors, typography, and UI components, ensuring cohesion.
Responsive Layouts: Created adaptable designs for web, mobile, and desktop platforms to offer an optimized experience for every device.
Improved Accessibility: Integrated WCAG standards with enhanced contrast, clear icons, and support for keyboard navigation.
Beginner-Friendly Features: Introduced guided onboarding and helpful tooltips to ease the learning curve for new users.
Modern Aesthetic Redesign: Updated the visuals with a sleek, professional look that aligns with blockchain’s forward-thinking image
Solutions
To address these problems, the redesign introduced:
Solutions
To address these problems, the redesign introduced:
Streamlined Navigation: Reorganized the platform’s structure, reducing the cognitive load and simplifying key workflows.
Unified Design System: Established consistent design rules, including colors, typography, and UI components, ensuring cohesion.
Responsive Layouts: Created adaptable designs for web, mobile, and desktop platforms to offer an optimized experience for every device.
Improved Accessibility: Integrated WCAG standards with enhanced contrast, clear icons, and support for keyboard navigation
Beginner-Friendly Features: Introduced guided onboarding and helpful tooltips to ease the learning curve for new users.
Modern Aesthetic Redesign: Updated the visuals with a sleek, professional look that aligns with blockchain’s forward-thinking image
Preparation
DESIGN PROCESS
Design Flow
Research & Ideation
Design & Prototype
Testing
Development
Code
Testing
Deploy
Ideate
Turn idea from concept and brainstorm to MVP
Design
Sketch out the product to align the user needs
Develop
Convert the designs into a live application
Deploy
Launching the application to the market
Preparation
DESIGN PROCESS
Design Flow
Research & Ideation
Design & Prototype
Testing
Development
Code
Testing
Deploy
Ideate
Turn idea from concept and brainstorm to MVP
Design
Sketch out the product to align the user needs
Develop
Convert the designs into a live application
Deploy
Launching the application to the market
DESIGN TIMELINE
Our achievement in the journey depicted in numbers
01 - Ideation
Brainstorming
Crazy8
FGD
Research
Interview
02 Research and wireframe
Interview
empathy Map
competitor analysis
User journey
General Flow
Design trend Research
Low Fi testing (AB)
03 Hifi Design
Brand identity
Design Main Cases
Design Edge Cases
Design UI documentation
Design Sytem
Design Flow Per Cases
04 Prototype and Testing (UT)
General Prototype
Edge cases Prototype
Usability Testing
Gather Feedback
Design Revision
05 Development
Handoff to developer
Assets Documentation
Translate from UI to code
Unit Testing
UI audit
Gather Feedback
Layout Revision after feedback
Ready to test
06 Testing -> Release
Testcase Creation
Flow Creation from QA
QA documentation
UI Audit
Revision to developer
General Testing
Release MVP
Preparation
DESIGN PROCESS
Design Flow
Research & Ideation
Design & Prototype
Testing
Development
Code
Testing
Deploy
Ideate
Turn idea from concept and brainstorm to MVP
Design
Sketch out the product to align the user needs
Develop
Convert the designs into a live application
Deploy
Launching the application to the market
01 - Ideation
Brainstorming
Crazy8
FGD
Research
Interview
02 Research and wireframe
Interview
empathy Map
competitor analysis
User journey
General Flow
Design trend Research
Low Fi testing (AB)
03 Hifi Design
Brand identity
Design Main Cases
Design Edge Cases
Design UI documentation
Design Sytem
Design Flow Per Cases
04 Prototype and Testing (UT)
General Prototype
Edge cases Prototype
Usability Testing
Gather Feedback
Design Revision
05 Development
Handoff to developer
Assets Documentation
Translate from UI to code
Unit Testing
UI audit
Gather Feedback
Layout Revision after feedback
Ready to test
06 Testing -> Release
Testcase Creation
Flow Creation from QA
QA documentation
UI Audit
Revision to developer
General Testing
Release MVP
DESIGN TIMELINE
Our achievement in the journey depicted in numbers
01 - Ideation
Brainstorming
Crazy8
FGD
Research
Interview
02 Research and wireframe
Interview
empathy Map
competitor analysis
User journey
General Flow
Design trend Research
Low Fi testing (AB)
03 Hifi Design
Brand identity
Design Main Cases
Design Edge Cases
Design UI documentation
Design Sytem
Design Flow Per Cases
04 Prototype and Testing (UT)
General Prototype
Edge cases Prototype
Usability Testing
Gather Feedback
Design Revision
05 Development
Handoff to developer
Assets Documentation
Translate from UI to code
Unit Testing
UI audit
Gather Feedback
Layout Revision after feedback
Ready to test
06 Testing -> Release
Testcase Creation
Flow Creation from QA
QA documentation
UI Audit
Revision to developer
General Testing
Release MVP
Design
WIREFRAME
Key Points
Survey
Interview
Personas
Empathy Map
User Journey
Design
WIREFRAME
Key Points
Survey
Interview
Personas
Empathy Map
User Journey
Design System
COLOR
Design system
Typography
Color
Design System
Color
Design system
Typography
Color
COLOR STYLE GUIDE
Typography
ROBOTO
LIGHT
ABCDEFGHIJKLMNOPQRSTUVWXYX
REGULAR
ABCDEFGHIJKLMNOPQRSTUVWXYX
MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYX
SEMI BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
Design System
COLOR
Design system
Typography
Color
Typography
ROBOTO
LIGHT
ABCDEFGHIJKLMNOPQRSTUVWXYX
REGULER
ABCDEFGHIJKLMNOPQRSTUVWXYX
MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYX
SEMI BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
LIGHT
ABCDEFGHIJKLMNOPQRSTUVWXYX
REGULER
ABCDEFGHIJKLMNOPQRSTUVWXYX
MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYX
SEMI BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYX
Typography
ROBOTO
Design system
Typography
Color
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Landing page
Application
Application
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Design
WEB SCREENS
Key Points
User background
Personality
Goal
Frustation
Design
THUMBNAILS
Key Points
User background
Personality
Goal
Frustation
Design
THUMB NAIL
Key Points
User background
Personality
Goal
Frustation
Design
THUMBNAILS
Key Points
User background
Personality
Goal
Frustation
Usability Testing
Usability testing is a technique in User-Centered Design that is used to evaluate solutions by testing them on users. During a test, participants will attempt to compare typical tasks while observers will observe, listen, and take notes.
Overall Feedback
CONCLUSION
This project was a unique and fantastic adventure for me. This case study's research stage was
Emotionally inspired. However, understanding users turned out be a great experience. In
addition, I learned a lot during each stage of the project.
Usability Testing
Usability testing is a technique in User-Centered Design that is used to evaluate solutions by testing them on users. During a test, participants will attempt to compare typical tasks while observers will observe, listen, and take notes.
Overall Feedback
CONCLUSION
This project was a unique and fantastic adventure for me. This case study's research stage was
Emotionally inspired. However, understanding users turned out be a great experience. In
addition, I learned a lot during each stage of the project.
Let’s put you
in the
spotlight
Let’s put you
in the
spotlight
Let’s put you
in the
spotlight
