The Innovator projects are similar to our Pioneer projects in that one of the four core templates are used as a base, but there are more options and flexibility to customize the wireframe. Innovator projects still include a design process that happens concurrently with the development of the site, but instead of a regular full mockup of the homepage, an element collage is presented to the client to refine the styling. The idea of the collage is to minimize the distraction that clients get into with editing small details of a full mockup.

Layout

The client will start with choosing a layout:

- split

- scroll

- traditional

- search centric

Once the client has made their selection, the wireframe will be customized by the PM, then sent to design as well as development to begin programming the site. You will select the respective Element Collage source file, and work from there. 

Element Collage File

In the file you will find several artboards, including:

- widget assets

- element collage

- style guide pages

The widget assets include the various options for each section, which you will select accordingly to match the wireframe. While the assets board looks similar to a regular mockup, only the element collage will be presented to the client. (as a reference, it's good practice to put together the widgets per the wireframe, so you can see how the colors will look all together)

The most efficient way to start editing the file is to use the assets panel and edit the color and text swatches. This will eliminate needing to edit every item, and give you a starting point. 

Keep in mind that this is still a lower cost project so customizations or custom graphic elements need to be approved. Stay within the template as much as possible, not editing the dimensions of the items. However, if a client persists, exceptions can be made (within reason).

Examples of element collages 

 Note that the Element Collage does not include the footer, so if you change the footer in the Assets board, please make a note for the developers, so that they know the footer changed from the template.

Presentation & Approval

The initial collage will be presented during a call with the client, instead of sending a link and working through revisions. The idea is to move these projects quickly, so the purpose of the call is intended to finalize the design feel for the collage with the client to get approval. 

Emphasize to the client that they will still be able to make design changes AFTER the site has been initially developed. Often times the clients fear approving the collage without seeing the full design; reassure them that the approval does NOT mean they are committed and that editing the prototype directly will move the process faster than creating an additional mockup.

Key points with presenting the Element Collage

Ask whether all decision makers are present.

Recap:

• Goals

Define Element Collage:

• an assembly of pieces without specific logic or order that gives you an idea of the mood and feel for the site, without focusing on the architecture
• similar to swatches and patterns for a house design

Talk about:

• mood and feel
• design requirements

Have the client take a couple minutes to look at the element collage; look at the colors, patterns, fonts, button styles.

Ask the client:

• is this design heading in the right direction in regards to the goals that we talked about?
• does this look like the future of the city?
• is this the voice we want to show our users?

Post-Development

After the collage is approved, the site will be developed and reviewed by the client. Typically, the client will request to edit a few things. At this stage, rather than editing the element collage (although the style guide will need to reflect these changes) adjustments will be made directly to the prototype, in the same method we use to edit the Pioneer projects.