Steps of the Process

“The human being striving for rationality and restricted within the limits of his knowledge has developed some working procedures that partially overcome these difficulties. These procedures consist in assuming that he can isolate from the rest of the world a closed system containing a limited number of variables and a limited range of consequences.” (Herbert Simon)
“You’ll see a grandmaster, the guy has three minutes on the clock and ten moves left. And he’ll spend two minutes on one move, because he knows that if he doesn’t get that one right, the game will be lost. And then he makes the last nine moves in a minute. And he may have done the right thing.” (Stanley Kubrick)

Money or power play, but in the corporate world you'll never have an ideal process with all steps in place. Here I describe how the ideal process, for it's the only time I had a complete control.

Steps of the Process and how they were applied to this site

Figure out: Implement
Gather information, prepare for the first encounter with the customer. Listen, watch, observe, absorb, digest, take notes. An easy part - it's just me.
Main design and interaction challenges. Single page gallery design for instant access to every project or sample.
Target user. Art directors, hiring managers, corporate HR, staffers, recruiters.
What's the nature of the product (web site, RIA, desktop app, mobile app, other) A web gallery/portfolio site.
Is it:  
  A new product In a certain way.
  Product improvement Yes, to replace the old, all flash-based site.
  Legacy conversion No.
Other potential users and uses. Potential customers for employment or freelance work, also as an archive for many design projects, sites, art, etc.
What's the ultimate mission? Attract new customers, find new projects, get hired.
Were any usability studies conducted? Yes. Found thousands portfolio sites created with the same recycled WordPress themes, nothing more than glamorous slide shows. This poorly represents their authors' ability for creative thinking and web tools mastery.
Time frame, best technology. ASAP. HTML5/CSS3/customized "isotope" JS for navigation. Incompatibility with some older browsers can be sacrificed for flexibility and responsiveness. The site can be comfortably viewed on any size device without use of media queries.


Identify the problem:  
Brainstorm with other UX team members. Share your insights, observations. It's just me.
Identify all stakeholders, other team members to participate in early stage: visual designers, technical writers, marketing managers, technical managers, UX researchers.  
Schedule additional follow-up meeting(s) with the customer if necessary.  
Prepare agenda. Always distribute agenda well before the meeting, ask all participants to prepare their answers in advance.  
Figure out whether an interactive prototype is desired or in the budget.
Figure out whether additional usability research is required. During interviews I've gathered that some folks have problem navigating to the actual project or client. Changes were made.


Create Design Brief to cover:
Target user (end user or purchasing party), how computer (web, mobile, etc.) savvy are they. Site requires no specific knowledge or experience.
How can user experience be improved in the given area.  
How to make users more confident, satisfied, pleased.  
How to build loyalty (and revenue).  
WHO ELSE: best practices; how successful, popular, intuitive are they.  
WHY: our strategic business goal. Identify "success", time and money to be spent The goal is not to answer any questions, sell any goods or let user to achieve anything. Its single purpose is to demonstrate past experience, out-of-the-box thinking, mastery of media and technology.
WHEN: priorities, milestones, schedule major steps of the project.  
WHERE and WHO is doing WHAT. Site consists of 3 templates: thumbnail gallery zoomable to full size view, project detail (a slide show, HTML or flash animation), misc. content pages. There would be no "home" page.
EXPLORE and COMPARE existing technologies for compatibility, capability, popularity, ability to be completed by existing developers. It's very important to identify any potential technical issues early in the project to avoid them. Choose wire framing and design platform for best compatibility and clarity.  
LOOK-AND-FEEL: Include marketing input and branding requirements.  
  • Completely new
  • Follow the existing guidelines
  • Follow the leader, success story
  • Identify unsuccessful UIs (see WHO ELSE)
  • How many versions to present to the customer
 
If you practice AGILE DEVELOPMENT, what parts of the project can be designed and developed in parallel with UX without major disruption and fallback.  
When building personas consider: demographics, motivation, intentions, goals, behaviors. A. Recruiter - knows and understand nothing. A simple intermediary.
  B. Staffing Manager (boss of A) - has basic understanding and, most important, acquaintance with the Hiring Manager.
  C. Hiring Manager - knows what is required; if at the same time is a design or UX director, can assess your work and experience.
Present your Design Brief, take notes, edit, re-edit, present again. Unfortunately, these steps are frequently reduced to a simple statement of goals. A small mistake or omission at this stage can grow into a big problem later in the process.


Storyboarding, Mapping, Charting and Wireframing
Create well commented detailed site maps and flow diagrams. Review ones received from the client, if applicable. Try to reduce complexity of site maps by breaking them into few smaller ones.

Wireframes have to show:
  • Relative placement of functions, buttons, content, icons, pages
  • Relative importance of elements and Information Hierarchy
  • Content samples have to be as close to the real thing as possible
When choosing wireframe tools, most important thing is how fast can you sketch in it vs. paper and pencil, then compatibility with other team members, and only then its ability to output in various formats. Paper storyboards are still the fastest. Quantity is more important at this point that quality.

Don't show HI-FIs instead of wireframes unless they are pixel-accurate representations of the approved look-and-feel. Eliminate "is this the color we use?" questions during conceptual phase.

Identify and Widgetize more frequently used UI elements. If using one of the well developed AJAX libraries like Bootstrap, Dojo, Mobile JQuery, Sencha or else, see how long would it take to re-skin it vs. creating new CSSs.

Move to digital mock-ups and interactive prototypes when ready and if it's necessary.

Visual Design

Most of the UI visual design can be done in parallel with wireframing (especially when designing with an existing look-and-feel). Provide visual designers with as much and as current information as possible.

Never leave developers to guess anything, produce HI-FIs for all key screens.

Usability Testing

I've got hired thank to this site. That's testing.

Moving into Production

You're ready to move into production if:

Don't wait till the end of development. Establish frequency of the QA monitoring.

Evaluate the Result

Evaluate all successes and failures: