Selected techniques from the Creative Design Process

1. Selected techniques from the Creative Design Process • Vision statement • Requirements workshop, other facilitated workshops • Creative Design Brief • Navigation Map • Creative Design Comps • Web Design Elements • Initial Web UI Prototype, UI Guidelines, • Full Web UI Prototpe • Full Navigation Map

2. Vision Statement • Successful Web applications start with a compelling vision statement. • Web solutions involve a variety of stakeholders: business executives, marketing, customer support, development, graphic design, etc., whose communication and cooperation is critical to success. • The vision statement must be developed personally by the stakeholders, ensuring agreement on the project‘s goals form the outset. • Discuss potential difficulties.

3. Vision Statement • Purposes of the vision statement: • It achieves agreement on what problems need to be solved • It defines the boundaries of the system • It describes the most important features and qualities of the system.

4. Requirements Workshop • Once the vision is (largely) agreed upon, facilitated workshops are held with the stakeholders to further identify the users and services the system should provide along with the essential qualities and constraints. • Use of brainstorming • Gathering of requirements on post-it cards to identify actors, use-cases, and supplementary features. Use of other moderation techniques to ensure participation and expression of stakeholders‘ views. • Use of UML use-case diagrams and other semi-formal notations (compare WISDM) to capture meanings of stakeholders.

5. Creative Design Brief • The Creative Design Brief identifies the initial user interface guidelines. It defines: • The mood of the site • How users are expected to access the site • The browsers the users will be using • Whether the site will use frames • Any color limitations/orientations the site will have • If applicable, a graphics standards guide • What sort of „bells and whistles“ are wanted (e.g. mouse-overs, animation, news feeds, multimedia, …)

6. Navigation Map • The navigation map („site map“) is a view that represents the web application in the form of a tree diagram. • Each level of the diagram shows the number of clicks necessery to to get to that (logical) page. (if possible, # ≤ 3) • The navigation map evolves from the use-case model, it accompanies the use-case storyboard. • For a larger system, one navigation map is constructed per actor (or even per use-case).

7. Creative Design Comps • Creative Design comps present to the stakeholders a number of visual options . • Comps consist of mock-ups of what the site might look like. They are non-functional, flat pictures framed with browser window graphics. • They help to postpone the investment for the more costly HTML prototypes. • To create Comps, we take an important use-case and develop many alternative designs. Three most promising options are selected to be presented to the stakeholders. Typically it takes three iteration before a consensus on the final design is reached.

8. Web Design Elements • Web Design Elements are discrete images that are assembled to build the web pages. • Consistency of the user interface across a web site is essential to usability, since the site should provide a consistent user experience. • The project must consistently use a set of standard graphhical components across the site. • These components should be developed early in the project, along with guidelines for their usage. • Reusing (a tight set of) high quality standard graphical elements reduces development cost and increases quality. • The Creative Design Comps serve as input for the web design elements being created in parallel with the initial UI prototype.

9. Initial Web UI Prototype • The initial UI prototype is based on the Use-Case storyboard, the Creative Design Comps and uses the Web Design Elements identified before. • It typically supports only portions of the system, based on the most important and representative use cases.

10. UI Guidelines • Detailed guidelines for the user interface are developed after the initial user interface prototype is complete. • This system specific style-guide specifies e.g.: • How and when web design elements shall be used • Color schemes, fonts • Cascading style-sheets or XSL specification • Details on how navigational elements shall function and be positioned.

11. Full Web UI Prototype; Full Navigation Map • Based on initial UI prototype • Covers all use-cases • Demonstrates full navigation between screens and visual elements • Real or dummy data is used depending on the development of the functionality and content of the application • Goal: Come to agreement with the stakeholders on the scope and specific nature of each of the user interfaces. • The full navigation map includes all known pages/screens identified in the web UI prototype.

12. Overview of combining Creative Design techniques with the UP

13. Navigation Map • Insert an example for a full web site navigation map. Use either Fig., 2 from http://www.rational.com/products/whitepapers/101057.jsp or better something adapted from that figure.