Panchanit Thawornwong is a Content Marketing/Digital Marketing intern at Morphosis Apps. She is responsible for researching, planning, cultivating and sharing marketing copy for the company which includes writing blog posts about industry-related topics, as well as promoting content on social media, to attract and convert prospective customers.

Product Design

Easy Ways to Improve Your UX/UI Design Workflows

Developing a better UX/UI design workflow is crucial in providing the best possible experience for your users. An optimized design workflow will help you set clear expectations with your client. From establishing project deliverables and deadlines, to reducing any chance of miscommunication later on during the project which will also save you time and money. 

In this article, we’ll go through and outline the basics of what a UX/UI design workflow is, as well as giving some tips and tricks on how to better optimize it for your business. 

You can also check out our first Designer’s Uncut episode here!

What is a UX/UI design workflow?

A UX/UI design workflow outlines all the steps within your work process. Although every design project will have a different process depending on the product, organizational structure and so on, a general UX/UI workflow will have the following steps: 

  • Understanding the users
  • UX Research
  • Gather user feedback
  • Define design specifications
  • Low-fidelity and high-fidelity prototyping
  • UX/UI design
  • Usability testing
  • Development

Now that we’ve outlined the basic steps of a UX/UI design workflow, let’s get started on some different ways you can optimize your design processes.

1Interactive Prototyping in Figma

At our core, we are visual creatures. As humans we respond and process visual information much better than any other type of data. In fact, we actually process visual content 60,000 times faster than we can process text. That’s why, if you’re trying to get a message across, anything that is more visual will do a better job at helping people understand – especially when it comes to abstract ideas.

Whether you’re trying to pitch an idea, explain design details to other designers or developers, or even when you’re trying to conduct usability testing to validate your design ideas, interactive prototyping can be very helpful in allowing other people to see your vision. 

In addition to letting people see your vision, interactive prototyping also lets people understand the behaviors of that design which helps create a better connection and understanding. Furthermore, interactive prototyping also does not require any coding. This means you’re able to quickly explore ideas and see how your finished product would look without investing huge amounts of time and effort. 

Here are a few things you can do on Figma:

  • Locking navigation bar
  • Animate navigation buttons
  • Pop-up login page  
  • Interactive components

2 Design Checklist

When building a digital product, things can get complicated and overwhelming pretty quickly. No matter what profession you are currently in, or how much experience or training you may have, it is human nature for us to accidentally overlook certain steps when things start getting busy, no matter how crucial they are. 

Checklists offer an opportunity to improve your performance and help you achieve consistent results. It can act as a reminder of what tasks need to be done and what elements need to be checked when designing. It can also improve your motivation and productivity when you have a checklist to follow, while freeing up your mind for more creative ideas.

Homepage of Checklist Design

Checklist Design is a great tool created by George Hatzis, a designer from Sydney, Australia, that provides a collection of the best UX/UI practices around pages, elements, flows and more. 

Let’s take a look at how you can use it.

Button page of Checklist Design

For example, if you have already created a button for your digital product, you can go to the “Button” page on Design Checklist and see all the aspects of a button you should check. This includes the shape of the button (padding, border radius, shadow) or variants or the button along with other details.

States section of Buttons page of Checklist Design

Design Checklist also offers visual examples of the “States” of buttons to further check how they would look. Additionally, there are also great articles surrounding the element you are looking at to learn more about it as well.

George Hatzis, the creator of Design Checklist, has said that the reason he created this was because he was wasting unnecessary time because he kept missing small details along the way when designing something. So, to combat this, he started “listing out all the typical elements you should expect to have on a few standard SaaS pages. Then, that grew into becoming a collection of elements, articles and examples to take in as well.” 

Check out this valuable resource here.

3 Text Sniper

Next up there is Text Sniper. This tool helps you quickly and easily capture unselectable text from images, webpages, PDFs, presentations, YouTube Videos and more. 

When designing, or creating mockups of your design, you need to add some placeholder text to get a rough idea of how much text a certain design element can take. Traditionally, designers will often use Lorem Ipsum, a type of placeholder text that contains all the letters of the alphabet, spread out evenly across so that designers can plan out where content will sit without actually having to wait for content to be written and or approved.

Here is an example of a paragraph of Lorem Ipsum copy:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

However, Text Sniper allows you to use real content from real websites and paste it into your design. This way, you have a realistic idea of how much content should actually be on each section instead of just guessing. 

Text Sniper can help you with content for:

  • Letter headings
  • Product descriptions
  • Brand bios
  • Contact details
  • Websites or link placements
  • Calls to action
  • And more

The application supports English, French, Italian German, Spanish, Portuguese and also Chinese – both simplified and traditional. It is generally accurate however if the image is too blurry or unclear it may encounter some issues. 

Check out our Designers Uncut series on YouTube and watch a tutorial on how to use Text Sniper with Rob.

Learn more about UX/UI today

We are Morphosis, a design and development digital consultancy based in Bangkok, Thailand, with over 80+ talented professionals from 15 different backgrounds. If you’d like to learn more about us, check out our social media below:

Website: https://www.morphos.is/

Facebook: https://web.facebook.com/MorphosisApps

Linkedin: https://www.linkedin.com/company/morphosisapps/