This large, early step involves listening to the business needs, understanding stakeholders' requirements, collecting customer/user input, and creating personas. Artifacts produced include initial use cases, design principles, process flow diagrams, application maps, and anything else that assists in describing use cases and interactions.
Tools:Hand sketches, wikis, spreadsheets, PowerPoint, Visio, Lucidchart, Google Drawings, Photoshop, Illustrator
Begin to document decisions pertaining to the UX and UI, including any flows, wireframes, maps, and open issues. Continue refining the document throughout visual design and development phases until the feature is fully specced and all teams sign off. Can serve as the full spec, or supplement a product manager/owner's functional spec.
Tools:Wikis, Google Docs
More detailed than rough wireframes but not quite a mockup, this step can facilitate quick feedback from product managers and subject matter experts to rapidly iterate through designs.
Tools:Hand sketches
Move mockups from static images to a static website using HTML, CSS, and jQuery/JavaScript. Care is taken to structure the HTML and CSS as sensibly and efficiently as time permits so that it isn't necessarily throw-away work once it reaches developers and engineers.
Tools:HTML, CSS, Sass/COMPASS, JavaScript, jQuery, Photoshop, Illustrator
Who better to systematically test the UI with the level of detail required than the person who designed it? Following the UI spec as well as going off-script uncovers both functional and UI issues. After logging, assistance can be provided in addressing issues with HTML and CSS, missing use cases, or poor user feedback.
Tools:JIRA, Bugzilla, spreadsheets