To comply with my non-disclosure agreement, I have omitted some information from this case study. Feel free to contact me if you'd like to learn more about this project. 
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), Ryan Peterson (Development Lead)
Here's an overview 
CryptoGateways is an early stage startup redefining the way crypto trading communities operate. We give 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.
The main goals I had during my internship were:
1. Design an interactive Figma prototype, outlining core MVP features for the purpose of kickstarting development, investment, and marketing
2. Set up CryptoGateways’ base design system and brand identity with scalability in mind
I mainly worked on member-facing designs, while Daniel, my fellow intern, owned the leader side. While I worked on several aspects of the platform, the features I focused on designing were the trading signals product, portfolio dashboard, and user account settings. I was also responsible for maintaining our component library, prototyping interactions, and developing brand concepts.
We completed a 200+ screen Figma prototype, now under development. The feedback we received from our project leads was positive, and they were impressed with the speed and quality of our designs. Specifically, I was commended for my enthusiasm in asking questions and exploring new ways to optimize our team's design workflow and efficiency. Beyond the duration of my internship, I was offered to stay on the team to continue with future iterations.
Some areas I worked on – signal settings, portfolio, and profile
The process
We spent 16 weeks on research, design, prototyping, and setting up our design system. For each iteration of a feature, we generally worked in sprints lasting 3-6 days. Daniel and I worked closely with Arslan (our design lead) and Nick (CG's founder) to define product requirements and continually refine the designs.
Project breakdown
A typical sprint cycle
Understanding the trading community ecosystem
To get familiar with our product landscape, and learn about our users, I first looked into key stakeholders:
Crypto trading communities
These are the target users of our platform. Crypto communities usually consist of a leadership team and large member base. Leaders who run their communities and provide trading insights are often experienced traders and market analysts. Members can range from total beginners to experts in the field. I researched existing communities (and even joined a few!) to find out how they function, what they offer, and pinpoint aspects of the crypto trading experience we could include or improve on.
Popular communities
Service platforms
The majority of these trading communities currently rely on messaging platforms, such as Telegram and Discord, to share insights, signals, and information with each other. Fundamentally, this adds friction to the trading experience, because these platforms are primarily made for communication; they are not designed to support trading activities.
Main service platforms
Crypto exchanges
Cryptocurrency exchange platforms allow users to execute trades through matching buyers and sellers of currencies. All traders have an account on at least one exchange, which is connected to their digital wallet. 

Widely used crypto exchanges

Exchange API providers
Community leaders use exchange API providers to allow members to automate their signal follow through copy trading. API providers connect to leader and member accounts, so that members can directly copy leader trades on the exchange. Without these, community members would have to spend time opening a notification, and manually executing a trade, for every time a leader sends a trading signal. 

Copy trading bots and signal providers

Payment processing platforms
Some communities are free to join, while others require payment. Most have different levels of membership at varying price tiers. Having these member groups within a community, allows leaders to customize the quality, amount, and frequency of information shared, as well as services provided, based on membership status. For leaders to receive payment from members, they often set up payment processing for both fiat and crypto payments.

Fiat and crypto payment processing platforms

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

I had the opportunity to work on a majority of features spanning the entire platform, but my main focus was on designing the member experience for signals, portfolio, as well as the profile aspect of user accounts.
Setting up the signals product
On our platform, the signals product is where community members will likely spend most of their time. The signals to enter trades on a currency pair, sent by leaders, are one of the most valuable aspects of joining a community. 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 signals, I had little domain knowledge and felt intimidated; but I was fortunate to learn about traders' needs, and develop the product, 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
Traders were familiar with signals being displayed in a table format. After discussing functionalities to prioritize, and researching best practices for table design, I mapped everything out in a feature tree, to determine all the necessary requirements before going into designing the UI. This helped me get a comprehensive view of what I needed to design, define the components to set up in our design system, and match features with the frontend library we were using.

Table feature tree

Breaking down the composition of a signal
There are several pieces of information that a signal can contain, all serving different purposes. I looked into the meaning of each one and its value in different conditions; in order to present the content in a useful way. The elements were organized into different content types, that shared similar design approaches.
Icon values  In an information-heavy environment, we decided that displaying content like range status, exchanges connected, and targets status as icons would quickly present the data visually, without having to read.
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 visualization, sketches by Nick

Text values  For text values such as asset and trade type, I left-aligned the content to flow with our users' natural way of reading. I adjusted text boldness to emphasize the most valuable information.
Numerical values  I used tabular numerals and right-aligned values, to make it easier to compare numbers vertically. Only the date cell was left-aligned, since its content existed in a standard format. To create greater distinction, I used colour to aid in identifying positive and negative values. Additionally, I needed to consider users' formatting preferences, such as currencies, and percentages vs. whole values.
Actions  As the main action, the "Select" link needed to look like a button, so as not to blend in with other text. Instead of simply executing the trade with one click, "Select" was used to provide more flexibility, in allowing users to select multiple trades at once. A second action would be required to execute selected trades, 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. With the addition of a portfolio dashboard, traders would be able to view and interact with the assets and trades they've made related to different communities. 
Because portfolio isn't an existing functionality in current communities, and not absolutely essential to the trading experience, it was treated as 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. 

Early portfolio wireframe by Nick

Visualizing assets
With portfolio, 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. 

Looking for suitable UI patterns and recurring functionalities

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

MVP prototype
Linked with care and a convenient table of contents (for easy navigation) as the first screen! Eventually we'll need to break this up for future iterations – as interactions and flows change, it's not maintainable... but for now, we have a really big prototype, a sharable one-stop shop demonstrating our core MVP offering. 

Our 200+ screen MVP prototype

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. 
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?" 
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. 
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 
Temporary filler text. Talk about using Ant Design base things. To help us get to MVP faster. Development. Customize. Starting point. Atomic design. Reusable components and pieces. Continually change and build upon. Showing examples of some of the pieces I worked on. 
Grid & layouts  
Temporary filler text. 8 point grid. 12 column layout. Different layout variations. Navigation. Blocks. Focus on desktop for MVP. We decided to make these decisions because.  Important to set up to allow for future things. Base. Design system is always growing. Mobile, dark mode, etc. 
What I learned
Filler text, I still need to write it. This part is also around 1-2 sentences. How I'm excited for this thing to be built and glad I got to work on this product. Something about interest in blockchain and crypto. And how I got to try different things to see what I like doing. Some key takeaways:
design processes are dynamic
Filler text, I still need to write it. Something about how I jumped into this project literally the week after graduating from a bootcamp and learning about all the steps of the double diamond. Something something business constraints. Lack of formal user testing but our team had members with strong domain knowledge, as well as connections to traders who gave informal feedback. Designing in high-fidelity early on in the process to increase stakeholder buy-in and help visualize and get the idea across more clearly. 
See everything as a system  
Filler text, I still need to write it. Connecting leader and member side, making sure it works as a system. Not just looking at what I'm designing, but how does it make sense with the other parts that I'm not designing? Understand external stakeholders like payment processing platforms or exchanges and how do they fit? Building a scalable design system for the future. Reusable components that can be built upon. Details matter in the big picture, they play an important role. How will this disrupt the crypto trading space?
Look forward to change
Filler text, I still need to write it. Understand constants and design in ways that are open to change. Ask questions to minimize misunderstandings right off the bat. Ways to optimize workflow to adapt and iterate faster. New favourite Figma plugins, Google sheets plugin. Consult the documentation for the frontend library you are using. This helps with understanding technical limitations and feasibility. Take time to research and leverage resources, this will save time in the long run. Mobile next steps. Be okay with the fact that there will always be things I haven't thought about or considered or missed and just keep improving. Onto the next iteration!
I'm in the middle of writing this case study! Come back soon ◕ ◡ ◕
Back to Top