A drawing of a mid-fidelity wireframe being thrown in the trash.
I know, a drawing of a mid-fidelity wireframe is a low-fidelity wireframe, but this is a drawing challenge too people. We do what we can!

Scrap it, chuck it, give it away!

How mid-fidelity can give you freedom to explore new ideas and get the best from your UX project

Melanie Berezoski
5 min readOct 18, 2022

--

This article is day 18 of a 31 day series. A mash-up of the Inktober 2022 prompt list and UX terminology. Read more about the challenge here.

Day 18 | Inktober prompt: Scrap | UX Term: Mid-Fidelity

It almost writes itself

I have to admit, I was more than a little pleased when I saw the mashup for today. “Scrap” and “Mid-Fidelity” as in… “One of the best reasons to hang out in the mid-fidelity phase is so you can easily scrap anything that isn’t working and move on quickly to something better.” Seriously, I would say that, naturally, without any hesitation. So that’s fun.

What is Mid-Fidelity?

In user experience, when we say mid-fidelity, we’re talking about wireframes. There are three levels of fidelity that we work with, and you being the expert that you are can probably guess, without me saying it, what the other two are.

Yes! That’s it! Low-fidelity, and high-fidelity. Man, just typing that felt like a tongue twister, but for fingers… a finger twister? I don’t know, try it. It was weird. Low-fidelity, mid-fidelity, and high-fidelity. Okay, but seriously, let’s focus here.

Low fidelity refers to your sketches. Usually just putting pen or pencil to paper (depending on how bold you’re feeling that day). It is very common for people outside of UX to say low-fidelity when they actually mean mid-fidelity. Partly because I don’t know that a lot of people outside of UX know how much sketching we do as UX designers. My time tracker for work seriously doesn’t understand. I can’t tell you how many times I’ve had to tell it to ignore my “idle” time. I’m working here!

Although, I’ve never had someone get upset when they get a low-fidelity wireframe when they expected a mid-fidelity wireframe. There is a bit of novelty to it, and I think that can dazzle people a bit. So maybe use it as a teachable moment. Why not?

Example of low-fidelity wireframes. Three hand-drawn screens with monochromatic accents.
Example of low-fidelity wireframes.

Next up is “high-fidelity”. Yes I know, I skipped mid-fidelity. That’s because it’s mid-fidelity’s special day, so I’m saving them for last. Obviously! High fidelity is where you take your wireframes and you dress them up with all the color and graphics. Essentially, you want it to look as close to the real thing as you can. Granted, you will likely have Lorem Ipsum strewn about for some of the content, but the rest should at least represent what is expected in the final product.

Mid-fidelity is… you guessed it! Right in the middle of low and high. Mid fidelity is when you let what’s been put down on paper jump onto the screen. And if that doesn’t work, then you do it yourself by creating it.

A side-by-side of a screen shown in the mid-fidelity format and the high-fidelity format.
An example of a screen in mid-fidelity and high-fidelity.

I create using Adobe Xd, but I heard a rumor that there is another one called Figma or something, not sure. I know, sensitive subject. Adobe just acquired Figma, and a lot of people are not happy. I can’t even link a specific article here because so many people have been talking about it. If you want to learn more, I might suggest googling, “so how does everyone feel about Adobe acquiring Figma?” But I’ll stop my discussion here, and I’ll stop poking the bear. Also, I won’t mention Sketch beyond now when I just mentioned Sketch, because I’ve never used it and I don’t currently know anyone who does. Though if you meet someone who does, they’re probably old-school and you could learn a thing or two from them.

Why is it important to UX?

I kind of hinted at this in the beginning when I was talking about how mid-fidelity is great because you can scrap it, and that’s true. In UX we’re not uncovering The One solution, like finding Neo in the Matrix. We’re finding a possible solution based on research and really just trying things out. Mid-fidelity allows you to create something that people can understand, even if it isn’t winning any beauty contests. You also have the ability to test with mid-fidelity. Most programs that are used to create mid-fidelity wireframes also allow for the creation of mid-fidelity prototypes. What? I know!

So use this to your advantage. Hang out in the mid-fidelity stage as long as you can. Use it for testing and for gathering feedback. It keeps the final touches of applying color and design out of the picture so you can focus on usability and experience.

How do you make one?

To make a mid-fidelity anything, be that a wireframe or a prototype (the difference is that the latter is wired up so you can interact with it in prototype mode) you start with one of the programs I mentioned above. There are online versions I’m sure, I think I’ve even seen one where it was created using Google Slides. Your limits are only your creativity here, but the programs I mentioned are built for this and will make your life… not simpler, but maybe more effective, and custom? I mean, we are professionals, we can’t expect everything to be easy, right.

Takeaway

Mid-fidelity is a stage in the UX process where you’re making some decisions about placement and specific elements within your design, but you’re not yet worrying about the finer details like colors or imagery. You can focus on how everything works, and how effective those decisions and placement are before you move on. It’s a great opportunity to try new things because you can be scrappy and scrap the whole thing if you want.

And final final takeaway… I feel I have to say something because I mentioned it and I don’t want to be insensitive. I’m fortunate that the program I use everyday to create has not been acquired and I don’t have to worry about it significantly changing in ways I don’t like, or going away completely. It’s a big deal to a lot of people, and I get that. We are in an industry of empathy and I hope that everyone can remember that, and find a way to support each other, whichever side of the fence you fall on. I wish the best for Figma and all of its users.

--

--

Melanie Berezoski

I believe you truly understand something when you're able to laugh about it. So here I am, trying to make you laugh about design.