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.
Timeline  Mar - Jul 2020  4 months
Tools  Figma, InVision Freehand, Ant Design
Role  Product Design Intern

Team  
Nick Catreau  Founder, PM 
Arslan Shahid  Product Design Lead 
Daniel Chew  Product Design Intern 
Here's an overview 
BACKGROUND
CryptoGateways is an early stage startup giving community leaders the power to build their own platforms, instead of having to rely on numerous third-party services; subsequently, streamlining the trading experience for community members.
OBJECTIVES & RESPONSIBILITIES
The main goals I had during my internship were:
1. Design an MVP prototype to kickstart development, investment, and marketing
2. Set up a scalable design system 
I mainly worked on member-facing designs, while Daniel owned the leader side. The majority of my focus was on trading signals, portfolio dashboard, and user account settings. I also maintained our component library and prototyped interactions.
Results
We completed a 200+ screen Figma prototype, now under development. The feedback I received from our project leads was positive, and the speed and quality of my deliverables exceeded their expectations. Beyond the internship duration, I was offered to stay on the team.

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

The process
We spent 16 weeks designing core features of our MVP, and setting up our design system. For each iteration of a feature, we generally worked in sprints lasting 3-6 days. 
Understanding the trading community ecosystem
To get familiar with our product landscape, and learn about our users, I first looked into key stakeholders:
1. Crypto trading communities  Our target users, consisting of leadership teams providing trading insights to large member bases. 
2. Service platforms  Communities rely on these platforms to communicate. 
3. Crypto exchanges  Exchanges allow users to execute trades. 
4. Exchange API providers  Leaders use these to provide automation of signal follow to members through copy trading. 
5. Payment processing platforms  Leaders customize information and services based on membership levels, and set up payment processing for both fiat and crypto. 
Redefining the way communities operate
The current structure of a community requires leaders to use many external services, namely payment processors, service platforms, and exchange API providers. Using multiple services results in a build up of fees, which cuts into community profits. As members and leaders bounce between platforms, there is often a fragmented user experience. Additionally, some platforms promote different communities to members, increasing competition, and affecting member retention within a community. 

How crypto communities currently operate

We set out to reduce friction in the trading experience through targeting frustrations that the community had with the current system. This meant designing a platform that did everything they were already used to, plus a little more. For our MVP prototype, we knew we needed to flesh out the functionality of user accounts, and our product offering, for both leaders and members. Within these areas, we tackled core features – namely profile settings, security and identity, payment, and exchange API management on the account side; and trading signals, community chat, posts, and a personalized portfolio dashboard on the product side.

Community structure on CryptoGateways

Setting up the signals product
Signals is the bread and butter of our platform. It's where community members will spend most of their time. It's what everyone is here for. If you've been wondering, what are signals? A signal is like a lead to enter a trade on a currency pair. One of the most valuable aspects of joining a community are the signals that leaders send. So, this feature was heavily prioritized, and I spent about a month digging deep into it – from researching, to constructing tables piece by piece.
Going into designing, I had little domain knowledge; but I was fortunate to get up to speed quickly, through researching the landscape and learning about traders' needs, alongside Nick, our subject matter expert in the field of crypto trading. 

Manually executing trade signals

Designing for community members 
Currently, members receive signals via a service platform. Through API providers, they 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. 
Since members range from beginners to those who have been trading for years, they 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, while providing allowance for errors; and seeking to understand their experience in every step of the process.
Architecting table structure and behaviour
We first discussed traders' familiarity with signal display in a table format. After prioritizing functionalities, and researching best practices, I mapped everything out in a feature tree, to determine requirements, define the components to set up in our design system, and match features with our frontend library.

Table feature tree

Breaking down a signal
A signal contains several pieces of information, each one serving a different purpose. I looked into their meanings and value in different conditions, to present the content in a useful way. 
Icon values  In an information-heavy environment, displaying content like range status, exchanges connected, and targets status as icons quickly present the data visually, I asked questions like: 

"How can we make the content easy to scan, when viewing many signals?"
"How will we validate the usefulness and comprehensibility of the icon?"
"How will we ensure the icons are accessible with a screen reader?"

Exploration of range status icon, sketches by Nick

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.
Accommodating preferences for different traders  
Those just starting out in the crypto trading space, and those who have been trading for years, have different needs when it comes to the information they view. So, I needed to design 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
Signal follow settings  
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.
Signal follow will always be 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 disabled, semi auto, and full auto. On semi auto, traders can manually execute trades based on community signals, and set their own configurations like stop losses and target sizes. Full auto has similar functionalities, but signals coming in will be automatically executed.
Seeing what traders see  
Having multiple customizations comes with its own complications on the design side. First, different signal follow settings provide different functionalities, thus presenting different content. Within each signal system, signals move from all signals, to open trades, and trade history; for which content also varies. As traders can also manage columns, I considered default, minimum, and maximum table views for each situation.

Mapping out table views to consider

Bringing the trading experience to life
Since my work was often reviewed by non-designers (mostly Nick, developers, and sometimes traders), it was important for me to develop high fidelity prototypes to:

1. Communicate product vision to ensure alignment with business goals and user needs
2. Receive more accurate feedback and realistic responses from traders 
3. Increase buy-in from potential communities and investors through making the experience feel "real"

Customizing columns on disabled signal follow

Switching signal follow from disabled to semi auto

Viewing open trades and history

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 reviewing requirements, researching patterns, and prototyping portfolio. 
visualizing assets
My goal was to provide a scannable, yet thorough overview of trader finances. So, I researched standard UI patterns for displaying this kind of data, and looked for ways to implement them in my design. Because of the range of communities and signal systems, the content needed to be interactive and dynamic while remaining meaningful and clear. With more time, I would have liked to do a more thorough analysis of data visualizations, specifically in the crypto trading space, as well as micro-animations. 

Interacting with portfolio

Protecting 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

Constructing account profile
I spent 2-3 weeks 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/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

Defining design system principles
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 to 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. 
Building base elements
Grid & layouts  
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.
components
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 them 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. 
Just the beginning...
So, we made a really big prototype. A sharable one-stop shop demonstrating our core MVP offering, with a table of contents as the first screen (to easily navigate from anywhere in the flow). Doing this gave us a proof-of-concept to get buy-in from potential communities and investors, as well as get started with development, but this is just the beginning...
Eventually, this prototype will get broken up. As interactions and flows change, it's not maintainable. And we will add hundreds more states and screens, iterate on our product, solidify our brand, build upon our design system, tackle the mobile version, and maybe even design a dark mode. 

Our 200+ screen MVP prototype

What I learned
processes are dynamic
I jumped into this project the week after graduating from a bootcamp, where I was familiarized with a 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. This also means finding ways to optimize workflow, to adapt and iterate more quickly. During this project, I discovered some of my favourite Figma plugins (Google Sheets Sync, Reattach Instance to name a few) 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