5 Wireframe Examples from Our Favorite Projects

Every screen design starts somewhere. In most instances, that point of origin is a wireframe.

Wireframes are the first visualization of your user research. They translate the insight you’ve gained from user research into blueprints for the user experience and interface. 

When they’re kept at a low fidelity, wireframes are the ideal medium for getting feedback from users and stakeholders. The blueprint-esque visuals take less time to change, so you can rapidly evolve your design vision before the details become too complex.

Despite playing a critical role in the UX design process, wireframes aren’t always easy to create. Giving your user research a visual form requires you to make creative choices, which always brings some level of ambiguity.

Thankfully, one of the cures for uncertainty is inspiration. To provide you with some models of how we create wireframes, I’ve collected both low-fidelity and high-fidelity examples from some of our past projects at DePalma.

Low-Fidelity Wireframes Examples

Onboarding and buying for an ecommerce mobile app

Earlier this year, we designed the user experience for a mobile ecommerce app. The app allows independent retailers to easily sell their goods directly to consumers.

Ecommerce has exploded over the past several years, and it’s one of the best environments for proving the ROI of experience design. In this industry, better UX translates directly to higher conversions and more revenue.

Here’s our wireframes for the onboarding workflow:

We kept this workflow relatively straightforward, because, well, the entire point of an optimized onboarding is to eliminate barriers for the user. We opted for one form to minimize the number of steps users had to take before they could use the app.

As you can see below the text input fields, there are two types of profiles a user can create: a buyer or a seller. Below, you’ll see the workflow buyers go through to view and purchase products:

In case they made a mistake during registration, the opening screen asks first time users to recommit to their choice of buyer or seller.

Once they choose buyer, they’re immediately shown products on the next screen. These wireframes allow users the option to view products in featured and feed views. The wireframes map out each screen users can access throughout the process — down to additional information about each seller.

Web application for janitorial services

Small businesses of all types are transitioning from running their business with paper documents to web and mobile applications. Things often go wrong when they’re forced to adopt overcomplicated software that only partially meets their needs.

Sometimes it really is better to have your own solution designed and developed. And that’s exactly what we did for a janitorial services company.

Here’s a wireframe from their web application:

Our vision for this application was a lightweight design that made it dead simple for users to perform a few important actions.

Our research told us which data points users would need to add and update on a per client basis. This wireframe maps all of the primary tasks that our audience needed to accomplish on a day-to-day basis.

Sometimes less really is more.

Visual feedback for a virtual assistant

If you’ve been regularly reading any UX publication, then I’m sure you’ve seen an article about designing voice user interfaces (VUIs). Natural language processing has finally reached a point where the technology can go mainstream.

Pioneering VUIs like Alexa, Google Home, and Fin only foreshadow a much larger market for voice technology. The next milestone for this technology will be to empowering users to complete increasing complex tasks.

The enterprise environment is the perfect example. Enterprises are rife with proprietary, convoluted systems that users spend hours navigating each week.

What if things were simpler? That’s a challenge we accepted when we designed an AI virtual assistant for the enterprise.

We had to answer many questions during this project, but one of the main ones was, “How do we let the user know what tasks they can perform?”

This wireframe shows how we solved it:

These wireframes visualize the workflow for booking a conference room with the AI assistant. Naturally, the user is going to have a lot of options to complete this task. Instead of having the AI vocalize each and every option, we added visual options that quickly showed the user all of their options.

This not only communicated the information faster, but it also made the experience more adaptable to loud environments.

High-Fidelity Wireframes Examples

To stay agile, we always create our first round of wireframes in low-fidelity. After the client stakeholders and end-users give us feedback, we add more detail to our nascent designs.

Performance dashboard for call center agents

The modern call centers is a model of efficiency. There are metrics for average call time, resolution percentage, and volume of calls.

But like many industries that want to better use data to measure success, call centers struggle to manage and analyze all of the information their agents generate every day.

This high fidelity wireframe was part of our redesign for a call center analytics product:

Although there’s a lot of data available to the user, only the most important metrics are emphasized on the dashboard. This reduces cognitive load and lets the user access the information they want at a glance.

Of course, the ability to dig deeper into the data is available, but this wireframe showcases our solution for making a flood of data manageable.

***

Even the most experienced designers need inspiration from time to time. The next time at a blank screen wondering what elements should go where, reference these wireframes. I’ll keep adding to them over time, so, hopefully, our work will be a source of new ideas.