The best design process that I’ve found for problem solving, which is essentially “what I do” (I’m just fortunate that the solution happens to be something engaging and visual for the user experience), is a process I learned way back in design school – it’s called the I-D-E-A-T-E Design Loop. There IS a process because this is what really helps us designers navigate a creative initiative through organizations or businesses with many different players. This is a story about the day in the life of a user interface designer.

1. What do I do and how do I do it? - Part I It’s hard to write about yourself and what you live and breathe every day, but here’s a shot. My design work pretty much comes down to really sticking to a process. And the best process that I’ve found for problem solving, which is essentially “what I do” (I’m just fortunate that the solution happens to be something engaging and visual for the user experience), is a process I learned way back in design school – it’s called the I-D-E-A-T-E Design Loop. Many designers/agencies use the word “ideate” as more of a verb – “to create an idea.” Also, they often have their own snazzy names for the pieces of this loop, but they are all nearly identical. What’s important is that there IS a process because this is what really helps us designers navigate a creative initiative through organizations or businesses with many different players. It never ceases to amaze me how useful this cycle has been for not only design related problems, but many other types of simple daily problems, like…planning a trip or shopping around for the best deal on a car. It’s all about focusing on what we’re trying to accomplish, and coming up with a solid game plan to make decisions, take action, and step back to evaluate success. I – Identify the problem.D – Develop a design brief.E – Explore possible alternatives.A – Accumulate and assess the alternatives.T – Try out the solution. OR – Test the alternatives.E – Evaluate the results. “Rinse. Repeat as needed.” It’s really that simple. Ok, so “what does that all mean?” Let’s explore each of these steps. I-Identify the problem. To get to the end, we have to know what we’re shooting for. It’s much easier to carve a path to that end if we write down or formally declare our ultimate mission, so that we can continually refer to it as we go along and ensure we’re on track. I begin by finding out what my clients see as their design problems or issues. Listen. Watch. Observe. I gather, absorb and digest what they have to share on insights, research or findings about user behavior, the usability experience, and feedback in order to see if the problems are actually problems and not just symptoms of a bigger problem, or sometimes not really the problem at all. This stage is also where good note-taking comes in very handy. If I’m working on a team with other usability professionals, we share ideas and knowledge about other similar problems or projects we’ve encountered in our collective experience, to check for any similar patterns. Then, Assess. I minimally assess the situation based on what I now know. I start noting areas of concern and trying to itemize the issues uncovered in the information gathering sessions. For anything I don’t understand, I ask follow-up questions and do further research. Dig. Scour. Search the marketplace. Ask around too. Then finally, I Assess again (because what I thought I knew might not be quite spot on). We can then begin to hypothesize what might be the problem and move on to developing the Design Brief. Stay tuned for Part II of ‘A day in the life of [this] user experience designer’ as I discuss the ‘D’ in my acrostic - develop a design brief. So come on back. There’s a lot I have to share. Part II - A day in the life of (this) user experience designer… So what do I do and how do I do it? Part II of the IDEATE Design Loop is
D
.D – Develop a design brief. The next step is to formalize these thoughts into a document that brings together the answers of WHO, WHAT, WHEN, WHERE and WHY we are creating, the key problems to be solved AND a few other things like: Strategic Business Goals – Why are we doing this in the first place, and what does “success” mean for the business – this is usually centered around time and money earned….or burned? Target Users – Who are we creating this for? How web or computer savvy are they? And why is this website or application going to help our user be cooler, smarter, faster, more productive…you get the idea. Learning as much as possible about who will be using the end product will help us be that much more successful in meeting their needs. Often as business owners/leaders, we forget that we are not the end user. We just know too much about the product and how it works, and thus we need to focus on understand the real users and their user experience. Purpose of the End Product (website or application) – What do our users need to be able to accomplish on the site? To delve even deeper, what do our users need to do to “feel” confident that they were successful (cooler, smarter, faster, more productive) by using the site? This all helps to build loyalty, trust and raving fans. Technical Constraints – What kind of technologies do we need to work within or, in the case of a next-generation idea, work towards? These constraints can include anything from preferred browsers, screen dimensions for layout, connection & download speeds, database requirements, to the users’ environment or working conditions. If we’re looking to the future and developing a next-generation concept, we can be a bit freer and less constrained by technology, but it’s always good to think about any potential issues in this early stage. Marketing & Branding Goals – How should it “look”, “feel” and “sound” so that it is in line with the business's or organization's current message, personality and tone. Or, if the idea is to re-brand and re-vamp to freshen up the company’s identity, then what is the look and feel that we want to project to our audience? I affectionately coin this the “What do you want to be when you grow up?” question. Priorities and Reasons to Celebrate - What is the order of importance and what are the key milestones that must be met in order to show progress and success. If we imagine the project to be a longer and gradual change, then we can also break it down into smaller more manageable bite-sized phases, and create a roadmap for the bigger picture we’re trying to paint. Once created, reviewed, and discussed, this Design Brief becomes the guideline for everyone on the entire project team, not only the user experience designer but also key stakeholders within the client company, technical & development partners, writers and other creative partners. Next week, we get to “E”xplore and “A”ccumulate. Stay tuned for Part III of the IDEATE Design Loop. Part III - A day in the life of (this) user experience designer… So what do I do and how do I do it? Part III of the IDEATE E – Explore possible alternatives.andA – Accumulate and assess the alternatives. Of course, this is my favorite part of the usability process and if I had a choice, I’d spend all my time in this phase! This is when we get to begin sketching out ideas based on all the information and criteria we’ve established for the website or web application. Sitemap or Task Flow DiagramsFor websites, I usually begin sketching a clear picture of the sitemap. The sitemap is literally a visual diagram indicating each page of the site, and how users will be able to get to each page from the homepage. In doing this, we get an understanding of which pages need to be accessible from our Primary Navigation menus, Secondary Menus, and other Global navigation menus. Sometimes I’ll receive an initial sitemap from the client in the info gathering process or “Identify the Problem” step in the form of an outline or basic flow chart. If that’s the case, then at this stage, I revisit that initial map and refine and formally construct my version of the sitemap.See below. I include special notes on each page about the purpose and focus of that page, and my recommendations for text content, images, video or other media that should appear on that page. This sitemap can also go through some refinement and revisions together with the client, depending on the complexity of the site. If it’s a web application, then I would prepare a task flow diagram because normally the screens consist of dynamically generated content, rather than static content. Because it’s dynamic, we can only plan for the purpose of the page, key pieces of information that should be displayed there, what a user should be able to accomplish on the page, and in what order. For example, if I was creating a task flow diagram for a company directory application, I might need to map out the Search Screen, the Results Screen, and an Individual Profile Screen. After I make each individual task flow map, then I can weave them all together into a larger map to show how each set of screens are accessible from the main menus of the application. WireframesOnce we know what pages or screen types are needed in the user experience process, then we can begin to roughly sketch out the layouts. The intent is to show: • Relative placement of functions, content, icons or buttons on each page• Relative importance of each element within the page or the Information Hierarchy• Sample text content wherever applicable The key thing to remember when evaluating Wireframes: we are not looking at the visual graphical treatment. We are trying to determine how the page should be organized and what things we want the user to experience first, second, third, etc. based on its prominence within the page. To keep the layouts looser and easier to critique, we keep wireframes unrefined and raw, perhaps sketching with a sharpie on notebook paper or using software like Visio, Powerpoint or Balsamiq. We’re getting our many ideas out onto paper so we can move things about, adjust, cross out, add on freely and try out multiple scenarios until we get to our strongest variation. Visual TreatmentAfter we have a solid set of working wireframes, I can begin applying the visual design layer, the color and graphic designs for our new screens. This is essentially the artistic expression of the brand. In Round 1 of my process, I begin by choosing the homepage or the main screen or dashboard of the application, plus one secondary page. I explore various visual stylings as a set so that the client can see how the design translates to at least these 2 screens. Usually my packages include 3 distinct variations of these sets. From the 3 unique directions, the client can decide which direction they want to explore and develop further or which options they’d like to merge, and apply to the rest of the screens in Round 2. Sometimes the client will choose to test these variations with his/her users to see how they respond and find out which ones best capture the brand aesthetic and attributes he/she trying to communicate. I find this to be a valuable part of the design process and can be as formal or informal as possible. In our field we say it’s best to “Test Early and Test Often” because there’s so much more room to make corrections and adjustments BEFORE the site is built, than AFTER. Then we review the designs in Round 2 together to gather the client feedback for the last and final round of web page designs. We refine and make any last changes, and then prepare the layouts for delivery or testing. Now we have created the visual language of our site! Check back for the next step - “T” – Try out the solution. OR Test the alternatives. Part IV - A day in the life of (this) user experience designer The second to last step in the IDEATE Design Loop is “T” – Try out the alternatives. For my process, this usually means we are ready to either:A. Prepare designs for usability testingOR,B. Move into production Preparing For Usability TestingIf we need to prepare visually treated designs for usability testing, then our designs do not necessarily need to be completely accurate for slicing up and programming, but they need to be clean. What I mean by “clean” is that the layouts are crisp, spelling is accurate, and persistent items (like navigation menus, headers, footers, global navigation) are positioned consistently across all pages to be tested. This ensures that the user will not be distracted by tiny layout changes and can focus on navigating the site and completing the tasks being tested. The ultimate goal of usability testing is to confirm whether the visual designs meet our original criteria and whether they resolve the problems we had in the first place – ex). “User’s can’t find this feature”, “Shoppers get lost in the checkout process”, “The site doesn’t excite users or feel like our brand.” Now, testing doesn’t have to be a big, daunting, expensive endeavor. As mentioned in the last article, it’s important to “Test Often and Test Early” so do take the time to test, or stop and review the visual designs against best practices by an unbiased eye during your process even if it’s at a smaller scale than your ideal. Much formal usability testing is conducted in a relatively controlled environment with an analyst working side by side with pre-screened users, or remotely using software and web capturing devices that allow the analyst and user to communicate. But usability testing can be as simple as asking a few folks in the cubicle down the hall some simple questions to test a screen. A great book that I think is quite helpful in making usability more approachable for designers and business owners alike is Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. Check out the chapter called “Usability Testing on 10 Cents A Day” for a good read on how to make usability testing an easier part of the process without breaking the bank. Moving Into ProductionIf we’re ready for production, this means we are at a point where we’ve finished refining designs and these designs have met or exceeded our initial design requirements, creating a compelling user experience for our audience. To cross-check our work we can ask ourselves these 4 questions: • Have we explored enough screens to establish an overall design language that can be applied to most any other pages that might come later? This is where that sitemap or information architecture diagram comes in handy again to cross-check my work where I had outlined all the critical screens or page types needed. • Is the design language clear enough to be easily translated to CSS styles or other global styling? In my experience, the best way to communicate the important features of the final visual design is to create a style guide document that specifies dimensions, fonts, colors and any unique elements that will need to be built. Here’s a sample of one style guide element I’ve created that shows layout dimensions for one screen. Other pages within the style guide specify color codes and text styles. To view more samples or other style guides I’ve created, send me a comment or DM me on Twitter. • Have all technical notes or key interaction functions been demonstrated in our desired interaction flows? This can be accomplished by appending engineering notes to each screen or layout. Or for particularly intricate designs, a simple interactive (clickable) mockup can help tremendously in communicating the desired effect to our developers. • Does the development team have all the graphical assets needed to move forward? As a designer, this can mean providing clean, layered Photoshop, Fireworks or Illustrator files or just the flattened layouts as JPEGs or PNGs. If we’ve successfully answered yes to these key questions, then your design is ready for handover to your client and their development team. Next week we will come full circle to the last step of our IDEATE Design Loop with the second “E” – Evaluate the Results. Part V - A day in the life of (this) user experience designer... Today we “close” our series on the IDEATE Design Loop with “E” – “Evaluate the Results.” At this point we have either:1. Finished usability testing of the designs with our target users or2. Implemented our visual designs and have gone live with our site or application. User experience design is an ongoing living and breathing process that can only be improved upon if we have measurable metrics and a clear plan for regularly checking how we’re doing so we can keep steering the ship in the right direction. Usually we can’t fix everything and completely change the world in the first launch, so we break it down and create new targets to the future. Evaluating the results of our major UI design revamps can help keep us on track and even give us ideas on how to make our site more meaningful and useful to our users. In this evaluation part of the process, we can begin choosing what metrics we will use to track our progress and begin installing them now that the site is live. We should also set goals on how frequently we will monitor and re-analyze our stats whether it be daily, weekly, monthly, quarterly, or annually. Some Useful Types of Metrics • Google Analytics or other Web Analytics tools that show data on traffic sources, entry and exit pages, popular content, length of visits and bounce rates. We can easily see how certain pages are performing and how users are responding on days when marketing campaigns are launched by cross referencing with launch dates and times. • Feedback Surveys – We can send post-launch and regularly scheduled surveys with end-users or customers about their satisfaction and user experience with the site. Or we can offer persistent ways for customers to provide feedback when they feel like giving it, using widgets like the GetSatisfaction widget. • Conversion Analytics - Deeper analytics from content management systems and other website management platforms can help us understand how well users successfully completed a task, or purchased that product, or acted upon that call-to-action, like submitting a contact form or calling your toll-free number. Once we’ve chosen our metrics and set benchmarks for the site, we should assign team members to be the keepers of this data and set up times to review them together with the whole team. The Good, Bad & The Ugly Our evaluation should assess not only our successes, but also our failures and areas to be improved on for next time. We should report on things like: • How well we fulfilled the design specs and design brief – our original goals• Strengths & weaknesses of the final site or application• Strengths & weaknesses of our process and how well it worked for all our key players – end-users, management team, content contributors, usability analysts, designers, and developers• Recommendations for improvements, and• Any new ideas for adding on or enhancing the site or application in future phases, especially if a product roadmap has been started and needs to be completed Remember, get real, don’t just be a cheerleader. The point of this is to be objective and honest about what worked well and what didn’t, so we can make measurable improvements over time. Truly, each and every website or application is unique with its own set of users, problems, constraints and goals. And yes, there are similarities and patterns that can lead to best practices but it’s important to approach each new project with a fresh set of eyes and ears because what works for one site, may not work for the next one. This is why the IDEATE Design Loop is so helpful as a guiding process that ensures we cover all our bases along the way. You can see how investing even a little bit of time in planning and user testing can save us LOTS of headaches down the road. Happy designing!