UX Sampling (Wireframes, annotations, etc.)

Given time to do the process right, detailed, annotated wireframes are monumentally important to getting a design right, and for getting teams on the same page from the get-go. I’ve also found that sometimes your stuck with a situation that’s less than ideal, and you have to do your best to jump right into comps. Here’s a brief sampling of my experience along that spectrum.

 

Our web team was looking for guidance on how to improve their international trip planning tool. We had some time to provide a detailed wireframe, so I worked with another team member to pull together the concept above. We wanted to primarily address the lack of cues given to a customer in the existing flow, after all, traveling to another place is often confusing enough without the headache of figuring out if your phone will work there.

[Tool used: Balsamiq]

 

While working on VR mode video player controls for our early 360° video tech, I needed to help the developers I was working with understand more clearly how the UI was supposed to travel with the user’s gaze (reticle). I put together the above graphic with annotations to help them understand the boundaries of UI movement within an immersive video experience.

[Tool used: Illustrator]

This item fell within a personal project, but focuses on the motion design of what I was developing. I believe that adding motion design to earlier prototypes/wireframes really opens up a team’s eyes to how the proposed designs will “feel”. If no consideration is given to motion earlier on, it can be very difficult to force fluid transitions.

[Tools used: Sketch and Principle]

 

During some rebranding exploration for a video app, I put this together to help the team get a better idea of how a dark theme and “glowiness” would complement, or detract from, the user’s experience. The design is, like above, a motion wireframe, with a bit more attention paid to some of the colors and effects (but still very much an exploration).

[Tools used: Illustrator, Sketch and Principle]

This is from a situation where I had no time to run through a normal process. I, and a team, were tasked with coming up with an idea that we could pitch in an internal competition/presentation. I was the only designer on the team, so I offered up my efforts to put together prototype designs for our app concept. We didn’t win, and this will never exist. But the rather polished designs were fleshed out from concept to reality in the span of less than a week (among other jobs I was working on) and turned into an InVision prototype (not linked here, sorry).

[Tools used: Illustrator, Sketch and InVision]

Layton Diamentui/ux