Article
SaaS business

Best SaaS Web Design: Unveiling the Secrets of Impressive Websites

11

min to read

1 Dec

,

2020

Table of contents
Share

The SaaS industry has become one of the fastest-growing ones in recent years. Just imagine, in the USA alone, there are about 17,000 SaaS companies serving up to 59 billion customers across the world. So it’s no wonder that many SaaS startups seek ways to survive and thrive in such a competitive environment. But what can help them stand out? 

As a SaaS design company, Eleken has worked on numerous SaaS projects, from agriculture to data analytics, and gained a lot of valuable experience. From our standpoint, it is a well-thought-out SaaS web design that can help young startups gain a competitive edge. In one of our recent videos, Ilya Dmytruk, the founder and CEO at Eleken, shares some insights into what is so special about SaaS UX design that requires a narrow specialist.

When some of our clients come to us, they request to “make it like Stripe” or some other popular SaaS solution. But creating an impressive SaaS web design is not about mimicking the best companies and copycatting their user interface. It is, first and foremost, about creating simple, easy-to-navigate, and user-friendly designs that combine functionality and aesthetics. Still, we can always learn from the best, so let’s see what helps successful SaaS businesses deliver exceptional web designs launch after launch.

What tactics do reputable SaaS websites employ?

In the recent McKinsey report, researchers uncovered that design-driven companies outperform industry benchmark growth by as much as two to one. The report highlights that user-centric design provides businesses with more opportunities than ever today. Leading companies appear to excel in these four areas: 

  • More than a product: embrace the power of user experience.
  • More than a feeling: employ design metrics.
  • More than a phase: follow an iterative process. 
  • More than a department: hire cross-functional talent.
McKinsey.com

Eleken designers agree that the above four clusters of design actions work well and are ready to share some SaaS web design practices to help every business become a top performer.

More than a product: embrace the power of user experience 

SaaS websites' goal is to sell software to the user. Therefore, the designer's task here is to present the product in the most favorable light, namely to showcase all the advantages, highlight all the features, and show that your application is better than competitors. 

As we mentioned, many of our clients are asking us to make their solution look like Stripe. But why do so many SaaS businesses look up to Stripe? The answer is clear: Stripe has a good combination of a user-friendly interface with consistent design elements like color schemes, font styles, and layouts across all solutions, as well as a professional team that promotes customer feedback. 

Stripe’s main page
Stripe’s main page

In one of the interviews, Michael Siliski, the Business Lead at Stripe, said that one of the major principles in their design process is that they “really, really care” about user experience and put customers' needs first. This user-first approach encourages their team to search for the right balance between function, craft, and joy. One of Stripe’s designers shares an example of how everybody is involved with the product at all levels. The designer mentioned the case when the CEO didn’t like the result and wrote the needed code by himself.

Yes, most SaaS companies do acknowledge the value of user experience, but just like Stripe, it’s also important to know how you differentiate yourself through your UX.

Eleken use cases

Our UI/UX designer Dasha notes that the first step to differentiating yourself through UX is to maintain the same style across all visual components of the company. This means that the design of both your website and the SaaS product should be created by the same designer or agency. Such practice ensures that everything looks, feels, and sounds the same. As an example, let’s look at the case of SEOcrawl

Aside from doing the platform overhaul, our designers helped the SEOcrawl team to create designs for various marketing campaigns aimed at attracting audiences.

When talking about designs for marketing purposes, we believe that they should not only include authentic visuals but also convey brand identity, emotion, persuasion, and, most importantly - trust. Let’s look at a sign-up landing page. It has it all: a contrasting headline, relevant visuals, social proof, as well as a clearly visible call-to-action button. 

SEOcrawl landing page
SEOcrawl landing page

It’s great if designs for social media with headers and icons align with the overall style, so we did for SEOcrawl:

Twitter header
Twitter header

Also, we designed numerous easy-to-read email notifications and newsletters for different purposes, including a free trial activation newsletter or new comment notification.

SEOcrawl notifications and newsletters
SEOcrawl notifications and newsletters

Tamara, another designer at Eleken, also shared her insights with us. When she was designing Кірsi’s platform for accounting, consulting, and specialty law firms, she also created marketing materials for participating in the exhibition and creating a pitch deck. 

Marketing materials
Marketing materials

The standard colors used in the accounting and financial fields are dark, restrained colors, usually blue shades. But Kipsi is a dynamic and young startup that is developing rapidly and introducing innovative ideas. To stand out from competitors, the client wanted to express this freshness in their style visually. So we used bright, vibrant, and youthful color palettes, such as fresh blue and purple. Here are some post examples Tamara created for LinkedIn:

LinkedIn posts with and without text
LinkedIn posts with and without text

This ensured consistency of the project's visual style in all communications, making a positive impression.  

More than a feeling: employ design metrics 

Successful SaaS companies don’t rely on opinions and personal preferences. The design is more than a feeling for them. They implement design metrics and measure the design in the same way as cost, quality, or time. 

Design-driven companies link design to value, considering the entire customer journey and using the UX design metrics, like satisfaction ratings, usability assessments, field studies, A/B testing, and so on, to understand their user needs better.

Stripe is a master in user testing, empowering every employee to connect with users. For example, the company recommends following the “Make surveys about users, not about you” principle. This means UX researchers should avoid general requests, asking to help users to take the survey. Instead, it is better to explain to people why their answers will benefit them. For example, it will help fix a bug, improve the quality of service, or make the page more useful. Stripe offers this example of Rocket Rides, a demo for Stripe Connect, to illustrate this point: 

Stripe
Stripe.com

As Eleken designers always want to remain user-focused, we constantly monitor user behavior and conduct usability testing. For example, while working on Kipsi, we measured the time users spend on the platform (Time on task metrics) and tracked the functions and tasks they use most often (Success Score). As a result of our effort, we extended functionality, adding a Product Tour function that helped new users navigate the interface.

Kipsi’s navigation
Kipsi’s navigation

Design metrics play an important role when talking about product redesign. For example, our clients from Refera, a web platform that allows doctors to create and send referrals, came to us to redesign a product’s landing page. They wanted to convey the feeling of trust and confidence, urging leads to leave an email address and book a demo. To achieve this goal, we conducted the user research. We found out that users have more trust when they see people with whom they will interact. So we placed a real doctor’s picture instead of illustrations to evoke trust. Our designer also suggested changing the blue color, often overused in medical design, to a calm green palette, as well as replacing outdated flat-style illustrations with more classical 3D images. 

Refera landing page (before/after)
Refera landing page (before/after)

More than a phase: follow an iterative process

Many companies still consider the design phase as just one of the product development stages. Yet, design works best in environments that encourage learning, testing, and iterating with users. This is especially true for SaaS projects. When companies rely too much on one iteration, this can result in losing the customer's voice. 

The Stripe designers follow a rapid iterative loop when they start their work by analyzing actual users’ needs and understanding their problems, and then designing the right product to solve them. The company calls this process “product shaping”, which means building “a rough solution to a concrete user problem” when it is strictly planned what to build and why.  

At Eleken, we follow a similar process. Ilya, our CEO, explains that design is a process, not an event. Users’ needs and market expectations often change, so adjusting to the time and changing design is important. 

For Eleken, the iterative process is quite effective because of its simplicity. The team follows a series of repetitive steps, improving and refining the product with each new cycle. Here are three stages of Eleken’s design process: 

 Iterative process at Eleken
  • Creation: Once the initial observation, research, and requirements have been gathered, Eleken designers analyze the first screens and discuss how they may work. Then, we create raw mockups and send them to the clients for approval.
  • Testing: The clients share their ideas about what they like and what could be improved. Eleken designers gather the feedback and make the needed changes.
  • Evaluation: We think of ways how to improve the mockups. Once the first iteration ends, the second starts. This process repeats until we get the result that satisfies everyone.

Let’s look at Kipsi’s design of documentation requests. The section navigation is simple and intuitive. But before it evolved to the version you see, it went through a number of approval cycles. 

Kipsi PBC
Kipsi PBC

The first iteration of the flow for document requests did not include the ability to indicate that the request is not relevant or the document does not exist. During this iteration, we collected our client’s feedback and understood that this option was necessary. The second iteration already included this functionality. 

More than a department: hire cross-functional talent

In a truly collaborative environment, there are no departments, titles, or assigned offices. Instead, there are cross-functional teams that work in tandem. All of them are focused on making a great product together to meet users’ needs.

Even though Stripe early invested in design, they were not immune to scaling up. In the beginning, they had a product-focused team. But for efficient scaling, they needed more cross-functional specialists to assist Stripe with storytelling, design research, content strategists, and so on. To address these challenges, Stripe built five teams with over 100 designers that focus on cohesion across all design disciplines, product design, operations of UX research, and many more.  

In the current space, setting up central design departments or smaller independent design teams is no longer effective. McKinsey researchers found that the distributed teams are much more successful, as they have a clearer focus on their customers and can build better cross-functional partnerships. As a result, they are 10% faster to launch a product and have a 30% higher success rate when getting concepts to market.

But sometimes, companies struggle with having the right talent on board. TextMagic, a Nasdaq-listed SaaS company, managed to overcome this challenge by extending its team with our designers. They hired Eleken to design a platform, including designing marketing campaigns, CRM, and desk services functionality.

Eleken designers were always in touch with the TextMagic team. We had video calls with the product manager every other day and arranged demos to present the results of our work every one or two weeks as if our designers were in-house employees. Here is what Irene Avdus, PM at TextMagic, shared on Clutch

Clutch review

The takeaway

Delivering excellent web designs has never been an easy task for SaaS companies. It remains especially difficult for companies that raise the bar on consumer expectations like Stripe. 

But no matter the case, having a design team who deeply understands your product and the target customers is important. Eleken can provide you with the right SaaS design talent for your product, even if you have a narrowly-focused project that requires niche expertise. Jamie Conklin, VP of Product at Astraea, commented, “It is unusual to find a designer who has experience building applications with geospatial data - especially imagery data. We found that in Eleken.

So if you want to develop your SaaS web design with a team who enjoys solving problems and has a high degree of autonomy, drop us a line

Natalia Yanchiy

Writer at Eleken