To comply with my non-disclosure agreement, I have omitted confidential information. The designs presented are re-interpretations of the originals and have been shared with permission.
CryptoGateways is reimagining crypto trading communities by empowering leaders to own their platforms. I designed core features and set up our design system.
timeline
4 months Apr to Jul 2020
team
Christina 👋 Product Design Intern
Nick Founder
Arslan Product Design Lead
Daniel Product Design Intern
Nick Founder
Arslan Product Design Lead
Daniel Product Design Intern
results
What we accomplished
We were in our early stages of building a platform to house crypto trading communities, that would reduce community leaders' need for multiple third-party services, while streamlining the member trading experience. Our goal was to create a prototype to increase stakeholder buy-in and begin development. The speed and quality of my deliverables exceeded the expectations of leadership and beyond the internship duration, I was offered to stay on the team. I worked on –
Designing an MVP prototype
I mainly designed member-facing features, while Daniel owned the leader side. The majority of my focus was on trading signals, portfolio dashboard, and user account settings. We completed a 200+ screen Figma prototype, now under development.
Starting a design system
I developed design principles to align our product vision, based on direction with the team. I maintained our UI library, consulted Ant Design documentation to inform customizations and interactions, and identified common patterns across the platform to create reusable components.
process
We worked in 4 day sprints. Research was usually done on an as-needed basis whenever I was unfamiliar with an aspect of the trading experience. Due to tight time constraints, I spent most of my time defining flows and interactions. We reviewed designs among the team frequently, and occasionally received informal feedback from community leaders who were potential users.
research
The trading community ecosystem
I had to know how communities worked, in order to design for them. I relied a lot on Nick, our subject matter expert, to learn about our product landscape. If I did it again, I'd set aside more time for extensive research to get a better understanding of user needs.
· Crypto trading communities Our target users, consisting of leadership teams providing trading insights to large member bases.
· Service platforms Communities rely on these platforms to communicate.
· Crypto exchanges Exchanges allow users to execute trades.
· Exchange API providers Leaders use these to provide automation of signal follow to members through copy trading.
· Payment processing platforms Leaders customize information and services based on membership levels, and set up payment processing for both fiat and crypto.
· Service platforms Communities rely on these platforms to communicate.
· Crypto exchanges Exchanges allow users to execute trades.
· Exchange API providers Leaders use these to provide automation of signal follow to members through copy trading.
· Payment processing platforms Leaders customize information and services based on membership levels, and set up payment processing for both fiat and crypto.
platform structure
Redefining the way communities operate
There are many pain points that exist among both members and leaders due to the current system of community operations, which lacks in efficiency.
· Buildup of fees from multiple external services – namely, payment processors, service platforms, and exchange API providers, which cut into community profits.
· Fragmented user experience as members and leaders bounce between services.
· Member retention can be affected, since some services promote different communities to members, which increases competition.
· Fragmented user experience as members and leaders bounce between services.
· Member retention can be affected, since some services promote different communities to members, which increases competition.
We set out to reduce friction in the trading experience through targeting frustrations with the current system. This meant designing a platform that did everything people were already used to, plus a little more. So for our MVP prototype, we needed to flesh out –
· User accounts profile settings, security and identity, payment, and exchange API management
· Product offering trading signals, community chat, posts, personalized portfolio dashboard
· Product offering trading signals, community chat, posts, personalized portfolio dashboard
signals
How do people place trades?
A signal is a lead to enter a trade on a currency pair that is sent by community leaders. The signals product is the bread and butter of our platform. It's where community members will spend most of their time. It's why they joined in the first place, and one of the most valuable aspects of being in the group. So, this feature was heavily prioritized, and I spent about a month digging deep into it – from researching similar products on other platforms, to constructing tables piece by piece.
How do members currently receive signals?
Signals are sent via a service platform. Through API providers, members can follow trading signals on their own exchange accounts. Although this system works, it's inconvenient, and contributes to a feeling of disconnectedness from the community.
Architecting structure and behaviour
We decided to go with a table format for signals because traders were familiar with this display, and it allowed data to be easily sorted and presented in different ways. After prioritizing functionalities and researching best practices for tables, I mapped everything out in a feature tree to determine requirements, define base components to create, and match features with our frontend library.
What's in a signal?
A signal contains several pieces of information, each one serving a different purpose. I worked with Nick to understand what they meant and present the content in a useful way.
Icon values In an information-heavy environment, we explored ways of representing statuses to show the data visually, without users having to read. In one of the versions I made, the icon for "above current price" faced an opposite direction to "below" but we ended up going with icons facing the same way. Looking back, I would have advocated for the other version because of accessibility for people with red-green colour blindness.
Text values Left aligned for natural reading, and weights vary to create emphasis.
Numerical values Tabular numerals and right-aligned values help compare values, except for dates, which are left-aligned in a standard format. Colour is used to identify positive and negative values.
Actions I made considerations for batch actions to provide efficiency and flexibility, as well as secondary confirmations to prevent errors.
How might we accommodate preferences for different traders?
People just starting out, and those who have been trading for years, have different needs when it comes to receiving signals and executing trades. We wanted our product to be un-intimidating for new traders, without sacrificing the functionalities seasoned traders were looking for. This meant designing an interface that was customizable, yet easy to reset and recover. I aimed to give users control over the display of their information, without the feeling of being scared to make changes.
It's more common for traders just starting out, to choose to automatically follow the signals of community leaders. Typically, members with more experience prefer to manually execute trades upon the recommendations of leaders' trading signals and advice. To make room for their needs, it was necessary to design 3 distinct trade follow settings, for all of which functionalities varied –
· Disabled when a trader hasn't connected their exchange account, because it's not possible to execute trades on our platform without doing so. Once connected, they can switch between the 3.
· Semi Auto traders can manually execute trades based on community signals, and set their own configurations like stop losses and target sizes.
· Full Auto similar to Semi Auto, but signals coming in will be automatically executed.
· Semi Auto traders can manually execute trades based on community signals, and set their own configurations like stop losses and target sizes.
· Full Auto similar to Semi Auto, but signals coming in will be automatically executed.
prototyping
Bringing the trading experience to life
Since my work was reviewed by non-designers (mostly Nick, developers, and sometimes traders), I prototyped in high-fidelity to –
· Communicate product vision to ensure alignment with business goals and user needs
· Receive more accurate feedback and realistic responses from traders
· Increase buy-in from potential communities and investors by making the experience feel "real"
· Receive more accurate feedback and realistic responses from traders
· Increase buy-in from potential communities and investors by making the experience feel "real"
portfolio
Centralizing trader finances
Right now, what's missing from the trading experience, is having a centralized location to access allocation of finances across communities. CryptoGateways' capacity to support multiple communities puts our platform in a position to fill this gap. A portfolio dashboard feature lets traders interact with the assets and trades they've made related to different communities.
Because it's not an existing functionality in communities, and not essential to the trading experience, it was a secondary feature. So, there wasn't as much priority or time given to it compared to signals – I spent a few days on requirements, explorations, and prototyping.
How might we visualize assets?
My goal was to provide a scannable, yet thorough overview of trader finances. I researched standard UI patterns for displaying this kind of data, and looked for ways to implement them in my design. With the range of communities and signal systems, the content had to be interactive and dynamic while remaining meaningful and clear. If I had more time, I would have done a more thorough analysis of data visualizations and micro-animations, specifically in the crypto trading space.
How might we protect user privacy?
Throughout designing the entire product, one critical consideration I always kept in mind was user privacy. Because people will literally be trusting us to handle large amounts of their money, it's extremely important that their security is taken seriously and designed for.
Alongside working on other measures such as two-factor authentication and identity verification (KYC), one way I applied this to portfolio, was simply by implementing a "hide balance" functionality. Looking at the different environments in which people participate in trading activities, I saw a variety of users would benefit from this, for example, online streamers who wish to keep their numbers hidden, or, people out in public who don't want strangers invading their privacy.
profile
Setting up user accounts
I worked on various aspects of user accounts. One of the areas I focused on was profile. Because the majority of our users come from Telegram communities, it was necessary to enable Telegram sign up and login, which affects the personal information on their profile. I familiarized myself with the process of logging in on an external platform through Telegram, to understand any constraints with the integration, and design a feasible solution.
From my research, I found that disconnecting a Telegram account could only be done on the Telegram app, so this was reflected in my designs.
design principles
Our north star
I started the foundation of our design system with the goal of setting a standard of consistency for future designers to build upon. This began with outlining principles, to lead and shape our internal design decisions, and establish how we wanted our product to be seen by others.
Scalable
Designing for an early stage startup creating an all-in-one type platform for large communities required a hyperawareness of potential for growth. In practice, this meant architecting a strong set of base elements to support expansion, and ensuring decisions aligned with product vision – asking questions like "How might we design to ensure flexibility and adaptability to changes in the market, user needs, or technology?"
Secure
Building this product comes with the responsibility of handling people's money, data, and time. So, privacy and security is always at the forefront of design considerations. Alongside ensuring the most up-to-date protocols are kept, security also involves clear and transparent communication. To maintain lasting relationships, people must feel safe using our product.
Simple
Our purpose is to simplify the trading experience for crypto communities. The trading world can be an intricate one, so we're always trying to keep a balance between conservation and reduction of complexity by understanding and determining the goals of our different users. Additionally, we aim to give community leaders more ownership. So, our platform should also act as a blank canvas to allow leaders to personalize their communities.
component library
Building base elements
Since our product needs to be quite dense in features, to support leader setup and member experience, we chose to focus on desktop first. We needed to flesh out the full functionality for the many people who sat at their multi-monitor trading setups. Additionally, 78% of traffic in the B2B space derives from desktops, and we were marketing primarily to community leaders. We decided on an 8 point grid and a 12 column layout to accommodate for variations in navigation.
We decided to use the Ant Design framework as a starting point to accelerate design and development. I took relevant components from the Ant library, customizing and refactoring when necessary. I often consulted the documentation to understand elements' behaviours and use cases, to design more feasible solutions, and keep note of when deviations needed to be made.
reflections
Just the beginning...
We completed a proof of concept to demonstrate our core MVP offering, get buy-in from potential communities and investors, as well as get started with development, but it's just the beginning. In the future, I can see hundreds more states and screens being added, stronger branding, a more robust design system, mobile version, and maybe even dark mode. My key takeaways –
Processes aren't always the same.
This was my first real project after learning about the standard UX "process." Here, I experienced lots of real-world constraints firsthand. I quickly found that, while talking to users is valuable, sometimes we need to rely on a subject matter expert, or online research, in lieu of more formal user research methods. I learned that there are benefits to designing in high-fidelity early on, namely, to communicate more clearly and align stakeholders.
Everything is connected.
Working on this platform, almost from scratch, forced me to think big picture. Typically it can be easy to get caught up on designing one specific aspect, thinking solely about its individual usability and visual design. Coordinating with Daniel and ensuring consistency in our flows, helped me see the importance of a design language, and how our product functioned as a whole. On top of this, I also learned to be aware of how my designs fit into the larger ecosystem of crypto trading – how do they connect with external platforms like payment processors or exchanges? How will this product disrupt the industry?
Design never ends.
Because the world is always changing, design is always changing. Looking forward to change starts with being prepared. This means going into designing with a solid understanding of the product landscape and goals, to better anticipate, evaluate, and generate new ideas. It also means finding ways to optimize workflow, to adapt and iterate more quickly. During this project, I discovered some of my favourite Figma plugins and saved a lot of time! Finally, I learned to be okay with the fact that there will be areas I missed or failed to consider, when it comes to design... that's what the next iteration is for.