Here is RPS Fast case study about creating UI/UX design for a SaaS product, or to be precise for a WEB3 startup. What aspects to consider to be able to stand out from the competitors? What design solutions are the best to highlight the benefits of your product? Based on the example of a recent UX/UI project, Turum-burum experts will answer how to create a simple and user-friendly website for launching a new SaaS product on the market.
RPC Fast Project Pre-story: SaaS Product Design from Scratch
We were approached by Dysnix, a well-known company experienced in DevOps, Kubernetes, and blockchain for more than 8 years. Dysnix has developed its own SaaS product — RPC Fast. And our team was asked to develop a digital package of the product.
Product Description: RPC Fast is a ready-to-use product for blockchain node deployment that helps to dive into Web3 with the fastest geo-distributed high-available Blockchain API.
When it comes to nodes deployment, there are two ways to choose:
- Hire a developer to self-deploy these nodes — that is a time-consuming and expensive way to choose.
- Purchase and use SaaS software solutions and deploy nodes without delay by simply pasting the URL.
The second option is RPC Fast by Dysnix. It's quite a complex product, and its design has not only to be visually pleasing but also to be functional and demonstrate all its advantages, taking into account the target audience.
And in its turn, the TA is also complex and quite diverse, including blockchain developers, startups, and large companies that need to deploy blockchain nodes.
Task: We needed to create a website with all UX/UI solutions from scratch, since the product is new, and there was no website at all. Besides, it was strictly required to adhere to the prototypes provided by the project marketing specialist. So, we are to create a concise, simple, and clean design UX/UI for a new website of the SaaS product.
Development Stages of the UX Design for SaaS Product
Before proceeding to the creation of the UI/UX design for SaaS products, it's critical to understand the product, learn the target audience, analyze the market, and so on. That's why all the processes were split into several stages.
Stages of the design development for RPC Fast:
- Held a call with the owners and co-founders and consulted with Dysnix marketing specialists to get some details about RPC Fast.
- Communicated and received technical tasks from the SEO specialist and content prototypes from the marketing expert.
- Clarified and analyzed the competitive advantages and main disadvantages of the product.
- Prepared texts for the future website according to the recommendations and requirements of the SEO and marketing specialists.
- Developed the first prototype based on all this data.
- After approving the design of the homepage, the designer proceeded to the creation of other website pages and designed the mobile version.
Style of the SaaS Product website: Nuances and Features
The main requirement of the product owners and co-founders was conciseness, simplicity, and clarity of the website design.
After analyzing the product and market, the concept of the site was developed and introduced. The idea and the design were accepted and approved in the second iteration.
To differentiate from such well-known competitors as Quicknode, Alchemy, Moralis, and others, the designer offered to use 2D design and add a few distinctive symbols:
When you visit the site, the vault door opens, where the nodes are stored. That is a kind of portal that leads users to the world of web3 and blockchain technologies. Also, the vault is designed to emphasize the security of the technology and demonstrate that the company cares about data safety, which is one of the main advantages of RPC Fast.
The first screen of the homepage on the site of RPC Fast. The idea of the safe went through several iterations but was adopted from the very beginning
The Rabbit is used to symbolize:
- Rabbit hole — main association with Alice in Wonderland;
- Speed of service — because it seems to fly out of the portal and all these nodes follow it.
The symbol of the Rabbit is used in the design of the website to accentuate the benefits of the SaaS product
The Lock is used to emphasize once again the security provided by the Enterprise-grade security to protect all the clients’ data.
The symbol of the Lock attracts attention and emphasizes the superb security ensured
The Eye is a symbol of PredictKube — the auto-scalable AI technology used for forecasting the load and ensuring the stable operation of the service.
The icon Eye demonstrates the predictive AI technology used
We also added logos of blockchain technologies that are supported by the product to make it easier for the user to find them and check the available options. The pages of blockchain technologies are made in the same style and contain all the information needed to make a decision. All blockchain pages are cross-linked for an easy transition.
Logos of the blockchains
RPC Fast Website Pages: Best SaaS UX/UI Solutions to Emphasize Product Benefits
Homepage Design and Structure
We started with the homepage. The marketer and copywriter prepared the page structure and identified the messages to be used to stand out from competitors.
The first screen contains the primary message to engage the user to scroll further and a list of all blockchain technologies on the basis of which RPC Fast works to demonstrate all the options.
The first screen of the RPC Fast website’s homepage
It was emphasized that it is node-as-a-service with no need for in-house blockchain deployment, support, and maintenance.
Brief information about the benefits of RPC Fast
We made a list of the main advantages that distinguish RPC Fast from other similar products.
Interactive cards with key advantages of the product demonstrated
We placed logos of Dysnix client companies that have already used the product as the product is new on the market and not yet known, but the developer company already has a certain reputation. We decided to show this to build trust in the product.
Logos of the companies that have already used the service
We demonstrated the advantages of the product's usability.
The benefits of the RPC Fast
Logically, we lead the user to the advantages of possible blockchain technologies that are available, pointing out that the list is constantly growing and updating.
The block with the blockchain technologies available and coming soon ones
We emphasize that this product was created by Dysnix, which has more than 8 years of experience in the industry and has experience in creating global projects that can handle the traffic of 1.5 million requests per day.
Dysnix benefits to raise the trust and credibility level
We posted testimonials to increase the trust and credibility of the product.
Testimonials of happy clients
We took into account SEO requirements and placed a FAQ block at the bottom of the page.
FAQ section to meet SEO requirements
Pricing Page Features to Stand out from the competitors
We spent most time creating the Pricing page after the homepage design. It was crucial to differentiate the project from the competitors. To do this, we designed the most transparent system to calculate the approximate cost that could be just invented.
The user is offered 3 plan options:
- Free for those who want to try whether RPC Fast is suitable for their needs or not
- The main Growth plan, where 500 million Compute Units are offered.
- Enterprise plan is for large companies that need more than 500 million Compute Units.
The design of the plans offered
In the process, we realized that not everyone understands what Compute Units are because users are used to calculating the number of server requests. That is why we decided to create a Calculator that helps users to count the approximate price quickly and evaluate the benefits for the company. It is also another effective way to differentiate the product from competitors.
Calculator to count the approximate price of the product usage
We also added a comparative table of all available plans for clarity and convenience of the user to make it easier for him to evaluate all the advantages of the packages and choose the most optimal one for their project.
Comparative table of the plans for user convenience
Next are the blocks to meet all the SEO and trust requirements, as well as everything that helps the user to make a decision to purchase or not.
The FAQ section on the Pricing Page
Product Pages Design to Demonstrate All the Benefits
When visiting the blockchain technologies’ pages, all the figures and data are displayed, as well as various metrics and indices needed for tech-savvy users. That is, all important information and benefits of the product are presented to the target audience, including the following ones:
- 90+ zones available;
- 99.99% uptime of node deployment;
- average 85.6 msec latency from anywhere;
- 100% healthy nodes, and many others.
Metrics provided for the target audience on the product page
Various Use Cases are also provided to highlight for whom this SaaS product is designed and how it can be used.
Use cases of the SaaS product provided
Such advantages as official client support for each blockchain with official documentation and more are underlined.
Official client support on the Ethereum page on the website of the RPC Fast
Block of Additional Benefits and cross-linking to the company's blog are there to provide the user with quick access to detailed information or some tips on how to use and configure the RPC Fast Blockchain API.
Additional benefits block on the product page
Next is a block with reviews and information about Dysnix to show the product's reliability.
Benefits of the Dysnix company that developed RPC Fast
About Us with Storytelling
The About Us page underlines the advantages and expertise of Dysnix, the company that developed this product. The benefits of using this SaaS product are highlighted as well. Also, the company's path and the story of the product creation were told to get closer to the user.
The design of the About Us page
A Blog to Add Value for CustomersThe designer helped to structure all the necessary information, sorting, filtering, and so forth. It was a certain challenge due to a large amount of different content — articles, guides, documentation, use cases, etc. All SEO requirements were also taken into account and met: table of contents, the ability to copy the code, the presence of CTA at the footer of each page, and cross-linking with other blog content to engage the user to go deeper into the site or make a purchase.
Blog page on the website of RPC Fast
Strong UI/UX is very important in SaaS and includes a lot of aspects and nuances to mind. Creation of the digital appearance of the SaaS product requires thorough research. Only by having analyzed the product itself, the market, and the main competitors, we managed to build a concept that highlights the advantages and features of RPC Fast.
As a result, we got a simple and clean design for a complex product. With the help of design, we’ve managed to emphasize the product benefits, considering both SEO and marketing requirements. In September 2022, the product was launched on the market.