User Experience (UX) design is an immensely captivating area of expertise that requires practitioners to have a wide array of knowledge and skills to be successful. A UX practitioner needs to have a broad range of abilities, ranging from basic sketching to narrative/journey design and cognitive psychology to be able to apply a user-centred design approach and create user-friendly, innovative solutions to common product design problems.
The UX/UI design process encompasses the use of a broad array of tools, artefacts, and discoveries, which are documented in the form of various documents and/or a prototype. Of all of these elements, the wireframe is the most recognised and commonly used item.
Wireframes are highly valuable tools that enable us to merge the input of multiple, disconnected sources into one document that can be thoroughly assessed by a variety of stakeholders. Business analysts, project managers, marketing executives, designers, developers, suppliers, service providers, and even the target customer during product testing all have the opportunity to evaluate wireframes. The wireframe provides everyone with a clear understanding of how their individual requirements will be fulfilled and allows the team to identify any issues before the development process begins. As wireframes are often presented in a simple, monochromatic format, they can be reviewed quickly and are thus highly effective in the product design cycle.
It is true that there are both advantages and disadvantages to skipping the wireframing process altogether. However, in certain cases, this may be the best course of action. By handling the user experience (UX) and visual design at a high fidelity level immediately after the discovery phase or in preparation for the prototype stage, it could save a great deal of time. This approach would enable a variety of people – from user testing participants to customers and coworkers – to review both the functionality and the appearance and feel of the product simultaneously.
Learn why wireframes may be troublesome at times, why bypassing them makes sense, and how to adapt a no-wireframe method to a workflow.
The Issue with Wireframes
The standard design procedure, regardless of whether it is being implemented in a waterfall or agile system, typically consists of the following steps: conducting research, defining the requirements, generating ideas, creating prototypes, testing, and deploying the finished product. Furthermore, stakeholders are invited to review the progress at multiple stages throughout the process.
Consider the following instances of wireframe design becoming a bottleneck in the design process:
Reason 1: Customers Don’t Know What They’re Seeing
Typically, the design process begins with an investigation into the topic in order to gain a more comprehensive understanding. This could include desk research, stakeholder interviews, and user interviews. Once the research has been conducted, the design team will evaluate multiple ideas and concepts in order to determine the most suitable solution.
During a review session, the design team will frequently present a set of wireframes with the customer after an idea has been fleshed out.
However, wireframes suffer from the issue of being too conceptual.
Wireframes are visual representations of the product to be constructed. They provide an overview of the design and structure of the product, and usually include placeholder images and labels such as ‘TK’ (to come), ‘FPO’ (for placement only) and ‘TBD’ (to be determined). An example of this can be seen below.
It is likely that an extensive set of annotations will contain information regarding features, business requirements, and error management. In general, clients will be given the opportunity to review them independently as there is not enough time to go through them in detail.
At wireframe assessments, we strongly urge our customers to carefully evaluate the concept being communicated and whether or not it is effectively addressing the business and user needs. It is not uncommon for clients to ask questions that may seem irrelevant at first glance, such as whether the wireframe is the finished version, or if they can preview the visuals for the hero image. These inquiries are equally important and provide insights into the client’s expectations of the graphic design, UI prototype, and development phases.
It is likely that clients and internal stakeholders may find it difficult to accurately evaluate the work based solely on wireframes. While wireframes provide an indication of the intended final design, the viewer still requires significant mental effort to piece all the components together. Therefore, it is not guaranteed that customers will be able to conjure a complete image of the product or website from merely looking at blueprints and wireframes.
Some of our customers have explicitly requested annotated visual designs in order to facilitate more effective evaluation, discussion, and feedback. By providing annotated visual designs, customers are able to more easily comprehend the design, engage in meaningful dialogue, and provide constructive criticism.
Reason 2: They aren’t always appropriate for user testing
User testing is an invaluable tool for assessing the efficacy of any concept, as well as the quantity of information required in a given transaction. It is highly recommended that user testing is integrated into the design process to ensure that the best outcomes are achieved.
Prototyping is a common method for putting concepts like this through their paces.
Prototyping with wireframes is a viable solution for teams to evaluate the functionality and flow of a product, while disregarding the potential effects of design choices on user behaviour. This type of prototyping does not involve the creation of a visual design layer, thus allowing teams to focus solely on the functionality of the product.
It is undeniable that interaction design, graphic design, and copywriting have a symbiotic relationship; when these components are used in tandem, the results can be more powerful than the sum of their parts. However, it can be difficult to identify the individual contributions of each component when testing, since the findings from an isolated function test cannot accurately represent how the function will behave in an actual environment. This is similar to the concept of scientific research, which requires the use of numerous variables to extrapolate meaningful results.
Performing comprehensive tests on everything at once may be more useful at times.
An item that can be employed in multiple languages is an exemplar of the potential for design to be impacted by the varying rules of grammar, alphabets, and letter widths inherent to each language.
Additionally, as the copy’s substance impacts the UX, the translation itself may impact the UX.
As a case in point, we conducted an assessment of numerous potential information architectures to determine which would be most successful in conveying intricate concepts in the target language. We were unable to foresee the ramifications of our work on copywriting and translation without conducting user interface (UI) testing on the actual copy.
Upon conducting our tests on real visual components within the user interface, we discovered that more words were necessary to effectively communicate ideas in the local language. In addition, it became clear that the size and shape of buttons had to be adjusted on a global scale to accommodate the more verbose text. A further revelation was that buttons had to occupy the entire width of the mobile screen, which consequently impacted our UX design going forward.
The main conclusion is that it’s beneficial to start off with high-quality user interfaces, particularly when working with many languages.
Reason 3: They make development and quality assurance hell
When it comes to the graphic design phase, it is certain that there will be changes. The images that have been accumulated are being used as tiles. The text that was previously aligned centrally has been moved to the left. The toggle symbols that were previously a plus and minus sign have now been replaced with a pair of chevrons.
In the realm of graphic design, it is widely accepted that the established procedure is for wireframes to be approved first before any visual design changes are made. This is the standard practice that is commonly observed.
Once the artwork has been completed, it is sent on to the programming team. They will be presented with a comprehensive collection of annotated wireframes as well as a visual design and style guide. It is then their responsibility to link the two sources and bring the design to life.
It would be beneficial to provide developers with a comprehensive document that contains all relevant information. This would not only simplify their work, but also make it easier for customers to use it as a reference guide. Additionally, having a tangible document on hand would provide customers with a handy way to refer to it while the work is being done.
Avoid using wireframes is the answer
It is not always necessary to undertake a full wireframing phase, however there are certain circumstances in which it is advisable. In some cases, it may be beneficial to bypass the wireframing stage altogether.
If any of the following apply, you may choose to forego the wireframe stage:
All the necessary resources are available.
It is worth taking the time to evaluate what has already been accomplished. It is possible that comprehensive User Interface (UI) manuals have been created; thus, it is advisable to review the existing website or application to identify patterns and styles that can be repurposed when making changes or introducing new features.
It would be beneficial to have access to the original files that were used to produce the current project. During the development process, certain features and components may have been altered unintentionally; being able to access the original source file could enable us to restore the original design of these features.
It is worth investigating whether or not a pattern library or style guide already exists in relation to the existing product or website. It may be possible to make use of existing branding and graphic design assets that were already purchased by the customer, potentially saving time and money.
If you want your high-fidelity outputs to sound as good as possible, you should use as many different styles and patterns as you can.
You have planned for extensive testing and iterative prototyping at various stages.
By building up your document correctly from the outset and making effective use of repeating styles, patterns, and symbols, you can significantly reduce the amount of time and effort spent during the prototyping and testing stages. Instead of having to resort to wireframes, you can make incremental changes in high fidelity and submit them straight to the prototype process.
The dual benefit of this approach is that it allows for simultaneous user experience (UX) and user interface (UI) feedback. This provides the opportunity to receive comments on both UX and UI, as well as input on either UX or UI.
The people taking your tests take them quite literally.
Your project’s intended audience is no different from your customers or colleagues in that they may sometimes need you to provide examples.
When I was working on a recent project, I was given the responsibility of designing financial screens for a target audience with limited educational attainment. Not only was this demographic having difficulty reading, but also grasping abstract concepts. To ensure that this group could understand the nuances of financial topics, it was necessary to provide tangible examples to aid in their comprehension.
The attendees of this event were required to have a practical understanding of financial principles, as though they were completing actual purchases or transactions. Moreover, it was imperative that the product was presented in an authentic way which accurately showcased its capabilities.
It is not recommended to incorporate wireframes into this project, as they might be difficult to explain and could distract the audience from the tasks they need to focus on or their personal experiences.
Your customer is strapped for cash and/or time.
In the majority of situations, it is not feasible to complete any task to the highest standard due to a lack of time, money, or resources. As a result, it is often necessary to make certain compromises in order to deliver an outstanding service to the customer while also keeping costs to a minimum.
It may not be possible to create a wireframe due to financial constraints or a lack of commitment from the customer. In this case, it is recommended to create a wireframe internally if necessary, and not to allow it to impede progress on the client’s project. Instead, physical prototypes should be used to test the concepts and assess the customer’s response to the finished product.
Preventing the Death of the “Wireframe” Stage
This section is relatively up to interpretation, since it will rely on your own work habits and the requirements of your customer.
That being said, you might use this as a “template” for your approach, adjusting it to your needs as you go.
Step 1: Do some of your regular investigating and finding
You should do this stage as you typically would, including any and all interviews, field observations, desk research, and competitive assessments.
Step 2: Do some quick sketches as you go
As you continue to undertake your studies, you may find yourself gaining inspiration for practical designs, layouts, flows, and other such ideas. To ensure that these thoughts remain fresh in your mind, it is important to write them down in whatever journaling method works best for you. For example, I like to create thumbnail drawings and write accompanying comments in my notebook. Alternatively, you may find that whiteboard sketches or images of compelling user interface patterns may be more beneficial. Whichever method you choose, make sure to record your thoughts in a way that is easy to access and understand.
Step 3: Have your high-fidelity file ready.
Launch the program of your choice and create a document tailored to the design you have in mind. Select multiple paper sizes to experiment with and begin forming visual groupings and symbols that could be reused multiple times.
It is essential to allocate time for creating and organising typefaces, drop shadows and philtres that are exclusively associated with the brand, as well as examples of brand colours that can be applied to any type of document in the future.
It is essential to make sure that your symbols are correct. To make your buttons easily recognisable, you can assign a different colour to each potential condition. Whenever possible, take advantage of symbol overrides to quickly adjust the font, size, and hue of labels as needed.
It is important to ensure that any custom icons are saved as separate glyphs on an artboard with the appropriate shape. Using this technique, the text size and alignment can be adjusted without impacting the font size.
Step 4: Begin creating first designs
As you become accustomed to working in this manner and take note of where your style guide has been successful (and where it has not), your initial attempt may be somewhat unpolished. You should expect to do a significant amount of refinement in order to get the styles completely accurate, in addition to devising solutions for patterns that do not have a specified style.
It is important to adhere to the provided instructions and copy throughout the entire process. Refrain from using page headings that simply say ‘Page Title Goes Here.’ Instead, demonstrate the realistic outcome of the situation if it was authentic.
It is important to ensure that any list of names and phone numbers provided in your document are unique. To avoid any confusion for the reader, we recommend using a random list generator or add-on to generate any data set needed. This will ensure that each item is distinct, as well as allow you to address any layout and character width problems. Although this may seem excessive, it is an important step in ensuring that your document is clear and accurate.
Step 5: Know when to call it quits on the design
It is not necessary to expend time worrying about the finer details at this time. Deciding on which image to use for a hero shot or creating a unique symbol to indicate a download in progress are both tasks that may require some thought. However, for the purposes of testing, it may be prudent to use a generic image or symbol in certain scenarios.
What is suitable in this situation is ultimately up to you, since it depends on the project’s goals and the stage it is now at.
It is essential to bear in mind that the criteria for assessing the work may be different, depending on the users who will be conducting the tests. I had previously identified a low-literacy demographic, so I made sure to provide enough detail so that all users had the necessary information. My intention was to make every user feel that the app was especially tailored to them; therefore, I customised the prototype to include each user’s name and phone number. This approach was more successful for me, as it reduced the likelihood of users making incorrect assumptions.
Step 6: Take pleasure in the excellent comments and evaluations you get
Publish your designs directly to your preferred prototyping platform in order to bring them out into the field for testing. With this approach, you can gain more than just functional feedback; it also gives you the opportunity to uncover potential aesthetic issues, such as colour contrast, readability, text direction, and translation. Additionally, you can get an idea of users’ impressions of the brand’s visual style and presentation.
In Conclusion
It is likely that forgoing the wireframe step during the design process of a complex application, such as a responsive web application, can have detrimental effects on the project. Taking the time to carefully create wireframes is essential in order to anticipate, plan, and address any business needs, edge cases, and error handling that may arise. Building the wireframe first is a more efficient and cost-effective approach than waiting until after a visual layer has already been conceived and implemented.
On the other hand, skipping the low-fidelity stages and jumping directly to high-fidelity might be beneficial in some circumstances:
By improving communication between all key stakeholders, including clients, developers, other designers, and test participants from the intended audience, we can ensure that everyone has a clear understanding of expectations and can provide more meaningful feedback. This will result in a more comprehensive and constructive criticism.
We can significantly speed up the process of creating prototypes by obtaining input on the user experience, text, and graphics at the same time. As a result, our designs will be immediately available for testing.
In order to streamline the process of determining how a button should function, it is recommended that a consolidated document be sent to both customers and developers. This document should include all of the necessary information regarding the button’s purpose and functioning, eliminating the need for consulting multiple sources. Additionally, customers may use this document to gain feedback from internal stakeholders by allowing them to review the document.
Don’t waste money or time. That’s always a positive development, by the way!
The next time you are working on a project that requires access to existing design assets or where the quality of the output will be crucial to the success of the project, consider trying this method. It could be the key to producing a successful outcome.
