Your website’s look and feel is just as important to your end user as its loading speed. Pairing great web design with performance ensures every site you build is both outstanding to the eye and seamless to use.
According to Think With Google, your website’s bounce rate can increase by 32% as page load time increases from one to three seconds. This emphasizes how crucial usability is to your website’s success: Without quality visuals and quick loading times, visitors simply won’t have the chance or patience to engage with your design.
While website imagery—such as product photos, artwork, or event videos—plays a big role in the story your web design relays to visitors, these visual elements have the potential to slow down your site if they’re not properly optimized. Follow these best practices for media optimization to ensure your site looks great, and performs even better.
Thanks to our friends at Wix for sponsoring this blog post!
1. Upload the right image sizes
You’ll always want to upload the best quality image available. For starters, this means finding imagery and media that both look great and will upload speedily.
Generally speaking, your file should be no bigger than 25MB (or 15MB when it comes to GIFS) to ensure efficient loading. In addition, you’ll want to start with an uncompressed or RAW file to preserve your visual’s quality. This refers to a file that includes all of the image’s original data, and has not been reduced in byte size.
2. In most cases, choose JPG over PNG
JPG images—the most common format—are usually much smaller than the equivalent PNG images—sometimes as much as 10 times smaller. Due to the smaller size, you’ll typically want to opt for a JPG over a PNG (Portable Network Graphic).
When deciding between a JPG or PNG on your site, keep in mind that these two formats are resized in different ways. JPG uses algorithms to reconstruct only an approximation of the original data when resized and delivered over the web. This is called lossy compression, which means some of the original data is permanently removed or “lost.” When PNGs are resized, the format uses a compression algorithm that allows original data to be perfectly reconstructed (known as loss-less compression).
Essentially, when you want to retain the quality of your images, you might opt for a PNG. The trade-off here means working with larger files that can potentially harm your site’s performance.
📌 Pro tip:
In the cases below, however, you will want to choose a PNG over a JPG.
You require transparency in the image (e.g. you want the subject of the image, or the foreground, to appear as though it’s been cut out).
You need extreme high quality and sharpness, like in images with small text (e.g. a screenshot) or richness in colors (e.g. gradients).


3. Adjust the default compression of your images to improve sharpness
When adding images to your web design, you’ll likely find that whatever platform you’re working with has its own default when it comes to the compression of images. After uploading your JPEG or PNG file to the Wix Editor, for example, it will reduce its compression to a default of 90% quality. You can adjust this default setting to make sure your images look sharp, and load fast.
4. Don’t stress about lazy loading—it’s a good thing
As you scroll through your site, you may notice that images appear blurry for a microsecond before fully loading. Have no fear: That’s known as lazy loading, and it’s a placeholder for the real (optimized) image.
In order to speed up loading time and show visitors something as soon as they land on your site, the browser first displays a small, blurred version of the image. In other words, it “lazily” downloads the best quality images to optimize them for the display’s dimension. As images scroll into view, the high-resolution images download, replacing the Low Quality Image Placeholder (LQIP) currently displayed.
Apart from improving user experience, LQIP also helps your website’s SEO, since it provides search engines with indexed images, instead of a blank or a broken image icon.
5. Know when to use SVG vs. PNG
Scalable Vector Graphics, also known as SVGs, are delivered in an XML-based format. Mathematical formulas are used to build high quality images.
An SVG has vector-based contents, instructing the browser what to display through a complex network of lines, dots, shapes and algorithms. That makes SVG more malleable than a PNG, since its size depends on the number of elements and “nodes” it contains. PNGs are raster-based formats (as opposed to the vector format of SVGs) and they’re made up of a fixed number of pixel grids that are high quality, but difficult to resize.
SVGs remain sharp on every resolution and size, even if the viewport’s dimensions change. When considering the performance burden of the image’s size, use SVG instead of raster formats like PNG, unless the SVG is very complex (e.g. an SVG depicting the coastline of Norway) and the element’s actual dimensions are, in comparison to the image, small.
📌 PRO TIP:
To make the most of SVGs on your site, upload SVG files with weights of up to 250KB.
In addition, be sure to avoid content that may potentially cause security issues or browser crashes. For example, SMIL animations contain some insecure content and harm runtime performance, thus modern browsers do not support them.
6. Choose the right video formats
With wider angle ranges, lengthier messages, entertaining animation and more, videos help website visitors effortlessly engage with more content. Whether promotional or purely decorative, stick to these fundamental rules to ensure your videos will appear in the highest quality, without affecting page load speed.
As a rule of thumb, videos uploaded to your site should be a maximum of 1GB. Before uploading your video, check which video formats are compatible with the website platform you use. Some of the most popular formats include AVI, MPEG, MPG, MPE, MP4, MKV, WebM, MOV, OGV, VOB, M4V, 3GP, DivX, XVID, MXF, WMV, M1V, FLV and M2TS.


7. Select the right color video background
When adding a video to your site, keep in mind that parts of the video may be cropped or hidden for some visitors depending on the device or browser they use. The video content itself, however, will appear to cover all of the component’s dimensions.
Video components are calculated based on the full dimensions of the media being uploaded, and not only the visible parts. In this case, you may want to add a color space to make up for the rest of the background and give visitors the best aesthetic experience.
Different browsers use different color spaces, so when you use a color as a video background and select the same color as a page background, these color spaces may look different on different browsers. One possible solution to overcome the color variation is to define a transparent background for the video.


8. Choose video over GIFS (mostly)
A GIF’s simple animation can catch the attention of visitors and uplift your web design. However, GIFs come with a few drawbacks: You can’t control playback on your site, which can harm performance, accessibility and the overall user experience. GIFs also only start playing when all content frames are available. Since you cannot optimize GIFs for web streaming, using them can significantly slow down a page’s loading speed.
If you’re deciding between a GIF and a video, stick with the latter. Videos support almost unlimited color palettes, come with controlled playback and can be optimized for web streaming. They also start playing on the web as soon as the first frame is available.
Use GIFs in these cases on your website:
If your content animation contains a few frames and a small dimension size (e.g 100X100) you should use a GIF.
When you have text content in your video and you want to maintain readability.
Design websites that look great and perform even better
Building on Wix means that the foundations are covered and performance doesn’t come at the sacrifice of your site’s appearance and style.
Every time you add an image to your website, Wix automatically optimizes it to ensure high quality and quick load time on any device. No need to worry about resizing, compressing, or converting your images to a modern format like WebP—Wix has you covered.
Our website infrastructure and media servers are designed to optimize for video from the get-go. Enjoy full creative freedom and elevate your web design using fun features—like Transparent Video, VideoBox, and Video Mask — without hurting your site’s performance. ■

About Wix: Wix is the industry-leading website creation platform trusted by 230M+ users worldwide. Since 2006, Wix has empowered businesses, entrepreneurs, enterprises and creators to build, manage, and grow their online presence—all from one place. With fully-managed infrastructure and enterprise-grade protection, every Wix website is secure, reliable, and engineered to support limitless growth. Start building today.

8 ways to optimize your website's media for performance 

As a designer, your brand is more than your awwward winning website and the final_final_v2 assets you deliver to your client.
It’s the entire client journey from start to finish.
Unfortunately, designers are forced to use tools that are dated, clunky, and give clients an experience far from “designer”.
The good news is that there are tools you might not know about that can fix this. See for example this free invoice generator that was created for creatives.
To build a brand that enables you to raise your rates, you have to connect every client touch-point in an experience that is beautiful and intuitive.
To do this, every designer must decide if they will use individual tools or an all-in-one platform like Bloom. While individual tools will give you more features, they are far more expensive and require a full-time job to connect and maintain. In this article, explore the business tools designers need in 2023.
✏️ Thanks to our friends at Bloom.io for sponsoring this blog post!
👋 1. Lead capture
Wherever your clients find you, they need an intuitive way to get in contact. Most designers have a website and email link on their portfolios. But this is far from ideal and isn’t professional. Imagine if Amazon did this when you wanted to buy something.
Furthermore, traditional contact forms feel like you’re filling out a service request because your fridge broke. They inspire zero confidence and don’t build your brand.
Instead, consider using lead capture forms which allow the client to answer one question at a time in a conversational format.
The best lead capture tools are:
Bloom - All-in-one Studio CRM for $33/mo
Typeform - Starts at $25/mo
Jotform - Starts at $39/mo







🗂️ 2. Lead management
Once you start capturing leads, you need a good way to organize them and make sure that no opportunity falls between the cracks.
Your Gmail and DM’s aren’t a CRM. Sometimes leads need a follow-up in 1-2months. Some need more nurturing and selling before you can send a proposal.
Unlike e-commerce, a designer’s sales-cycle will average 1-3 months, which means you need robust tracking tools to know the next step for each prospect.
The best lead management tools are:
Bloom - All-in-one Studio CRM for $33/mo
Pipedrive - Starts at $19.50/mo
Monday - Freemium with limited features

🗓️ 3. Scheduling calls
Most of your clients will need to schedule a discovery call to discuss their needs and project requirements. The most inefficient method is to play ping-pong on Gmail until you can nail a time that works for both sites. During that time your client may change their mind or find a different designer.
It’s far more intuitive to use a scheduling tool that allows you to set up your hours and send a universal link to your clients for them to select a date.
The best solution will have a Zoom integration so that you can easily get on a call when the time comes.
The best scheduling tools are:
Bloom - All-in-one Studio CRM for $33/mo
Calendly  - Freemium with limited features
You Can Book Me - Freemium with limited features

💸 4. Sending invoices & Getting paid
Once your client is ready to be booked they’ll need a proposal/quote, or if you’ve already discussed a price, you can go straight to an invoice.
In order to maintain a designer brand, how you send the invoice matters. Using a word processor or excel isn’t professional. Similarly, there are many tools with invoices that feel dated and have no built-in payment options.
The best invoice software will integrate all of your payment options. This is how you get paid fast because every client will have their own preference of how to pay.
Currently, the only solution that integrates mobile payment options into an invoice is Bloom. When using Bloom, every invoice gets a payment page that offers all the payment options you offer.
Even more, you can also add contracts to the invoice to combine these steps into one link.
The best scheduling tools are:
Bloom - All-in-one Studio CRM for $33/mo
Hectic - Freemium with limited features
Bonsai - Starts at $24/mo







🤝 5. Signing contracts
Signing contracts is a good way to ensure that you are protected in case a project goes south. But adding a contract to your client onboarding and payment process can be annoying for everyone.
Some designers are still requiring their clients to print, sign, scan, upload, and send the signed document. This is an incredibly unprofessional experience for both sides.
Instead, consider using digital signatures to make this process faster and easier for all sides.
The best contract-signing tools are:
Bloom - All-in-one Studio CRM for $33/mo
Hellosign - Starts at $15/mo
Adobe Acrobat Sign - Starts at 12.99/mo

✨ 6. Onboarding & Client portals
Once your client has paid they need to be onboarded so that they can be part of the design process. Some designers simply use Gmail to correspond during the design process, others use Slack, while others turn to task management tools.
Each option has ups and downs, but the best tool will give you a client portal that will include the project overview, payment, project progress, assets & documents, and communication.
The only tool that will combine all of this inside a custom-branded client portal is Bloom.
The best client portal tools are:
Bloom - All-in-one Studio CRM for $33/mo
Notion - Freemium with limited features
Kustomer - Starts at $29/mo

⚙️ 7. Project management & automation
Finally, if you’re growing an agency or taking on more projects you’ll need a workflow system. This is the key to scaling.
A workflow allows you to outline all of the key tasks every project must accomplish, set up tracking of progress, and automate communication when possible.
There are many fantastic project management tools but most of them are designed for large teams and include complicated features which aren’t needed for designers.
The project management tools for designers are:
Bloom - All-in-one Studio CRM for $33/mo
Monday - Freemium with limited features
Asana - Freemium with limited features







Invest in your creative business
As a designer, having the right tools is essential in order to maintain your brand, get paid on time, and scale your business. With the tools above, you’ll have everything you need to take your creative business to the next level in 2023. If you aren’t already a Bloom user, try it for free today! ■

 7 critical business tools every designer needs in 2023

Immersive content has rapidly gained traction in recent years thanks to developments in interactivity and animation. Designers and teams can now build even more engaging user experiences with interactive animation. But what is interactive animation and how can you start incorporating it into your product designs?
Keep reading to discover how to enhance your design work with interactivity. ✨
Thanks to our friends at Rive for sponsoring this blog post!
What is interactive animation?
Unlike traditional animation, interactive animation is designed to respond to user input, creating a more dynamic and engaging experience.
Unlike traditional animation, interactive animation allows viewers to interact and engage with your design.
In interactive animation, a computer application generates animation in real-time based on user inputs like hovering, clicking, scrolling, or other prompts. This type of animation allows viewers to interact and engage with your design on several different levels.


  


The benefits of interactive animation
An interactive animation encourages viewers to engage and participate. When used thoughtfully, interactive animation can:
👀 Improves engagement and conversions
There’s a reason why interactive content is more effective at holding viewer attention than static content. One of the major benefits of interactive animation is that it helps prompt users to take specific actions, such as clicking on a call-to-action button or completing a task.
🙌 Makes difficult concepts easy to understand
Interactive animation can be used to explain complex concepts in a more interactive and engaging way. They help to guide users through complex processes or actions, making it more likely that they will complete the desired task. For example, if you have an animated product tour, interactive animation can help to encourage users to take the tour and learn more about your product!
👾 Adds an element of fun to your product
Interactive animation can also be used to add an element of fun and playfulness to your user experience. This can lead to a more enjoyable and memorable experience overall, resulting in repeat visits and increased brand loyalty.

    
      Shot Link


    
Rive emoji collection
Juan Carlos

          for Rive
      
These emojis are animated on Rive and we use them in our community.
View on Dribbble
Tips for getting started with interactive animation
Eager to get started with interactive animation but not sure where to start? Here are a few helpful tips to make your designs more exciting and memorable with interactive animation.
1. Choose the right tools
If you’re looking for an end-to-end pipeline for interactive graphics designed for fast and performant real-time animation, Rive is a great tool to get started. Rive comes with everything you need to create visually stunning and thematically flawless interactive animations.
Rather than acting like a traditional design tool, the platform behaves more like a game engine. Rive’s Editor makes it easy to design and animate in an interactive environment and runs anywhere with open-source runtimes. The team consists of highly talented designers and animators with years of experience in the industry, so you know the product you’re using will always improve.


  


2. Use animations sparingly and intentionally
Interactive animation should always be used as a support rather than a show-off tool. You don’t need to animate every object on your stage. Knowing when and where to use interactive animations is key to successfully implementing them into your designs. Keep things simple and be selective with what you animate to capture your audience’s attention.
When in doubt, leaving something alone is the best option if it looks clean and impactful as it is.


  


3. Test, test, test
As with any design element, it’s important to test your interactive animations before you release them to the public. Make sure to test your designs on different browsers and devices to ensure that they work as intended. Pay close attention to how users interact with your animations and make changes accordingly!


  


Great examples of interactive animation
Get inspired by a few effective examples of interactive animation, all created with Rive below!
Hero animations and interactive menus
You can give your audience a fully immersive experience by embedding interactive content on your website like this animated hero example by JcToon, Animator at Rive. Moving the cursor moves the illustration scene and clicking on the scene zooms the user in and out.
👉 Try it on Rive!


  


Loading animations
Motion can help make loading moments more informative for users. In the example below, the loading animation keeps the user informed on the progress of their action. Loading animations like these do a great job at keeping customers engaged while they wait for an action to complete.
👉 Try it on Rive!


  


Characters and Game Props
Make characters for games, websites, and products using meshes. Meshes allow you to add motion and volume to raster graphics by adding layers. As a result, you can make skin flex, fabric ripple, hair flow, and more, allowing you to create life-like characters that help tell your story.
👉 Try it on Rive!


  


Bring your products to life with interactivity.
Unlock all of the tools you need to start designing engaging interactive animations with Rive. Using the timeline tool, you can animate anything, clipping to cut parts of your graphics as required, or reuse common animations to speed up your workflow. You can build websites, apps, and games that look and behave exactly the same using Rive.
See how simple it is to produce interactive animations with Rive. Get started for free today. ■

 About the Author: Olivia Hoskin is a freelance writer with a background in tech and marketing. A true design fan at heart, you’ll find her writing about the latest industry trends, technologies, and the inspiring endeavors of fellow creators. Follow her at oliviahoskin.com.

How to bring your designs to life with interactive animation

This article was written by Jasmine Bilham, freelance content writer and product designer who writes for Raw.Studio, UX Design Agency. Header illustration by ls.graphics.
Every brilliant design starts with an amazing idea, as well as hundreds of not-so-amazing ones. To the user’s eye, these rejected concepts aren’t at all visible, however, their experience would be nowhere near as delightful if mistakes, iterations, and learnings didn’t happen during the design process.
In the Double Diamond, a familiar framework and close friend to the design community, the third stage is where the brainstorming and ideating really kick off.








  
“Ideation is the mode of the design process in which you concentrate on idea generation. Mentally, it represents a process of “going wide” in terms of concepts and outcomes. Ideation provides both the fuel and also the source material for building prototypes and getting innovative solutions into the hands of your users.” — d.school, An Introduction to Design Thinking PROCESS GUIDE
This phase harnesses creativity and innovation to develop solutions for your users. In this article, we will discuss some tips, tricks, and tools that will help you in getting the right foundations for your product.
✏️ Thanks to our friends at Raw.Studio for sponsoring this blog post!
Why ideation is so important
Whether doing so intentionally or not, we go through a multitude of ideation processes daily. What takeaway should we get? What train should I catch? What should we do on the weekend? 
In design, the answers are a little more complicated than pizza, the 8:35 AM train, or a bush walk. The ideation process allows designers to avoid early summations and encourages you to delve deeper and deeper to uncover thought-out concepts.
The ideation phase is uber-important as it:
💭 Helps you ask the right questions. Why are we designing this? Who are we designing it for? Is this feature entirely essential? What do we need to do to create a great experience for our user? All of these questions can come up during the ideation process, allowing you to align on priorities and work toward a goal.
💡 Get all the ideas on the table, good or bad, and filter from there. It is important to get out bad ideas as it makes room for the good ones. It just means you’ve discussed and explored multiple avenues (a good thing in design!)
💥 Find exciting new concepts you may have not considered before. This is particularly true in a collaborative environment, as some of the best ideas can come from group brainstorming with multiple minds bouncing concepts off each other and building from there.
📦 Think outside the box. Similarly to the point above, this phase can really test the imagination and can build on creative, critical and conceptual thinking skills in both a team and individual environment.
💸 Saves time and money in the long run. This is due to intentional, user-centric design and picking up on issues earlier on.
1. Challenge your assumptions and biases
In scientific practice, you are told not to believe assumptions until the experiment uncovers the truth. The same goes for design. Challenging your assumptions in the design process allows you to be creative and use your imagination by questioning the status quo.
Design practice is intrinsically about change and changing the world, and something that was assumed a year ago may not be true to this day, so it is imperative to always be questioning, not jump to conclusions or put up any walls during the ideation process. Challenging assumptions when you are stuck in current thinking paradigms or when you are lacking in the idea department is particularly helpful.
We can challenge assumptions in three steps:
1. List out your assumptions ✍🏻
I know it sounds like stating the obvious, but writing them down truly helps in communicating them to the wider team, or to just help you articulate them to yourself.
Some assumption examples that can get brought up during the ideation phase include:
The user needs X feature
It will be impossible to implement X feature in the given timeframe and budget
A particular design layout or flow is the only way to go
This new approach will increase conversion rate
2. Challenge them 🤔
It’s then time to challenge, question and negotiate these statements, even dig a little deeper as to why the person/s who wrote the assumption feels this particular way. You can then move into whether this assumption is actually valid or known, or if it is merely a hypothesis that would need to be validated further.
3. Translate this to reality 🗺
A common way to flesh out assumptions and categorize them after challenging them is through the assumption mapping method, as seen below.



This facilitates a collaborative and definitive source of truth going forward. it allows you to align with the team on where each assumption stands, what to progress with, and what to investigate further.
It can be so easy to get caught up in deadlines, stakeholder management, multiple sources of feedback and input, out-of-scope requests, and funky visual concepts, but at the end of the day, you are trying to design a relevant, intuitive, and delightful product for your user, and making assumptions on this is a dangerous game. Assumption testing of your chosen analysis allows you to determine whether you are on the right path and if you can correctly draw conclusions from the results of your analysis.
2. Embrace user flows
User flows are often created in the ideation phase after user research has been conducted. They form an important part of the foundation on which your product is built. Once you have gathered your data from user testing, user flows help determine how many screens are needed, what order they should appear, and what components need to be present.
User flows are great to use in the ideation phase as they:
💡 Make things intuitive. Sometimes, what makes sense in our mind or as we design screens doesn’t really make sense as a fully fleshed-out flow.
🏠  Give you a bit of structure. It can be quite overwhelming going into designs, whether low or high fidelity. Having some guidelines and flows set beforehand really helps provide a foundation and ensure you don’t miss any key steps, screens, or CTAs.
❤️  Allow other people from your company to empathize and understand the users. For others, particularly those who are a bit more removed from the project, it can be hard to get a grasp of a project from some research slides and some screen designs. Walking through the user flows will allow others to immerse themselves in the user’s experience.


Shape definitions and user flow example from Career Foundry.


Some great tools for creating user flows are:
🍓 Figjam
🌀 Whimsical
✏️ Miro
Be sure to remember that user flows are often revisited and edited so you will always be updating them and keeping them current, it’s all part of the iterative process! These iterations and the practice of creating user flows help designers identify any possible problems before tackling screen design. They are also excellent catalysts for simplified UX, forcing you to ideate the easiest way for a user to complete a task and to consider alternate flows, leading to a very considered, intuitive design.
3. Get inspired
We all know what it’s like to stare at your computer screen or a blank sketchbook for hours on end. It is in our most inspired states where the best work is created, but it can be hard to reach that point sometimes. While it can be easy to fall into a creative slump, there are a crazy amount of resources out there, and other creative individuals that can help inspire a designer’s work.
Jumping into inspiration too early however can limit your thinking in terms of solutions, leading you down a rabbit hole that can be difficult to get out of. I for one am a repeat offender of latching onto a particular idea or design I see online, and having it subconsciously impact the level of exploration I do in my designs.
However, if I could recommend some great sources of inspiration, they would include:
✨  Dribbble
💻  UI Garage
📌  Pinterest
🧩  Muzli


Inspiration: Top left:  Abdur rafi Joy Top right: Liza Hops Bottom left: Muhammad Jumayev, Farukh Nurmatov & Aziza Israilova Bottom right: Mahmudul Hasan Manik

Getting inspiration early isn’t necessarily a bad thing, it is a sign of curiosity and excitement, but it is important to be mindful of this as you go through the design process, and check in on yourself every so often to see. Am I narrowing my ideas too early? Is that one design on Pinterest really the only path I should explore? What other layouts or flows are out there that I could try instead?
4. Start in low fidelity
Low-fidelity design is an inexpensive, relatively fast approach that allows you to translate high-level design concepts into tangible and testable artifacts. It’s an excellent starting point that allows you to explore a few concepts to test first before committing to higher fidelities. They can be used after or in conjunction with user flows so you can see how the journey with some visual structure.
Low-fidelity design helps to:
Detect and fix major problems early
Focus on high-level concepts before delving deeper in later stages
Iterate faster and cheaper
There are a multitude of ways to get started on low-fidelity designs, but some favorites include:
📝 Pen and paper. Classic and accessible. Despite having lots of tools out there that are absolutely amazing, I still find myself drawn back to pen and paper, even if it’s just for a small part of a project.
💻 Wireframy. For the Figma lovers, Wireframy has 2,300+ components and 170+ purpose-built layouts to play around with.
👀 Whimsical. Another great online tool accessed by your browser, with an easy-to-access library.
Below is an example of starting out with pen and paper, which Raw.Studio’s UX approach embraced for their client 1Bill.

And here we have some of Wireframy’s components, allowing you to build out sound structures in Figma without worrying (just yet) about all of the nitty-gritty visual details.

This type of fidelity allows you to focus on the concepts and structure and whether they make sense or not. It builds a solid base for the future when adding branding, colors, interactions, and imagery to further delight the customer.
5. Don’t be afraid to tweak or start again
“Good design is rarely the result of a single stroke of genius. Trial and error is a necessary part of the process. — Michael J. Fordham, EditorX
Designers can often get fixated on a particular design or approach, whether that is due to biases or if it was proven to be the most suitable approach due to user insights. But, things can change, and what was once the go-to concept is now under interrogation, whether by the team, stakeholders or users.
It can be tricky to go back to the drawing board sometimes, whether it is just to tweak a small section or everything, but it is far better to tinker in the early stages of the ideation process than later on when designs are being developed.


 Image Credit: Editor X


It can even feel like you are wasting time, money, and resources, however, it is in fact the complete opposite. Postponing the inevitable will only build up design debt, so be sure to keep an open mind and iterate quickly and early.
Wrap up
Just to reiterate what we have covered:
💪  Challenge your assumptions and biases
❤️  Embrace user flows & journey mapping
✨  Get inspired
☝️ Start in low fidelity
🔁  Don’t be afraid to tweak or start again
While this article only covers five points to consider during the ideation phase, there are plenty more approaches and an abundance of resources out there to help you develop your practice. This phase allows for a solid transition between understanding the problems that users have and generating some groundbreaking solutions, so embrace it! ■

UX Ideation 101: Tips & tools for laying the right design foundations

Research and testing make designs better. You might have seen this play out first hand, by running your own tests before iterating on concepts or working with user researchers to design a new feature.
You may have relied on user research to improve ease of use, reduce friction, and identify changes to include in your next design sprint. And that’s because user research leads to more efficient, informed design initiatives.
But we have a secret. Sometimes…research isn’t always necessary.
That doesn’t mean you should start going into every UX design project blindly, but there are times when you don’t need to dot every “i” and cross every “t”.
As always, prioritization is critical. You know you don’t have endless time to test your designs. You need to assess what needs to be tested right now, what can wait, and what can move forward without testing.
✏️ Thanks to our friends at Sprig for sponsoring this blog post!
First, Here’s When You DO Need to Test
Let’s talk about when you absolutely do need to test. No questions asked. No excuses. It needs to be done.
If you are exploring a brand new concept, you have to test it. It’s not worth wasting time and resources going down a road that won’t work and, without any precedent, you can’t make an informed decision. Don’t go in with your eyes closed. Test.
If you are exploring a brand new concept, you have to test it.
But test in a way that’s more efficient and less of a drain on resources, like with unmoderated concept and usability testing.
If that’s not the case, however, let’s get back to the question at hand. When do you need to test and when can you go with your assumptions and skip it?

Do you need to test? 7 Questions to ask
With input from designers and researchers, we’ve developed a framework of 7 questions to help determine whether you need to test — or whether you can get away with charging forward and feel confident in your decision-making.
⚙️ 1. The Core Flow Question
Is it part of the core flow of your user’s experience?
Answer: TEST! Whenever a new feature is an integral part of the user’s experience using your app, it’s worth the investment of testing concepts and usability.
🚀 2. The Success of Launch Question
Is the user’s ability to do this particular action going to determine the success of the launch?
Answer: TEST! Always test if it’s directly related to success. Hunches aren’t good enough when a launch is going to (hopefully) translate into revenue.
😕 3. The User Difficulty Question
Is this an area where we anticipate users could have difficulty?
Answer: TEST! If this feature addresses a pain point that could trip up users, you’re better safe than sorry.	Test to determine whether you’ve actually addressed their needs, or if this new feature might create issues you didn’t anticipate.
🎯 4. The Impact on Task Accomplishment Question
Does this change the way current customers are accomplishing their tasks? Is this going to impact what customers are currently doing?
Answer: TEST! Newer isn’t always better. Testing helps determine whether you’ve made users’ lives easier, and how you can best onboard customers to adjust to the new changes. If a feature proves cumbersome for existing users to adapt to, it may be worth another look. It’ll also let you know you need to invest in a thoughtful onboarding experience to transition users accustomed to the previous iteration.
📗 5. The Best Practice Question
Is there already an industry best practice? For example, do you know that a green button signals success and a red button stops users from continuing?
Answer: DON’T TEST! If there’s a well-established best practice, it’s not necessary to test and you can safely assume your users will figure it out easily.
💕 6. The User Preference Question
Some people like chocolate, and some like vanilla. Some like blue, others like pink. People will always like different things, and you can never make everyone happy. Is what you’re looking to test simply a matter of user preference?
Answer: DON’T TEST! A user’s preference about what is prettier or not isn’t impactful enough to test. Any findings aren’t likely to affect your bottom line.
🕝 7. The Unreasonable Effort Question
How much effort is this test actually going to take? And do you have the timeline necessary to undertake this effort?
Answer: TEST…SOME. If the idea of testing seems daunting, back up. Look at your project. Not every piece is going to be critical. Some may fall into the category of needing to test, while other aspects of the launch can skip testing. For example, at Sprig, we’re currently redoing our questions page. Testing that fully would require building an intricate prototype — but that’s not necessary. Instead, we’ll selectively test the highest stakes pieces of the page.
Start testing quickly and efficiently with Sprig’s User Research Platform
Want to start testing your designs or prototypes or ready to ditch legacy platforms that make testing feel like a chore? Sprig’s unmoderated, browser-based testing is easy to set up and even easier for your users to use. It’s also built for collaboration with unlimited seats. Learn more here! ■
Sprig
      Sprig is an all-in-one research platform that makes it fast and effortless for product teams to learn from their actual customers in real-time.


🎨 Blog illustrations by ls.graphics.

CoFeed

Posts about #process from the top innovative companies, all in one place.