As a Senior User Experience Designer, I have noticed a common pitfall among many designers. They jump straight into visual design using tools like Figma, forgetting the importance of creating sketches, wireframes, and prototypes before getting into high-fidelity screens. (My colleague Barbara also wrote an interesting blogpost about this topic)."It's like trying to fly before you can even walk!"
So, let me take you on a journey through my experience in the design field and how I learned the importance of these different design fidelities. Buckle up, it's going to be a wild ride!
In my early days in the field, I felt like a young superhero with a new set of powers. I couldn't wait to jump straight into visual design, creating beautiful interfaces that would WOW my team and clients. I quickly learned, however, that creating high-fidelity screens right off the bat was not always the best approach.
It was during my second job, working on a tablet app for dentists, that I realized the importance of sketches. We were tasked with designing a stripped-down version of the desktop application. Instead of jumping straight into the computer, I started sketching out different ideas, trying to find the best layout and flow to look at the different views of the patient’s mouth. As I sketched, I could feel my creative juices flowing, and I was able to quickly explore different solutions. I even found myself getting excited about some of the wilder ideas that came to mind.
After gaining a clear idea of the direction I wanted to pursue, I proceeded to work on wireframes. Wireframes, I realized, were like a superhero's costume. They provide structure and direction to the design, just as a superhero's costume provides structure and direction to his actions.
With the help of a wireframe tool, I was able to create a visual guide that outlined the screens’ structure and their interconnections. The wireframe enabled me to explore divergent ideas from my initial sketches and outline the overall structure and flow of the app.
From there, I moved on to prototypes, which were like superhero gadgets. These powerful tools refine and bring our designs to life, much like how superhero gadgets enhance and exemplify their extraordinary abilities.
I used a prototyping tool to create an interactive experience that allowed users to engage with the screens, gaining a sense of how they would work together. It felt like my design came to life as I tested different scenarios and watched how the dentists responded to various elements.
Over time, I began to understand the importance of the continuum between these different design artifacts. There is no clear boundary line separating sketches, wireframes, and prototypes. They are all part of a continuum that supports ideation, concept validation, refinement, and usability testing.
Just as a superhero has a range of powers, a designer has a range of sketches, each with its own unique purpose.
The continuum of design fidelities proved exceptionally valuable during my work on a new e-commerce website project. In this project, the team had a rough idea of what it wanted to achieve, but it encountered challenges in defining the optimal flow for the checkout process.
By using sketches, wireframes, and prototypes, I could explore diverse layouts and flows and conduct user testing on each of them. And with each round of refinement, we were able to enhance the design further.
Looking back on my experience as a designer, I realize that each fidelity has its own unique purpose and supports the design process in different ways. Delving into the design process without rushing into high-fidelity screens is vital. By taking the time to explore multiple ideas and solutions through sketches, wireframes, and prototypes, we can gain invaluable insights and refine our vision. This approach enables us to create a more thoughtful and well-crafted visual design, ensuring that the end product meets both user needs and design objectives
As I continued to work on more projects, I experienced the value of this approach firsthand. I discovered that dedicating time to sketching and wireframes empowered me to explore different ideas and directions without getting bogged down in the details. It also helped me to communicate my ideas more effectively to the rest of the team.
One project that really stands out in my memory is a mobile app I worked on a few years ago. The client came to us with a general concept in mind, but it was up to us to bring his vision to life by fleshing out the finer details and crafting a design that would resonate with their users.
We started by sketching out different ideas for the app's main screens. We explored different layouts, navigation patterns and interactions, and eventually settled on a direction that we all felt good about.
Next, we moved on to wireframing. Armed with our sketched ideas, we crafted detailed wireframes that served as the blueprint for the app's information architecture and allowed us to define the fundamental layout and flow of the app. Putting our wireframes to the test, we sought the valuable input of real users and used their feedback to refine our designs even further.
Finally, we moved on to prototyping. By using a prototyping tool, we crafted a fully functional version of the app, enriched with interactions and animations. Once again, we conducted extensive testing with our users and gained valuable feedback that guided us in refining and perfecting the app.
By the time we started working on the high-fidelity screens, we had a clear direction and a solid foundation to work from. This allowed us to focus on the details and polish the design, rather than getting bogged down in major revisions and changes.
Looking back on that project, I can't imagine approaching it any other way. Taking the time to sketch, wireframe, and prototype allowed us to explore different ideas and directions, test our assumptions with users, and ultimately create a design that worked well for everyone involved.
So if you're a designer just starting out, or even if you've been in the game for a while, I encourage you to take the time to explore different fidelities in your design process. By doing so, you'll not only create better designs, but you'll also be able to communicate your ideas more effectively to the rest of your team. And who knows, you might even discover some hidden superpowers along the way.