Try, Then Try Again: Why Iterative Design Process Brings the Finest Results
0
mins to read
You have 18 minutes, 20 sticks of spaghetti, one yard of tape, one yard of string, and a marshmallow. You need to build the highest tower possible with a marshmallow on top. What would be your strategy?
That’s not a child game, that’s a design exercise called Marshmallow challenge, that presents surprisingly valuable lessons about the nature of collaboration and project management:
- There’s a group of people that show consistently poor results in solving a Marshmallow challenge. They are recent MBA graduates.
- There’s also a group of people that performs consistently well. They are recent kindergarten graduates.
How is that possible?
Business students are trained to find the single right plan and then implement it. They spend half of their time planning, then building spaghetti constructions, and in the final moments, they put a marshmallow on top. Sometimes it works well, but more often MBA guys end up in “oh-oh” situations.
Children work differently. They start with a marshmallow and make successive prototypes, always keeping a marshmallow on top. So they have a chance to fix unreliable designs multiple times along the way. When time is up — ta-da! — a marshmallow stays on top.
The moral of the story: If you experiment early on, you build the highest towers. This experimental type of collaboration is the essence of the iterative design process.
What is iterative design process?
Let’s start from the iterative design process meaning. It’s simply a series of steps that you repeat, tweaking and improving your product with each new cycle. The goal of iteration is to get closer to the optimal solution with each repetition. Iterations underlie design thinking, as well as Scrum and Agile project management methodologies.
The iterative idea seems effective. It’s obviously effective, yet too-seldom-used — if you look closely at the design agencies’ landscape, you’ll notice how many companies employ the MBA students’ working model (together with their “oh-oh” results).
Take classical service agencies. They provide their clients with big impressive teams that, apart from designers, would include project managers, design architects, and researchers. All those people would investigate the case, draw pie charts, analyze the market to define the single perfect plan, implement it, and then… you figure out they’ve missed something crucial.
Why is iterative design used?
Clients rarely come to a design agency with a detailed project roadmap in place — they mostly have a foggy idea of what they need.
The designer’s main challenge in such cases is to get somehow into the clients’ heads to create the things exactly how they want them to look, even if clients themselves lack understanding.
“Iterative working process is the only way to ensure your design will be a precise fit.”
That was a quote from Maksym, a Design Director at Eleken UI/UX agency. Maksym is a stickler for the iterative design process and Figma (but that's another story). That’s why all designers at Eleken work iteratively (in Figma).
It's not because Maksym forces us to adopt an iterative working model. There are just some obvious iterative design benefits for both designers and their clients:
- Iterative design saves time and money. Mistakes and misunderstandings between requirements and implementations become visible in the first steps, so we can fix them early.
- It enables the team to leverage lessons learned so that designers continually improve the process.
- It involves clients effectively in a design process evaluation.
- It guarantees that the design would reflect the interests of all stakeholders. This is especially important in terms of designer-developer collaboration.
- It ensures that stakeholders of the project have a clear understanding of the project's status throughout the lifecycle.
How iterative design process works
One programming wisdom on Twitter says that theory is when you know something, but it doesn't work. And practice is when something works, but you don’t know why.
We won’t give you any theory here — you can easily find shaky theoretic structures if you google “iterative design process”. We are not theorists, we are an agency that uses iterations on an everyday basis for years already. Iterations are something that works for us (and we even know why).
So let’s look at an iterative design example — the project we carried out for TextMagic. TextMagic was an established CRM app that was going to add some new marketing functionality to their product. They hired Eleken to design that functionality.
The scope of the project was broad, so to start the first iteration we needed to split the whole job into tiny bits. In UI/UX it’s fairly easy — you just iterate screens one by one. Each iteration of the design process goes through three stages: creation, testing, evaluation.
- We take the first screen and make a guess on how it’s going to work based on our initial observation, research, and requirements we gathered. We shape our guesses into a raw mockup and send it for approval to the client’s Project Manager. That’s the stage of creation.
- The Project Manager points us to the ideas they like and those that they don’t. We gather the feedback and leave to reflect on it. That’s the stage of testing.
- We come up with new ideas on how to improve the mockup based on the feedback we got. That’s the evaluation stage, that closes the loop.
As you can probably guess, it’s not the end, only the beginning. Where the first iteration ends, the second starts. Thus, iterations work like spiral turns, that bring us closer to the goal with each turn. You review your solution, refine your guess, review the revised solution, and repeat until you get the answer that satisfies everyone.
Look at TextMagic’s chat widget below. It’s pretty minimalistic, but before it evolved to the final form you can see, it went through numerous approval cycles.
Anything like this, before going live, gets on the PM’s radar. If the design looks good for the PM, the screens land on the desk of the CEO. It can be also reviewed by a Tech Lead or developers that will implement the design. If something on the mockup turns out to be too hard or too long to implement, the designer may be required to simplify a feature of concern.
This iterative process is often called “rapid prototyping,” and it’s not for nothing. The important thing is that creating and testing ideas should happen quickly. The faster, the better. Working with TextMagic, our designers could run several iterations per day. The more often the client or their representatives can negotiate designers’ intermediate results, the faster the design process moves.
Let's not forget about user testing. Testing new designs for projects that are already running, like TextMagic, is an absolute pleasure because you can talk to people who already use the product.
Brand-new startups, however, can also test their prototypes on users. Design collaboration tools, like Maze or Lookback, allow you to test your work on different stages, from product concepts to prototypes.
Great design comes from iterations of good design
Ilya, the Founder & CEO at Eleken, likes to remind us that design is a process, not an event. One might even say it’s an endless process. That means the design can’t be finished — only put on hold for time. Users’ needs change, and the market changes — so should design.
A non-iterative design process is just not suitable for constant improvements. It tries to put a marshmallow on top of your design tower at the last moment and to step aside.
The iterative design project, in contrast, allows you to adjust the tower all the time. Billion-dollar startups take advantage of this possibility like no one else. To prove the point, we have five real stories of top SaaS companies that use iterative design thinking.
Top Stories
Psychology in UX Design: The Science of Making People Happy
Many people who are new to UX design get confused when they find out that knowledge of human psychology is no less important here than graphic design skills. The accent shifts a bit if we say “User Experience” design instead of “UX”. Experience is something that lies in the field of human feelings, emotions, reactions, — all that belongs to psychology.
It may seem that the most basic UX commonplaces, like “make the main button big and bright” is something obvious. These things are not just an established way of designing similar websites: they are based on psychological principles, discovered by scientists and proven with experiments.
You may hear words like UI/UX psychology, interface psychology, or psychology of product design used to explain how psychology is used in UX.
In our design agency, we highly value design solutions that are built on the solid basis of interface design theory, UX design psychology, and user research. In the era of human-centered design, finding ways to make users happier is one of the most important tasks of a UX researcher.
You don’t need a UX psychology degree to understand the principles of UX design psychology: they are simple and often intuitive. Once you know them, your view of website design will be changed.
We will go through a few basic UX psychology principles that will help you understand why designers offer the solutions that they offer. Why do many websites look similar? Is it because designers don’t like to experiment? Let’s find out what UX laws tell us about it.
1. The Principle of Perpetual Habit. Don’t touch what works well
This is one of the basic UI/UX design principles. People get used to the same symbols, triggers, and behavioral patterns and feel frustrated when they can’t follow the beaten path.
What does it mean for UX design? It means that following an established page structure is the best. Let’s say, a designer decides to replace the traditional hamburger menu button (three horizontal lines) with a fun symbol. Yes, it may look cool from the point of view of the original design. But most users won’t appreciate this.
The principle of perpetual habit is one of the reasons why websites often have this uniform look: because people got used to it and forcing them to break their habits would lead to dissatisfaction.
This rule is simple and obvious, but for digital industries where people value innovation over anything, the desire to experiment with design is very high. UX designers have to resist this temptation unless they have proof that their target users would appreciate that “break in the system”. Psychology tells us that an average human is more conservative than an average product team member.
2. Validation. Conformity. Follow the majority
Imagine you are participating in a group study that checks your eyesight. You are shown three lines and asked which one is the same length as the fourth one.
You feel that the answer is simple until you hear that other people start answering “B”. You start doubting and trusting your eyes less and less. Afterwards you find out that the study was about psychology, not eyes. THe real objective of the experiment was to see how likely people are to conform with the majority. The study is known as the Asch experiment and proved that most people would change their opinion to conform to the majority.
This psychological effect is used a lot in politics, but there is a way to apply it to UX design, as well. Most companies put their former clients’ reviews on the landing pages, so that prospective clients feel that their choice is validated by other people who had a positive experience.
Some businesses put just a generic positive review along with a picture that looks pretty much photostock-y, but even this “evidence” works comforting on some basic level. Eleken steps forward from this approach: on our landing page, we put comments from Clutch, a review service, and videos from our clients telling their experience.
3. Hick’s law. Can there be too much jam?
Have you ever found yourself stuck for five minutes in front of the shelves with jam in a supermarket, unable to choose out of 30 different jars? We should be happy to have that much choice, but instead, we feel quite drained after an hour in a supermarket having to make all those decisions.
The “too many jam” effect was discovered when psychologists put a degustation table with 24 tastes of jam in a grocery shop on one day and only 6 tastes on the second day. The study showed that people were 10 times more likely to buy jam when they had less choice, even though a table with 24 tastes initially attracted more people.
This phenomenon is also called “choice paralysis” and is widely used in both marketing and UX design psychology.
Hick’s law states that increasing the number of choices will increase the decision time logarithmically. In the world of digital products, where people consider 3 seconds page load too long to wait, too many choices may ruin everything. Users get frustrated and are likely to abandon the page without making a decision.
That’s why the golden rule of UX design is to keep menus as short as possible. The less frequently used parts can be hidden behind the “other” section.
4. Errors. To delete or not to delete?
Doing things wrong sometimes is a part of human nature, as psychology (and life) tell us. The objective of the product team is to make the product error-free, but even the best product team can’t be protected from mistakes caused by the users. These mistakes result in unhappy users, and that causes a problem for the overall experience.
What can UX designers do with people making mistakes? It’s impossible to avoid them completely, but knowing some psychology can help minimize the frustration and soften the negative effect. Here are some rules of error management in UX design:
- Add the “are you sure?” pop-ups and “undo” buttons. Something that we take for granted, but saves us so many mistakes every day. I believe that the “Unsend” option introduced in Gmail is one of the best UX design ideas Google ever had.
Sending emails in an instant is great, but by sacrificing just a few seconds, users can prevent quite a few white hairs.
- Inform users about errors as soon as possible. Have you ever filled a long registration form, to find out that the password can’t be longer than 8 symbols? And then having to fill it in again. The websites that highlight the text box in red as soon as the wrong password is inserted help detect mistakes at an early moment when fixing is the easiest.
- Make error messages friendly and helpful. Instead of just putting “Error!”, suggest possible ways of solving the issue. “Contact our tech support and we will resolve the problem as soon as possible” sounds way more comforting and make people feel that they are not alone with the error. The modern trend of human-like friendly interfaces led many apps and websites to use this trick.
5. Emotions. Design for happiness
The human brain has two decision-making systems: fast, based on emotions, and slower, based on the results of rational thinking. Psychologist Daniel Kahneman wrote a lot about that, and much cognitive psychology in UX design is backed by his findings.
While many people would not realize that they rely on emotions in decision-making, the pattern remains. Sometimes, rational part of the brain would find reasonable arguments afterward to justify the fast emotional choices. Nowadays rational decisions are considered to be more reliable despite various biases of "rational" thinking. Logical thinking fits naturally into the product design process, but it’s important not to underestimate the emotional side of humans.
A large chunk of marketing and advertising tricks rely on emotions. How can we use them in UX design? The topic of applying cognitive psychology to user interface design is worth a separate article. Here are few elements that are used most commonly to evoke emotions:
- Colors
- Emotionally-charged elements: pictures or illustrations of characters showing emotions, emojis
- Microcopy with an emotional tone
You can find some examples of emotional UX design in our article on user engagement strategies.
At Eleken, we believe that emotions in design are like pepper: it’s good in small amounts, but too much spice makes the dish a disaster. In Habitspace, a lifestyle app for personal use, one of our objectives was to make the app fun to use: we added emojis to habits and used encouraging copy to motivate people to stay on track of good habits.
Close to emotions stands the "beauty principle". It is quite intuitive: people tend to trust more websites and apps that look beautiful, for example have attractive and clean design. Of course, a pretty look won't make up for poor functionality and usability, but combined with good product development it definitely adds up to the overall user experience.
6. Serial position effect. Take sides
This rule might not be the most intuitive. It says that out of the row of objects, people pay more attention to the ones that are located on the sides, not the central one. That is why most apps try to place the most important buttons on the sides:
7. Von Restorff effect. The science of attention attraction
Behind this fancy word hides a simple rule: among the range of objects people tend to remember the one that stands out better, let's say, by having a different color. That's how a classic pricing page is organized: designers try to drag users’ attention to the benefits of the premium version by highlighting it with colors and contrast.
This is what most of psychology in UX design is about: attracting attention of the user. Here are some other principles that are commonly used.
8. Reading pattern. F-shape
People are used to reading pages following an F-shape, fading at the downside. This pattern influences location of the most important pieces of information and visual elements: the best places are the top part and left side.
Here is a picture of an eye tracker capturing the reading pattern. If you want to learn more on how eyetracking and other research methods are used in UX design, read our articles on UX research methods and tools.
9. Colors. The strategy of making accents
When we think of drawing attention, colors are the first thing that comes to mind. The most common color schemes used in UX design rely on psychological principles of perception.
The accent color has to be bright and contrasting to the rest of the page. What is important, it has to be used in small doses, no more than 10%. Look at the top of this page. Orange accent color is only used for buttons and links.
To sum up
These 9 principles are just the tip of the UX design psychology iceberg. And these rules should be treated only as assumptions: each decision has to be tested with users to prove right or wrong.
Want to learn more about how the assumptions are tested in UX research? Read our article about the UX research process!
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.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
