Breaking Down the Best: SaaS Application Interface Design Examples and Insights from Experts
0
mins to read
In the early days of online mapping, MapQuest was the dominant platform for getting directions. But when Google Maps was introduced, it quickly surpassed MapQuest in popularity due to its superior UI design. Google Maps’ clean, user-friendly interface made it easier for users to find their way around, and as a result, it became the preferred choice for many.
This example highlights the crucial role UI/UX design plays in the success of SaaS products. A well-designed interface can make the difference between a mediocre product and one that users love and rely on. And it’s not enough to be the first – you have to be the best.
At Eleken we specialize in designing cloud-based applications of different scales for various industries. To create consistent experiences and aesthetically pleasing interfaces, we get inspired by many great SaaS products and take the best out of them. In this blog post, we want to show our favorite SaaS application interface design examples created by popular cloud companies from which you can adopt something useful for your business.
Just like each person has their own exceptional talents, each example provided below stands out because of its specific characteristic. So, we will mainly focus on the most compelling UI/UX design features that we can observe within one specific SaaS app.
#1. Intercom's complex menu
When asked about her favorite SaaS UI design examples, the first thing our senior designer mentioned was Intercom.
"In this case," she says, "It's hard to point out just one specific feature. It's the general feel. However, if I have to choose, it's how they work with complex data and organize it, and the menu is the best illustration. The tables and schemes of the menu look great. It can be used as a template for literally any SaaS app or page. In fact, at Eleken, we used it as a reference quite a lot (well, I used it for a project, and then junior designers started doing it as well). There's nothing unnecessary there, the design is not new but still looks modern. They were among the first to use blue for the contrast, and it still works as well. So, if you need web design inspiration for a SaaS product, Intercom is your go-to choice regardless of the niche."
What we can learn from this SaaS design
- a clean look-and-feel is the most important aspect of a successful UI for SaaS;
- take a note of how Intercom organizes their complex, many-layered menu;
- using one color for contrast (for example, in buttons) will never get old;
- don't be afraid to look for design references outside of your niche and industry.
#2. Toggl’s product onboarding
Toggl is an easy-to-use time-tracking software that helps individuals and teams see where their work time goes, set billable rates, view reports, and so on. The main benefit of this app is that it takes minimum effort to use.
Their onboarding flow is not an exception. Toggl even mentioned simple onboarding as one of their main advantages on the “Our mission” page.
- The onboarding itself starts with a modal window that offers new users two options: start the guide or explore the product on their own. As well, there is a note that in case users want to skip the tutorial, they can always get back to onboarding with the help of a button in the navigation menu.
- The guide consists of 6 steps in a form of tooltips that teach the user how to deal with the platform’s key features.
- Finally, the user sees a modal window with congratulations on going through all onboarding steps. And again Toggl gives newbies the same choice as at the beginning: to continue the product tour and learn how to use some more features or start tracking projects on their own.
What we can learn from this SaaS design
We think Toggl’s design is a good SaaS onboarding example, which can teach us the following:
- Shorten time to value. Don't overload users with too much information at once. Divide the onboarding process into short tours that teach to use key features. Onboarding flows with a few easy steps help novice users understand how they can benefit from this product faster, therefore they retain.
- Add reminders. Modal windows that contain reminders about how to get back to onboarding let users learn when it’s convenient for them.
- Allow users to skip onboarding. Each tooltip and modal window allows users to skip onboarding which reduces the friction and makes the educational tour less annoying. Users should always feel that they control each function in an application.
At Eleken, we often help users feel the benefits of a product quicker by using Wizard, a design pattern that simplifies complex processes. For example, for Habstash we divided the sign-up flow into several separate screens so as not to place too much info on one screen and make it easier to perceive the content.
#3. Headspace’s accessibility options
Headspace is a cloud-based app for meditation that helps people manage stress, relax, find concentration, and stay healthy overall. Its colors, illustrations and typography often come up when our designers are asked about good web app user interface design examples. But one of its distinguishing characteristics is the design for accessibility, and we want to focus on it a bit here.
To ensure all the visitors can equally use the web application, Headspace launched an accessibility menu, a widget that helps people with disabilities easily perceive the content.
The menu is launched with one click on the “Explore your accessibility options” button.
The widget offers people to adjust the color, contrast, font, spacing, and more for those who have issues with their eyesight.
As well, there is a possibility to adjust the navigation. For example, users can search for the needed content with voice commands and listen to it with a text reader.
What we can learn from this SaaS design
- Taking care of accessibility is a must for any modern business as it allows a wider audience to obtain the information on your website/app and stay inclusive.
- The least you can do is to provide sufficient contrast, clear navigation, and well-labeled buttons so that users interact with the app easily. However, consider creating a separate menu for disabled people.
From our personal experience, our designers are always super attentive to accessibility in design. When we were conducting a UX audit for TextMagic, for example, we analyzed each interface element to make sure the app is easy-to-perceive, and the content is legible.
#4. Figma’s landing page
Figma is a digital UI/UX design tool for individuals and distributed teams’ online collaboration. Our team admires this platform a lot and we think their SaaS landing page is worth your attention.
The first thing that catches the eye on Figma’s landing page is the headline that communicates the product's main value proposition and an interesting font that is used for this heading.
As well, Figma acquaints its prospects with the app interface by presenting the use cases right on their landing. And in general, the page is full of interactive elements that encourage visitors to explore the website.
What we can learn from this SaaS design
- Use eye-catching typeface. Appropriate size and a unique type of fonts help to highlight the information on a website and make visitors’ feel that this design was made specifically for them.
- Present how the app works. Placing real use cases on the page allows visitors to understand different ways of how Figma works without the need to read long copies.
- Create consistent brand identity. Figma’s target audience is people who prefer perceiving visual information. That’s why the Figma’s team incorporated animation, colors, and shapes into the website’s interface, allowing them to create a non-boring user experience and consistent visual language for website visitors.
#5. Typeform's template gallery
Typeform is a SaaS platform that helps users create engaging and interactive online forms and surveys to get more responses. To make this process fast and simple, Typeform provides a vast gallery of survey & questionnaire templates, from which people can choose the one that suits their ideas best.
Once the user gets to a template gallery, they can search for the needed questionnaire within the list of categories, by typing the keyword in a search bar, or by scrolling through all templates manually.
When users choose to preview some specific template, there will be short info about the purpose of this form, the number of questions, and the approximate time needed to fill all the information in.
As well, all templates are customizable. Customers can adjust them to their needs with ease.
What we can learn from this SaaS design
The use of templates decreases the mental effort people need to take to create something new, and therefore users can reach their goals quicker. Application design as a whole works for it.
Typeform’s templates have all characteristics needed to shorten users’ time to value.
- Make sure your templates are easy to browse and well-structured. Typeform has a clear list of categories and a search bar, so it’s a no-brainer for a person to find the needed template as fast as possible.
- Go for minimalist design. There are no useless elements in Typeform’s templates that exist only for the aesthetics. Each interface element and piece of content has its purpose. The right use of white space and sufficient contrast focus doesn’t create distractions for the user and make templates light, and easy to perceive.
- Make sure the templates are easy to edit. The template editor’s design is intuitive, as each button has a clear copy so that even new users can quickly understand how to make changes and customize forms according to their needs.
At Eleken we also had the experience of creating a template gallery with a minimalist design for Process Place, a workflow management application. A gallery of process templates, organized as illustrated cards, is available for the users. They can also create and save their own.
#6. Asana’s celebrating user’s success
Managing regular work tasks isn’t that fun, so to somehow make this routine process more engaging and cheer up users as they succeed with another task, Asana came up with celebration creatures. After enabling the celebration feature in the Profile Settings, users will see a unicorn, yeti, narwhal, or phoenix congratulating them on completing a task.
The creatures appear randomly, not each time, but the more tasks are completed the higher is the chance to meet them.
What we can learn from this SaaS design
- Of course, it’s not a typical feature and not a compulsory one. Still, we believe that adding such fun and engaging design elements is a great way to improve UX and cheer people up through their busy workday. Besides, we think that such small but interesting design ideas help the app stand out on the market.
For example, for Process Place, we decided to add a funny image with applauding sheep that users see once they completed an onboarding sequence.
#7. Buffer’s upgrade prompt
Buffer works on a freemium pricing model, that is, provides its users with a free trial period. The goal of the trial is to show users the value of the product and then convince them to upgrade.
UI/UX design plays an essential role in prompting users to buy a premium subscription. Buffer starts encouraging free users to upgrade from their first interactions. Once the user signs up for a free trial, they’ll be sent to the “My Organization” page to connect their social media accounts. Right there, they’ll see a bright blue “Upgrade Now” CTA and the number of days left in trial. As well, Buffer shows features available for premium users only (connecting Pinterest account) to give more reasons to upgrade.
An upgrade reminder stays available at the top of the Dashboard screen so that users keep this option in mind during their free trial.
The pricing tier of the Pro Plan itself also has a great design. It presents the plan’s advantages in a bulleted list that is easy to read. As well, it highlights the annual plan to attract users’ attention to it.
What we can learn from this SaaS design
- Mind the place of your CTA button. Having an upgrade button on the top of the screen is a great idea as it is easy to notice, but at the same time doesn’t distract users from completing their tasks.
- Make it easy to upgrade the plan. Users don’t have to spend their valuable time searching for the CTA, it’s easy to notice and quick to access. Once they choose to upgrade, there is a modal window with key information only and one field to fill in.
- Highlight the plan that would bring the most value to the majority of your customers. Buffer does this with its annual subscription. You can choose whatever works for your business.
#8. Invision’s error prevention modal window
Invision is a no-code cloud-based design platform used by designers and developers to create and manage prototypes. Though it’s quite easy to create a prototype with the help of this platform, it still takes precious time and effort, especially when one deletes their prototype by mistake. To avoid that from happening, Invision’s design team decided to create additional friction in this process.
To completely delete a prototype, users have to manually put checks in three boxes. This way, the business makes sure their customers think twice before getting rid of their creation.
What we can learn from this SaaS design
To make the user experience better and customers more satisfied, it’s important to help users avoid making mistakes. Invision’s error prevention window copes with the above issue very well. So, when designing your product, try to:
- Eliminate user frustration. Intuitive design helps people quickly complete their tasks, but sometimes relying on automated thinking can lead to making irreversible mistakes and unhappy users. Asking people to confirm the action ensures they read the information next to the checkboxes and gives them a chance to stop making wrong decisions.
- Use clear visual communication. Here, the modal window has the warning icon, sufficient contrast, clear and straightforward copy. A CTA stands out from the rest of the content, and a greyish background that helps attract users’ attention.
- Use the checkboxes to ensure that users clearly understand what decision they make.
Error prevention methods in design can be different. For example, for the Habstash project, in the “Create an account” screen we added a list of password rules, points that fade away once the password matches with the requirements to prevent users from making mistakes and explain what we expect them to do.
#9. Blinkist’s card design
Blinkist is a SaaS book summaries platform that quickly explains key insights from non-fiction books. The app focuses on the mobile format and has a great mobile app card UI design.
Cards tend to bring better scrolling rates in comparison to lists. Therefore, Blinkist uses card design to present a brief book overview. They feature the book’s title, image, author name, a short description, and CTA buttons.
What we can learn from this SaaS design
- Use cards to make a design more responsive. Cards suit the mobile design well because of their rectangular shape which is highly transformative.
- You can also use cards to help you to attract and keep users’ attention. They have bright coloring that grabs attention and contains small pieces of information which makes them easy to read and understand.
- Cards create consistency. All cards are unified by the same concept and similar visual design which makes the app look neat and consistent.
We also use card design at Eleken for the same purpose. For instance, when working on Tendrx, a freight tendering platform, our designers chose cards to represent tenders which are central elements of this cloud service.
#10. Evernote’s new feature presentation
The feature we want to discuss here is the way Evernote presents updates to its users. Once the user wants to learn what updates the app has prepared they can click the “What’s new” button and see a popup with the list of new features.
When the user chooses the specific feature they want to discover, they are shown a tooltip with a short description.
In case this short explanation is not enough, there’s a “Release notes” button at the bottom of the “What’s new” modal window that provides a detailed description of each update.
What we can learn from this SaaS design
- Use checklists smartly. Presenting updates in the form of a checklist allows Evernote’s team to clearly inform users about the number of new features released and explore them in portions at a convenient time. As well, by checking the boxes, it’s easy to track what news is left to discover.
- The division of the “Release notes” section into “new” and “fixed” features. Creating these two categories lets users quickly and easily perceive the information.
- Use patterns. Evernote uses such UX design patterns as tooltips, checklists, and hotspots to drag users’ attention to the needed info. UX patterns are reusable solutions to common problems and implementing them in your design helps users quicker adopt the product.
We also use calendar patterns widely in our projects. For example, for Hirerise, an applicant tracking system, our designers used a calendar pattern similar to the one used by Google. That’s how people can immediately understand how to interact with it.
#11. Hootsuite’s net promoter score survey
When Hootsuite launched a redesign of Bulk Message Uploader, this SaaS company decided to learn their users’ opinions with an NPS survey. Users were shown the survey in case they chose to get back to an old version. Here’s how it looked:
What we can learn from this SaaS design
- Use surveys at the right time. Hootsuite chooses to ask users for feedback when they want to return to the Bulk Message Uploader's old version and catches them at the right moment, which increases the chances users will explain the true reason for their decision.
- Ensure good copy. The text inside the survey is brief and on point. Hootsuite states that the survey lets them become better and encourages readers to help them by filling in the survey.
#11. Miro's and Figma's clean workspace
Both Miro and Figma are household names in tech and creative industries. When asked about his favorite application interface examples, our chief product designer praised Miro and Figma for their uncluttered, to-the-point workspace. In both apps, the focus is on the content, not on the design tools. In Miro, this is achieved with the floating buttons, which leaves the workspace fully visible. Figma's workplace also displays only the necessary tools and features and doesn't seem overwhelming.
What we can learn from this SaaS design
- Your design should not distract users from their tasks.
- If you're building a product where workspace and/or visualization are important, the less tools and settings catch the eye, the better.
#12. Slack's side-by-side view
Another of our chief designer’s favorite app interface examples is Slack. He praised it for being straightforward and versatile, but one feature liked particularly was the possibility to have two tabs open: for example, one with dialogues, and the other with threads. Of course, split or side-by–side screen views are not necessary in every app (although they might get extremely useful in something like Procreate or other painting or visual editing apps – anything, really, where you have to keep the references in front of you). But, if they are beneficial, it's up to a UI designer to make sure all parts of the workspace are clearly distinguished and legible.
What we can learn from this SaaS design
- If split-view is something your app can benefit from, be sure to think through the visual hierarchy and the ways to distinguish visually different tabs or sections.
#13. Adobe Express' icons
Icons are a vital part of visual communication, and no one has it pinned down better than Adobe. Here, simple minimalist icons manage to communicate quite complex commands and operations without making the menu look too cluttered.
What we can learn from this SaaS design
- Icons should be well-designed and thought-through part of your brand identity and visual communication.
- If you have multiple connected products (see: Adobe Creative Cloud apps), make sure your icons are consistent, or at least similar enough, across all of them.
- You don't need complex colorful icons for them to be readable. Often minimalist works just as well.
- Don't forget to add textual cues where the icon might be misunderstood.
#14. Spendee's dashboard charts
Next on our list of noteworthy app user interface examples is Spendee, a personal finances app. Designing a dashboard, especially for B2C apps, might be a tricky task. Spendee manages it quite well. It allows the user to switch between different types of data visualization, while making sure its graphs and charts are easy to read and informative.
At Eleken, we've worked quite a lot with different types of dashboards, and know how much of a challenge it can be. Check our article on dashboard design examples if you want more information on how to design an efficient dashboard.
What we can learn from this SaaS design
- Colors, icons and typography – you can use whatever it takes to make dashboards and your application interface design in general both informative and visually appealing.
- When possible, use different tabs for different types of data/graphs.
#15. Prequel's sign-up page
Prequel is one of the more fun and creative mobile app user interface design examples on our list. It is a photo editing app, targeted at photographers, SMM professionals, designers and bloggers. Creative audience demands creative decisions, and Prequel delivers. During the sign-up process, the user not only sees the high-quality, appealing photos, but also gets a chance to see Prequel's capabilities in motion.
What we can learn from this SaaS design
- Demonstrating your product's capabilities and selling points during the sign-up/onboarding process right away is a great chance to entice the user and make sure they do actually sign up.
- If it suits your industry or niche, try to make sign-up process an entertaining part of the user's journey instead of a chore.
#16. Portfoliobox's interactions
Interactive elements and animations are a great way to grab and direct the user's attention. For Portfoliobox, targeted predominantly at creative professionals, it is especially vital as it emphasizes their expertise and serves as an example of the service's capabilities.
Of course, you don't have to go to such lengths if your audience doesn't demand it. Still, keep in mind that animation or catchy interactions can bring your design to the next level.
What we can learn from this SaaS design
- Animations and interactions are a great way to grab the users' attention.
- Playing around with scrolling animation can boost your landing or home page visuals.
#17. Squarespace's hover highlights
Using different colors to highlight the hover state is nothing new. Using low-opacity colored layers to make images work better with the text on them is also a known technique. Here, however, they work in tandem to create a card-based, creative and colorful design.
What we can learn from this SaaS design
- If you think that using photos or illustrations as navigation items is something you might want to do for your product, take notice of how you might visualize different states of hover and activation.
- While some might argue that throwing a 50%-opacity fill or gradient on a photo is overdone at this point, there are still ways to use it smartly and make it look fresh.
#18. Notion's hover buttons
Notion is one of those products in which a clean and intuitive UI is vital to avoid overwhelming the users. With loads of data and options available, however, avoiding the interface looking too cluttered was a challenge. One of the ways Notion addressed it is by relegating most action buttons to appearing visually only on hover. Editing or moving the item or adding a new one only becomes available when it might be relevant to the user.
What we can learn from this SaaS design
- If you have to squeeze a lot of data into your design, consider hiding the buttons or other actionable items. They should be easy to access, but they do not necessarily need to be visible all the time.
#19. Mojo's template navigation
Mojo is another app which has to entice and retain the creative ones. While many similar platforms demonstrate its functionality, Mojo went a step further. The tab of templates geared towards creating Reels and TikTok videos looks and has to be navigated just like these platforms. This way, the app takes it a step further and showcases how the user's project might look like in its natural environment.
What we can learn from this SaaS design
- If that's applicable to your product, demonstrating during the onboarding process the results the users might achieve with your app is a great way to emphasize your value.
#20. Later's colors and gradients
Times when gradients were the number one tool might have passed, but you shouldn't underestimate the power of well-placed and thought-out gradients still. In their web application interface design, Later does it both with the background and the button, without making any of them look over-the-top.
At Eleken, we often use gradients to emphasize the buttons or important info. Here you can see how it works in LittleDate design.
What we can learn from this SaaS design
- Don't overuse the gradients, but don't be afraid of them either. When done right, they are a great way to draw attention to the important navigation elements or information.
#21. Todoist and Mailchimp's illustrations
Illustrations are an integral part of any UI design. Even if you're going for the minimalist and straightforward app interface design, illustrations can bear both decorative and communicative functions. In recent years, after Facebook, the trend for vector, colorful flat illustrations became a staple of the corporate styles (to the point that some illustrators build good careers out of them while the others started to loath the style). While there’s nothing wrong with this style, if you want your product to stand out, and/or it is targeted at the creative industry, you might want to experiment a bit with different styles of illustrations.
At Eleken, we use different types of illustrations for various projects. One of the most fun is the one we designed for the HabitSpace app. If you're designing a B2C product, original illustrations are almost a must.
What we can learn from this SaaS design
- Illustration can be a distinctive part of your visual communication and style.
- If you wondered whether you should have illustrations, you probably should.
- If you automatically wanted to go for the flat vector illustrations, consider other options, especially if your product leans toward a more playful or creative vibe.
#23. Zapier's sequence builder
Zapier helps to automate one's processes, allowing users to do custom action sequences for that. This is presented in an intuitive form of the blocks adding to each other.
What we can learn from this SaaS design
- More often than not, chronological or logical sequences can be visualized in an easy-to-digest format, and it is your responsibility to learn how. For example, if using your product requires building complicated custom user scenarios, use cards and visualize the actionable items so that it cues the user and not confuses them.
#24. Vercel's integrations
Vercel uses quite large and eye-catching cards to visualize its integration possibilities, and splits them into categories according to their niche. The simple app interface here is legible and helps the user to navigate their integrations without fear of missing or forgetting anything.
What we can learn from this SaaS design
- If integrations and partnerships are an important part of your product, visualizing them through cards is a good way to lay them out for the user without cluttering the screen.
#25. SoftStart's typographics
Typography is one of the elephants that bear good UI design on their spines. The only reason we haven't mentioned it earlier is that often good typography simply goes unnoticed. It's only when the headlines become hard to read, the paragraphs get too long, and the blocks of text squished together, we start noticing something's wrong.
Softstart managed to use a somewhat original font without making it unreadable or unsuitable for the context, so it's a good moment to remind you of the typographics' importance.
P.S. Our senior UI designer also adds that pastel color palette with black as an accent color is trendy now. Don't miss your chance to jump on the wagon.
Eleken's work on redesigning Photobooth included adding a secondary font (Avenir Next) to the company's brand Sofia Pro to make visual hierarchy between the fonts more clear. This might look like a small thing, but it goes a long way in ensuring smooth and flawless user experience.
What we can learn from this SaaS design
- Typographics are vital for good UI design.
- Make sure everything is readable.
- Use a different font to emphasize the headlines or the company name, but don't use more than 2 to 3 fonts.
The key principles that make SaaS design great
Researching SaaS competitors is an important part of the product design process and its main purpose is to single out the best design decisions and adopt them in your product. Therefore, here are 4 main lessons we can define from all the above examples.
- Mind simplicity in your design, do not overwhelm the interface with unnecessary elements.
- Never forget about people with disabilities.
- Use common design patterns to help users quickly adopt the product.
- Offer users ready-made templates to shorten their time to value.
A well-thought-out user experience and user interface design is a powerful tool for any application to deliver the necessary message to the end-users. With effective and eye-catching UI/UX design, your customers are sure that the product you are offering is practical and provides efficient ways to complete their tasks.
Contact Eleken to help you with building a unique SaaS application with effective and meaningful UI/UX design so that the customers can make the most of your service.
Top Stories
Try, Then Try Again: Why Iterative Design Process Brings the Finest Results
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.
.png)
How to Create a Strong Product Vision (Examples and Templates Included)
We all know the Johnson & Johnson company that sells pharmaceuticals and consumer packaged goods. In the early 1980s, their best-selling product was Tylenol, a painkiller that brought around 19% of the company’s profit.
But a terrible accident has happened and 7 people were reported dead after consuming Tylenol. As it occurred later, an unknown suspect put cyanide capsules in some of the Tylenol bottles. Johnson & Johnson did not wait for further escalation and immediately called back all Tylenol. They have lost 100 million dollars, but saved more people from risk.
For Johnson & Johnson, it was a tremendous hit that could end the story of a hundred years of success. However, the company’s reaction was immediate and brilliant. And thanks to their precise actions taken, they quickly won back the users’ trust and still remain the leader in their niche.
How did the company know how to react and how they so quickly took the decision of withdrawing the dangerous product without proof that all Tylenol was poisoned and knowing it will cause a huge loss of money?
The answer is that in times of crisis Johnson &Johnson has turned to their vision statement, which clearly indicated that their responsibility towards customers is their highest priority. All their actions were aligned with their vision and it let them survive the crisis.
This is one of many examples showing how a short vision statement can define your success and even save the company. This small and often underestimated document is, in fact, one of the crucial pillars for your product development. A well-defined product vision provides direction, focus, and organizational clarity.
As a digital design agency working mostly with SaaS businesses, we also have noticed that teams with clear product vision are more motivated towards a common goal and, as a result, more successful.
In this article, we would like to talk about how to create a good product vision for your product or startup. And we have prepared some solid examples and product vision templates as a helping hand, so keep reading.
What is product vision?
There is no universal definition of product vision. It can be a statement or a short document. But most important a product vision should describe the purpose of your product, highlighting what problem it solves and whom it serves. A well-crafted product vision reflects what direction you want to go in and how people will benefit from your product.
We can categorize product visions in two groups: functional and aspirational. As the names suggest, these groups represent different types of goals that are designed to push teams in different directions. We will give examples of both later, but it is up to you what type of product vision represents your goals better. You can also combine both in a product vision document.
The product vision statement/document represents your product’s end goal. It’s what you want to accomplish, how you want users to think of your product, and the position you want to be in. That is why product vision is a great filter for all your further decisions should go through. And with the help of such a filter, you can always estimate if the product is meeting its objectives.
Why do you need a product vision?
If you are a startup founder or a company’s product owner, you are the first person to understand the importance of product vision. It's what gives you focus and energy. A clear vision allows you to identify the opportunities in any market and take action with confidence.
It also helps you to lay out your goals and keeps your team heading in the right direction.
The product vision provides employees with a common goal. It helps them understand the purpose of their jobs and motivates them to work harder. A solid vision aligns people, keeps everyone on the same page, and as a result, reduces potential conflicts.
If you fancy the agile methods then you’ll definitely want to have a product vision as a North Star for your team.
Product vision also improves productivity. No kidding. The alignment between stakeholders and within the team leads to:
- shorter prioritization meetings
- simpler agreements on implementation details
- faster minimum viable product (MVP) delivery
Last but not the least, product vision is one of the most powerful tools in your marketing arsenal. The product vision is the most important tool for any company selling a solution. It is used to articulate your product's mission. Product vision gives customers an understanding of what to expect from the company and its products.
We hope that by this point you are already convinced that product vision is worth investing your time and effort. But how to craft a strong vision for your product? Let’s find out.
What makes a good product vision?
The main problem with product visions is that they often get lost in the process of new feature releases, bug fixes, and changing requirements from stakeholders. It's like this big whiteboard full of hopes and dreams getting dusty over time. How can you make sure that your product vision withstands time and challenges? Here is what makes a strong product vision:
- It highlights your single main goal.
- It is short, precise and accessible.
- It does not turn into requirement specifications.
- It captures the team's excitement and shares a sense of purpose.
- It remains valid even if the product slightly changes direction. As the father of Lean Startup Eric Ries said in his book "A pivot is a change in strategy, not vision".
If you have ideas of where you want to take your business, now is the time to write them down and create your product vision.
How to create a product vision that rocks
For starters, let’s agree that a good product vision is not something that a product owner crafts in a vacuum. Even if you are a solo founder, it still makes sense to invite people who can validate your ideas and can help you with creating a product vision.
For bigger teams, relevant stakeholders, key team players should be involved in the co-creation of a vision. Gather the team for more creative brainstorming and make sure that everyone takes this meeting seriously. Motivated brainstorming group will deliver the best results.
Clear agenda for the meeting will help to keep everyone focused and get a product vision draft ready by the end of this strategic meeting. We would recommend several techniques that can help you define a product vision.
One effective technique is to ask everyone in the group to write what is their vision for the product. Then participants hand the note to the person next to them and everyone edits the statement they received. Repeat the procedure several times. Compare the statements the group has created and see what they have in common.
Contrast your ideas with other viewpoints or perspectives. Think of what you want to accomplish but also of what you won’t be doing on this path. For example, ‘What areas of the product will we develop?’ vs ‘What areas we will not focus on?’. Such practice is very useful in solidifying the vision.
Here are a few more questions you can ask to figure out what your product vision is:
- What's your first impression of this product?
- What do people need and want from this product?
- How many people out there have the problem that our product solves?
- Where is your product in the current market?
- Does the technology exist to make this work?
- Who is the ideal customer for your company's product?
- Why will they buy this specific solution instead of another one?
Another helpful technique is to use an empathy map. It’s one of the design thinking practices that deepens your understanding of your users and aligns the team around a common idea. That brings you clarity and results in a more meaningful product vision.
To have better results from the empathy map, conduct simple user surveys in advance. The data collected leads to a deeper understanding of potential customers and as a result, a stronger and moe realistic product vision. The research you do for your product vision will help you later with your product design, so it makes sense to invest your time in understanding your users.
You can write the product vision from scratch or use the special tools that can help you to shape the vision. For example, Mural offers templates for product vision.
When it comes to style, use the customer language for your product vision. Don’t overwhelm users with technical jargon. Explain your idea in very simple human words and write from the heart.Some outstanding examples of product vision
Every product vision is unique to the product being created. Remember we talked about functional and aspirational visions? A typical functional product vision answers the most important questions about your product in a simple and structured way.
Image credit: ProdPad
Your public version of product vision may be less straightforward and sound more like an inspiring intention. Here are some product vision examples from world’s best tech companies that should give you a good sense of how it can sound like.
Roblox
Roblox is an online game platform and game creation system.
Image source: Roblox
Here’s what the company says: “Roblox’s mission is to bring the world together through play. We enable anyone to imagine, create, and have fun with friends as they explore millions of immersive 3D experiences, all built by a global community of developers”. It’s a simple, yet a crystal-clear statement that explains how and for whom Roblox is developing its product.
Camtouch
Hardware startup Camtouch builds a solution that turns any screen into an interactive one.
Their vision is to “Make the world interactive with accessible solutions”. This statement reveals the company's intentions for the global market. And they do change the game-based learning field for the good.
Zoom
When Zoom entered the market, there were well-established competitors like Skype and Google Hangouts. But Zoom’s vision was to “Make video communication frictionless”. And that’s exactly what they did and how they won millions of clients over the world.
Falcon 9
Who hasn’t heard about Falcon 9? You know, the first orbital-class rocket capable of reflight. Here’s how SpaceX presents its vision for this product. While Zoom and Camtouch were examples of more aspirational ones, Falcon 9 vision is a great example of a functional approach.
Image credit: SpaceX
iPhone
In 2007 Steve Jobs a great visionary presented iPhone. Smartphones were already on the market. However, Jobs started his keynote by saying, “Every once in a while, a revolutionary product comes along that changes everything”.
This was Apple’s vision for the first iPhone: “A revolutionary phone, an iPod, and an internet communicator together in one product. Apple reinvents the phone”. And they did. The touchscreen and access to the internet have forever changed the way we use phones. It also influenced the the design industry setting up a demand for responsive design. And it all started with a vision.
Image source: Blake Patterson on Flickr
Product vision statement template for you
After such great product vision examples from world-known companies, it’s natural to feel pressure to craft your own one. To help you overcome the fear of the blank page, we have collected some product vision templates.
Product vision template
It’s okay to eliminate the part about the competitors’ products in your public vision statement. But having that defined for yourself armors you with awareness.
A product vision statement is a short version of a product vision and focuses more on a final goal. It can go like this:
(Our product) is designed to (achieve these goals)
current solutions are not meeting (these goals)
These examples of product vision templates should help you remain laconic and won’t let you miss an important point.
In conclusion
A solid product vision is a strong strategic tool that you want to have in your product arsenal. It can be a document, a statement or even a video that sets out who the product is for, what problem it solves and where it adds value to the users. It is essential to always keep your product vision statement in front of you to remind yourself why you began this journey.
We hope that our guide was helpful and you are ready to begin building your product. Eleken team is there for you to create the design that would reflect your vision. Don’t hesitate to contact us.
To learn more about strategic development of a product read our other article on product roadmap.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
