You have matches, a box of thumbtacks, and a candle. How can you fix the candle to the wall so that wax won't drip onto the table below?
The best solution is to pin the box to the wall, put the candle in the box, and light it.
Quite an unpredictable solution, right? It feels quite elusive when you’re trying to figure it out, but becomes obvious as soon as you know it. And believe it or not, most people fail to solve this puzzle and end up being astonished at how simple and obvious the answer was.
That’s our brain playing tricks on us. We fixate on the box’s function as a container, and it prevents us from considering it as a platform. If the box was empty from the very beginning, we would be more likely to find the correct answer. But when we need to think of an innovative way of using the box, we fail.
The candle puzzle was a demonstration of a single bias called “functional fixedness.” There are dozens of other flaws in reasoning that make it easy for us to think with common patterns but hard to think “outside the box.”
Integrated thinking patterns are a great evolutionary adaptation. They allow us to quickly apply the same actions and knowledge in similar situations so we do not have to learn everything from scratch every time. But they also prevent us from developing new ways to see, understand, and solve problems. From all those creative and innovative processes that are the holy grail of any startup.
Outsmarting biases is difficult, yet possible. People developed a range of problem-solving algorithms that can hack our biased brains. Like a scientific method. Or like a design thinking approach that is more suited for business needs.
What is design thinking (DT)?
The specific term "design thinking" was coined in the 1990s by David Kelley and Tim Brown of IDEO, but the design thinking strategy itself has been used in different variations since the early 1900s.
According to a commonly used design thinking definition, DT is a method for creative problem-solving. The main attribute of design thinking is a human-centric approach. It’s what separates DT from the scientific method, for instance.
Startups usually base their decisions on what is viable for business or what is feasible for the technology they possess. But design thinking makes you start by analyzing how users interact with your product. Simply put, it makes you improve the product’s UI/UX taking into account desires that users have.
Let’s look at the benefits of design thinking in action with an example presented by Oral-B and IDEO — those guys who coined the term we are talking about and apply design thinking principles to everything they do.
How Oral-B designed the best-selling kid’s toothbrush
Oral-B wanted a new kid’s toothbrush, and they hired IDEO to design it. The IDEO team wanted to go out in a field and do some field research, but their client wasn’t happy about it. Like, it’s not rocket science. We are talking about kids brushing their teeth, you can hardly observe anything new about this process.
But IDEO found what to observe, actually. They discovered that kids don’t hold their toothbrushes in fingertips as adults do. Children don’t have their motor skills developed yet, so it’s more comfortable for them to hold their toothbrushes in a fist.
Before, every kid’s toothbrush in the history of the world was based on the implicit assumption that parents have big hands and kids have small hands, so the kid’s toothbrush should be a smaller and thinner version of the adult’s one.
Pretty logical assumption, but IDEO’s research showed that kids don’t need little skinny toothbrushes. They need big fat toothbrushes. Oral-B started selling one such brush, and it has been the world’s best-seller for 18 months.
Doesn’t it feel the same way as in the case with the candle puzzle? The solution is pretty obvious, and today every kid’s toothbrush in the world is made comfortable for kids to hold it in a fist. But nobody noticed room for improvement until IDEO pointed at it.
What is the design thinking process?
To apply design thinking in practice, just like IDEO does, you need to follow the design thinking process that outlines a series of steps. It is not a strict step-by-step method but a focused effort that includes a variation of four stages: inspiration, compilation, ideation and implementation.
Don Norman in his book “Design of everyday things” provides the process of four steps, Stanford’s d.school offers the five-step model, and Nielsen Norman Group suggests the process consists of six steps. Let’s go with the one offered by NNGroup.
Six design thinking steps of human-centered design
Step 1: Empathize
The observation phase called “Empathize” is a way to deal with the uncertainty that is inevitable at the onset of any project. To beat the uncertainty, you’re googling, doing field studies, and qualitative interviews to collect and analyze information about what your users do, say, think, and feel. The result of this step is collecting an overwhelming volume of information.
Methods that come into play at the stage of empathizing:
- Requirement gathering
- Field study
- Diary study
- User interview
- Stakeholder interview
Step 2: Define
So you’ve got mounds of raw data gathered from your research, and now you’re blankly staring at that data thinking, “Where to from here …?” From there, you need to narrow down your data — crystallize, synthesize, and summarize your understanding of who you’re designing for and define the problem users have.
Bring all the data you’ve collected together to find patterns and make sense of it all within the context of the design challenge that you face.
Methods useful at the stage of defining:
- Persona building
- User journey mapping
- Building empathy maps
- Writing user stories
Step 3: Ideate
As users’ needs and pain points start to crystalize, you’ll see some opportunities for innovation. Time to brainstorm potential solutions inside your design team: start throwing random ideas to avoid the fear of a blank page and generate something new out of the boiling pot.
Brainstorming principles:
- Everyone has to be heard, not only the ones who speak louder
- There are no “silly” ideas — they can spark new thoughts
- There are no “silly” questions — by questioning obvious things you can find hidden imperfections (and fix them)
- The more ideas, the better
- The more diverse the ideas are, the better
Take a look at our collection of ideation techniques — they may come in handy at the third stage.
Step 4: Prototype
Time to turn ideas into prototypes. Prototypes offer a quick way to test your assumptions with real people. At the early stage of a design process, prototypes can be pencil sketches, PowerPoint slides, cardboard models, Figma wireframes, or whatever can simulate the user experience of the big powerful system you’re going to build.
Stage 5: Test
If your ideas make you do the wrong thing or a right thing but in the wrong way, this stage is your chance to figure things out. Testing gives the feedback you need to iterate on the prototype.
You only need up to five people to participate in a test — that’s enough to give major findings. Study each person individually, ask them to operate the prototype, and comment on their actions aloud.
Methods useful at the testing stage:
- Usability testing
- Accessibility evaluation
- Benchmark testing
Design thinking tools Eleken recommends for remote usability testing:
- Maze is perfect for unmoderated tests of your Figma prototypes
- and Lookback, a good choice for moderated tests
Stage 6: Implement
You can’t anticipate everything by testing your designs on small samplings. Your final and your most reliable test happens after the design goes live. So after your product is released, listen carefully to the feedback and monitor user problems, successes, and frustrations. This observation may trigger another circle of ideation, prototyping, and testing called to improve the user experience even more.
Some tools useful for observing results after implementation:
- Google Analytics to collect quantitative data and surface any trouble spots
- Hotjar, which gives you qualitative data — on heatmaps you can see how users interact with each page
How to practice design thinking
The design thinking algorithm is not a strictly linear process or a recipe you need to follow step-by-step. NNGroup recommends approaching it as a master chef, not a line cook: take the recipe as a framework, then tweak it as needed.
It is common to return to the two understanding phases of design, empathize and define, after your initial prototyping and testing. You may need more information or new ideas. You may also need to repeat some phases multiple times for better results. And you’ll naturally return to the starting point after your design gets implemented — with a new understanding, new insights, and ideas on how to improve the product even better.
With every new cycle, you discover a new set of unmet user needs — and that’s how design thinking works with problem-solving and innovation.
Want to learn more about design thinking? Check out how Netflix, Airbnb, and Uber applied this methodology to reach success.
Top Stories
The Difference Between Wireframe Mockup and Prototype and Their Roles in the Design Process
Designing a product is a complex and multistep process that results in many design deliverables. Therefore, there are many professional terms in UI/UX design, but the difference between wireframe, mockup, and prototype cause particular confusion among product owners who are not familiar with design. People often believe that these three terms are one and the same thing, and because of this, when communicating with a designer, misunderstandings arise.
For Eleken’s team, whose main duty is to provide UI/UX design services, creating these three deliverables is some kind of a daily routine. And to help our readers avoid such misunderstandings in the future, we will analyze in detail the features of prototype vs wireframe vs mockup and explain the place of these three concepts in the design process.
What is a wireframe?
A wireframe is a set of schematic (usually black and white) blocks that outline the arrangement of the elements on the future website/app interface. It usually shows the layout of the buttons, visuals, copy, but doesn’t go into details presenting only the main design ideas.
For example, below you can see a wireframe designed by Eleken for TenderX, a freight tendering platform. To tell the truth, such kind of platform is anything but simple. That’s why to be able to focus on the main screen contents before diving into details, our designers created wireframes.
We can compare a wireframe to a building plan: it serves as a guideline for builders during construction (in our case, during website/application development), but it is impossible to live in such a building. It does not perform any real functions of the product yet. Like building a blueprint, wireframes align the product vision with user needs and the product's technical capabilities.
The basic principle of creating a wireframe is simplicity. This is a static image of the interface that represents:
- what blocks of content the site/application has
- where exactly they are located
- how they are structurally related to each other
- how the user interacts with them (in general terms).
To create a wireframe a designer needs information about the purpose of the product, its target audience, and competitors. In case it is a complex project it would be better to provide a designer with the technical requirement that contains a detailed list of product features.
Why do you need a wireframe?
Basically, you need a wireframe to determine where to locate each type of content and design elements. As well, the development of this kind of deliverable is essential at the initial stage of the product design process to brainstorm new ideas, especially when you build the product from scratch.
Based on a wireframe and comments to it, you can compose the technical specification for other team members (designers, developers, SEO specialists, copywriters), as later they will lay visuals and functionality over the wireframe.
Among other advantages of creating wireframes are:
- They are fast to build. As wireframes don’t depict interfaces in detail, it doesn’t take much time to create them.
- They are cheap. Designers create wireframes in the same tool that they use to create the rest of the design (Figma, Sketch, Illustrator, and so on). Drawing with paper and a pen takes no money at all.
- They simplify communication with a team or stakeholders. Wireframes are great to communicate and discuss different design ideas at the initial stages of product development.
Types of wireframes
Wireframes differ by the level of fidelity (the degree of exactness). There are low-fidelity and high-fidelity wireframes.
- A low-fidelity wireframe is a freehand sketch or the most simplified plan created on a computer. Low-fidelity wireframes are better not to introduce to the customer without additional presentation, but they are great for the team’s internal communication.
A high-fidelity wireframe is a detailed plan with explanations for each element, connections between them, and other related comments. This type of wireframe will be understandable to the customer even without additional presentation.
A low-fidelity wireframe can be sketched in a few minutes, while it usually takes at least 1-2 days to create a high-fidelity wireframe.
What is a mockup?
A mockup is a page or screen of the finished application design, as it will look to the user. When talking about wireframe vs mockup, a mockup is an aesthetic version of a wireframe. It is colorful, with thought-out visuals and typography, and it gives viewers a realistic impression of the future product’s look. Still, mockups are neither interactive nor clickable.
While wireframes present basic structure, functions, and content, mockup focuses on the visual components in detail and shows style, rich colors, and true content of a future product.
Why do you need a mockup?
Mockups are vital for any type of project because based on mockups, engineers will develop a product, as well, mockups will be used for marketing materials, landings, and so on.
Designers use a mockup to:
- think over visual details and agree on them with the customer, since designers can create a mockup relatively quickly. Mockups also help to get customer feedback and learn their wishes or expectations for the future product look.
- review the product visually, test it and refine. Unlike the black and white prototypes, mockups showcase the UI in detail which makes it a great tool to discuss what looks good in the future UI, and what elements need some improvements.
To sum up, a mockup helps to review, analyze and iterate the product both with the team and with stakeholders.
What is a prototype
The essence of the prototype is to simulate the user experience. For that reason, it should be clickable. The prototype can be made from both wireframes and mockups.
On the prototype, you no longer need to mark what each element means, and how each product feature works. To understand this, you just need to click on the piece of the interface to which you have a question. When you click somewhere, something will happen, like on a real site/app.
Main characteristics of a prototype:
- It has a working interface - you can click sections and buttons on the page/screen and see what happens.
- It is needed to test the functionality before releasing the final version.
- Most of the elements that are planned in the final version work in the prototype.
Why do you need a prototype?
As we can understand from the characteristics of a prototype listed above, prototypes both look and function realistically. They most closely represent the future product both visually and functionally. That’s why prototypes are perfect to test and evaluate design ideas and concepts to get valuable user feedback.
Prototyping helps to:
- agree on the location of the blocks and buttons and conduct usability testing
- make sure that your product will meet the target audience needs
- identify and eliminate potential UI and UX issues
- develop new design solutions
A prototype is a great opportunity to test the usability, fine-tune the interface logic and user path of the future product before even starting the development process.
To learn about UX prototyping methods and tools read our another article What is a UX prototype?
What design deliverables to use in your project
When working on one project, it is not necessary to develop wireframes, mockups, and then alternately prototypes. On the contrary, to save resources, you can choose one or two formats and use them equally.
The choice depends on the following conditions:
- Your requirements. If it is enough for you to see the general design of the future product, ask a designer to make a mockup. If you need detailed documentation for technical requirements, your choice is a wireframe. If you want to influence the logic of the product functionality itself, a detailed prototype will help.
- Type of a project. When designing a product from scratch, it’s better to create wireframes and then mockups. In case, you need to design new functionality for an already existing design, then you can omit wireframes as such a product already has its visual style and design patterns, and create only mockups.
- Time and resource constraints. If the project is urgent and has a limited budget, you can limit yourself to just a mockup. If it is a complex site/app with heavy functionality, you may need a prototype for large-scale testing.
- The level of teamwork. If designers and developers understand each other perfectly, you can do without a wireframe and move straight to the mockup. Otherwise, the structure and functionality should still be documented to avoid confusion.
Deciding what design deliverable (wireframe, mockup, prototype, or maybe three of them) you need for creating an effective final version won’t be a problem if you have a design team you can rely on. At Eleken, we always voice our thoughts and explain the pros and cons of the chosen direction, and listen to our client’s opinions. So, if you need some help in designing a functional but simple and valuable product from your users’ standpoint - let us know and we will contact you as soon as possible.
And finally, below you will find a small test on how to differentiate three design deliverables discussed in this article:
How to Find and Fix UX Issues Early So You Don’t Lose Users
Imagine your microwave oven is broken. You buy a new one, and it gets broken again. After throwing your fifth microwave in the garbage bin, you decide to invite an electrician, who discovers that the cause was the poor electric wiring. The good news is, you finally got your wiring fixed. The bad news, you wasted money on five ovens.
A similar thing happens in UX design. When product owners feel that something is not working right, they often decide to make a redesign. But a new look does not guarantee that the underlying problems disappear. Often, they stay and continue frustrating users.
A more efficient method, in this case, is to find UX issues in design and fix them topically, without a full revamp. We can say this for sure, as we’re a SaaS design agency, and fixing bad UX designs is our job.
Many clients come to us with a request for redesign, but in the process of communication, we discover that there might be faster and cheaper solutions to their problems. And in this article, we’ll give you an idea of how it works.
How to find UX issues?
Finding UX design issues is the first step on a way to UX design problem-solving. There is a number of tools that can be used to detect these issues, or frictions, as we call them. The word “friction” is quite self-descriptive: it’s that feeling that a user has when the product is not designed in the most comfortable way.
Some of these UX research methods, such as user interviews and usability testing, can be run by product owners themselves. On the contrary, methods like UX audit need a person from outside with proper qualifications, a UX professional who is not familiar with the product and can look at your product with a “fresh pair of eyes”.
Usability testing
During usability testing, a researcher follows a group of users while they are performing tasks with the product. It also includes asking questions to understand the motives of the actions. By observing users, the researcher sees where they experience problems, make errors, or get lost. The research can be qualitative, as well as quantitative, and measure a range of usability metrics.
User shadowing
This method may seem similar to usability testing, but there are some critical differences. Shadowing is done in the “natural habitat”, so that the usage situations are not “staged”. User shadowing requires more time and resources from a researcher, but the results can show a wider scope than usability testing.
User interviews
This research method is more subject to biases as the researcher has to rely on what users tell about their experience instead of direct observation. Still, it is a very common tool that brings valuable insights not only to UX professionals, but also to marketing, customer success, and sales departments.
Customer support insights
Sometimes it is hard for designers to get to talk directly to the users, especially when talking about an outsourced team. However, there are people whose full-time job is to talk to users about the problems they encounter while using the product. The customer success team must be the designers’ best friends. They can provide accurate data on what places in the product make users stuck.
Analytics
The good thing about analytics is that this tool has little bias in itself, as we’re talking about pure data. Hotjar and Google Analytics don’t flatter designers to make them feel better.
The challenge with analytics is that its efficiency depends totally on the person who does the analysis. For instance, the analytics show clearly which pages cause users to abandon the task. But what is the reason? That’s the question for researchers to answer.
UX audit
This is Eleken’s ultimate tool when we start working with a new client who finds their existing design unsatisfying. Our designer scans through the product and evaluates every part of it according to the basic requirements of a good design following the heuristics of good design.
As a result, we prepare a UX audit report. In our work, it is typically a presentation of all UX design issues our designers found in the product, suggesting a fix to each of them.
The process of detecting and prioritizing UX issues
It’s always good to have more than one source to find UX issues. The process of working with UX design problems and solutions is not as simple as “find and fix”. Let me explain it using the example Acadeum, an eLearning app we redesigned for our client.
First of all, our designers went through user flows and highlighted the questionable areas. All the problems were listed on post-its in Figma and later discussed with the product team.
Apart from the UX audit, we also had access to recordings of several in-depth interviews with Acadeum users that we listened to. After that, our designers spoke to the customer support officer, the ultimate expert in users’ troubles. Together, they went through the app again and noted all the areas that were causing difficulties for users.
So, we ended up with a huge list of issues. To make sense of them, our designers sorted them by jobs-to-be-done. On the right side, we placed suggestions of solutions for each one.
So, now that we had the problem/solution table, it all seemed perfect… But in the real world, it’s not as easy as taking all of them and changing them at once. There are timing issues, tech demands, and so on.
The solutions had to be prioritized. To do that, we held a workshop with the product team, where we placed all the cards on the Impact/Effort prioritization matrix. At this point, it became clear what must be done first and what could be postponed.
Sometimes, when you try to fix every little issue, you lose precious time while trying to reach the stealing perfection. Prioritization helped us to fit into the tight deadline and finish the Acadeum redesign in three months. If you want to learn more about UX problem-solving process, read the full case study.
The two most common questions about UX issues are: “how to identify UX problems” and “how to solve UX problems”. Now that we have answered the first one, let’s move to the next.
In our work, we face all sorts of UX design problems. Examples range from complicated navigation to confusing fonts. The issues described below will give you an overview of the things we work with daily.
Long and confusing fill-in forms
Let’s take as an example a case of one of our clients, Ricochet360, a CRM system. Here is what the “add a new lead” screen looked like: 30 fields and no hints on how to fill them in.
Issue: no indication of data format.
Some fields like “phone number” can be entered in many different ways: with spaces, hyphens, brackets, country codes… It causes confusion for the user and complications for the data storage system.
Solution: unify the data format and give hints right in the field.
Issue: the form is too big to grasp.
Do users have to fill all 30 fields every time? Can they easily find the most essential ones?
Solutions: a red asterisk was added next to all the required fields. The most commonly used fields were shown on the screen, while the rest less frequently used were hidden behind the “Additional information” drop-down.
Flawed filtering systems
Filtering is an essential feature in apps dealing with large volumes of data. Oftentimes, a small improvement in filtering results in a huge improvement in user experience. That’s the first thing we fixed in Enroly, a student engagement product that hired us for a redesign.
Issue: The filter button was not visible
Solution: Remove it from the “search” menu and put it at the top of the screen along with the Search field.
Issue: Long list of filters that is hard to scan through
Solution: Split filters into groups by meaning.
Issue: Filtering tags were layering one on top of another, thus minimizing the working area.
Solution: Place the tags in one row.
We also tried to simplify the usage of filters by anticipating users' actions to minimize possible errors. For example, in the previous design, users had to enter nationality manually if they wanted to filter students by this characteristic. A simple typo could ruin the search. To prevent this, we created a drop-down list of all nationalities which can be scrolled or chosen after the typing has started.
The story of Enroly shows us the exciting world of filtering design. To find out more, read the full case study.
Cluttered screens
For mapping services, the amount of information that has to be fitted into one screen is one of the main challenges. We had worked with complex mapping products like Involi and Astraea which contain lots of data.
Issue: Side panels take too much space and the map becomes small
Solution: Add a “Hide side menu” button to close and open the side menu when needed.
Issue: The numerous objects on the map look the same and affect readability.
Solution: Differentiate the objects (receivers) by color: green for “working”, yellow for “selected”, red for “error”, and grey for “disabled”.
Bottom line, or how to fix UX issues fast and effectively
Sometimes UX issues are simple and easy to fix. And sometimes, it is the structure of a product that makes the product so complicated to use. In the former case, cosmetic changes are enough, in the latter case, fundamental work is needed to overhaul the structure.
Some issues are ruining the success of your product, while others barely impact anything and are only noticeable to perfectionist designers.
Overall, there are numerous ways of dealing with UX issues, but there is one golden rule: the earlier you find them, the better.
It means that you don’t have to wait until your churn rate grows to an unsustainable level and the customer support officer burns out from an excessive amount of tickets. Start with finding UX professionals who can have a fresh look at your product and ask them for an audit. At Eleken, we can analyze your product during our 3-day trial and present the issues and suggestions for you to later decide whether you want to us lend you a helping hand or not.
Sounds interesting? Schedule a call and we’ll tell you how to find the top UX issues of your app.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
