Abacus
Abacus
Abacus
Abacus
Cipherem
Cipherem
Cipherem
Cipherem
I led all design efforts for Cipherem Abacus, a cutting-edge decentralized exchange (DEX) designed to make trading safer, faster, and more efficient.
I led all design efforts for Cipherem Abacus, a cutting-edge decentralized exchange (DEX) designed to make trading safer, faster, and more efficient.
I led all design efforts for Cipherem Abacus, a cutting-edge decentralized exchange (DEX) designed to make trading safer, faster, and more efficient.
I led all design efforts for Cipherem Abacus, a cutting-edge decentralized exchange (DEX) designed to make trading safer, faster, and more efficient.
Duration
Duration
Duration
Duration
Feb 2024 – Jul 2024
Feb 2024 – Jul 2024
Feb 2024 – Jul 2024
2/2024 – 7/2024
Role
Role
Role
Role
Lead Product Designer
Lead Product Designer
Lead Product Designer
Lead Product Designer
Contribution
Contribution
Contribution
Contribution
UX Design, Visual Design
UX Design, Visual Design
UX Design, Visual Design
UX Design, Visual Design
Team
Team
Team
Team
Product Designer, Founder, Project Manager, Visual Designer, Engineers
Product Designer, Founder, Project Manager, Visual Designer, Engineers
Product Designer, Founder, Project Manager, Visual Designer, Engineers
Product Designer, Founder, Project Manager, Visual Designer, Engineers
The Challenge
The Challenge
The Challenge
The Challenge
Abacus aims to be a scalable, interoperable, and user-friendly platform accessible to traders of all levels. Unlike many complex DEXs, Abacus prioritizes simplicity and ease of use, allowing users with varying degrees of experience to navigate the platform confidently.
Abacus aims to be a scalable, interoperable, and user-friendly platform accessible to traders of all levels. Unlike many complex DEXs, Abacus prioritizes simplicity and ease of use, allowing users with varying degrees of experience to navigate the platform confidently.
Abacus aims to be a scalable, interoperable, and user-friendly platform accessible to traders of all levels. Unlike many complex DEXs, Abacus prioritizes simplicity and ease of use, allowing users with varying degrees of experience to navigate the platform confidently.
Abacus aims to be a scalable, interoperable, and user-friendly platform accessible to traders of all levels. Unlike many complex DEXs, Abacus prioritizes simplicity and ease of use, allowing users with varying degrees of experience to navigate the platform confidently.
Project Goals
Project Goals
Project Goals
Project Goals
Build a design system that is reusable throughout the Cipherem ecosystem
Create a platform that attracts a wide user base by being approachable and uncomplicated
Position Cipherem as a leader in the DEX space, attracting investor interest and support
Build a design system that is reusable throughout the Cipherem ecosystem
Create a platform that attracts a wide user base by being approachable and uncomplicated
Position Cipherem as a leader in the DEX space, attracting investor interest and support
Build a design system that is reusable throughout the Cipherem ecosystem
Create a platform that attracts a wide user base by being approachable and uncomplicated
Position Cipherem as a leader in the DEX space, attracting investor interest and support
Build a design system that is reusable throughout the Cipherem ecosystem
Create a platform that attracts a wide user base by being approachable and uncomplicated
Position Cipherem as a leader in the DEX space, attracting investor interest and support
Design Process
Design Process
Design Process
Design Process
Competitive Landscape
Competitive Landscape
Competitive Landscape
Competitive Landscape
I researched a variety of DEX and DeFi platforms to gain insight into the features and design solutions of competitors in the space. A look at existing DEX platforms showed a common trend of complicated interfaces. To differentiate Abacus, we aimed to focus on simplicity and usability.
I researched a variety of DEX and DeFi platforms to gain insight into the features and design solutions of competitors in the space. A look at existing DEX platforms showed a common trend of complicated interfaces. To differentiate Abacus, we aimed to focus on simplicity and usability.
I researched a variety of DEX and DeFi platforms to gain insight into the features and design solutions of competitors in the space. A look at existing DEX platforms showed a common trend of complicated interfaces. To differentiate Abacus, we aimed to focus on simplicity and usability.
I researched a variety of DEX and DeFi platforms to gain insight into the features and design solutions of competitors in the space. A look at existing DEX platforms showed a common trend of complicated interfaces. To differentiate Abacus, we aimed to focus on simplicity and usability.
Wireframing
Wireframing
Wireframing
Wireframing
To ensure the platform aligned with user needs, wireframes were created and iteratively refined based on client feedback. High-fidelity prototypes were then developed to visualize the final product and facilitate seamless handover to development teams.
To ensure the platform aligned with user needs, wireframes were created and iteratively refined based on client feedback. High-fidelity prototypes were then developed to visualize the final product and facilitate seamless handover to development teams.
To ensure the platform aligned with user needs, wireframes were created and iteratively refined based on client feedback. High-fidelity prototypes were then developed to visualize the final product and facilitate seamless handover to development teams.
To ensure the platform aligned with user needs, wireframes were created and iteratively refined based on client feedback. High-fidelity prototypes were then developed to visualize the final product and facilitate seamless handover to development teams.
Design System
Design System
Design System
Design System
To increase design cohesion, I developed a design system to be used across Cipherem products. This system streamlined workflows by introducing reusable components, color styles, and text styles, improving efficiency and consistency across the Cipherem ecosystem. I also made sure that every element met WCAG color contrast ratio standards.
To increase design cohesion, I developed a design system to be used across Cipherem products. This system streamlined workflows by introducing reusable components, color styles, and text styles, improving efficiency and consistency across the Cipherem ecosystem. I also made sure that every element met WCAG color contrast ratio standards.
To increase design cohesion, I developed a design system to be used across Cipherem products. This system streamlined workflows by introducing reusable components, color styles, and text styles, improving efficiency and consistency across the Cipherem ecosystem. I also made sure that every element met WCAG color contrast ratio standards.
To increase design cohesion, I developed a design system to be used across Cipherem products. This system streamlined workflows by introducing reusable components, color styles, and text styles, improving efficiency and consistency across the Cipherem ecosystem. I also made sure that every element met WCAG color contrast ratio standards.
Intuitive Navigation
Intuitive Navigation
Intuitive Navigation
Intuitive Navigation
Recognizing the importance of a clear and accessible interface, I chose to implement a side navigation. This approach contrasted with the crowded top navigation commonly used by competitors, offering a more intuitive and user-friendly experience. A side navigation helps visual hierarchy and grouping of information, allowing the user to focus on the content.
Recognizing the importance of a clear and accessible interface, I chose to implement a side navigation. This approach contrasted with the crowded top navigation commonly used by competitors, offering a more intuitive and user-friendly experience. A side navigation helps visual hierarchy and grouping of information, allowing the user to focus on the content.
Recognizing the importance of a clear and accessible interface, I chose to implement a side navigation. This approach contrasted with the crowded top navigation commonly used by competitors, offering a more intuitive and user-friendly experience. A side navigation helps visual hierarchy and grouping of information, allowing the user to focus on the content.
Recognizing the importance of a clear and accessible interface, I chose to implement a side navigation. This approach contrasted with the crowded top navigation commonly used by competitors, offering a more intuitive and user-friendly experience. A side navigation helps visual hierarchy and grouping of information, allowing the user to focus on the content.
Dashboard Design
Dashboard Design
Dashboard Design
Dashboard Design
I designed the dashboard as the central hub for users to monitor their assets and perform key actions. By providing an overview of token holdings and enabling seamless deposit and withdrawal functions, the dashboard simplifies asset management.
I designed the dashboard as the central hub for users to monitor their assets and perform key actions. By providing an overview of token holdings and enabling seamless deposit and withdrawal functions, the dashboard simplifies asset management.
I designed the dashboard as the central hub for users to monitor their assets and perform key actions. By providing an overview of token holdings and enabling seamless deposit and withdrawal functions, the dashboard simplifies asset management.
I designed the dashboard as the central hub for users to monitor their assets and perform key actions. By providing an overview of token holdings and enabling seamless deposit and withdrawal functions, the dashboard simplifies asset management.
Display of Token, Pool, and Portfolio Options
Display of Token, Pool, and Portfolio Options
Display of Token, Pool, and Portfolio Options
Display of Token, Pool, and Portfolio Options
For token and pool discovery, I tested multiple designs to improve usability. The initial table-based layouts forced users to cross-reference headers with data, slowing navigation and making it difficult to compare information, especially on mobile. Responsiveness was another issue as key data was either omitted or forced horizontal scrolling on smaller screens to view it. I shifted to a card-based layout which solved this by boosting visual clarity, streamlining comparisons, and allowing all metrics to stay visible across screen sizes without cuts or scrolling. These changes allowed users to effortlessly compare and select options, significantly improving overall usability.
For token and pool discovery, I tested multiple designs to improve usability. The initial table-based layouts forced users to cross-reference headers with data, slowing navigation and making it difficult to compare information, especially on mobile. Responsiveness was another issue as key data was either omitted or forced horizontal scrolling on smaller screens to view it. I shifted to a card-based layout which solved this by boosting visual clarity, streamlining comparisons, and allowing all metrics to stay visible across screen sizes without cuts or scrolling. These changes allowed users to effortlessly compare and select options, significantly improving overall usability.
For token and pool discovery, I tested multiple designs to improve usability. The initial table-based layouts forced users to cross-reference headers with data, slowing navigation and making it difficult to compare information, especially on mobile. Responsiveness was another issue as key data was either omitted or forced horizontal scrolling on smaller screens to view it. I shifted to a card-based layout which solved this by boosting visual clarity, streamlining comparisons, and allowing all metrics to stay visible across screen sizes without cuts or scrolling. These changes allowed users to effortlessly compare and select options, significantly improving overall usability.
For token and pool discovery, I tested multiple designs to improve usability. The initial table-based layouts forced users to cross-reference headers with data, slowing navigation and making it difficult to compare information, especially on mobile. Responsiveness was another issue as key data was either omitted or forced horizontal scrolling on smaller screens to view it. I shifted to a card-based layout which solved this by boosting visual clarity, streamlining comparisons, and allowing all metrics to stay visible across screen sizes without cuts or scrolling. These changes allowed users to effortlessly compare and select options, significantly improving overall usability.
Responsive Design
Responsive Design
Responsive Design
Responsive Design
To account for diverse user preferences and device conventions, pagination functionality was implemented for desktop users, offering a familiar and structured browsing experience. Given the extended time users spend on desktop websites, pagination improves discoverability and provides a greater sense of control by helping with content recall. Conversely, infinite scrolling was adopted for mobile and tablet devices, optimizing the interface for smaller screens and touch interactions. Given the prevalence of infinite scrolling on mobile and tablet devices, users are comfortable and perhaps even expect this pattern.
To account for diverse user preferences and device conventions, pagination functionality was implemented for desktop users, offering a familiar and structured browsing experience. Given the extended time users spend on desktop websites, pagination improves discoverability and provides a greater sense of control by helping with content recall. Conversely, infinite scrolling was adopted for mobile and tablet devices, optimizing the interface for smaller screens and touch interactions. Given the prevalence of infinite scrolling on mobile and tablet devices, users are comfortable and perhaps even expect this pattern.
To account for diverse user preferences and device conventions, pagination functionality was implemented for desktop users, offering a familiar and structured browsing experience. Given the extended time users spend on desktop websites, pagination improves discoverability and provides a greater sense of control by helping with content recall. Conversely, infinite scrolling was adopted for mobile and tablet devices, optimizing the interface for smaller screens and touch interactions. Given the prevalence of infinite scrolling on mobile and tablet devices, users are comfortable and perhaps even expect this pattern.
To account for diverse user preferences and device conventions, pagination functionality was implemented for desktop users, offering a familiar and structured browsing experience. Given the extended time users spend on desktop websites, pagination improves discoverability and provides a greater sense of control by helping with content recall. Conversely, infinite scrolling was adopted for mobile and tablet devices, optimizing the interface for smaller screens and touch interactions. Given the prevalence of infinite scrolling on mobile and tablet devices, users are comfortable and perhaps even expect this pattern.
Impact
Impact
Impact
Impact
Abacus’ design was met with widespread enthusiasm from both the client and investors. The blend of user-friendliness and innovative blockchain integration captivated investors, demonstrating its potential to redefine the decentralized exchange landscape.
Abacus’ design was met with widespread enthusiasm from both the client and investors. The blend of user-friendliness and innovative blockchain integration captivated investors, demonstrating its potential to redefine the decentralized exchange landscape.
Abacus’ design was met with widespread enthusiasm from both the client and investors. The blend of user-friendliness and innovative blockchain integration captivated investors, demonstrating its potential to redefine the decentralized exchange landscape.
Abacus’ design was met with widespread enthusiasm from both the client and investors. The blend of user-friendliness and innovative blockchain integration captivated investors, demonstrating its potential to redefine the decentralized exchange landscape.
Key Achievements:
Key Achievements:
Key Achievements:
Key Achievements:
66%
66%
66%
66%
Faster tasks with cards
Faster tasks with cards
Faster tasks with cards
Faster tasks with cards
100%
100%
100%
100%
Full data on all screens
Full data on all screens
Full data on all screens
Full data on all screens
10+
10+
10+
10+
Screen sizes tested
Screen sizes tested
Screen sizes tested
Screen sizes tested
3
3
3
3
Partnerships secured
Partnerships secured
Partnerships secured
Partnerships secured
Other Work
Other Work
Other Work
Other Work
© 2025, Alana Moon