For those from outside the industry, the word ‘wireframes’ may sound complex, boring, or even intimidating. But if you are in the design or product field you know that wireframes are actually a great way to present how the digital product will work and look.
We are a UX design agency for product companies so we know a great deal about wireframes and their importance in the design process. We also know that what seems obvious to designers can still be a mystery for specialists in other fields. In this article, we will address all of your concerns related to high-fidelity wireframes and share some examples from our talented UX designers.
But first, it is important to understand the basics.
What is a wireframe?
A wireframe is a schematic layout of the future product, will it be a website, an app, or a platform. A wireframe is always a simple text-and-line representation. It is sort of a skeleton of the future product design.
Wireframes are low-fidelity prototypes. And this causes some confusion: what is considered a wireframe, as wireframes are prototypes, but not the other way around? This topic requires an in-depth explanation, so when you're curious to learn the difference between wireframes, mockups, and prototypes, go read our dedicated article.
Usually, wireframes look like schematic blocks with elements that visually illustrate how various components of the website will be organized. They are monochrome, often black and white, but not always.
Here are high-fidelity wireframes examples our designers built for the cloud-based veterinary management platform. They use black and pink color to highlight different elements of the product's future look.
The understanding of how and why we use wireframes in the design process can help us with high-fidelity wireframe definition.
Designing a product is a complex journey, so we need to break it down to smaller steps.
Wireframing is part of ideation and prototyping stages of the product design. Depending on the stage of product development, designers use different fidelity wireframes ranging from low to high. From the design point of view, fidelity is how detailed the wireframe of the future product will be.
What is a low-fidelity wireframe?
A low-fidelity (lo-fi) wireframe lies between a black and white sketch on paper to a simple digital sketch. Focusing on the main elements of the design, it usually has boxes and lines depicting the main idea of the website or app. Interpretation of the design is missing, and not much is offered as user interface interaction.
Lo-fi wireframes can reflect a product’s basic architecture and features, showing where the content and visuals blocks will be placed. With the help of lo-fi wireframes, the designer can visualize concepts and design possibilities at the beginning of the product development phase.
Low-fidelity wireframes are part of the ideation process. As much of the details are missing at this stage, designers usually present them to the client with some additional comments. Lo-fi wireframes are time-saving for both product owners and the design team. Simplicity, effectiveness, and time-saving characteristics make low-fidelity wireframes a valid part of the product development equation.
We hope that by this point you got an idea of how wireframes work. However, there is still a big question to anser .
What is a high-fidelity wireframe?
Following the logic, a high-fidelity (hi-fi) wireframe is an advanced version of a low-fidelity wireframe. However, it is more than a sketch with more details, but a series of thought-through screens that illustrate each element and the connections between them. But unlike more developed prototypes, wireframes are always static. The graphics of hi-fi wireframes are usually more distinct than of lo-fi wireframes, but not as detailed as of hi-fi prototypes`.
The key difference between low-fidelity and high-fidelity wireframes is that lo-fi represents design direction and general layout while the hi-fi is well-researched and presents a more precise look and functionality of the future product.
Lo-fi sketches can result in human error and deliver confusing messages. High-fidelity, on the other hand, offers fewer chances for human error. The feedback from hi-fi wireframes is more constructive, since the participants get the product design idea more clearly, which also contributes to developing a better and more complete user experience. As a result, hi-fi wireframes leave little to no room for misunderstandings and bring more productive results.
Hi-fi wireframes take more time to develop and provide a better visual representation of main screens. Good hi-fi wireframes should rely on user research to provide a solid base for the finalized UX/UI design. You probably noticed that our hi-fi wireframes mentioned in this article are often different in detail level. The reason is simple:It depends on the project we are working on and the client’s request.
More detailed wireframes require a little more time, but as you can see from our high-fidelity wireframe examples, they must remain very accurate in presenting the future design to avoid confusion.
Now when we figure out what high-fidelity wireframes are and why they are good, it’s about time we address the last question.
When to use hi-fi wireframes?
High-fidelity wireframes are one of the most effective UX deliverables. First of all, they are a great base for more detailed mockups that imitate how the product will work. Wireframes can be used to represent the screens and how they appear after one another when the product is in use.
Hi-fi wireframes can also be used to create a strong framework for your design. High-fidelity wireframes give designers a ground to make better decisions related to the final product's design.
Here’s a hi-fi wireframe and finalized design of our project. You can see that wireframe is a pretty accurate representation of what it will become.
One more indicator that the product needs high-fidelity wireframes is when the designer needs to visualize the specific design ideas to stakeholders. It is sometimes difficult for the client to visualize the outcome of the particular software or app based on very simple lo-fi wireframes, while high-fidelity design delivers most of the details, making it easier for the client to approve or suggest changes.
Hi-fi wireframes can also save you when you are building a startup and are aiming to find investors. To not waste a lot of resources, you can opt for using hi-fi wireframes to present your MVP and get investors to see your ideas.
At Eleken, we use high-fidelity wireframes to get feedback on things like:
- The overall the look-and-feel of the future design;
- How readable text is and what size it should be;
- What images to use for buttons and other graphics;
- How big margins should be between different elements
- Whether your logo fits with the overall design.
- And the overall UI layout enhances the aesthetic and content of the future product.
Our Head of Design recommends building hi-fi wireframes when you are creating a product design from scratch. If you are redesigning the existing product, wireframes can be skipped. And let’s not forget about mockups. We build them for almost every project, and the base for mockups are good old hi-fi wireframes.
Conclusion
High-fidelity wireframes are a very effective part of ideation and prototyping stages of the product design process. Realistic and time-efficient they are the skeleton of the future digital designs and a great way to communicate design ideas to the team and clients.
Eleken designers are ready to guide you through the pros and cons of low-fidelity and high-fidelity wireframes. We will help you pick the approach that is best for your product. Book a trial with our designers and see for yourself that wireframes are the great start to future powerful user experiences.
Top Stories
The Power of UX: Examples How UX Design Can Solve Business Challenges
The success of any digital solution, from a small niche app to a platform serving millions, depends on how well it meets users’ needs. And those needs are often not as obvious as they may seem. For instance, an unclear menu button or a redundant interface element, may cause users’ friction, confusion, or cognitive overload. Eventually, such design flaws may lead to decrease of the most critical business metrics.
Luckily, there is a superhero that can save the day – UX design. It shapes user behavior and addresses any kind of issues that occur during user-product interactions. We at Eleken have rich experience working with different SaaS products, so we know the importance of user experience in a battle against various business challenges. Keep reading to explore the power of UX.
The importance of UX design for business
As we mentioned, UX design influences business metrics. But how? We’ll discuss it in details in a bit, and for now, we’ll say that design influences users’ feelings regarding your product, whether it makes them happy or frustrated. Users’ feelings, in turn, affect how your product performs from the business point of view. If a particular aspect of your product doesn’t perform well, the reason is likely hiding somewhere in the user experience.
With this in mind, let’s see why UX is so effective when solving various business challenges.
UX considers users’ psychology
When interacting with a product, people perceive it on different levels. Even if the app or platform seems completely relevant to their goals, they may struggle while using it. One of the key roles of UX design is to handle cognitive biases and take into account every aspect of the user experience. It helps avoid components that may cause cognitive overload or lack of accessibility. To achieve this goal, designers dive deep into the audience’s specifics and find a way to deliver as relevant user journeys as possible.
UX relies on data
UX solutions are based on the results of qualitative and quantitative surveys rather than theories and assumptions. Thanks to comprehensive user research, a product team studies the audience’s needs and the market’s specifics. User interviews, field studies, A/B testing, and other methodologies allow designers to detect and analyze numerous aspects of user-product interactions.
UX directly impacts business metrics
UX design directly affects metrics that are critical for a SaaS business’s success. To name a few, these are conversion rate, customer acquisition cost (CAC), customer lifetime value (CLV), net performer score (NPS), churn rate, and many more. Thanks to proper UX solutions, a business can improve the product’s value for customers, encourage them to recommend a service or platform, and overcome churn.
This makes the ROI of UX really outstanding. According to a Forrester survey, every dollar invested in UX may return your business up to 100 dollars, while the conversion rate can increase by 400% thanks to proper UI/UX solutions.
UX simplifies complex things
The advantages of UX design described above are just the tip of the iceberg. The most complex digital product’s rely on user experience design to make their solutions accessible to users. For example, a freight tendering platform that connects shippers and carriers through RFI is a solution for the logistics industry. Sounds a bit complicated?
Pay attention how a well-designed minimalistic sidebar navigation can simplify the complex product’s navigation:
Read the whole story of TendrX logistics platform UX/UI design made by Eleken.
And now, let’s talk about several most common challenges companies can overcome with relevant UX solutions.
Business problems that can be solved with UX
The following problems are very common for modern digital products. Here is how businesses can solve them with the help of UX design.
1. Low conversion rates
Conversion rate is one of the essential metrics for SaaS companies. And many of them struggle to find the right solution to convert more free trial users into paid subscribers. Even if the idea behind an app or platform is great, it may seem blurry at first, so newcomers often fail to realize the value of the product and leave it. Besides, people may need help learning how it all works and how to use it.
The solution to this issue good onboarding experience. UX designers use different methods and tactics to determine how to introduce a product to potential customers, explain its core features, and communicate its value as early as possible. Normally, designers turn to specific UX onboarding patterns. If implemented properly, these techniques eliminate friction at the beginning of users’ journeys and allow businesses to convert visitors into customers.
2. Unclear product positioning
When a potential customer bumps into a landing page or first launches an app, they need to get answers to two main questions:
- Where am I?
- What should I do next?
If your product fails to answer these questions immediately, a visitor will likely leave it for good. And that is another issue that can be fixed with the help of UX.
Here, we should go back to users’ essential psychological needs. One of the most common mistakes that lead to losing customers’ trust and result in higher churn is the ambiguity effect. This cognitive bias confuses people because they don’t understand where they are and what they are supposed to do. As a result, it’s easier for them to leave than to keep looking for answers.
UX solves this issue by instantly and clearly answering these two critical questions. This effect can be achieved with UX readability, minimalistic and intuitive interface, smooth navigation, and clear call-to-action buttons. Besides, the design for simplicity often relies on consistent content positioning and helpful visual clues (icons, contrasting colors, clear interface architecture, and so on).
3. Inconsistency
For a successful SaaS company, constant growth is vital, as well as gradual changes in its design requirements. At some point, you may notice that your digital products, landing pages, websites, and even social media channels are inconsistent and do not match each other in many aspects. This challenge may not seem critical at first, but eventually, this inconsistency may confuse users and make your product design irrelevant to your current business objectives.
But what are the benefits of UX design in this situation? Let’s have a closer look.
After a comprehensive UX audit that reveals design flaws and mismatches throughout all components of your product, designers can help you come up with the most relevant solutions depending on your very case. Apart from ensuring better consistency, the design changes have an immediate impact on how customers perceive your product. Any element of an application or website, from button color to image style and font size, may completely transform the way your product looks and feels.
4. Lack of customization and personalization
Personalization is a result-driven technique that allows companies to deliver more relevant experiences within digital products aimed at individual user needs. Customization, in turn, provides users with more freedom and control over interfaces when interacting with apps or platforms. Both methods allow you to deliver the content people strive to get, ensure helpful recommendations based on customers’ personal preferences, and boost the audience’s trust in your brand. As stated by the McKinsey research, making your solutions more personalized increases your revenue by nearly 40%.
However, personalization and customization should be implemented wisely. Otherwise, these powerful techniques may turn into a burden for end-users, resulting in even more business challenges. The goal of UX design here is to provide the right balance and make sure that personalized content is not getting boring, redundant, or unhelpful.
5. Irrelevant data and insights
Every company uses different tools to collect data about their customers’ expectations and product performance. However, the solutions like Google Analytics are often not enough to provide a clear view of what challenges your end-users face with your app. As a consequence, you may lack an understanding of your target audience and their current needs. To fill those gaps, you can turn to detailed UX research.
UX designers use various techniques to learn more about your customers, including user interviews and field studies. For instance, A/B testing can overcome numerous business challenges. Keeping the most crucial metrics in mind, you can run such tests based on your product team’s hypotheses regarding potential improvements. Target users will pick what they prefer, allowing you to gather useful feedback and keep your solutions relevant to the current business requirements.
Now that you know why UX design is important when it comes to eliminating various business problems, let’s take a look at a couple of real-life examples.
Examples of UX solutions that helped address business challenges
The following cases prove that finding the right UX solution can save the day for SaaS companies and their customers. Although each of these problems had a different cause and nature, both of them were tackled thanks to the right decisions made by product design teams.
1. Netflix: the paradox of choice
We all know Netflix is the king in the world of media streaming. However, this doesn’t mean that there are no issues affecting the user experiences of Netflix subscribers.
The challenge: According to recent reports, one of the most significant problems faced by millions of Netflix users is the paradox of choice. This issue occurs when a person has too many options to choose from. As a result, people spend too much time trying to make the right decision. In the case of Netflix, the paradox of choice has become a major challenge.
Since this streaming platform offers thousands of movies and series to pick from, users often feel stressed as they waste time looking for something they would like to watch.
UX solutions: Netflix has spent lots of money and effort trying to tackle the paradox of choice issue. They conducted numerous surveys and tested various solutions to provide more effective personalized recommendations, helping users spend less time browsing.
Here are several potential UX solutions that may address this business challenge faced by Netflix and many similar subscription-based media services.
- Shuffle Play feature. Many viewers appreciate services that start playing a random movie or TV show episode once they enable it. This trick allows busy users to save time when choosing from dozens of options.
- Enhanced personalization. Services like Netflix constantly improve their approach to personalized content. Movie recommendations are based on users’ previous choices which makes the experience more personalized.
- Recommendations based on feedback. Rating systems are similar to the world-of-mouth effect as other users’ feedback (even if it’s not a full review, but a number of stars evaluating certain content) plays a crucial role in decision-making.
2. Gridle: improving the onboarding experience
One of the key business challenges to overcome is retaining potential customers that tend to churn if the platform doesn’t convince them to stay. In particular, Gridle, a client management platform for business owners, faced this problem and started looking for an effective solution to handle it.
The challenge: One of the issues of Gridle platform was that many users were leaving the app without taking the expected steps that would seamlessly guide them to the bottom line. The company turned to Eleken for platform redesign . One of our main goals was to help Gridle increase the conversion rate by improving the user experience.
UX solutions: The problem of low conversion rate is often caused by an ineffective, unclear, or irrelevant onboarding process. The Eleken team analyzed the onboarding process of the existing platform, and implemented an effective UX strategy to reduce friction by making Gridle’s user onboarding clear and concise. Here are the key solutions we came up with.
- Signup process. Users can quickly go through registration since they don’t need to fill out numerous forms. The signup process takes just a few simple steps.
- First in-app experience. The onboarding process instantly introduces the app’s core features and explains how to complete the essential tasks, such as adding a new customer and importing customer data to the platform.
- Product tour. We turned to Intercom’s product tours that help users quickly learn the interface. This decision saved time and effort for developers since they didn’t have to implement custom onboarding.
All these solutions streamline the onboarding process, improving the bottom line and smoothly guiding newcomers through the product. Gridle’s customers loved the new modern and user-friendly design which positively influenced the business and boosted growth.
Conclusion
When customers interact with a digital product, every single point of their journeys matters. That is why UX is important for business. If people experience confusion, frustration, or lack of concentration, the problem probably hides somewhere in the product’s design. And that is where you need UI/UX design services.
We at Eleken know how to use the power of UX as an effective tool against various challenges. We conduct user research, create personas, and build user flows to understand what customers actually strive to get and design a product that meets those goals. Need a solution for your business? Contact us!
Healthcare UX: How Design Can Solve Biggest Challenges for Patients, Clinicians, and Institutions
As a design agency, we are twice as happy when we get a chance to work on products with a purpose, such as healthcare projects. Recently we’ve had a couple of projects in this field and we can say it is both an encouraging and challenging experience.
Working on products that aim to preserve human health is highly rewarding, but it is not the easiest field for UX designers. Today we will talk about challenges in UX design for healthcare.
Some background
Healthcare industry is being really slow to adopt information technologies. The Nuffield research states that there are at least 10 years of distance between healthcare and other industries in digitizing their processes.
There’s no surprise that in 2021, the year when the demand for digital solutions is higher than ever, healthcare is trending. But we argue that it is not just momentum: it had a big potential even before that.
Investor Kevin Ryan, whose investment activity focuses on healthcare tech, says that the certain backwardness of the industry creates a big pool of opportunities for startups and investors:
…starting two or three years ago, I just felt like both in New York and in healthcare in general, there were huge opportunities because there are so many aspects of the healthcare system that just don’t work well. It’s incredibly expensive, the electronic records are not great, it’s super inefficient. Most of us are very frustrated by this whole healthcare system, which means opportunities.
Ryan hired a team of nine medicine professionals, “doctorpreneurs” so to say, to select the projects to fund. And he’s not alone: other investors turn their attention to healthcare, too.
Telehealth alone shows a striking revenue growth: according to the report by McKinsey, total annual revenues grew 83% in 2021 compared to 2019. This graph shows that telemedicine has taken on a completely different volume of operation compared to pre-pandemic times.
There is no doubt that the market is growing fast. But what about user experience? In healthcare, it is quite complicated, to say the least.
Healthcare and user experience
With all that delay in technology advancement of the industry, user experience is even more behind, about 10 years or more. Developers of healthcare tech do not pay much attention to user experience as there is often no competition, so no need to do “extra” work when there is enough demand anyway.
While all the lifestyle and work management apps use everything that can give them an advantage in marketing, design, communication, healthcare software providers don’t have to worry about that.
Main challenges for UX in healthcare
One of the biggest problems for doctors used to be a large amount of paperwork. They had to dedicate enormous amounts of time just to write down the symptoms, diagnosis, prescriptions, and many more. There is no surprise that doctors’ illegible handwriting has become a meme.
Healthcare system digitization was supposed to free a bunch of time for doctors to do their direct work: interacting with patients. However, it turned out that working with software still occupies a large chunk of their time.
By 2016, physicians came to spend about two hours doing computer work for every hour spent face-to-face with a patient. Their working hours increased and it led to a large number of burnout and depression cases among medical specialists. To better understand the level of frustration that doctors experience with those new systems, read Atul Gawande’s article Why Doctors Hate Their Computers.
Healthcare software is often aimed at keeping track of many health indicators, more than a single doctor is able to track. However, no artificial intelligence (AI) yet is trusted enough to give professional medical advice. Apps still need lots of human input to function. As a result, doctors are being busy interacting with the app, thus having less time to communicate directly with the patients.
When our team was working on the design for Refera, a dentist referral solution, one of the most important things for us was to simplify the user flow to make navigation as easy as possible. Software for medical management will always have too many things happening on the screen. We tried to introduce some visual hierarchy with an accent color and made an image of the oral cavity for choosing the tooth that needs to be repaired.
More is too much
Until digital instruments were introduced in the healthcare system to help keep each patient’s data, much of that information was lost, and those pieces that were saved by conscientious patients could contain volumes of data that are too big for a single doctor to analyze.
One of the objectives of software, along with diminishing the amount of handwritten paperwork, is to keep all the databases on each patient saved in one place. It allows us to keep large amounts of information, but these solutions often lead to the same effect: with an abundance of information, doctors get overwhelmed, and easily miss the most important things.
How do healthcare startups address this situation? So far, the answer is a faster technological advance. When tech tools become more reliable, they can perform more tasks. Nowadays, AI solutions in healthcare are working on harder tasks, such as diagnostics.
Such tech companies as Kheiron Medical Technologies are working on developing AI-powered software that can detect breast cancer at early stages. Another example is DiA Imaging Analysis, which automates the analysis of ultrasound scans.
Uniqueness of technology
Many software products in healthcare rely on a unique technology. This creates an unbeatable value proposition, thus leading to the negligence of user experience. When users have no choice because they need the technology, the better design won’t do much for the product. It just doesn’t pay off.
Hard to test
As it often happens with product companies, when there is very little investment in design, there will be even less investment in UX research. Less attention to the research means less testing, and less testing means poor user experience.
Specific challenge of the healthcare industry is that recruiting doctors for usability testing is more complicated than recruiting regular users. There are many hospital regulations, bureaucracy, and heavy workload of medical workers. Healthcare products invest largely in functionality testing, while usability testing is an afterthought.
Long development cycles
In healthcare, digital products are often developed slower than in other industries: there has to be new technology or a proven idea, then it needs to comply with all the regulations, go through all the bureaucratic processes… And often these are the products that are vital to human health, so that the launch date has to be as fast as possible.
Proper UX research and testing require time. In many cases, after a round of testing, the product needs to be modified and tested again. With high in-demand products, nobody wants to waste time on those parts of the design process that don’t relate directly to functionality.
The dark side of metrics
When digital products enter the healthcare industry, their efficiency inevitably starts being measured in quantitative metrics, such as time of response or number of patients served. However, in such a delicate sphere as healthcare, sometimes metrics can do more harm than good.
As Chris Keiss, healthcare UX designer, states, strict metrics always bring Goodhart's law to play. For example, if a doctor’s performance is evaluated based on the number of patients that they can consult in one day, they will likely try consulting them faster than normal. Naturally, this approach can lead to less attention given to each patient.
The need for quantitative metrics can be argued upon, but in healthcare, the price of introducing such metrics can be too high. We may think that the only metric that matters is the health of patients, but it is very hard to calculate objectives, especially given the relatively short product design cycles.
We discussed more on why both quantitative and qualitative metrics are important in our article about UX design KPIs. In Eleken, we think that user experience specialists have to adjust their measuring principles to the industry specifics.
Designing for doctors, patients, companies
The situation in healthtech looks similar to the classical “good-fast-cheap” rule: you can’t have all three at the same time. UX designers have a hard time balancing the needs of doctors, patients, and companies. Often they have to prioritize one group over the others.
As the market grows and the competition increases as well, there are more and more solutions aimed at providing the best user experience to patients. It is paramount in the world where patients can choose between different software providers.
One of the modern healthcare solutions, Lively, a startup for health savings accounts, is applying a consumer-first approach. The founders Alex Cyriac and Shobin Uralil tell that the idea came from their personal experience. Naturally, the product that they build puts user experience in the center.
Final thoughts
Complexity of products, low-competition technologies, neverending bureaucracy — the obstacles on the way to user-oriented healthcare software are numerous. In the healthcare industry, the stakes are high and user experience is not the highest priority.
Yet we are optimistic about the future: with the rapid growth of the healthtech market, the demand for good UX design will grow, as well. In 2021, we’ve had a chance to work with healthcare products that take user experience seriously — and this is very encouraging. We hope to see more human-centered design in software aimed at preserving our health. Curious what it looks like? Check out our list of human-centered design examples.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
