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
  projects 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.c
  om/products/whitepapers/101057.jsp or better
  something adapted from that figure.