* denotes required steps. Other step are often skipped or optional.
Definition and requirements
Define the website goals and project scope. It is not always the ID-ers job to come up with requirements, but they are often refined when gathering inspiration [link to private post] and during design.
- Define the vision
- Define the challenges/problems
- SWOT analysis
Define the target audience
- contextual scenario’s
Business and user goals
- interview and observe users
- talk to product managers and marketing department
- study competitors
- available programmers and their proficiency (skills and knowledge)
- compatibility (screen resolution, bandwidth)
- supported functions (existing reusable components
- innovation constraints (culture)
Application/website constraints (re-usable templates, fixed navigation elements) – these become your design constraints. Agree on which page templates (columns), high-level that you will base your designs on (rules/principles/constraints/scope).
Also consider deadline, time-to-market (feature cost-benefit).
Gather facts and goals about the website. Question to ask your client before any user research (and design project)
0. Strategy and concept
There are 3 levels within interaction design: [The in-mates are running the asylum, Alan Cooper]
1. Concept design
2. Behavioural design
3. Interface design
A good over of the overall levels outside interaction design, see JJG’s elements of user experience. (img)
Define user + device scope.
1. High-level overview (structure and flow)
First, start with content:
- Which pages should there be?
- On each page, which content should belong there? User flow.
Don’t be afraid to divert from the page and boxes model. For example, a one-page navigation/experience could be worth exploring.
List the high-level view, graphically or textually. With the birds-eye view, prioritise each element so you know which one needs most emphasis. Use the
Tools for brainstorming and sketching
Tools: Pen and paper, beer & back of a napkin 😉 , walk/shower/jog, whiteboards, brown paper, mindmapping tools, comics and storyboards, different visual views (Adaptive path), stories & scenarios, proto-personas
Online collaborative whiteboards: see other post
Tools for structuring
Sitemaps and diagrams, Flowcharts, notepad/Excel (indented), mindmaps, rough sketch (blocks) ,post-its
Online: http://boardthing.com/ Trello.com
Layout options means exploring: Lightboxes, tabs, filters, columns, carrousels, rollover tooltips, accordions, grids, (mega) dropd-downs, etc
2. Coarse design
After agreeing on the high-level principles with your client, now it’s time to dive into more detail, explore the design space.
Work by iterative design
Get inspiration, note/collect good examples and research best practice and patterns, Google images (e.g. “toggle UI”), high-level blocks, design, get feedback, design, ask bypassers, discuss, design, get feedback.
Wireframing and prototyping
Tools: prototyping tools are (from easy to use to more expert knowledge required): Balsamiq, Omnigraffle, Visio, Axure, Fireworks, DHTML, Flash, Visual Studio
Wireframing Interactive prototypes
Axure Y Y
Links to other pages with overview of ID tools.
The earlier the better. Paper prototyping or clickable prototypes.
3. Detail design
Support the visual designer and overview usability. When to do graphical design? Agile vs waterfall.
Tools: Excel, Word
Methods: Use cases
Also known as:
Define all use cases and defaults. Be sure, in later stages, to include edge-cases (randgevallen).
4. QA and functional testing
Visual design comes at play after, but often at parallel with, interaction design.
Testing. Though not always an interaction designer’s job, testing the builds and implementations for bugs, functional malfunctions and interaction design.
Remember to always…
Exploring design space
1. Invetorise the known, cluster the known, prioritise (order)
2. Explore UI possibilities using the patterns at hand (patterns: accordion, tabs, show more links, anchors, etc)
3. Check if it’s scalable (future-proof) and check for edge cases (amounts, visual limits)
4. Check other constraints, boundaries, limitations. Min/max and average in terms of data, content, image dimensions, labels
5. Simplify the UI @ http://www.quora.com/Product-Design-software/What-is-the-best-process-for-simplifying-a-user-interface-and-experience?hover=2
This is not linear! Do a bit on every step.
UX team of one
As a UX team of one I experienced good results following these steps (iteratively!):
– Vision statements (write down assumptions derived from business needs, and stakeholder quotes)
– Brainstorm your proto-persona (get at least 3) or at least a basic list of user needs (assumed)
– Competitive research (evaluate direct competitors, pros and cons of their interface. what do their users say/need on forum)
– Inspiration research (get a feel for potential solutions by checking how do others solve this problem)
– Features (A list of potential requirements structured Excel columns or Word indents is often good enough.)
– Sketches (screens and elements in their alternative 6-up approaches, patterns, format variants). Going back and forth from competitors screenshots to your sketches.
– Flows and storyboards (walk through the possible experience as a user)
– Sitemap, use flow (get down what you know)
– Design principles (these act as guidelines and constraints, and as input to features/roadmap)
Only after this get into detail design, unless failing fast is an option.
Remember to contribute to team roadmap, critisize features value, offer technical solutions potentials (even at technology level, like scripts, APIs, or data sources), visualise the process & experience for them.
– User Stories (Agile)
Annotations on your sketches, wireframes and competitive/inspiration evaluations can drive the features/stories/requirements/roadmap.
http://uxbasis.hellogroup.com/ (start at Structure)
http://www.slideshare.net/pboersma/influences-on-ux-amsterdam-ux-cocktail-hour Process, method toolbox and internal influences/roles
Methods and toolkit, toolbox:
http://www.allaboutux.org/all-methods (UX evaluation methods)
Keyword: UCD process, user-centered design process, workflow, design work-flow, agency work flow