MY PERSONAL UX AND VISUAL DESIGN PROCESS
During my experiences I have been constantly tweaking my design process to generate a process that seems to work well for myself, clients, and most importantly users. The challenges many companies face when building web and mobile apps aren\‘t always the same, so a one size fits all solution is rarely the answer. So the list below is much more of a menu then a exhaustive list. An ideal workflow is unique to each situation, for example, if you are building a new product chances are you don\‘t have existing users that you can interview.
UX
User Research - The first bit of exploration I do when starting a new UX project is to research any existing users OR potential users. I have found a great bit of success from informal conversations. For example, when I was doing a project for a local museum I went into the museum and spoke to the people running the exhibit about their struggles and successes with the current application.
Goal driven design - Before starting any wire frames it is of uttermost importance to define what a users goals are. When building an app that allows doctors to share photos of patients with other doctors and nursing staff we had to de-prioritize several unnecessary features that got in the way of our main goal. Through research we found out that although doctors like these extra features, they needed a fast path to take and share pictures, everything else, was unnecessary. This process of distilling a goal to its purest state is only possible if the whole team agrees on what these goals are up front.
User Workflows - Workflows are the first visual step where you can start to see the website coming together. For this step the goal is to build the sitemap of the website, with a list of all of the features and data that exist on each page. If you look at the image below you will see a sample flow for a home automation tool that allows you to monitor your plants from a distance.
Wireframes - Wireframes are the meat and potatoes of the UX practitioners dinner. Wireframes are the deliverable that most clients are expecting from a UX practitioner, and most visual designers need to consume. This is also the stage where the client comes into play the strongest. Below is an example wireframe for a court reporter website. This is the stage of the process where most discussions should be happening. By this point goals and requirements should by established and discussions should be in the context of \“To accomplish our goal of X, hierarchical priority should be placed on Y\”
VISUAL DESIGN
Competitor Research - The first step I like to take during the visual design process is to research competitors. The reason for this is two fold, the first reason is that its a sanity check on the previous UX work that has been done. If UX is done correctly your wireframes should allow your users to accomplish the goals you established to be accomplished quickly and with minimal blockers. Reviewing your competitors digital experiences allows you to make sure you aren\‘t overlooking any goals or workflows. The other advantage of this stage is to cut down on churn rethinking common patterns.
Mood boards - Mood boards are a simple tool to shorten the feedback loop on visual design patterns the designer is visualizing. Clients can use mood boards to apply early feedback to direct the project. If you look at the image below you will see an idea for a html5 app for a local museum.
Defining main sections (Revisions) - Once the mood board has been revised and agreed on its time to start visual design for your main sections. I like to start with the dashboard page of mobile apps or the home page of marketing sites. Every step closer to a finished process makes discussions about most effective visual styles easier.
Define reusable patterns - After establishing the visual identity of a section or two, take a step back and review wireframes to find patterns that will be reused on several pages. Designing and discussing these pasterns has two benefits. First, saves the churn of changing multiple sections. Second, it allows for more scale-able and consistent design, because you can start building your pattern library which benefits both code for the developer, and consistent interactions for the user.
Apply design treatment to remaining patterns - At this point there should be a solid agreement on the patterns that exist in the app and there shouldn\‘t be any surprises for the client or the visual designer finishing out the application. Here is an example of a full flow finished out from a hiking safety app built for iOS.
BUILDING YOUR PROCESS
Every single person has preferred ways of solving problems, most ways are sufficient and get the job done. This way of solving problems is by no means the best, its just what has worked for me in the past. If you are in the process of picking up a new client, or hiring someone to do work for you be honest with each others strengths and weaknesses. A process isn\‘t a script, its an outline, improvisation is essential.