Tools

About

In order to see a potential journey a user might take, the UX and interaction design process involves creating wireframes and prototypes of the u… Read More

In order to see a potential journey a user might take, the UX and interaction design process involves creating wireframes and prototypes of the user interface. This helps me figure out information architecture and potential interaction design challenges, such as potential roadblocks and stress-points. “Can customers easily accomplish their goal?” Wireframes also facilitate brainstorming sessions with Product and Engineering. We ask questions such as “what can we do to reduce the number of steps a user needs to take to accomplish a certain task?” “Is this clear?” "Is this intuitive?” "How can we simplify?” Read Less

Published:

Wireframes & PrototypesIn the UX field, wireframes and prototypes are a common deliverable to show page-level layout ideas, whereas flowcharts are useful for documenting complex workflows and user tasks.

Wireframes are great for UI design explorations. Working on a complex B2B enterprise application, this wireframe was created for an ad-tech company project. As part of a "full stack UX Process" this is a step where collaborative teams can ideate, ask questions and ensure everything is going down the right path before spending too much time and resources on the project.

The problem to be solved in this scenario was: “how to present an advertising property browsing UI and provide a set of useful functionalities that are familiar to our users while keeping it familiar and simple.” The decision was to design something similar to consumer e-commerce browsing models because that model is already something with which our customers are familiar.

At this preliminary stage I'm laying out information architecture and interaction design to make sure all features and functionalities are in place. Not concerned with visual design at this stage, the look is low-fidelity and not styled (often black & white).

The next series of wireframes are bare-bones and are meant to facilitate syncing, ideation, commenting, questions and feedback between myself, product and engineering. The aim is to make sure we have all of the features and functionalities required for our e-commerce transaction flow in place, while also ensuring ease-of-use and that the overall experience is friction-free and pleasurable for the customer.

In this scenario, during checkout a payment option is selectable by the customer. Depending on choice, the form below changes dynamically asking for appropriate information to be provided.

In this wireframe an expanding search widget and filter is demonstrated for a product listing / browsing interface.

A shopping cart wireframe with detailed functional annotations. This type of wireframe is produced after collaboration with Product and Engineering where final interaction design, features and functionalities are decided. This document serves as a "single source of truth" for design, product and development teams as we're moving toward a final design.

Comments

Basic Description

In order to see a potential journey a user might take, the UX and interaction design process involves creating wireframes and prototypes of the user interface. This helps me figure out information architecture and potential interaction design challenges, such as potential roadblocks and stress-points. “Can customers easily accomplish their goal?” Wireframes also facilitate brainstorming sessions with Product and Engineering. We ask questions such as “what can we do to reduce the number of steps a user needs to take to accomplish a certain task?” “Is this clear?” "Is this intuitive?” "How can we simplify?”