“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. | |
|
|
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:
|
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: