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 quickly find what they were looking for, so visual elements and whitespace were carefully considered.
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.
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.
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.
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.
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.
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.
When I designed and built the Goodman Decorating website I did it from the inside out. Goodman is the largest commercial and residential, painting and drywall provider in the State, and they’ve done some very high profile work. The Georgia Aquarium, Emory School of Medicine, and the Georgia State Capitol are some of their clients.
I knew from stakeholder interviews that their audience was mainly composed of architects and other designers that would be initially drawn to a finished work’s visuals. With this emphasis on imagery I wanted a way for the user to be able to easily scan Goodman’s range of work and be able to navigate deeper into a project when something drew their attention. Because their work itself said so much about the company I decided on a strategy of showcasing it. I wanted a clean aesthetic so their projects took center stage. I organized my content in grids and used the golden ratio, which is a law of proportion that helps to imply meaning, to layout the content.
I knew from competitive research and internal stakeholder interviews that the industry sold their work based on industry standard terminology and categorization. I also found that the user recognized and understood this labeling, so I used these categories as my basic navigation. Once I could start organizing content, I needed a way to show it to the user.
I laid out a gallery of large thumbnail images organized under these familiar overall categories as a category page template. A user could just click on a gallery image and they’d be taken to the product detail page. So the first page I detailed out in my designs was the individual project page. This was a central element of information on the site so I knew that most likely the user would make a call to action from the information on this page so it had to be well organized and meaningful. I also knew that by designing this page first, the design of the entire site could grow organically, which it did. Each page layout grew from and became symbiotic with this individual project page.
Before I took any action, I thought about what I needed and why. Why WordPress? What did I want to show, to focus on? What’s the whole point of the site? These are things that every user experience designer should ask before almost any project.
Since WordPress provides such a fast and easy to use interface it’s sometimes fun to actually build out the design before I do any sketches or perform any user research. And this is exactly what I did with my contact information. I knew I needed some way for people to contact me and I wanted it to be easily findable because it’s a call to action.
So I determine a location for my contact information where people are used to looking for it, and what do I think I need next? Well a nice WordPress contact form widget of course. So I searched for and found one, then I installed it. And as I was reviewing it after some configuration I thought, “why do I need a form?”. Lots of people use them and they’re professional looking. They can make sure you put in the information the right way, their information can be put into a database, etc. But what did I need? If I just needed someone to contact me when they were ready, why didn’t I just show them my phone number and email? You can make phone numbers and emails actionable items. My inbox stores the user’s information that I need and my phone takes messages if necessary. And besides, the form had 4 pieces of information that needed to be entered. Why should I burden someone with the extra work? Maybe a phone number and email address is all I require? But of course, to truly know what works best for my users, I need to test and iterate.
It’s sometimes hard to step outside of your perspective and try to see something in a new way. A good part of a user experience professionals job is to educate, sometimes to both external and internal stakeholders. Helping our customers understand our value is part of our job.
All Posts