User experience (UX) design is a crucial part of your product development process. Great user experiences drive increased adoption, loyalty, and higher satisfaction.
However, user experience designers have a tough job. You have to prioritize the user experience at many stages of the development process, while balancing many competing demands.
So how do you make great UX a priority? We’ll walk you through all the basics you need to know, and share the UX design process used by Bubble’s design team.
What is UX design?
User experience (UX) design focuses on how the user perceives and interacts with your app, website, or product. The goal of UX design is to enhance user experience and make the user journey intuitive, efficient, and easy.
UX design focuses on user interactions and user flows. For example, UX design addresses questions like:
- Is this app easy to use?
- Can the user solve their problems quickly and easily?
- Is it intuitive for the user to find what they need?
UX design requires a lot of cross-team collaboration. It can cover a large umbrella of tasks, from UX research and testing, wireframing and prototyping, and final designs.
Why does UX design matter?
Good UX design impacts many key business objectives, including:
- Increasing user satisfaction. The relationship here is clear. When you focus on making users happy, customer satisfaction increases. This is linked to lower churn, stronger loyalty, and increased word of mouth.
- Improving conversion and retention rates. If you have a freemium model, offer a free trial, or have another way for users to test your product, great UX can “seal the deal” for them. A great experience during their trial can improve conversion rates.
- Strengthening product-market fit. A good UX process gives your team more user insights and feedback, allowing you to quickly respond to issues and create a product that resonates with your audience. The better experience you’re able to give your users, the stronger product-market fit you can create.
UX design vs. user interface design
UX design and UI design have some overlap, but they serve two different functions:
- The UX design process centers on the user’s experience and interaction with your app. It’s about function and experience, and prioritizes easy-to-use, intuitive interactions.
- User interface (UI) design focuses on the visual elements and interface of your app. It thinks more about the look and feel of your app, prioritizing visually appealing, on-brand pages and screens.
UX is also a much broader function that spans more business categories. In some cases, UI design might be considered a subset of UX design.
UX design vs. web design
Web design is even broader than UX.
Web design focuses on creating visually appealing and on-brand web pages and sites. Its main functions are to make sure the website is on brand and visually memorable. This can include elements like page layout, content structure and development, graphics, site code, and more. It’s all about brand and visual design.
The UX design process makes sure the website or product is easy to use. It thinks about actions and interactions and prioritizes human-centered design. This makes it easy for a user to accomplish the tasks they want to do.
In short:
- Web design focuses on the overall process of designing a website visually and keeping it on-brand.
- UX design focuses on the user’s experience using the website or product and its functionality.
- UI design focuses on the specific elements and interactive features a user interacts with, like navigational features, buttons, menu bars, etc. and making them visually appealing and easy to use.
6 UX design best practices
If you’re getting started as a UX designer, keep these UX design principles in mind to set up your app with a strong foundation.
1. Keep the user at the forefront. The whole goal of UX is to put yourself in the user’s shoes and improve their experiences. UX designers need to keep the user’s perspective and experiences at the front of every decision. Good user research and testing at every stage of the process can help ensure that users’ needs and
2. Make it well-structured and organized. Information architecture (IA) is an important part of good UX. After all, the easier it is to find the right information, the better a user’s experience will be. A good UX designer considers the content, site map, and organization of the website or app to make it easy to navigate for the user.
“Think about your site architecture from the UX side. How are users navigating through your app? And then the same thing from the data side. You want to keep your data organized.” — Christine Shiba, Senior Product Designer at Bubble
Wireframes are a helpful tool for considering IA and UX — even rough sketches can help you visualize how everything fits together.
3. Make everything accessible. Accessible design isn’t just for users who may be using adaptive devices — accessible design improves user experience for everyone.
Accessibility guidelines for UX designers focus on best practices around navigation, links, color contrast, interactions, and more. By prioritizing and testing accessibility in the UX process, you ensure that your web pages and app are easy to see, navigate, and interact with on any device, for every user.
4. Be consistent. The form and function of your app should be consistent across all pages and screens. That is, if the “confirm” button is on the right on your first screen, it should be on the right on the other screens as well. If you access the menu on one page via a hamburger menu, but on another page via a head navbar, that’s going to be a confusing experience for the user.
Good UX design creates consistency that guides the user through their journey and helps them know exactly what to do next to accomplish their task.
5. Empower users. Good UX gives users what they need to achieve their goals. Well thought out design empowers the user by giving them the right information and prompts at the right time, placing items for similar tasks together, and creating a logical navigational flow to make each task intuitive.
6. Be iterative and responsive. Finally, a good UX designer should strive to iterate the design over time based on user feedback, both direct and indirect.
User research, surveys, and in-app feedback will give you direct feedback to iterate from. But you can also use indirect feedback based on user actions. For example, if you’ve set up tags for projects within the app, but find that users tend to use tags in a completely different way, follow their lead in future iterations.
UX design mistakes to avoid
On the flip side, here are a few key UX design mistakes to avoid.
1. Lack of research and user input. The best way to know what your users want? Ask them.
User research is the core of good UX and good UX processes. Without it, you’re just guessing as to what your users want and how they experience your process.
Instead, good UX designers focus on user research and usability testing in every part of the UX design process. Test and validate your ideas with real data and input from your users, and use that to inform your design and development process.
2. Design inconsistency. Inconsistent design creates major problems in the user experience:
- It makes navigating and interacting with your site or app confusing.
- It means the user has to re-establish what certain elements or components mean in different cases.
- It devalues your brand identity.
Design systems and component libraries are a great place to start when it comes to making sure your design stays consistent.
3. Forgetting the human. Web design has many competing demands: business goals, audience needs and desires, search engine algorithms, sales needs, and more. With all of these competing priorities, it can be easy to lose the human end user and their needs. Good UX keeps the human in mind throughout every page to make the experience seamless.
4. Neglected architecture and structure. Another major error with UX is leaning too heavily on UI and neglecting the architecture and structure side of things. When it comes to design, it’s easy to focus on the visual look and feel and overall aesthetics. That’s what you immediately see, and it’s what most people throughout the organization tend to think of as “design.”
UX designers need to be sure to prioritize clear, consistent information architecture and site or app structure alongside more visual elements. Without a clear structure, your site or app will be difficult to use and navigate, no matter how good it looks.
5. Dark UX. What is dark UX? Dark UX refers to a series of patterns where you intentionally try to trick, mislead, or push the user into taking an action they didn’t intend to benefit your company. Common examples of dark UX include:
- Making unsubscribing or canceling your account difficult
- Adding hidden costs at the end of the checkout process
- ‘Bait and switch’ buttons that don’t perform the actions the user expects
- making users opt out (from additional purchases, upgrades, etc.) instead of opting in
You can probably think of plenty more examples from your own experiences. Don’t subtly try to make users choose a particular option — make both options clear and direct. A good rule of thumb is to always test your designs with actual users to ensure that every button, choice, and action works as they expect.
The UX design process
There are two primary processes for UX design: the traditional process, and then the lean process.
Traditional UX process
A traditional UX design process begins with a heavy emphasis on research and testing. Because traditional UX design and development can be costly and time-consuming, it’s wise to spend additional time early on validating your ideas and testing designs.
This is a simplified overview of the process, but here are the basic steps:
Step 1: Define and validate the project.
Start by understanding the problem you have to solve, and how your solution helps. You want to start by solving an actual problem, not just creating a cool new tool, feature, or software component.
To do this, you’ll want to:
- Do market research into your user’s needs and expectations
- Understand the biggest problems your audience experiences
- Validate your idea for a solution with your audience
When you understand the problem and how your solution will solve it, you can define exactly what’s being created and why, with confidence that there is a market for it.
Step 2: Research.
Once you’ve defined and validated your idea, you’re ready to broaden your research to the general market and your target audience.
Market research can help you get a deeper understanding of your user’s needs and expectations for products like yours. This can also include competitor research to see what solutions already exist and how you’ll differentiate yours.
User research can give you a better understanding of your target audience and how existing tools and solutions (including your own!) are serving them, helping you refine product-market fit.
User research can take many forms, from focus groups to surveys to idea validation or other early user research techniques like card sorting. This process should result in user personas that can guide your UX design from here. User personas can include details on user needs and pain points, and inform your user flows.
Step 3: Build wireframes and other assets.
Next, you’ll want to do all the outlining and preparations needed for upcoming building and designing. This includes things like:
- Creating design wireframes for each screen or webpage
- Mapping out workflows and user journeys for different tasks or actions
- Creating and documenting a design system
- Building standard components and templates for your design
- Deciding information and site architecture
UX design tools like Balsamiq and Miro are great for wireframing. They give you a whiteboard canvas you can use to map out everything from page layouts to content hierarchies to user journeys.
Step 4: Make a prototype.
Now you’re ready to start prototyping. A prototype is an interactive design that can be used to communicate your idea to stakeholders and investors, do user testing, and validate your idea and its feasibility.
When you build your prototype, you’ll turn your assets and wireframes from the previous step into an interactive prototype you can show to others.
Prototypes vary in terms of how functional they are. There are three main types of prototypes:
- Low-fidelity prototypes: Simple, basic designs that aren’t functional but may map out user flows and actions.
- High-fidelity prototypes: Look like the “real thing” and may have some basic functionality or interactive features to show how the product will work
- Fully functional prototypes: Work just like the real app will.
Low-fidelity prototypes are typically built with tools like Balsamiq. High-fidelity prototypes can be built in tools like Figma or Sketch. For a fully functional prototype, your best bet is a no-code tool like Bubble that combines design and functionality in one place.
Step 5: Test.
Once your prototype is ready, it’s time to test it and make sure it delivers a positive user experience before you go live.
Prototype testing allows you to:
- Understand what’s working and what isn’t
- Further validate your idea and solution with users
- Begin to grow an interested audience
- Identify and fix problems early (before they’re coded into your app)
Because a prototype is a lightweight build and usually not fully functional, it’s a lot easier to build, test, and iterate on a prototype compared to your live product. That’s why prototype testing is so crucial in the traditional process: It allows you to keep UX at the center while also saving time and money later.
At this stage, you want to be testing everything from:
- Design and layout concepts
- Feasibility
- Usability from the user’s perspective
- Design and UI
- User flow and UX
- Simplicity and intuitiveness for the end user
- Features and functionality
- Value of the product
Step 6: Build V1 of your product.
Once you’ve gathered the feedback from your prototype testing, it’s time to incorporate that feedback into building V1 of your product.
This is the development phase. You’ll build the actual, fully-functional product and translate your UX designs, user flows, and research into the real app or tool. Design-development handoff tools like Zeplin can help you translate your design into development languages for your engineering team.
No-code or low-code tools can also help significantly speed up the development process. Either way, building your product should incorporate all the UX work you’ve done so far into a functional version of your app.
Step 6: Go live.
Finally, it’s time to go live!
You’ll likely never feel like your product is perfectly ready to be shipped, and that’s totally OK. Shipping before you feel “ready” is a good idea. It gets V1 of your product into the hands of real users and gives you a chance to continue to gather real-world feedback while you build an audience and maybe even start driving some revenue.
Step 7: Collect feedback.
Of course, the UX process doesn’t stop once you launch your app or product. Instead, the process shifts toward feedback and iteration.
With a live product available, there’s even more testing you can do. User testing that uses your actual audience (vs. target audience members in the prototype phase) can give you even more valuable feedback from people who are using your product in their day-to-day life.
You can run user testing directly or indirectly. Direct methods include things like user surveys, first-click testing, and interviews. You can also launch in-app surveys and feedback boxes for reporting bugs, testing new features, and understanding user behavior.
Indirect methods include things like heatmaps, preference testing, and A/B testing. These types of testing often run in the background of your app while users use the app normally. They collect and put together data about how users act and what they like.
Step 8: Iterate.
This is where the UX process “ends” before it loops back into the feedback phase. Once you’ve gathered audience feedback, you’ll then want to incorporate that into the UX design process and ongoing product development process to improve your app.
Ongoing user testing and research will give you more and more insight into what users want and need from your app. Then, you can use that data to shape the app to meet their needs, strengthen product-market fit, and deliver a better user experience.
Lean UX process
Compared to the traditional UX process outlined above, a lean UX process is less expensive and time-consuming while allowing you to iterate more quickly. By consolidating the design and development stages using no-code development and lean UX, you can get your app to your audience faster and start testing and iterating.
This is the process we use here at Bubble. Here’s how it works:
Step 1: Research.
First, you need to understand your audience and define your problem.
As Bubble Senior Product Designer Christine Shiba told us:
“I think a lot of designers can get really into the look and feel of the product right from the start, but ultimately, it has to help the user solve their problem. It shouldn’t be a solution looking for a problem, the design has to stem from the problem.”
By starting with market research, you can solidify the biggest user needs and opportunities. This way, you can validate your ideas for solutions with your target audience and reduce risks.
However, a lean UX process relies less heavily on research and more on testing and iteration.
We talked to Naël Mahouton from Minimum Studios on how low-code and no-code tools helped them simplify their UX processes:
“Instead of starting with in-depth user research that leads to creating user personas, journey maps, and all the other popular UX tools, we focus on getting the best understanding of the problem based on the available data. Then, we build something really fast, put it into the hands of our users, and learn by observing them use it and hearing their feedback.
This gives our designers the confidence to make assumptions, allows us to test those assumptions early, and allows us to iterate quickly on our new knowledge.”
In a lean UX design process, you’ll start with some basic research on the problem you’re trying to solve, then move to building quickly so you can test and validate assumptions with users.
Step 2: Prep.
After you’ve done some research, you want to start making the basic parts of UX design. You should build your design system and plan out the structure of your site or app.
Christine told us,
“Starting with a system or having some sort of system-level idea of your brand and tone helps a lot. So if you’ve set up your style variables, font tokens, buttons styles, all of that on Bubble, that will help you with everything else moving forward.”
By outlining all the pieces that need to be included and how they’ll fit together, you give yourself a running start for the building stage. Unlike the traditional process, which calls for an extended process of wireframing and prototyping, the lean UX design process simply calls for defining the design system and iterating based on testing.
Step 3: Build.
In lean UX systems, you can manage design and development in the same stage. This speeds up the process significantly and eliminates a lot of handoff and back-and-forth communication.
For example, when you build on Bubble, you can leverage the power of no-code to design your app and develop functionality in the same place.
Naël told us that merging their design and development process has allowed them to ship features and new products 10x faster:
“Being a low-code agency allows us to approach the design process differently. A year ago, we started training our designers to build with Bubble. The main goal of their training is to master frontend development and develop their own Figma designs directly on Bubble.
This is a much lower investment and learning curve compared to learning traditional frontend technologies. It allows us to skip the lengthy handover process and deliver a user-ready product after the “design” phase.”
Component libraries and built-in templates also give you a starting place so you’re not starting from scratch. Start with a template or pre-built components. Then, customize as needed to match your design system and build out the site architecture you’ve mapped out previously.
Step 4: Test and iterate.
With the foundations of your app design and functionality in place, you can now launch your app for users. From here, you can run user tests and iterate accordingly.
Pre-launch usability testing can be helpful to make sure your app works as intended and users can easily find what they need. But the most helpful step is to simply get your app into the hands of users and start testing and learning from them.
On Bubble, you can run user testing directly through Bubble using one of our user testing integrations. This collects user feedback all in one place. Then, you can easily iterate on your existing app and launch new versions.
UX design and Bubble
A no-code tool like Bubble makes a lean UX process possible by supporting great UX while making it easier and faster to build.
Bubble’s no-code, full-stack development platform lets you design and develop in one, no-code editor, so you don’t have to manage handoffs. You also don’t need to transition from wireframes to prototypes to MVPs to V1 of your product. Simply sketch out your design, add functionality, and flesh out your final screens all in one place. When it’s ready, Bubble helps you manage launching, hosting, user testing, and more.
Naël told us he was surprised at first by how much the difference in software tooling affected his UX design process:
“I went from investing a lot of time and effort in research at the beginning of every design project to shipping something fast and learning from end users’145–155 behavior while using it. I used to have to design high-fidelity interactive prototypes and integrate developer handover tools into my design stack. Now, I directly build my design on Bubble as a functional version and ship the final product into the users’ hands right away.”
Even if you don’t come from a technical background, Bubble makes it simple to design and develop quickly and easily, while keeping great UX at the forefront. With how-to-build guides, built-in templates, AI design support, and an intuitive, drag-and-drop editor with full customization, you can build anything you dream up in less time.
UX design tools
Having the “right tools” doesn’t guarantee good UX, but a great tool makes great UX a lot easier.
UX design tools can help your team create, test, and build design concepts so you can create great user experiences. You can find both general and specialized UX tools to support every stage of the process, from building design systems and prototyping to running usability testing and collecting feedback.
Some of the most popular UX design tools we love:
Figma. Figma is quickly becoming a must-use collaborative design tool for designing wireframes and prototypes, managing design libraries, and gathering feedback.
Missy Kelley, Bubble’s Head of Product Design, says that Figma has truly “blurred the lines when it comes to tools we use to design and polish and tools we use to build end-to-end design, from concept to build. We use Figma prototypes to run everything from idea generation and user validation all the way to user testing.”
Zeplin. Zeplin is a design handoff tool that allows designers and developers to collaborate more easily to complete a build. Once your design is ready for building, Zeplin helps translate your design and user flows into development languages. It also offers strong documentation to annotate visual and interactive elements, making it easier and faster for your development team to get up to speed and build your designs.
Usersnap. Usersnap is a user feedback platform that lets you send microsurveys, collect user screenshots, get bug reports, and more — all directly from your app or product. It’s great for testing as you build and improve UX after you launch. Missy and our team here at Bubble “use this with our users in alpha and beta testing but also internally for visual QA.”
For more of our favorite UX tools, check out our full list of the best UX design tools.
Making web UX design easier with Bubble
Great UX never happens by accident.
But you can make great UX a lot easier with Bubble’s no-code development tools. By consolidating design components, prototyping, testing, and development all in one place, you reduce the amount of time and resources needed to take your product from idea to fully-functional.
The sooner you can get your product into the hands of real users, the sooner you can test and iterate based on real user behavior. You can adjust your product to meet the needs of your users and create a user experience that drives adoption and loyalty.
On Bubble, great UX is built into every part of the development process. From pre-built component libraries you can customize to templates designed with UX in mind, to user testing integrations and more, you can focus on UX without sacrificing speed or agility.
