• Coloring Outside the Wireframe: 3 Tips to Integrating Visual Design in the UX Field

    When I interviewed at Adaptive Path a few months ago I was asked a barrage of tough questions. But when the tables turned and I got to ask AP-ers my questions I was interested in one thing in particular: “What do you see as the role of a visual designer at a UX company?”  I got a variety of answers and a few very long pauses.

    Having come from a start up where everyone did everything (from research to coding) I was worried about getting slotted into a specific phase of the design process, essentially “skinning” other designers’ work. I was assured that would not be the case. In my first 2 months I did, in fact, discover a sincere desire to redefine the role of visual design in the interaction process. However, up to this point visual design was typically tacked on at the end of projects.

    The arrival of 2 new visual designers on staff (myself and Trina) has sparked some conversation here at AP about how we integrate interaction and visual design. We have come to realize how entrenched the waterfall approach is to our process but acknowledge its limitations in terms of integrating IA, IxD, and visual design. So last week we got together to discuss this very topic and how we might go about evolving our process to accommodate visual design.

    While in theory it makes sense to have visual and interaction design happen in tandem it presents some very real challenges including:

    • How can we afford to resource both visual and interaction designers throughout the entire length of a project?

    • If you bring visual designers into the process earlier what exactly do they DO before there is anything to design?

    • How do you maintain a visual designer’s sanity when the wireframes are constantly changing? Is it really efficient to have a visual designer start work before the interaction phase is complete?

    • And really when it comes down to it, how do we go about changing our process when we are all just trying to meet client deadlines and the waterfall approach is what we know?

    Now that my first project here at AP is winding down I have some insights that might inform our process moving forward.

    Tip #1: Involve visual designers in research

    I was brought onto my first project at AP early in the process and participated in research before the design phase even started. For me this experience was invaluable. I became more invested in the project, connected to the end users, and learned key insights that informed the visual design. The project was for a medical device company and I discovered in interviews, for example, that patients have emotional reactions associated with specific colors. When certain things are coded as red patients feel that they are failing in their treatment and are less motivated to discuss the results with their doctors. My participation in the research phase did require that I had a skill set beyond picking nice fonts and colors. In order to bring visual design into the process earlier it is essential to resource true “generalists” or give traditional visual designers the chance to learn about other phases of the process. This requires a leap of faith for a UX company, I realize, when most visual designers do not come with this type of research background.

    Tip #2: Be fast and loose with deliverables

    Following the research phase on our project, the interaction designer took the lead while I gave feedback on specific UX problems and started thinking about visual design. Initially I made the mistake of creating pixel perfect design files of the first wireframes I received only to find the interactions completely changed the next day. From there on out I worked loosely, creating a visual language that evolved as the wireframes evolved. Eventually we got to a phase where interaction and visual design overlapped and the interaction designer and I passed files back and forth, each evolving the other’s work. This required a huge amount of flexibility and willingness to let go of ownership over our files. It also required that we both worked in the same software, a surprisingly consistent roadblock to integrating the interaction and visual design phases.

    Tip #3: Be patient and open to ambiguity

    In the end it was not always an easy process and I was lucky to be working with some multi-skilled team-mates that were willing to role with it (though, I admit, there were a few snarky moments at particularly ambiguous points in the process). There is no doubt that this approach opens up the process to more ambiguity and possible personality conflicts but that’s what happens when you remove silos and allow for collaboration. You also get better work.

    By the end of our internal discussion at AP we were all feeling a bit daunted by the changes that the integration of visual design might require to our process. But we agreed to mix things up on a few trial projects, specifically integrating visual designers earlier in the process.

    In the meantime I’m interested to find out best practices from other designers who are facing the same challenges and I’m sure AP will have more to share as we evolve our process.

    There are 6 thoughts on this idea

    1. Daniel Szuc

      Thanks Kim.

      Perhaps some of this talks to understandings of what value a “visual designer” can provide in the process of design. Suggest there is a misconception that visual designers paint pretty pictures, but there are also opportunities for visual designers to set “strategic visual themes” for products that inform not just the product being worked on but a whole range of products. “visual themes” can provide part of a consistent experience people look for in products so as they toggle between products in the same family, it feels comfortable. This also assumes you are doing everything else right to support the great work on visuals 🙂

      rgds,

      Dan

    2. User Experience, Usability and Design links for Ap

      […] Coloring Outside the Wireframe: 3 Tips to Integrating Visual Design in the UX FieldHaving come from a start up where everyone did everything (from research to coding) I was worried about getting slotted into a specific phase of the design process, essentially “skinning” other designers’ work. I was assured that would not be the case. In my first 2 months I did, in fact, discover a sincere desire to redefine the role of visual design in the interaction process. However, up to this point visual design was typically tacked on at the end of projects. […]

    3. E. Danziger

      Thanks for sharing some very interesting observations and recommendations! I’m an interaction designer who works with a visual designer every day. I find myself sometimes struggling to prioritize and defend the artistic element of visual design. For example, my visual designer proposed a really elegant control that evoked a curved glass plate — to me it seemed to relate to the zeitgeist, our age of iPhones and iPads. But then other stakeholders argued the contrast was too low and that the control should be a flat black/white bar. Other rich visuals have gotten simplified to aid coding. How do you make the argument that artistic vision has a place in UX, that demanding that every detail be practically justified and easy to implement may lead to very dull designs?

      I agree working in the same files is a big help, and I would also recommend being sure you understand your counterpart’s software well. It was a breakthrough for me a few weeks ago when I took a breather and spent an hour learning how to use shape layers, folders, effects, etc., so that I could actually make minor adjustments to PSD’s without turning them into mishmash.

      Thanks again for the great post!

      Elon

    4. Melissa Martin

      Thank you for this great article. I’m a UX Researcher/Designer with a background in Visual Design and have found all too often that teams will want to pigeon-hole you into one role, even is you have a multi-disciplinary background. As both a designer and researcher, I find that when I’m encouraged to float between roles the work inherently ends up being more informed and successful.

    5. Ray

      This is actually consistent with and Agile/Iterative process, get to working product faster with less time up front on deliverables before you are dealing with working software.

    6. Linda Francis

      Thanks for sharing your experience. This realm is one that I find myself in with the additional challenge that as a freelance interaction/UX designer, I don’t have the chance to build relationships with designers over several projects, nor can I influence company culture. Whenever I can I insure that both visual designers and a member of the development team are “around” right from the beginning of a project and this has proven valuable for all the reasons you note above.

      I’ve recently thought that for my own service offering, I should find a designer I like to work with and offer our services together. I believe that these two roles really are like Siamese Twins…trying to separate them is not the best solution.

      There is another consideration here which is the front end programmer. Innovation and creativity on the part of this person can really contribute to a positive experience design. So, to me, these three roles, ideally should work together with one or the other “leading” as the project, or backlog item (for Agile folks) is flowing through its lifecycle.

      Thanks again for the great post. It is great to see people working though this stuff even at the companies we all look to for leadership and best practices!

      L

    Comments are closed.

  • Close
    Team Profile