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 
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.

Some areas I worked on – signals, portfolio, profile, and our design system

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. ​​​​​​​
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. 
​​​​​​​

How crypto communities currently operate

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 ​​​​​​​

Community structure on CryptoGateways

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. 

Manually executing trade signals

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.  

Table feature tree

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. 

Exploration of range status icon

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. 

Row density

Column selection
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.
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"

Customizing columns on disabled signal follow

Switching signal follow from disabled to semi auto

Viewing open trades and history

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. 

Interacting with portfolio

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. 

Examples from Binance and OPay

Hiding and showing portfolio balance

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.

How external app Telegram login works

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. 

User sign up with Telegram vs. email

Account profile settings

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.
Back to Top