All Posts My Work

High fidelity interactive wireframes

high fidelity interactive wireframe   high fidelity interactive wireframe media page

This design shows a home page and media page for a project I worked on a few years ago. The existing site no longer reflected the brand and the information was outdated and unorganized.

We needed a cleaner layout that let the user easily find information, so visual elements and whitespace were carefully considered. It’s much easier to understand content when it’s presented in a well balanced layout.

The mock-up was built fairly quickly using a grid based layout. The HTML, CSS, and JavaScript were reusable chunks of code from my code library that needed only slight modifications for this project. This allowed me to iterate the design quickly once I received results from my user testing.

All Posts My Thoughts My Work

Color palettes in black and white

color palette   color palette greyscale

I’ve developed a number of color palettes for clients and one thing I always consider is how they look in greyscale. Why? Because I always consider color in user experience design primarily as an aspect of balance and hierarchy, and once you take away the focus on color you can better see the visual weight of each color element.

Color can mean different things both contextually and culturally, but greyscale shows you visual weight and order. This is also important to consider regarding accessibility. A user who is color blind might not see the color you intended, but they will most likely get a sense of meaning and intent from the balance of the layout. That’s why wireframes are generally shown without the use of color so the focus stays on the layout and organization of content. A key element to good design is to use color in the service of supporting content.

All Posts My Work

High fidelity dashboard mock-ups

application dashboard mock-up   vendor dashboard social focus

These are high-fidelity design mock-ups of an application dashboard that allows two different views, from the vendor and customer perspective, into our application. The first design allows vendors the ability to manage their compliance and credentialing documentation for various customers that have multiple sets of criteria. The second design allows customers to see who is currently on-site and offers many ways of managing their vendor relationships.

The complexity of this application needed to be distilled to a central focus to provide ease of understanding and to allow the management of multiple levels of detail.

The project started with internal stakeholder interviews to gather domain knowledge and determine company goals. Once this information was understood and organized we sent out surveys and conducted both in-house and remote user testing to find out our user’s priorities and pain points.

Once we understood our company goals and our user’s needs, we were able to design an application that provided greater user satisfaction and task success as well as allowing our users to see and engage new opportunities and proactively manage their accounts. The key was understanding our users, and metrics validated our design decisions.

All Posts My Work

Onboarding application wireframes

onboarding application

This is an early design for an enterprise level onboarding application I worked on a few years ago. Sadly it never made it into production, but such is business.

The application would prompt the progression of a vetting process through multiple channels and provide feedback loops that would eventually filter a supplier into certain categories and monitor their status. These onboarded suppliers would then be available as soon as someone needed their particular service or supply.

Our whiteboarding sessions provided a lot of insight into the domain. Going back and forth with stakeholders was a great way to winnow out information and make progress, as long as you maintained focus on your goal. And the collaborative element of the whiteboard helped to explain and communicate.

The application would work with complex information and we needed to make it understandable and meaningful. If we kept the user at the center of our design rationale we stood a much better chance of success.

All Posts My Thoughts

The power of touch

Tactile feedback gives us a meaningful way to experience and know our environment. Touch can provide a powerful understanding, allowing us to discern things such as shape, texture, volume, density or relationships between objects. Current use of tactile stimuli in touch screen devices is primarily addressed through haptic feedback delivered through vibration. Research has also produced surfaces that are able to physically distort to allow the sensation of raised buttons and edges.  It’s not unreasonable to think that touch screen devices might also one day also be able to mimic more complex and subtle surface texture.

A well-known method of providing information through touch is braille. Braille provides discrete tactile patterns that form syntax and can even represent information as a logogram, which is a visual symbol that represents a word or phrase. But braille is a one to one correlation that is consumed as relatively specific meaning. The application of complex surface textures on touch screen devices might be better suited to imply meaning through relationships.

Meaning is ultimately determined by context. The meaning of one thing is determined by its relationship to other things. The use of texture on a touch screen device could allow users to infer meaning from a tactile difference between areas on the screen. If you’re fumbling in the dark for your keys, you know when you’ve found them because of the way they feel, unless of course you’re looking for them in a roomful of keys. Then the ability to discern your particular set of keys is greatly diminished because there is very little difference in the environment; definition and contrast serve to highlight. This is the same principle we employ when we organize visual information on a screen. We use elements like white space, alignment, grouping, hierarchy, and labeling to draw attention and give meaning to distinct elements and sets of information.

What if a calendar app presented days where nothing was planned as a smooth surface and days that had events were provided with a texture? What if binary choices had different textures? Or what if your application icons all had distinct surfaces that allowed you to pick one by touch alone? A sight impaired user might then be able to engage with their desired task and perhaps voice commands could facilitate further interaction with the app, or differences in tactile sensations themselves could be used to deliver meaning.  Touch can make information more accessible on surface devices. And tactile qualities could also be used to support and enhance visual elements, skeuomorphic or not.

The possibilities for tactile feedback on touch screen devices are likely as varied and nuanced as tasks themselves. Of course, each implementation decision would have to be considered within its own need and design constraints, just like any other smart design element.

Our sense of touch has served us well since we’ve been sentient beings. There is no reason to think that we won’t be able to provide rich and meaningful experiences with our interactive digital devices by more fully employing the power of touch.

All Posts My Thoughts

Another outlet…

https://soundcloud.com/stepheneighmey/in-the-violet-hour

It seems I’ve been drawn to crafting experiences for some time now, but creating music is much different than design. Design should serve under function, creativity on its own serves the dynamic of the process. But still, the role of creativity in user experience design is a powerful tool that can be used to help find elegant solutions. I’m drawn to music because it lets me be expressive to whatever end; to satisfy only me.

All Posts My Work

A responsive wireframe design

responsive wireframe design   responsive wireframe design

A recent corporate project where I led the UX work and built out the wireframes was going to be a responsive design. Not only was the old site outdated, but the information architecture was based on company divisions, which didn’t represent the way the company wanted to be portrayed. So before any wireframe work took place we needed to understand how to organize the content on the new site.

I started by doing a content inventory and I reviewed the site’s analytics. The analytics showed me where users were coming into the site, where they were leaving, how long they were staying, etc. It became apparent that we had many opportunities for improvement. Since this post is focused on responsive design I’ll leave out our other work, but we eventually organized the content in a way that we hoped would satisfy the company’s goals and its user’s needs.

I took a device agnostic approach to this design, which meant that I didn’t design for all possible devices, but set general break points based on the site’s content. This allowed us to tailor content for the basic categories of web, tablet, and mobile. Some of the wireframes showed a particular page laid out for these 3 basic categories. We had to make decisions such as when to design new graphics for different breakpoints so understanding could be maintained, how navigation items would function, what content was most important, and how elements would change.

The most exciting part of this project for me was being able to utilize the different skill sets of our group and conveying design intent across disciplines. The wireframes and requirements were one aspect of that communication.