WIREFRAMES TO PIXEL PERFECT

 

Position: UX Designer, Interaction Designer (IxD), User Researcher

Company: Robert Half, Magnet Theater, ImageAlt, Contract Work

Projects: Robert Half Intranet & Apps, Various Independent Work

Technologies: Sketch, InVision, Photoshop, Illustrator, Axure, Balsamic, Paper 


Wireframes ensure that elements such as branding, functionality, and layout  are considered one at a time. You can view your product without getting distracted. By listening and working through all your interactions and layout needs I can help bring clarity to the project. This saves so much time, spots usability issues, builds a solid user experience, and gets everyone on the same page.

 

LOW - MID - HIGH

 

What determines the level of prototypes I use:


  • Project Size

  • Content Type

  • End Users & Shareholders

  • The Next Department to Utilize the Product


Depending on the team and their level of knowledge, these steps can move quickly or require more detail. I might be able to draw a few shapes and say, “Let’s replicate our feature page and replace the carousel with a hero banner.” If the project is new or the team has not worked together it is important to make sure everyone knows the requirements before the next phase can begin. 

 

LOW-FIDELITY

Low-fidelity wireframes are an excellent way of visualizing requirements. I utilized low-fidelity wireframes when I want to quickly address these components:


- Structure

- Content Placement

- Information Hierarchy

- Functionality

- Behavior

Here are some samples of my low-fidelity work below. 

 
 

WORKING REMOTE

When working remotely, I like to use an online whiteboard. You can test Ziteboard for free. Digital whiteboards are a great way to jump back into a meeting and have the whiteboard just the way you left it. They increase engagement and make it easy to save for later. No more emailing or uploading phone photos. The image below is an example of taking small tiles and having the team discuss layout and priorities. 

 
 

MID-FIDELITY

Medium-fidelity wireframes can help motivate the team. You can see brand elements, often some interaction, and all of the fundamental decisions regarding fonts, colors, and through lines are made at this point. Some additional validation points for user testing and functionality can be done.


Medium-fidelity wireframes show:

  • Branding

  • Fonts

  • Colors

  • Content

  • Through Lines

  • Interaction

  • Additional Validation

 
Web-Template.png

This template was made in Photoshop and without Shutterstock. It was something that I created for myself as a way to speed up design for a corporate client.

 

You might have noticed a space theme for this project, images in the hero banner flowed into smaller banner ads. NASA’s Free Image Library can inspire you too. 

2 Column Layout crop.png
 

SKETCH APP

Sketch App also has the ability to create interaction, allowing users to click on the prototype. The clickable areas are indicated by the yellow hotspots in this image. Most of my mid-fidelity prototypes contain some form of interactivity.

 

HIGH-FIDELITY

High-fidelity prototypes add motion and interactivity. Users can really envision what the product will be like and how it will benefit them. Their feedback is more realistic and more accurate.


  • User feedback is more realistic

  • Real UI provides more accurate feedback

  • Lower human error rate with interactions built-in

  • Confirm target users needs are accounted for

  • Help prevent unaccounted for mistakes from

 

ROBERT HALF

I enjoyed 6 years at Robert Half corporate, utilizing my UX principles to build and maintain an intranet and its apps. During my time there I was fortunate to be part of a small team of UX Designers who launched an intranet, supporting 15,000+ employees. These employees helped connect so many companies with job seekers, it worked out to a job placed every 2 minutes. Here are some of the activities I participated in during my tenure. 


Interviews: In-person and virtual. I interviewed employees about their roles, satisfaction, possible new features, and even what to call our intranet. My coworkers were great about switching up roles so everyone could participate in asking and writing questions, walking through various prototypes like the wireframes discussed, and documenting our findings to present for leadership. 


Design Systems and Branding: Staying on brand and making templates to assist others in doing so has always been a priority. I worked with internal and external marketing guides and created and maintained design systems, pattern libraries, and global style guides for our new intranet while updating and retiring our original intranet. 

UI and Graphics: Quality is key. I worked on several visual refresh initiatives, updated thousands of graphics for responsiveness, and defined best practices for ad sizes on mobile, desktop, LCD screens, and even desktop wallpaper. At Robert Half I created a 5-minute office banner template, allowing the unique look and feel for each branch while meeting all RH requirements. Everything I learned was documented and shared with my team. Education, growth, and collaboration are part of my personality.   


Please contact me and we can discuss my process. Due to the confidentially of Robert Half’s corporate intranet, the image provided here is from the external-facing website, RobertHalf.com, which has several of the same branding and visual standards I employed on their intranet. If you liked what RH does for their customers I would love to tell you about what they did for their employees. 

 

©2020 by Shawn Amaro