Prototyping is a widely used technique for testing and evaluating ideas at the earliest stage of product development. This is the best way to visualize the future product, demonstrate it to the client, and get valuable feedback.
Eleken is a team of product designers, and when developing a design solution we follow an iterative process which means we always test pieces and versions of the design solution and refine it along the way until, as the final result, our client gets an aesthetically pleasant and useful product that people love.
We decided to share our experience and shed some light on the question “What is a UX prototype?”. To succeed in this intention, in this article, we are going to tell you about the UX prototype definition, its importance for the design process, and your business in general. Besides, we will analyze the main types of prototypes, methods, and tools we use to create them.
Definition and benefits of the UX prototype
A prototype is a rough version of a product that helps you understand what concept, user flow, and layout the design solution has, and how the future product is going to work.
UX design prototyping as a process is supposed to take place after you create wireframes (basic structure of the product interface) and before you’ve got the final product.
Making prototype a part of the design process allows designers to:
- Save budget. Receiving customer feedback at early stages and making improvements to the prototype takes almost no cost as opposed to making changes to the already implemented product.
- Save time. A well-developed structure and arrangement of blocks in the future will help the designer not to make great changes to the finished layout since the main part of the project will be coordinated.
- Simplify the workflow. When directly creating a page design, the developer acts according to the plan. They don’t need to think about how to correctly arrange blocks and calculate the distance to individual elements.
- Facilitate interaction with the customer and other team members. When developing a design, a prototype is a kind of technical requirement, which has already been agreed upon with the customer and other project participants.
- Help the business owner increase conversion. UX prototyping means not only designing individual pages/screens of a product from a usability point of view but also drawing up a business strategy. The correct placement of the CTA and navigation elements, banners with promotions, and so on affects the conversion.
UX prototyping methods
There are many ways you can create a prototype. We usually divide prototypes according to their level of fidelity (the level of similarity with the final product) and the designer chooses the needed one depending on the stage of the design process and the desired goal.
For example, in case we need to roughly explain to the client how the user will move from one task to another when interacting with the product, a UX low-fidelity prototype will work well but if we need to run usability testing with the focus group a high-fidelity prototype will be the right choice.
In this section, we are not going to discuss every type of prototype but we will talk about the three most widely used methods of user experience prototyping:
- Paper prototyping
- Digital prototyping
- HTML prototyping
Paper prototyping
The easiest and fastest way to prototype is by hand drawing on paper or something else (whiteboard). This prototyping method is great to get a first impression of your product concept.
Paper prototyping refers to the low-fidelity type, so don't worry about not being a designer, the implementation does not require any skills, just a pencil, paper, and your desire. But such prototypes, as a rule, have a low degree of elaboration, they contain only the most important information and have several restrictions (hard to interpret design, you can test paper prototypes only in person). Still, the lack of details in a paper prototype allows you to focus more on the idea of your product rather than how the interface looks. After all, at the very beginning of development, it is unlikely that you will need some feedback about color or design.
Creating paper prototypes is a collaborative process, that’s why it positively affects team communication and is a good starting point before interaction design prototyping.
Advantages:
- Fast
- Simple
- Affordable
- Facilitates team communication
Disadvantages:
- Difficult to make edits to an already finished drawing
- Users should have a good imagination to correctly understand how the product is going to work
- Can make complex issues look simple
- Not all elements are displayed on the prototype, a lot of details are missing
To sum up, paper prototyping is suitable for the early stages of product design, when the project vision is not that clear yet.
Digital prototyping
Digital prototypes refer to high-fidelity prototypes and are created with the help of special prototyping apps or software (we will talk about them a bit later).
This method is widely used, because digital prototypes look realistic, which allows you to properly test the majority of interface elements. Moreover, digital prototypes are easy to create in comparison to coding.
Our team uses this method of prototyping at the stage when we have a clear concept and a well-thought-out user flow of a product. For example, when we were working on Textmagic (customer experience platform) we designed our prototypes in Figma - a popular graphics editor and prototyping tool. Each piece of a prototype was then shown to users to get feedback and then passed back to us to make further improvements or develop new ideas.
Below you can see a piece of a prototype that Eleken created for this project. It shows the Search function.
Here is a list of basic prototyping tools you can use in your design process:
PowerPoint/Keynote
It's easy and simple to create a digital prototype using Microsoft Office PowerPoint or Keynote. If you are not a designer, we recommend starting with a program that you have already mastered and have on your desktop, without complicating your life with video tutorials for working with some professional apps.
Price:
- Keynote and Mac PowerPoint are free for Mac and iOS.
- Microsoft 365 subscription for Windows (that includes PowerPoint) has a 1-month free trial then the price is $12.50 per user/month (annual commitment).
Template with sketches of smartphone
If you need to visualize the idea of an application or other digital service, then sketches of smartphones will help you to get started. Similar templates with or without grid can be downloaded from Sneakpeekit. A great way to depict a screen design to test the future look of a product.
Price: Free
Download templates: https://sneakpeekit.com/
Invision
A simple and easy-to-use user interface makes Invision a perfect tool to get started. The intuitive software gives you the ability to download screenshots and link them to each other. As well, Invision has a function of shared prototyping, where you and your colleagues can work together to share comments and suggestions, full synchronization with other programs, and much more. In addition to its functionality, Invision has an excellent blog that provides tips for building your prototype.
Price: Freemium (free version with paid add-ons)
Sketch
Sketch was created solely to transform your sketches into sleek designs. The program offers one of the simplest user interfaces on the market that sets it apart from other similar software. Sketch also has a variety of templates to speed up prototyping. Having a huge library of resources to use in your projects is just one of the many benefits of using Sketch. Not only is it extremely functional, but it also has a community of like-minded people who share their designs, helping each other speed up the design process. All available resources are located at www.sketchappsources.com. The only downside to Sketch is that it is only available on Mac computers
Price: 30 days free, then $ 99.00/year
Download: https://www.sketch.com
Figma
Figma allows the team to collaborate on a project online. With Figma, you can create both simple and complex prototypes. Figma has over 1 million registered users from all over the world, so the service can be considered a serious competitor to traditional prototyping programs.
Price: basic plan - free, pro - from $ 12/month
Download: www.figma.com
Adobe XD
Adobe Experience Design is an interface development program from Adobe Systems. Supports vector graphics and web layout, ideal for prototyping sites and applications. Wireframes, animations, storyboards, sitemaps and flowcharts, team collaboration, UX prototype testing right on mobile - these are all Adobe XD features.
Price: Free trial available for 7 days then starting at $ 9.99/month
Download: www.adobe.com
And of course, the same as with paper prototyping digital prototyping has its benefits and drawbacks.
Advantages:
- You can change and transform digital prototypes as many times as you need and it won’t take long. Moreover, you can store multiple versions of a prototype in one place.
- Modern prototyping tools provide high accuracy, so you can visualize how the product will look and behave without actually building it.
- There are a lot of prototyping apps that let you share the project and work together with a team.
Disadvantages:
- It takes time to learn how to use a specific prototyping software
Digital prototypes look very similar to the final version of the product, they can be dynamic and animated. That’s why it is better to use them not at the initial stages of the product design process, but at the stage when you are sure about the user flow the product will have.
However, a digital prototype doesn’t behave like a final product. At this point, it is worth moving on to discuss the final prototyping method - coding.
HTML prototyping
Image credit: medium.com
HTML prototyping is the most complex but the most precise method. This type of prototype looks the most similar to the final product (it also behaves like the final version) and that’s why it allows you to collect the most objective customer feedback. But, of course, to create it, you (or your designer) have to possess the required coding skills.
Advantages:
- HTML prototype is very realistic, that’s why testing it allows you to collect the most precise user feedback.
- It serves as a base for further coding of the future product which simplifies the work for developers.
- It is possible to test such a prototype on various platforms and devices.
Disadvantages:
- Requires a high skill level. HTML prototype will be good only if your knowledge of HTML is sufficient enough.
- Takes more time to create than a digital prototype.
HTML prototyping is great for usability testing and is typically used later in the design process. But as it takes more time and resources to create such prototypes, they are not always profitable and worth creating.
When choosing what kind of prototype to create, always pay attention to the project specifics and preferences of your designers.
Final tips for creating prototypes
The ease of use of the interface elements, the level of conversion, and the perception of the product as a whole depend on the quality of the created prototype. Here are some tips for those who are interested in developing a high-quality design solution.
1. When creating a prototype, consider the opinions of other specialists.
In the design process, not only one designer is involved, but specialists in different fields. Therefore, when prototyping, consider the involvement of other performers: a copywriter, a marketer, an SEO specialist, and other project participants.
2. Always have your target audience in mind
Despite the assumptions of even the most professional specialists, it often happens that some design elements just don’t work: there is no proper response from users, sales do not increase, customers do not notice functional elements. Therefore, after creating a prototype, test it on your target audience. This could be a focus group or some other people who would use the product for their purposes.
To sum up, each time we provide UI/UX design services to any kind of project we test and refine the design solution, so we know for sure that integrating prototyping into your design process is a smart and cost-effective decision as it allows you to understand the way customers perceive your product, therefore save your time and budget. So, drop us a line, in case you need some help in creating an effective UX prototype that will later become a usable product.
Top Stories
Bring Your Design Mess to Control With UX Design System
“You can’t innovate on products without first innovating the way you build them,” — says Alex Schleifer, VP of Design at Airbnb.
As a UI/UX agency, we at Eleken can say it’s more than true for product design. However, it is not always obvious that it’s time to innovate the way you work.
You can see some indirect signs, though.
Signs, like this conversation from above between Hubspot team members. Looks like some degree of chaos holds their design back, right?
Hubspot thought so too and conducted a design audit.
The audit revealed a ton of junk in their attic. For example, Hubspot had 16 different styles of modals, 6 different primary buttons, and 100+ shades of the color gray in their app.
To break through their operational ceiling, Hubspot created a design system called HubSpot Canvas.
What is a design system?
A UX design system is a collection of standards to manage scaling companies’ design. The design system reduces redundancy by creating a shared visual language across different pages and channels. A design system includes any or all of the following design system components depicted by Audrey Hacq:
Why build a design system?
Design systems offer two major advantages that are worth your efforts. Those are velocity and quality.
First, building a design system, you get a unique opportunity to solve each design challenge once (instead of every time it comes up) and make the solution available to anyone in the team. Danny Forst from American Express says that a design system had facilitated and accelerated their product design process. It enabled them to jump from traditional wireframing to immediate high-fidelity design.
Second, a pattern library that a design system possess enables a better user experience — especially for large companies. Usability and learnability improve when similar interface components look and function in a similar way.
When is the right time to start building a design system?
In theory, the sooner the better. It’s “in theory” because no one ever started a design system until they tripped over their 100 shades of gray.
As a startup scales, so do design teams, as well as the amount of code, and the number of features. Designers start to solve already solved problems, create redundant entities, and, most importantly, decrease user experience for people who have to get through those dozens of different fonts and buttons.
Chaos emerges and builds up, starting to create roadblocks for a design process and affect the performance of digital products. Finally comes a moment when the pain from chaotic design is stronger than a wish to preserve the status quo. Companies realize it’s time to bring order to the chaos before their business gets ruined under the chaos’ weight.
When we say “ruin”, we are not being metaphorical. Science says 14% of startups fail due to bad organization, and 9% more fail due to problems with scaling.
A design system becomes steel greed that supports the piling product from collapse.
Now, how to create a design system?
Start by running a design audit, like Hubspot. Explore and codify what you already have designed. If you found ten different buttons being used alongside, choose one and document it as a standard design component.
To design system architecture for UX, we recommend using Brad Frost’s atomic design methodology. It offers us to approach the design system elements in five stages, moving from the simplest reusable UI components to complex design system patterns:
- Atoms. In interface design, it’s the smallest building blocks like labels, inputs, or buttons.
- Molecules. Here we speak about groups of UI elements that work together as a unit. For instance, an input plus a button make up a search form molecule.
- Organisms. Those are more complex design structures that consist of atoms and molecules. Like, a website header that includes our search form, plus brand identifier and navigation links.
- Templates. Here we come to page-level objects that incorporate all the previous levels into a skeletal layout, for example, a wireframe of a homepage.
- Pages. Pages add some meat to the bones of interface templates. In the case of a homepage, it can be text and images added into a template to look at the real content in action. Pages can be used to test them or to align ideas with stakeholders, for instance.
When you have your UI visual language library ready, you probably want to make it collaborative and code-connected, so that it is useful for both design and development.
Sounds complicated, doesn’t it? Design systems are in no way a piece of cake, and they fail more often than succeed. Let’s figure out how to escape from failure.
How to run a design system?
Once Una Kravets asked on Twitter why design systems become unused, and dozens of her subscribers shared their negative experiences. In summary, it all comes down to three reasons:
- A design system fails to gain widespread adoption. Design systems work only if everyone in a product team knows how to use them. But when a lot of busy people have to spend a lot of time reading a lot of boring docs, we end up with a product team that ignores (or isn’t aware of) their design patterns.
- Employees don't take design systems seriously, especially if they feel like the system gets in the way instead of making things easier. People avoid friction in their processes, and attempts to introduce a new way of doing things instead of the old one is the very definition of “friction”.
- Static documentation of a dynamic process is doomed to fail. Organizations often lack a commitment to update and maintain their systems, so they quickly become outdated.
The solution is to run a design system as a product, not a project. That means when you’re yelling “We did it! We launched a style guide, mission accomplished,” your mission is in the very beginning, actually.
Business doesn’t fill any value from your design system yet. The value will emerge after a product team will start shipping features using design components from the system, which means you've got some more work to do.
Your newborn design guide needs a team to manage and upgrade it. It needs a roadmap and backlog. It needs promotion and training for existing staff and onboarding plans for new staff.
Create your own design system now
Startups are meant to feel slightly chaotic. But as the startup grows, the degree of chaos increases. The more design decisions you put off, the longer you delay bringing mess to order, the more expensive it becomes.
Check out some popular design systems examples to inspire you. Then codify what you already have, make sure someone is responsible for your system. Check if your system is built with a solid structure from the start and will be carefully maintained all the way long.
And if you’re shorthanded out there, remember there’s Eleken agency full of product design experts. Call us if you need help with fighting design chaos.
Best SaaS App Redesigns: 4 Case Studies and Lessons Learned
When it comes to refining SaaS products only sky's the limit. Even the most successful companies need a redesign to stay competitive and meet their client’s needs.
As a design agency, we at Eleken have discussed in our blog that any UI/UX design services should take into account both business goals and customers’ needs and should be based on thorough research. The redesign is not an exception.
But we know that very often it is difficult to understand how to make the first step towards revamping your product. Learning from others can be helpful in this case. For that reason, in this article, we are going to discuss some of the best SaaS app redesigns that can motivate you to get started right.
And before seeing what popular SaaS companies can teach us, we want to share our experience of UI/UX redesign projects with you.
Griddle
Griddle (now Clientjoy) is a client experience platform that helps small businesses manage their customers.
When Gridle came to Eleken they were already seven years on the market and of course, both the look and the feel of the app needed dramatic refreshment. Our task was to make a redesign so that this cloud software would provide a better user experience and clearly communicate its value proposition.
As we always do, we started the redesign process with the research. We analyzed which product features users use often, and which they tend to omit to understand what improvements the user interface needs. As well, we conducted six user interviews to clearly understand what Griddle’s audience expects from the app.
The research helped us to come up with the following insights:
- The app needs an intuitive user onboarding
- Users want to see an improved workflow that would allow them to manage their clients easier and faster
- Users want the product to solve their issues in just a few clicks
- We should minimize the use of design elements that don’t serve any practical purpose
Clear user onboarding
We chose a minimalistic design with a lot of white space and short easy-to-understand statements to design an interactive product tour that shows the user how the app operates and promotes them to make the first step.
As well, to help new users feel completely comfortable using the app we added a short product tour to the Dashboard.
Simplifying the workflow
- Proposals. To simplify the process of creating proposals we designed several proposal templates. The user can choose the one they like, quickly edit and send it.
- Invoices. To create and send invoices in just a few clicks we created customizable invoice templates.
What lessons can we learn from this story?
- To come up with effective design solutions you should base each of your decisions on the insights you’ve found in the research.
- Teaching users how to quickly and efficiently reach their goals is especially important for complex SaaS products; that’s why you should strive to create an intuitive and unobtrusive user onboarding.
Slack
In March 2020 Slack introduced its biggest redesign yet. The story of revamping this cloud business messenger is not about launching new cool functionality, or completely changing the UI of the application, it’s about bringing the order to the app and making the experience of interacting with the application smoother and more approachable.
Make it easier for newbies
Slack was working on its redesign when the pandemic burst out. Many people were sent to work remotely and Slack acquired a lot of new users that hadn’t used this app previously. Such circumstances made the team reassess everything they’d already done once again to make an extra focus on the ease of use and increased productivity.
Though Slack is known for its powerful user onboarding, they noticed that when a new person starts using the messenger, they feel a bit disoriented (users are unaware of many features and don’t use the software to its fullest). The solution was to make the app more organized, and the first step was to optimize navigation.
Here are the most essential changes Slack launched with this redesign:
- Top navigation bar
Slack decided to put some essential functions up in the navigation bar:
The redesigned interface of the navigation bar now contains a big search field that helps you to easily browse through the organization, a “history” button, and arrows to go back and forth in your recent activity. In general, this updated navigation bar resembles a familiar for everyone design of a web browser. This way newbies intuitively know what functions this bar performs.
- Sidebar
Now you can put your messages/channels/apps in order and group them in accordance to different projects, teams, etc. The ability to build sections and put priorities makes interaction with the app easier and more effective.
- Compose new letter
At the top of the sidebar, you can find compose letter button. With the help of the “New letter” button, the user can start writing a message with no need to specify where and whom to send it first. In case you want to continue writing the letter later, it will be saved in draft.
The field of composing a new letter looks like an ordinary email that we all got used to. Such a design makes newcomers feel more comfortable using Slack.
Easier access to tools
One more reason why people love Slack so much is the fact that it integrates with different useful tools that make the work process easier (e.g. Google Drive, Freshdesk, etc.) The problem was that very often users didn’t know how to access those tools from this cloud messenger.
The design team added a small icon of the lightning right in the field where you are supposed to write a message. Now all these features are more understandable and approachable.
Click the lightning icon to see the list of actions you can take with the applications you’ve installed in Slack.
What lesson can we learn from this story?
- Getting inspired and adopting some popular design elements from other apps/services is not something you should be ashamed of. The vice president of design in Slack, Ethan Eismann, said about the redesign process: “One important principle that started to emerge was not reinventing the wheel”.
- Navigation is an essential part of the design. With its help, users find what they need and reach their goals. That’s why when improving your SaaS make sure your navigation is intuitive and not cumbersome.
Uber
The first thing we want to mention about Uber’s UX and UI redesign case study is that though it is a popular and successful app, it also had its ups and downs when refining the UI/UX.
Redesign 2016
In 2016 Uber had a rebranding campaign aimed at repositioning itself from simple ride-sharing software to a more solid technology organization.
For this purpose they presented:
- An animated video that communicated their new mission. It features bits and atoms that stand for technology and people
- The new logo that replaced the letter “u” with the symbol that resembles the backward letter “c”
This campaign failed as people found the message in the video too complicated and the new logo difficult to find on their mobile screens when they were in a hurry. Moreover, there were many memes on the Internet that the new logo has been likened to…well... “a butthole based on bathroom tiles".
Still, not everything was so bad. Besides working with brand identity, Uber improved the feel of the app which brought positive results.
“Where to?” button
Previously, Uber app was super simple, you could have your ride with only one tap (no need to choose a destination or opt for different products). Over time the interface had to somehow accommodate more than eight options in one place plus the schedule function. Naturally, it caused much confusion.
To find the right solution, the design team conducted solid UX research which included lots of user interviews and prototype iterations. Again and again, they iterated prototypes until the right answer was found.
The solution was to start from the end: firstly the user chooses the destination and only then they can decide how to get there, while you are picking how to get from point A to point B the app searches for the most suitable pick-up location.
As well, user research allowed designers to identify the problem with pick-up points.
- Drivers don’t set their exact location but expect the app to choose it by default
- The location that users set is usually not the pickup location but just the address of a building
- Selecting the optimal location of pick-up involves clarifying through the phone call, walking the extra distance to the car, and so forth.
After the redesign, Uber’s app:
- Selects the optimal pick-up point based on the user’s personal data
- Provides customers with the fastest walking route to the spot
- Gives the customer complete control of this process if needed
Redesign 2018
In 2018 to completely win back customers’ trust Uber’s team started with studying their audience.
Logo
Conducting customer research helped them to come up with the following key points:
- Add more contrast with black and white colors
- Use the word instead of a symbol in the logo
- Bring back the letter “u”
All these insights contributed to creating the following result:
It’s bold, clear, and easy to notice, so people like it.
What lesson can we learn from this story?
- First of all, you shouldn’t neglect the principle of simplicity when it comes to designing (or redesigning) SaaS products (though the product is complicated, the design must be simple).
- Secondly, always research the target audience and test your ideas until you find the right solution.
G Suite
In 2015 Google announced the redesign of their Google apps as G Suite to keep consistency within each of its tools and overall brand.
As the company grew, they regularly added new services such as Google Drive, Hangouts, Sheets, and so on. Over time, Google’s team noticed that all their applications look completely different.
Of course, each application serves its purpose, but the problem was that as a user moved from one Google app to another, they had to get accustomed to the different user interface over and over again. And the goal of the redesign was to make all services feel like they are a single service with a connected experience and a consistent look.
During the UI redesign process, Google’s design team cleaned up the interface of each service and added design elements that extend from one application to another making them all one whole.
To explain the reason for the redesign, Google introduced a detailed case study of their redesign to stay transparent with their audience.
What lesson can we learn from this story?
- Take care of consistency. Over time your brand will grow and evolve, new tools, features, or even products may appear. That’s why it’s important to have a design system that will allow you to keep the interface clean and intuitive and your brand message clear and understandable for each of your customers.
- Explain your design decisions. Talking with your clients about the results of a redesign will show them the “why” behind each change.
There’s always room for improving your SaaS
Based on lessons we’ve learned from each of the above examples we can formulate the following design principles for SaaS applications:
- Strive for simplicity
- Base each step of your product redesign on the research
- Improve information architecture
- Don’t try to reinvent the wheel
- Keep consistency as your brand evolves
- Always test your design decisions before launching them
In case you need some help with rethinking your SaaS application, you can find some useful information in another blog post on how to redesign an app or contact Eleken’s team to have all your questions answered.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
