What is design if not a process of turning chaos into order? From this perspective, grids serve as the main tool for graphic and user interface designers. Grids help designers to place and align design elements on the page, in other words, create a certain order.
Eleken designers create digital products and use grids to make the design process faster and more efficient. In this article, we would like to share a few tips and the best examples of grid layout design.
What is a grid layout design?
First off, let’s define the term “grids”. Grid is a structure of columns and lines that helps to design a website, app, or print project. Grid determines where the block of text and other design components sit on the page. Every grid despite its size or type consists of three main elements: columns, gutters, and margins. Grid layout design is the design that relies on the grids.
Graphic and web-designers work in the dimension that can be broken down to the rectangle, be it a page or a screen. This determines the shape of the grid as well. The lines within the grid are customized. Creators can build the grid themselves or rely on ready grid systems, while designers can use the same grid system throughout the whole piece of design, or create a new grid for each page to express their ideas.
Grid is an essential element of UI and graphic design that allows dividing the web page into specific, predictable areas. Grids might be invisible but they are everywhere. Practically every user interface you see is built with the help of grids.
History of the grid
We can trace the idea of the grid layout design down to the ancient times when the first books were handwritten. But with time grid importance evolved dramatically and went from unconscious aligning to carefully measured grid systems.
Grids became essential after the printing press was invented. Early prints repeated the handwritten books’ design, but the printing press made alignments even more clear-cut. A good example here is the Gutenberg Bible, one of the first printed artifacts where we can easily see a two-column grid.
In the 19th century, the majority of newspapers adopted a grid-like format that would continue to be refined over the years. It has laid the groundwork for the more complex and efficient modular grids used today.
By the end of the 19th century grids remained straightforward and simple. But in the 20th century grid layout was influenced by the big design movements of the time like Bauhaus and De Stijl. Grid designs became much more interesting involving round grids and brave braking of the grid.
As we can see, grids are not some sort of a trend coming by occasionally, buta powerful design tool that has been constantly developing as the time goes. Now, let’s go back to our times and see how designers use grids nowadays to create digital products.
Types of grids
There are four main types of grids in design. They are manuscript, column, modular and hierarchical grids.
Manuscript grids. The simplest grid, where text is placed in one column, like on the book page.
Column grids. The most common type of grid used by graphical and web designers. Basically, it’s a number of columns that help place and align text and other design elements.
Modular grids consist of columns and rows creating “modules”.
Hierarchical grids are any irregular grids. This type of grid is the most flexible to content needs. It can be composed of two different kinds of grids brought together, or even be free-form.
We can also name the baseline grid - a grid of horizontal lines like a school copybook. Or a pixel grid used mostly for digital screens - a grid of multiple rows and columns creating a pixel net.
These different kinds of grids are used in both print and web design.
Five inspiring grid layout design examples
For you to get some inspiring grid layout ideas and better understand how important it is to use a grid in UI design, we have collected some great examples to show you.
Perfect alignment. It’s the essential function of grids to align design elements. Its role in user interface designs can’t be underestimated. Pay attention to how the landing page grid below makes use of empty white space and keeps the other elements perfectly aligned.
Complexity reduced. The grid can help to minimize the complexity of SaaS products. The neat structure of grid-based design helps to organize the data. For example, Eleken designers have created a neat grid-based design for TextMagic customer experience platform.
Go diagonal. We mostly imagine grids as coordinate systems. But they can be used to create diagonal designs that look fresh and interesting, just like the landing page below - looks more like a contemporary artwork, doesn't it?
Grid breakers. You can use a grid to… break out of a grid. Grid is good not only for aligning design elements, but can also help designers create the effect of movement and make the design much more interesting. Take a look at the example below of how vertical scrolling can help to break out of the horizontal and vertical grids.
Animation. The symmetrical patterns of the grids match perfectly with animated effects. It is a great way to make the grid layout more vivid and eye-catching. Here’s an idea how grid approach can be combined with animation.
When you’d like to see more examples of grid-based design, check out our article about Angular Material design layout.
Five useful tips for working with grids
- Keep in mind the screen size. In responsive design, it is important to be able to adjust your grids to different screen sizes. For example, the number of columns in the grid is different for mobile, tablet, and desktop screens. Usually, it is four columns for mobile, an eight-column grid for tablet, and twelve columns for desktop.
- Gutters matter. The screen size also determines the size of the gutters. Smaller gutters look better on mobile screens and for web screens, you can use a little more space between columns. Avoid big gaps in modular grids.
Image credit: Material.io
- Go horizontal. You can use the grid to scroll horizontally. In the horizontal grid, layout columns are placed from left to right, and design elements scroll the opposite way.
- Design the grid. You can design your own grid and work with it. Mix several grids at the same time, or, in other words, play with the hierarchical grid. Adjust the height and width of the columns, change margins and sizes of the gutters to create the grid that will meet your needs.
- Don’t let the grid limit you. Don’t think of the grid as of limits. Rather approach it as a certain logic that will help you bring design elements to order within the page. And don’t be afraid to break out of the grid.
Can you build a UI without grids?
Grids in UI design are more important than ever. Digital products require symmetry and perfect alignment. It’s part of a smooth user experience. However, it is not mandatory to use grids. You can work without a grid for sure, it will just take more time and effort to align the blocks of text and images within the web page.
If you feel like the grid is killing creativity and gets you on track with the same old patterns, you can surely try working without raws and columns. But we recommend customizing the grid and using it to enhance your ideas.
Conclusion
Grid is a system of columns and rows that helps to organize and align elements in the visual design. We at Eleken use grids to create page layouts, user interface designs, or graphic designs. Using a grid in UI design makes the process much more effortless and simple.
The grid layout is becoming more and more important with the growth of responsive design. The reason for it is that grids facilitate multi-device support and reduce complexity. Designing on the grid allows you to bring the visual hierarchy to the page and gives your content a clear structure and makes it readable. As a result, your users will navigate better through well-structured pages of your digital product.
If you find this topic interesting and want to explore it more, you can also read our article on design systems. And when you want to know how the grid can help to design your product specifically, don’t hesitate to reach out to us.
Top Stories
5 SaaS Onboarding Examples and Lessons We've Learned Designing Them
In a perfect scenario, your users should learn how to use your product without the need to contact customer support. And as a team of product designers, at Eleken we always strive to create simple and self-explanatory UI/UX that helps users quickly adopt the product. Still, there are cases when SaaS is too complex for people to feel its value from the very first interaction. That’s the time we have to think out an intuitive SaaS onboarding process.
Good onboarding experience that brings value for both users and SaaS businesses should be:
- Unobtrusive
- Have low friction
- Contextual
- Interactive
In this article, we will show you five SaaS onboarding examples featuring the abovementioned characteristics that you can use as an inspiration for your cloud company.
Onboarding examples
Depending on the context and type of a cloud product, each project requires different approaches to onboarding design. And when planned out correctly it positively influences SaaS customer success.
Below we want to illustrate Eleken’s best onboarding experiences and lessons we’ve learned from them so that you’d want to create the one that suits your SaaS best.
Gridle: saving development hours with Intercom code-free product tours
Gridle (now Clientjoy) is a client relationship management software that focuses on helping small companies and freelancers store client data and manage sales, starting from leads and ending with invoices. Considering its target audience, Gridle set its unique value proposition as full client lifecycle management automation and simplicity of use.
Eleken was hired to revamp the look and feel of this SaaS product so that it clearly communicates the core value proposition to its audience. To successfully cope with this task and understand customers’ true needs, we started our design process with user research.
One of the insights we received from talking to users was that the platform should make it easy for newcomers to get started and give them instant confidence that they can succeed. That is, we had to design an intuitive onboarding.
To help the company save time (and therefore money) needed for development, we decided to introduce Gridle to its users with the help of a no-code interactive product tour by Intercome known for its simplicity.
Onboarding starts right after signing up and gently guides the user through the app’s key features, giving them a clear understanding of what to do first.
The main thing about product tours you should remember is that they should be super easy, and illustrate only the information that the user needs to start feeling product value. Thus, for Gridle onboarding, we chose a light minimalist design with a lot of white space that quickly focuses users’ attention on straightforward copy and bright CTA.
Additionally, to make it even easier for non-experts to get started, we created customizable templates for Proposals and Invoices. Templates reduce the mental effort needed to create a new thing and shorten users’ time to value.
Habstash: making long sign-up process painless
Habstash is a British financial service startup that helps people navigate the savings needed to buy homes. They hired Eleken to turn the existing prototype into a minimum viable product (MVP).
To bring maximum value and show users what type of house they can afford within their current budget, or help them calculate how much money to save up to buy a house of their dreams, Habstash needs to learn user preferences and gather a lot of personal information such as income level, amount of current savings, preferable home location, home type, and so on.
As you may understand, people are often unwilling to enter a great amount of data as a part of the sign-up process. So, our challenge was to create such an onboarding flow that prevents design cluttering and user drop-off.
We made a decision to use the Wizard design pattern, “a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones”, so that novice customers can easily perceive the information.
Habstash onboarding consists of 5 steps, each of which is represented on a separate screen with questions and fields.
The first thing the app wants to know is whether the user is saving alone or with a partner, and what their primary goal is. Depending on the answer, Habstash can show a different onboarding scenario for saving with the partner option. Also, there is a progress bar at the top of each onboarding screen that lets users quickly understand how many steps are left.
As well, the app warns users if they enter the field incorrectly and explains what has been done wrong.
To retain users if they can’t/don't want to continue filling in the information, we added the “Save&Exit” button. It offers customers to enter email address to be able to continue the registration from the same point where they left.
As the last step, the app uses the entered data to form a target plan with an estimated deposit for a dream house and offers the user to create an account to have full access to Habstash features.
To reduce friction and help users start using the platform faster, when filling in the password Habstash provides a checklist, points at which that fades away once the password matches with the requirements. Note that customers also have an option to create an account with just one click using their Google profile.
Prift: effectiveness because of the simplicity
Prift is a personal finance platform that helps people cope with money issues and quickly achieve their financial goals.
Eleken’s task was to design a simple, accessible, and intuitive MVP, and as Prift’s target audience are people over the age of 30, we opted for light minimalist UI and avoided overusing gamification.
Just like in the Habstash case, we used the Wizard design pattern to create onboarding flows.
Onboarding steps are designed with a light-blue and white color palette which aligns with the overall product style and makes the information on each screen easy to read.
To encourage users to go through all stages of onboarding we added a small note on each screen that explains the importance of filling in more fields, designed a progress bar, and showed newcomers how many steps are left. As well, we added a “Cancel” button, so that the user can quit the onboarding anytime.
In case some specific issue arises, the “Support” button in the top right corner is always there to contact Prift users with a customer support representative.
To help newcomers effectively use your product, you should define which functions in your app are essential for reaching customers’ primary goal and, more importantly, teach users how to use them.
Thus, to fully benefit from Prift, users should fill in the information about their property and pension. To simplify these processes we designed an opportunity to either enter the data manually or by adding an address (for property)/by connecting to a pension provider (for pension pot).
As a result, we got informative onboarding that is effective because of its intuitiveness and simplicity.
SEOcrawl: combining in-product and email onboarding
SEOcrawl is an all-in-one SEO management tool that came to Eleken for UI/UX overhaul. As a part of the redesign, we had to create a new onboarding sequence.
Product tours are great for quickly communicating essentials to users in a simple and understandable way. Email marketing perfectly engages subscribers and users check their inboxes more often than the app they’ve just signed up for. Therefore, we decided to combine these two types of SaaS onboarding.
Welcome email
After signing up for SEOcrawl users receive a welcome email in their inboxes. It suggests novice customers watch a 10-minute onboarding video to learn how to make the most of SEOcrawl and offers them to make the first action (add new project) by clicking the CTA button.
We made sure that the text in the email is readable, the CTA is clearly visible, and the overall design matches the product’s style.
As well, to make the email more trustworthy and attract users' attention to its content, we added a funny photo of SEOcrawl’s CEO who welcomes newcomers.
Product tour
SEOcrawl’s in-product onboarding consists of just three easy steps so that users don’t get bored but vice versa, are kept engaged and interested.
Each onboarding screen contains minimum text and bright CTAs that leave no questions on what to do to proceed to the next step. Also, there is a progress bar for users to track their progress. When one step is completed a checkmark appears, which motivates users to complete the next tasks.
The onboarding process starts right after the registration. When an account is created, the platform asks the user to take their first action - add a project. This way, newbies get not just a theoretical walkthrough, but a practical task.
We made adding a project just a piece of cake for SEOcrawl's users. There are only two fields to fill in.
The last step is for syncing the API (application programming interface). Not to scare users away at this stage and add credibility, we decided to put text with a privacy policy that states that all data from the user’s project is completely confidential.
Finally, users see the screen that notifies them that the data uploading is in progress. Not to lose a user at this point, SEOcrawl promises to send an email notification when all the data is ready.
Process place: fun and engaging onboarding
Process place is a workflow management application that aims to bring clarity to all business processes. One of the main issues the platform deals with is helping HRs onboard new employees. Thus, the onboarding we designed for Process place is teaching users to kick off new workers.
Onboarding flow starts with a pop-up window that welcomes newcomers and offers to “start exploring from completing the kick-off checklist”. Note that it’s always important to give your customers the ability to omit onboarding. Thus, the user can either click the green CTA button and proceed with an onboarding checklist or close the pop-up and explore the product on their own.
By nature people don’t like leaving lists of tasks uncompleted, so we decided to design the onboarding in a form of a to-do list that users have to cross out task by task.
As well, it’s important that the checklist creates a sense of progress. After completing one action the user should receive clear instructions on what to do next. This way, we engage customers and encourage them to explore the product further.
To entertain users a bit, at the last onboarding step, we decided to add a funny image of sheep that clap their hands and a short instruction of the final task.
When the user completes the whole checklist, they come across a congratulation pop-up. And, lastly, not to leave novice users alone in an app, it’s important to give them a direction on what they can do next to start using the product on their own.
In Process Place, we offer new customers to start building their own processes from scratch or with the help of customizable templates.
What helps us design effective SaaS onboarding
Based on the cases described above, we can single out the following characteristics that help create good SaaS onboarding.
- Thorough user research. To create the onboarding that helps your customers, you should identify what problems they want to solve and focus your efforts on what makes sense to the user, not what you want them to do.
- Personalized onboarding. If your onboarding aligns with different types of buyer personas, they are more likely to feel the value, and therefore start paying for your SaaS.
- Creating a few onboarding steps. Define how many steps the user needs to perform the first task. Remove all unnecessary elements to reduce friction and create a smooth user experience. Make sure each step of your onboarding has its clear purpose and brings customers use.
- Identifying the Aha-moment. Users come to your application not because of the beautiful design or the great number of functions it offers. They want to have their problems solved. The sooner you will show them the value of your solution, the more chances they will retain and pay for your app.
- Offering templates. Performing an action or completing a task is easier if you have a suggested example of how it can be done. Therefore ready-made templates educate users and save them time.
- Showing the progress. As users move from step to step, they should understand how long the education is going to take and what their current results are. Showing the progress promotes newcomers to take further actions and prevent them from dropping off.
Want to learn more about how our designers can help you create great experiences for your customers? Schedule a call with us.
Need User Feedback for Better UX? Customer Support Can Help
As the name suggests, user experience design starts from understanding user expectations.
For UX specialists, the most common way to understand what users feel is to run UX research, like a user interview or a usability test. Conducting user research means building an algorithm to figure out an answer to the questions the designer has. Any research is a big job that requires money, time, and effort...
… that could have been spent in a more productive way, like designing actual products.
At the same time when UX designers leave no stone unturned looking for problems that users want them to solve, somewhere nearby a customer support agent is sitting on a pile of shiny free-of-charge insights.
Support agents are people who are working at the frontline. They are the first to listen to users who find a bug or complain about the last update. They already know all the problems people want technical UX to solve. So why don't we just draw insights from customer support?
Why even run UX research if support knows all the answers?
In some cases, asking support officers for help is not an option. Like, when you’re designing a product from scratch, it rarely has good end-user support and customer service — the company is just building a technical support team. And even if you are doing research for working products, getting to the truth through support tickets can be challenging.
The role of technical support services is initially one-sided — to solve the customer problem. Help Center may burst with information, but it is usable only when structured, discoverable, and tailored to answer the designer’s questions. In practice, the customer support database usually looks like a barrage of useless tickets design teams prefer to ignore.
Think of a service desk that handles an average of 200 tickets a day. It makes 4,400 tickets per month and 52,800 tickets per year. Conducting a specific UX research would be faster and cheaper than digging through thousands of conversations seeking an answer to one specific question.
The support communication flow can be made two-sided, tailored to solve both customers’ and products problems, but it will require some modifications.
Let’s see how top SaaS companies learned to use their user support to improve customer experience.
How to talk to support specialists and shadow them
The simplest thing you can do is to talk to support officers. When our designers from Eleken agency start working on product redesigns, they always try to interview support people. Thus, they obtain first-hand information on issues that users face.
Setting up interviews with frontline staff works for internal products as well. For example, Shopify designers asked their support colleagues to review the existing buyer personas and explain how they would interact with each persona.
Another way to deepen the general understanding of the product and the users is to spend a day on the frontline, alongside the customer service support team. GitLab, for instance, has a shadowing program available to all team members outside of support to learn, collaborate, and work together with the GitLab support team.
How to detect a problem in a haystack of user feedback
Even the best professionals sometimes deliver designs that are less-than-perfect. Results that make people less-then-happy. When something goes wrong with the product, users vent their frustration to support, and the most natural thing for UX teams is to seek feedback from the support team.
Sure, you can run a survey instead, that may be an easier and more controlled way to find the truth, but would it be accurate enough?
Sabrina Gordon, former Customer Support Manager at Intercom, explains the difference between survey feedback and support feedback in one precise metaphor. Imagine you own a restaurant. A few days after guests visited your place you send them an email wondering how they liked the soup. Compare such feedback to the situation when somebody was eating in your restaurant and then tapped a waiter on the shoulder saying the soup was a bit salty.
So, Intercom prefers to gather feedback from support. Besides, Intercom is a multi-million dollar SaaS company with a customer support team of 55 people running astonishing 22,000 conversations every month. How do they make such an overwhelming information flow actionable for their product team?
One thing that helps Intercom to manage client interface experience is tagging each ticket. A team tag means the product team that owns the feature, and a category tag means a type of request that the user had. Thus, Intercom turns a barrage of qualitative data into data that can be displaуed on a dashboard to track the dynamic and sudden spikes in user activity.
Here's an example to show how it works. Once the Intercom team noticed that the volume in conversations tagged “team acquisition” is consistently high. That meant the customers consistently stuck on something within the onboarding UI and were forced to write to support. Intercom examined those complaints in greater detail to figure out people who are trying to get started couldn’t make a messenger appear.
For the Intercom messenger to show up, users need to take two steps:
- install a little piece of JavaScript into their sites;
- and sign up for one of Intercom’s products.
If you miss either of the two, you’d see nothing. That’s where a lot of users got confused.
The solution was to make a popup telling users when one step was a success and another step is yet to be completed.
How to turn qualitative comments into quantitative data
Shopify offers another way of turning unmanageable feedback piles into actionable dashboards — they made users tag their feedback for them.
It all started from a technical support website content with a feedback form that looked like this:
It consisted of a five-point scale measuring user sentiment and an open-ended field for comments. While the five-point scale worked well enough, free-form comments were hard to translate into actionable insight. Parsing all written comments was fully manual, labor-intensive and time-consuming.
The solution was to turn an open-ended question into a multiple-choice question. The new form proved to map exactly the same trends as those recorded by manual analysis of past results but in automatic mode.
How to be proactive with users’ requests
Users contact technical customer support not only to complain. People who love the product often write to help it become better.
Kate, Eleken’s marketing guru, has been using GatherContent, an app for content management. Once she realized that the app lacked one little feature, like the ability to assign people to workflow steps. Luckily the app had a feature request platform specifically for Kate to share her idea.
Kate’s suggestion has received many upvotes from other users, and a product team started working on the feature soon. Kate could monitor progress on the public roadmap and felt excited when her brainchild went live. Since then, she has shared many other ideas with GatherContent.
Letting users suggest and vote on feature requests is the most sophisticated way to turn user feedback into actionable insights:
- It gives you an instant look at the top feature requests in priority order;
- It shows which customers care about which feature requests;
- It gives you a ton of ideas ready to implement;
- You don’t even have to lift a finger to get those ideas.
Most successful SaaS apps have already adopted such an approach in one form or another.
GatherContent has its feature voting board powered by customer feedback app Canny. Buffer manages feature requests through an old-school mix of Trello and Typeform.
Salesforce took feature requests to a whole new level with its Trailblazer community of millions of users who team up to learn, connect and share their ideas with the company.
Summary
Product designers are ferociously focused on two things: the product and the customers. Customer support is what keeps a strong bond between these two parts of the business. So why don’t we make customer support help UX?
But remember that support feedback is no panacea, it doesn’t substitute for UX strategy, UX research and UX audit. Ihor, UI/UX designer at Eleken warns against mindlessly following user suggestions:
“Data from customer support often indicates low-level issues, like buttons that are hard to find or popup that is hard to read. There’s an obvious solution in making buttons brighter and fonts larger, but let’s not forget about the big picture. Probably we can eliminate the need for a popup at all.”
That’s all for now. If you want to start a project with designers who can see the big picture, let’s make a short introductory call. If your project is something we can help you with, we'll provide you with a designer and a one-week trial free of charge.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
