Web Design Examples of Usable, Responsive and High-Converting Websites

When using an app, the majority of people expect to spend less time and get more jobs done without facing any troubles on their way to achieving a goal. And every day these expectations are getting higher, and so does the competition. That makes the role of well-thought-out UI and UX more significant than ever for your application.

But as you are here, we may suggest, you understand the power of high-quality UI/UX design and your main concern is more practical — to learn how to design an app.

As a design agency with more than six years of experience in providing UI/UX design services our short answer would be: to design a great app you need a great team.  

Still, this is a comprehensive guide, in which we will touch upon each aspect you may need to know when designing your own app: from idea to research and prototyping.

Below we will discuss:

• What design thinking is and why you need to know about it
• How to start designing an app from scratch and what stages to go through
• How to find an app designer
• What a redesign process looks like
• How much it costs to design an app
• Best practices to use in mobile app design

Design thinking and app development

No matter if you are a designer, a product manager, a product owner, or someone else, in case you’re going to create something new and innovative you should know about design thinking.

Design thinking is a methodology that is aimed at helping you solve problems creatively. Unlike the other problem-solving techniques and approaches, design thinking is focused specifically on the human side of creative problem-solving. That is, this approach helps you to come up with innovative solutions based on your users’ wants and needs.

Design thinking methodology includes five basic steps undergoing which you will improve your product’s UI/UX:

• Empathize. Understand the people you are trying to design an app for.
• Define. Break down the information you gathered in step one and turn it into useful insights (define the users’ needs, problems, challenges).
• Ideate. Try to come up with solutions/ideas that match with the insights you found in the empathize and define stages. 
• Prototype. Analyze all the ideas from the previous step, select a few that you think might be worth implementing, and turn them into simple, testable prototypes.
• Test. Take your prototypes and show them to real users to get their feedback. Then take the insights from this step and get back to the define stage, and then to the ideate stage, and so on. 

Each time you get a new idea or update the old one, you get back to the prototype and test phases again and again. That’s how you keep improving your solution.

The five stages of design thinking form the basic map of the methodology, however, the exercises within these circles can be different. The app design process we are going to describe in the next sections is based on the design thinking method, so keep this approach in mind when creating an app.

Designing an app from scratch: 7 steps

We will start from the moment where all you’ve got is a raw idea of the future application in your head, and lead you through the main stages of the product design process to help turn this idea into a concept, and to finally create a prototype.

However, you don’t necessarily need to go through all the following steps in strict order. The design process is not linear. Depending on your specific case, choose where to start, jump from one step to another, make changes, and iterate until you receive the best result.

And now we move to step #1. 

1. Define the purpose of your application

To design an app, you firstly need to understand what you want to create and why. At this moment it’s enough to take a pen and a paper, get concentrated, and think on the following questions:

• What is the main goal of your app? 
• What users’ problems the app is going to solve?
• Why are users supposed to choose exactly your product?

As well, remember that an application is a business tool, that’s why when developing an app, take into account business requirements, user goals, and technology capabilities.

For example, let’s imagine you want to make a banking mobile application, then its purpose can be as follow:

• Business goals: reduce the cost of serving clients in bank branches and increase the average income per client.
• User goals: control the expenses.
• Application tasks: create a remote customer support channel and increase sales of banking products.

Setting goals is a vital stage because you can make a great design, but if the app solves neither the company's nor users’ problems, or the developers will not be able to implement it, design has no sense.

2. Conduct research

It happens that product owners put forward hypotheses, without testing them at the research stage, and immediately send them to developers. The result is functionality that no one needs, and a waste of time and money. In order not to create useless apps, study the market, competitors, and potential users.

Competitive analysis

Most apps you can find on the market are not unique: they are either a combination or improved versions of already existing products. So, don’t be disappointed that you are not one of a kind. A competitive analysis is your chance to find areas for improvement and define your unique value proposition.

When revisiting (and comparing) your rivals, pay attention to the following things:

1. What features does the app perform? Write out which features are common for all competitors, which are unique, and which features the app lacks.
2. What pricing model does it use? Analyzing the way your rivals monetize their businesses will help you decide which pricing model is the best to use.  
3. When was it last updated? This information will show you if some specific app will be your active competitor or not.
4. How many downloads does it have? The number of downloads will show you the app’s level of popularity. You will also understand whether the problem the app solves is relevant for users.
5. What are the apps’ reviews and ratings? Analyzing apps’ ratings and reading users’ reviews help you understand what people like, and what they want to improve or add.

User research

To make a great app you need to understand who and in what context will use your product. That’s why to make sure your app idea is viable and people need it, we should define and learn our target audience.

There are many UX research methods, but we want to mention two of them here which we at Eleken use quite often.

User interviews

User interview is usually a one-to-one session where you ask the user questions and record their answers to learn how your users feel about a particular experience.

Through user interviews, you’ll gain an understanding of how your target audience talks about the app you are designing, what problems and pains they mention, what they want from the experience, what they currently enjoy or want to improve.

To conduct user interviews:

1. Set your goals and objectives
2. Recruit the participants
3. Choose the location and set up
4. Ask the right questions

User personas

User persona is a fictional but realistic portrayal of a target user of your app. Each persona represents an entire group of users. User personas embody everything you learn at the research phase: user goals, needs, challenges, fears, behavior patterns, and so on.

Creating user personas help to design a product, taking into account the needs of different individuals. For example, we used this research method when working on Handprinter, a unique startup with a goal of healing the Earth, to create an intuitive user flow.

3. Write out the core feature set for an MVP

MVP stands for a minimum viable product, which is the version of a product with just enough features to satisfy early customers and provide feedback for future product development. An MVP helps you to get early data that confirms users' interest in your application. In other words, testing and improving an MVP helps you to make sure that you are investing in a project that is likely to succeed.

To come up with the right set of features for your minimum viable product:

1. Write down all the features you’d like your app to perform. Don’t try to visualize the exact screens the app is going to have, just think about what you want your users to do with the help of the product.
2. Take a look at this list and decide which of these features are compulsory to serve the app’s main purpose. Leave only those functions without which your application won’t be able to help users solve their primary problem.

Later, at the test phase, by analyzing the user feedback, you will be able to gradually add more features to an MVP until you find a perfect product-market-fit. 

For example, one of our clients, Cylynyx, created a demo product to check which functionality their users would like to see in their product. After testing the demo, Cylynyx came to Eleken for a full-fledged MVP design with more diverse features. 

4. Think out the structure of the app

Now it’s time to think about how to design an app so that users can easily interact with it. That is, you have to think out an intuitive app structure.

User flow

Once you've decided what features the application will have, create a user flow - a flowchart that represents a path the user takes to get their jobs done with the help of your application.

User flows are very useful because they provide a logical idea of ​​how an application should work and solve users’ problems.

As an example, here is the user flow diagram created for Handprinter that we already mentioned earlier.

You can create user flows with a pen and paper, on a whiteboard, in MIRO, Lucidchart, or any other tool convenient for you.

Wireframing

Once the user flow is ready, you can map the user experience with wireframes.

Wireframes show how all screens will be connected and what elements they will display, from buttons and pop-ups to visuals and text. However, without presenting real content, photos, videos, colors, and fonts. Wireframes will give you a clear understanding of what screens you need to have designed, and how the app is supposed to work.

For instance, when we at Eleken designed wireframes for a freight tendering platform our main focus was on usability. As you can see below, we made them black and white to demonstrate the logic of the product so that nothing distracts our clients from the flow.

You can create wireframes in

• Figma
• InVision
• Sketch
• AdobeXD, and others

5. User testing

Once you’ve got the wireframes, test them on your colleagues, friends, your team, or perfectly conduct user testing. 

Pay attention if your testers understand the purpose of each design element, find the structure clear and intuitive, and can easily navigate through the app. In case you find some inconsistency in the structure, keep refining, rearranging, and testing it until you receive great user feedback.

6. Think out the visual part. 

A good app should combine a consistent user experience with an appealing and intuitive user interface. That’s why after we manage to design a logical app architecture, we need to create mockups that show in detail what your finished product will look like.

First of all, search the internet for references that appeal to you and form them into a moodboard. 

To create mockups, you can use the tools mentioned in the prototyping section (as a team of product designers, we choose Figma). Still, as UI and UX design have a huge impact on further app success, we recommend you opt for professional help at this point. And here you have different options.

• Variant “A”. You are a UI/UX designer and can design an app yourself /you already have a design team 

In such a case, you can omit this section, and jump straight to stage 6 (prototyping and testing).

• Variant “B”. Cooperate with the designer 1-on-1

In case you've defined your goals, have a clear app vision, and understand what you want to achieve with the design, then hiring a UI/UX designer will work great for you. 

There are different ways to hire UI/UX designers:

• Ask your friends, colleagues, and acquaintances for a reference (a word of mouth can have great power), or check the Clutch for designers with good reviews.
• Create a job offer at Upwork, LinkedIn, Toptal or look at designers’ portfolios at Behance, Dribbble.
• Once you receive CVs, pay attention to portfolios (do you like the designer’s style?) and experience (if you need to find a designer for your SaaS app, see if your applicant has had similar cases)
• During the interview ask a designer to explain one of their case studies in detail (what the problem was, how they identified the challenges, what their design process looked like, how they arrived at the suitable solution)
• Pay attention if you understand each other well during the conversation.

But apart from Variants A and B, there's another one, which is no less effective.

• Variant “C”. Cooperate with a design agency

In case you feel that your app is too complex, or you are not sure that you can cope with all the workload (research, wireframing, prototyping) alone, consider hiring a design agency. They can help you to design an app from scratch, redesign a piece of it, or help with any other aspect you have trouble with.

How to choose a web design agency?

The process of choosing a web design agency is, in fact, the same as hiring one designer: check the portfolio, ask about their design process, make sure you feel comfortable when communicating with each other.

What specialists do I expect to receive when hiring an agency?

As there are different types of agencies, depending on your needs you may receive a team with a different line-up. Though, the most common team composition is the following: 

• UX designer. Takes care of a consistent user experience (wireframes, prototypes)
• UI designer. Develops visual concept of a product (mockups, UI kits, typography, color scheme)
• UX researcher. Conducts UX research and turns the data they get into valuable insights for a design team (user interviews, user personas, user testing, A/B testing, and so on)
• Project manager. A project manager is an intermediate between designers and you. 
• UX copywriter. Creates content that helps users quickly navigate through the app and easily reach their goals.

To sum up, we want to tell you that no matter what option you choose, don’t forget to communicate with your design partner and give your feedback in time. Even the best professional won’t be able to complete the project without your involvement.

7. Prototype and test again

Development is the most expensive part of any product. Therefore, it is important to check possible shortcomings and correct errors before handing an app layout to the development team. To test the application, the designer creates interactive prototypes - a rough version of the product that allows you to understand how the app looks and feels.

To design an app prototype, the designer assembles the mockups into a slideshow using a graphic editor or software (InVision, Sketch, Figma, AdobeXD). Prototypes make it possible to switch between screens by clicking on a specific area of ​​the layout. Usually, these areas are transparent and are located on top of the drawn buttons, so it seems that the button is not drawn and static, but real.

For example, below you can see what the prototype that we created for Textmagic (customer experience platform) looked like.

How to redesign an app

At the beginning of the article, we promised you that this guide is going to contain everything you may need to know about app design. So, one more topic we want to briefly discuss here is app redesign.

In fact, the processes of designing and revamping the app are quite similar. Below we will briefly mention the main stages of product redesign, if you want more details, check our article “How to redesign an app”.

1. Define your goals. Is your design outdated? Do you keep receiving negative customers’ reviews about the app interface? Do you want to do a rebranding? Make sure you make a redesign not just for the sake of redesign. 
2. Conduct the UX audit (competitor analysis, heuristic analysis, collect user feedback, analyze the existing design system)
3. Develop visual solutions for all app’s screens (new user flow, wireframes, mockups, dynamic prototypes)
4. Create a UI kit for a new design. UI kit is a set of default elements that we use to build a user interface (buttons, arrows, navigation elements, fonts, color scheme, and the like). Reusing components from the UI kit helps to quickly and easily create/extend an app while adhering to common style across all screens.
5. Test, analyze, and review the feedback

Finally, to eliminate the risks that come with the redesign and correctly find the direction for refining an application, we recommend finding a reliable design partner.

How much does it cost to design an app?

And again a short answer: “In most cases, app design cost depends on the number of hours a designer needs to perform a scope of work.” 

But in real life, you can’t predict the exact price for app design services because each product is unique, and each project is different. So, it takes a different time to come up with, develop, and test a suitable design solution.

As well, the price may depend on

• The designer’s experience (the more experienced the designer is, the higher their hourly rates would be) 
• The set of features, and overall project complexity
• Ongoing expenses needed to operate a business
• Your level of preparation (if you, for example, conducted user research on your own, designers will be able to start from building wireframes, otherwise, they will have to spend additional time (and your money) on the research phase)

If you want a more detailed answer, read our article about the app design cost.

App design tips from Eleken

In conclusion, here are seven tips from our designers that you should consider when creating an application.

1. Don’t put creativity over usability. Don’t forget that the product should be user-friendly, and the design should take into account users' needs, and not just your desire to be unique.
2. Reuse design elements when it is possible. If you use a certain kind of design pattern for some piece of design, try to apply it for other blocks in the interface as well. This way it will be easier for users to navigate the app, and the design will become more consistent.
3. Build the correct hierarchy in your interface. With the help of size or colors make sure the user clearly understands which design element is primary, and which one is secondary.
4. Simplify the interface whenever you can. Get rid of all design elements that don’t help users get their jobs done faster and more efficiently.
5. Don’t put more than three buttons on one screen. One screen should contain one main button and one-two secondary buttons. The rest of the buttons should be hidden. 
6. Good design does not need onboarding. Interface design is about managing the user's attention, the user should do what they're intended to without long descriptions/courses/tutorials.
7. Remember about accessibility. Your app should be convenient for all types of users. Make sure that the fonts and colors you use make the interface readable/understandable/accessible for people with special needs.

Need more help in designing a web or mobile application? We at Eleken help our clients both with building products from scratch and redesigning the already existing apps, so don't hesitate to reach out to us.

What can make people buy your SaaS product? Introducing email marketing, creating a shiny website, publishing loads of useful content, or maybe everything at once? 

The answer to the question of how to market SaaS software has many points to discuss. Still, the main thing all your prospects want is to have their problem solved with your product. That’s why your SaaS marketing strategy should be aimed to help people quickly and easily see what value proposition your cloud software has and how end-users can benefit from purchasing it. Luckily, there are many ways to do it. 

As a design agency for SaaS, we know that good marketing design will show the value of your SaaS product through a usable website, high-converting landing page, customer-centered ads, and so on. It can help to add credibility to your software and retain your customers. But of course, not only design can attract people to your software-as-a-service.

In this article, we are going to discuss 7 strategies that can help your cloud software grow and prosper.

Marketing tips for SaaS software products

The SaaS market is growing extremely rapidly and to stay successful you should constantly test, change, adapt and develop new solutions for your software. Therefore, SaaS-based marketing calls for some unique approaches. 

You may have already heard of some of the tactics we are going to talk about in this article, or maybe you even use some of them. If not, they’re worth a try. Now, let’s check them out.

Free service

While traditional businesses try to attract audiences by providing special offers, making sales, and similar, SaaS companies try to win over customers by offering them a free trial version of the product. 

Such a marketing tactic works well for cloud businesses, as the most efficient way for a customer to realize that your software is exactly what they were searching for, is by trying it out. Therefore, SaaS marketers are doing their best to make it as easy as possible to sign-up for trials to lure interested customers and increase the conversion rate.

There are two most popular ways a prospect can try out your SaaS:

• Freemium - the user gets free access to the basic version of the service, while additional functionality is included in the premium paid version.
• Free trial - user gets full-featured access to the service but is limited in time (week/month for free) or by the number of operations (for example, five requests or uploading two reports).

Some SaaS owners are still afraid that offering their service and not asking money for that will just ruin their revenue. So, how to understand if such SaaS marketing tactics will work for you? We’ve already discussed it in detail in our article about freemium pricing, but a short answer to this question will be “Test it!”. Determine which model brings your customer closer to the purchase and run a split test. 

For example, Netflix offers a thirty-day free trial. You can get access to free films and TV series after registration, by specifying the data and bank card details, which you will no longer have to fill out if, after the trial period, you want to continue using the service. This tactic increases customer’s interest and moves them gradually down the sales funnel.

Besides, Netflix did a great job by making the sign-up form simple and short, and a CTA button noticeable. 

Promote on multiple channels

Don't get hung up on search engine traffic alone. Attract customers through other channels as well:

Social networks and other external resources

Thematic platforms and popular social media where you can post an article, share your experience, or just talk about your SaaS company are an additional chance to get noticed, increase the level of trust, and expand an interested audience. 

You can regularly remind customers about yourself, acquaint users with the product, its functions, or the release of updates.

It is important to correctly select resources: they should be fairly well-known, with a lot of traffic, and related to the topic of your business. For example, you may try Github, Behance, Stackoverflow. 

Keep in mind that it is important to fully fill out the profile, use only relevant information, publish regularly and communicate with the audience. As a result, in addition to links, you will increase brand awareness, referral traffic, and leads.

One more recommendation: If you can create video content, don't miss the opportunity. Videos generate more feedback than text + images.

For example, PostPlanner, a social media marketing tool, is active on all popular social media. When you check their profiles it becomes clear that PostPlanner has a good social media strategy for their saas.

Here is PostPlanner’s page on Facebook:

Twitter: 

And Instagram: 

Remarketing

When done correctly, remarketing is an opportunity to “catch up” with users who were on your site, but for some reason did not take the targeted action. That is, only those who were most interested in your service will see your ad. 

To do this, you need to analyze data from Google Analytics and define your buyer personas - create a portrait of users who are likely to convert into a real customer:

• define the target audience
• find out what actions users tend to do on the website
• understand where visitors go most often before they convert
• find out how long the session lasts on the site
• see which devices potential leads use to visit your website

Next, create a list of those who fit the necessary criteria of a buyer persona. And only then set up advertisements that will remind these users about your software.

Here’s how Grammarly creates a targeted ad on Youtube where they present use-cases so that the viewer can find their pain points. 

Or take a look at Grammarly’s great text advertising.

Email marketing

Don't trust those who say email marketing is dead, dying, or is about to die. It works and brings results for one simple reason: the subscriber base is the most loyal audience the business has since they voluntarily left you their contact information.

To generate a base of emails, create CTAs that offer your visitors:

• bonuses and discounts
• useful material
• free courses 
• demo version

When you have your solid email base choose some great SaaS email templates according to your purpose and test which works best for your SaaS.

For example, here’s what I got in my inbox from cloud accounting software Freshbooks:

Such kind of onboarding email not only reminds users about the service but also teaches how to use it and presents its value. 

Simplify

SaaS products are complex and very often it’s difficult to omit using technical words or lengthy descriptions on your website or in SaaS ad campaigns. Still, always strive to simplify every aspect that concerns your cloud software.  

Instead of broad product lines, SaaS companies offer their clients a couple of packages that cover the needs of most types of audiences. Instead of a cumbersome website, they tend to create a simple landing page. They write minimum text with technical terms and prefer speaking the client's language.

For example, FleetMatics doesn’t try to dip its customers into the entire universe of GPS tracking. You won’t find any mention of GIS, RFID, WLAN, PSAP, CTIA, ANI, or other terms on their website. Do you know why? Their audience has no idea what it is. Therefore, FleetMatics does not reveal all the secrets of GPS technology but sells a ready-made solution that does not require clients to get into any technical issues.

In a simple and visual form, FleetMatics reveals the essence of the technology to a potential buyer. After reading a couple of pages on their website, you can easily understand what the company's offer is, even if you don't understand anything about GPS tracking technologies.

Mind customer retention

Retention is paramount for the cloud business. According to Pareto analysis, 20% of your regular customers bring you more than half of the income, and this statistic is true for SaaS products.

Therefore, the advertising budgets of SaaS companies should be directed towards retaining old customers, rather than attracting new clients. Marketers actively use retargeting and premium options (upsells and cross-sells) to keep existing customers interested and engaged.

As well, remember that keeping your users is possible not only by providing them with large discounts. There is also the emotional attachment to the brand, which you can develop using a gamification approach with a customer-centered design, by unique communication style, or some interesting content.

Financial management software company Workday, as an example, has found a way to retain key customers. They release special videocasts with up-to-date information for HR leaders and vice presidents of client companies. And clients definitely like such brand focus. Moreover, Workday does it very well creating content of the highest quality for its target group.

Take care of customer success

You need to understand that even the highest quality software product will fail if you don’t pay enough attention to your customers. Selling a cloud service implies full support and providing regular updates. And as we already defined earlier, the core of the business strategy of a SaaS company is to satisfy the customer who has already bought your service, not the potential one.

If you wait until something breaks down to start fixing it, it will, of course, allow the company to save money and feel relatively safe, but in the long run, such companies lose out. The sooner you will respond to your customers the better. 

Start communicating with your existing customers, offer them bonuses for candid feedback. Through communication and the analytics of conversations, you will understand what your service lacks, and what, on the contrary, needs to be abandoned in order to make it less cumbersome and complex.

For example, at Process.st, an online workflow management software, they analyze each customer’s feedback they receive from the support team (about bugs or some particular failures). It allows them to improve customer satisfaction rate and think about other decisions they can do to make their product better.  

Optimize the website

The whole SaaS marketing strategy aims at directing your prospect to the website as it is the place where sales happen. 

The biggest misconception of aspiring SaaS entrepreneurs is that they think of a website as something that has to be aesthetically pleasing. This is not the case. There is not a single proven case that a beautiful picture somehow affects the conversion or sale.

Instead, you should take care of presenting a clear value proposition and providing a coherent user experience to the website visitors. 

Here are some tips for optimizing conversion:

• Define the most important target action that leads to conversion for each specific page on your website (signing up for a free trial, viewing pricing, watching a video, etc.)
• Then ask yourself a question "What elements of the design interface promote the client taking this action?"
• Get rid of everything that can distract the user from the target action and make their path to CTAs as short as possible. CTA must be visible, correctly positioned, and visually distinct from the rest of the web interface
• And the last tip: to make sure you’ve done everything correctly - run a split test

For example, let’s look at the home page of one of our clients Textmagic (you can read about the design process of this customer experience platform in Textmagic’s case study).

As the visitor opens the website they can read an informative headline that clearly explains the value of the product and of course it is impossible to miss that bright-orange “Start Free Trial” CTA that stands out on the blue background. As well, prospects can view a video that shows how the software looks and operates. 

All these features help Textmagic acquire more customers. 

Tell about your clients’ success 

While traditional customer reviews just contain words of gratitude for in-time delivery or the good state of a product, the SaaS industry lets you play differently. Instead of putting small company logos, marketing gurus encourage cloud companies to show exact numbers to the potential buyers that serve as real proof of how your service helped well-known companies to achieve tremendous success.

Note that it won’t work if you try to come up with a successful case instead of a client or if you cannot explain to the buyer a real economic benefit from your software.

Netsuite, a business management software company, builds stories of customer challenges and solutions and shows how they helped the company grow. And they do it very ingeniously: there is a separate page on Netsuite’s website devoted to authoritative business owners. They are sincerely happy for the success of their clients, but at the same time, they do not forget about themselves. It is an effective promotion model if you have a true story to tell your prospects.

Let's summarize

Simplicity remains central to cloud platform marketing. If your SaaS is intuitive and usable, you have good product quality and fine-tune the perfect support system, then even word of mouth can gradually lead your SaaS company to customers. Your main concern will remain to retain existing customers.

Still, working out additional marketing strategies won’t hurt.

• Don’t be afraid to offer your product for free, just test which model is suitable for your software
• When you promote the product do it on multiple channels. Be active in social networks, optimize your email marketing, and think of publishing useful content in your blog
• Do your best to keep the existing customers satisfied. Pay attention to their feedback and respond to it 
• Finally, take care of the high-quality design that drives conversion. Here at Eleken, we know how to create a simple yet attractive and converting landing page or a growth-driven website.