Today, I want to share with you the story of how we designed an investment platform for our friends at Cybro.io in record time. Buckle up, it's going to be a wild ride!
The Challenge
Cybro.io is a project by our long-time friends, an awesome team of professionals from various fields who consistently create cool products that live long and attractive lives for investors.
At the time we were working on this case, Cybro was a token in the presale stage. They already had a fantastic landing page, which we continued to improve and refine, providing ongoing design support with both ideas and hands-on design.
At some point, the Cybro team decided it was time to launch their own investment platform. This platform would feature Vaults, where users could invest their own funds in USDT from different networks under various APY indicators, depending on the volatility of the coin and the algorithms of each specific Vault.
The guys were eager to start the development process as soon as possible. Despite our initial milestone planning estimating around 7 weeks, we decided to speed things up significantly. We met the guys halfway and accelerated to the max β it was decided to prioritize the core sections, including the main platform page with the list of Vaults, the internal Vault page, as well as the calculator and investment widget β all in just 2 weeks!
This is going to be a detailed and dynamic story about how we raced through this sprint, and everything went smoothly (which rarely happens)!
The Planning Stage
Considering our extremely limited time and the fact that only four hands would be working on this for the next two weeks, we decided to plan everything thoroughly first. Some decisions might be considered controversial, but our goal is not to tell you how you should work with your clients, cases, and projects. We're here to share how the Unipaws team works, which largely explains why people want to work with us.
Skipping the UX Phase
It might be a debatable decision, but we felt confident in our experience and skills to either completely skip the UX phase or reduce the time spent on prototypes. Our reasoning was as follows: we would create static prototypes of the core screens to immediately understand what additional flows would "grow" from there. If there weren't many additional flows expected, but only various states of elements and more or less the same screens, we would do everything at once "for real" during the UI phase. As a result, Vanya and Masha drew the UX of all the core screens in just a couple of days, leaving comments for themselves in controversial places and those that would obviously need to be "rethought" at the UI stage. In addition, we tried to make the prototypes not too far from the UI to spend less time in the following days reworking these screens for the sake of aesthetics.
Mobile-First Approach
The boom of this approach to web application design architecture has been declining for several years, but in this case, we decided to use it. The main audience of Cybro uses phones for viewing, which is likely related to the advertising sources that drive traffic. Moreover, it was much more important for Cybro to create a mobile version first. In the two weeks we agreed on for designing the specified scope of the platform, we had to make both the mobile and desktop versions, but we decided to start with mobile.
Balancing Aesthetics and Conversions
The thing is, we had Beefy as an approved reference with the client, an example of excellent monetization and conversion of traffic into money.
On the other hand, there was Locus.Finance, which was the most modest among all the discussed competitors but aesthetically stunning.
We decided to mix both approaches in equal proportions with our own solutions. We'll tell you more about the proportions and the final result later on.
Starting with Prototypes
During the prototype drawing process, we immediately tried to lay the foundation for an aesthetic UI. Let's talk about a few solutions from the perspective of usability, logic, and aesthetics.
No Tables for Vaults
It might seem like nothing could be more convenient than a table, where each row represents a separate investment pool β a Vault.
But that's not the case! As Vanya explains here, this doesn't really work if each "cell" of your potential table contains a lot of differing data. Thus, the table was replaced by cool large cards. This intentionally narrows the metaphorical "angle of view," keeping the focus on only one card, which attracts all the user's attention at the moment of "scanning" the content.
This will greatly help the platform in the initial period when there are not so many vaults, less than a dozen.
Basic Onboarding without Onboarding
How is that even possible? Let us explain! For example, each vault has its own trust score.
This is a normal and familiar indicator for crypto enthusiasts on such platforms. It is used to calculate the overall review indicator of the reliability of a particular investment pool according to the platform's own assessment. The platform's assessment is based on a whole bunch of different other indicators, vault marketing, its profitability, and all that.
So, we put a huge emphasis on this trust score indicator.
Logically, it completes the indicators of each of the cards, vaults, like a footer on a website. At the same time, each card has the ability to tap on it and find out how this trust score is calculated. This way, without overlays and transitions to new tabs, we explain to the user exactly how this Vault received its reliability rating and what points to pay attention to when looking at crypto investment projects in general. Lovely!
Deposit or Withdraw?
For the profitability calculator and the internal vault page, we created an interface that we won't dwell on in detail now. More interestingly, we had another idea β a dynamic toggle between Deposit and Withdraw. This dual button seemed to us a fresh and convenient solution: in fact, it is one interaction with the vault, but divided into two opposite actions β transferring funds from the account to the deposit, and withdrawing funds from the deposit back to your account. It was supposed to work like this:
Later, we abandoned this idea, but someday, in one of the following projects, we will refine, rethink, and implement it!
And here's what the entire UX looked like for the three agreed-upon flows that we concluded we would need. Everything else β we will design in real-time action.
Why Did We Do It This Way?
We are confident in our abilities, and we know too much about how to make good products without spending years of time and millions of money on it. In the courses of IT giants, they will definitely tell you that you need to conduct research on every pixel, do 10,000 tests with button placements, conduct 300,000 user interviews, and so on and so forth. As it turned out, we are practitioners, not theorists, so we leave all this to those who spend six months agreeing on a palette for the color of icons in the interface. We, on the other hand, will do it better without any research, but in 15 minutes. That's just how it happened.
Why Shouldn't You Do This?
Because the chance of doing everything badly increases dramatically. Design research in MVP is something from the world of anecdotal absurdity, but detailed prototypes with all the flows and all the states of all possible scenarios are really important. When you decide that "ah, screw it, I'll finish it later on the design," you risk both missing deadlines and making a lot of logical mistakes in your beautiful interface. For example, here are our comments on what's done with reservations, what needs to be finalized going forward, and states that need to be reviewed on UI Stage.
Better not do that, and if you do β be prepared to quickly fix everything that pops up at the development stage as serious problems.
Getting Client Approval
We showed the guys our developments two days after starting work on the project and discussed all the associated flows.
An important point: we try to work iteratively and always "do it badly" first. It's hard, painful, and you always want to immediately surprise everyone with beauty and elaboration, but it's much more important to synchronize in the general vision, direction, and act according to our proven method.
The unique feature of our method is that our design is always ready on time. Whenever corrections to the functionality and core functions are needed, the design is always ready for it. At these stages, we flex with beauty, elaboration, and states, but at the same time, our "bad" design is ready at any stage; it just lacks details that do not carry the entire structure.
We discussed everything, approved it, and continued our confident movement: we can finish drawing everything that is missing and add details.
Starting the Design
Time is short, and there's a lot to do, so we resort to senior tricks. We won't dwell on the design of each specific element, as there will be a whole bunch of pictures at the end of the case that you can feast your eyes on. Here we'll run through the life hacks and non-trivial procedural solutions we used to deliver the best quality in such a short time.
Forming the Basis for Each Screen
Here's the trick: instead of progressively dealing with the layout and user flow of each core screen, we choose a key element of the product and build the architecture and structure of the entire page, the product functions around this key element.
This greatly speeds up the process and helps to make everything cool at the MVP stage β the client gets one perfectly fine-tuned function of their product, and we can flex with almost everything beyond the performance of this function.
For the page with the list of Vaults, the Vault card became such an element.
For the internal Vault page, it was the deposit and withdraw widget.
For the calculator, it was... we removed this page! I'll tell you why a bit later.
Starting the Design
With time being our most precious resource, we had to resort to some senior-level tricks to deliver top-quality results. Instead of focusing on each specific element, we'll share the life hacks and non-trivial procedural solutions that allowed us to work efficiently and effectively.
Building the Foundation for Each Screen
Here's a smart approach we used: instead of tackling the layout and user flow of each core screen one by one, we identified the key element of the product and built the entire page's architecture and structure around it.
This approach significantly accelerates the process and helps create a stellar MVP. The client gets a perfectly fine-tuned core function, while we can showcase our skills in areas beyond that function's performance.
For the Vaults list page, the Vault card became the centerpiece. On the internal Vault page, the deposit and withdraw widget took the spotlight. As for the calculator page, well, we actually removed it! More on that later.
Creating a Backlog without Waiting for Advice
It might seem odd that we make most decisions based on our own taste, but that's part of our signature style. We believe that clients come to us not for minor tweaks like "move this 20 pixels to the left," but for our expertise as a reliable design partner. When sending a layout to the client, we usually don't ask for feedback; instead, we present the best solution that can be slightly personalized.
While working on the agreed-upon flows, we collect all our cool ideas, comments, thoughts, and sketches on a separate page. Many of these ideas will be implemented in future updates at no extra cost to the client since we came up with them while working on related solutions.
However, we immediately implement the most reliable options we're absolutely confident about without additional approval or discussion with the client.
Considering Business Objectives from the Start
Your products, whether a landing page or an app, don't exist in a vacuum. They are launched alongside your existing social media accounts, other products, referral programs, and so on. We always take this into account when working on a new product or supporting and developing an existing one.
In the case of Cybro.io, the platform was launched with an existing landing page where users could buy Cybro tokens.
This meant we could introduce the platform's traffic to the landing page's offers, which were quite contextual. So, we came up with a fantastic native ad in the spirit of "Bento" for the Vaults grid on the platform's main page.
There's even a simple pattern for added aesthetics β our gentle lead designer Masha is physically incapable of releasing anything unattractive into production.
Optimizing Interactions
Now for the most interesting part β how we dealt with the calculator and the deposit/withdraw functionality. We simply eliminated the difference between the calculator and the motivated action of placing or withdrawing money on the platform.
Here's how it works: you always have this widget on the internal Vault page. It sticks with you, so you won't lose it accidentally, and it's always in view. Now, you might want to calculate the profitability of this Vault by connecting your wallet and entering the amount you're interested in. Voila!
The result appears, complete with commissions, profitability, APY, and all those crypto-investment perks.
And here's the unexpected twist β the deposit button is right there in the calculator! Cool, right?
We just got rid of the need to make two flows and replaced them with one, which is even more convenient.
We saved money on layout and development, even helping ourselves save money!
Moreover, this widget is used in the same form in the mobile version, which means that by creating this widget once in production, you immediately have all the adaptations for any device. Isn't that genius?
Adding Comments
The final part of any of our work is writing instructions for everything that might need them. How elements work, which viewports are relevant for what, how any non-default element behaves β we provide all this with our signature Designer's Notes, which make your layout designers' work MUCH faster. Again, we're thinking about your money!
The ready-made flows look like this, always on components, with a ready-made UI kit to boot.
By the way, this is what Trust Score looks like in the UI, if you're interested
The Outcome
In just two weeks, we designed a full-fledged investment platform for Cybro.io, complete with a Vaults page, an internal Vault page, an investment widget, and a mobile version. By leveraging our experience, creativity, and problem-solving skills, we managed to deliver a high-quality product within an extremely tight deadline.
Our client was thrilled with the result, and the platform was ready for development and launch. The success of this project demonstrates our ability to work efficiently under pressure and provide innovative solutions that meet both business objectives and user needs.
We hope you enjoyed this case study and found it informative and engaging. If you have a challenging design project in mind, don't hesitate to reach out to us at Unipaws. We're always ready to embark on a new exciting adventure and create something amazing together!