Design stage

During the Design stage of your project, you review the default starter store functionality and design to understand the starter store capabilities and to identify areas to customize your implementation. WebSphere Commerce provides resources that you can use to describe, edit, and extend your project.

Browse the tabs to find modifiable documentation templates and reference applications that you can use to accelerate project progress and reduce costs for every phase of a WebSphere Commerce project.

6 column table that links to the design phases: Concept, Design, Implement, Test, Launch, and Maintain
Concept stage	Design stage	Implementation stage	Testing stage	Launch stage	Maintenance stage

Reference material	Use this asset to ...
CSS Style Guide	The style guide covers every key component, a breakdown of its structure, class names, and image paths that are used throughout the store. The CSS classes are listed to allow for a quick search in the main CSS file to locate the necessary code you must update. Screen capture examples are also included illustrating where some of these elements are used across pages and widgets in the Aurora starter store.
Wireframes	The wireframes can be used by user experience professionals to arrange elements or add new elements to best match a customers business objective and customization of the store.
HTML Starter Stores	WebSphere Commerce provides a set of static, navigable HTML pages for starter stores. These static assets showcase all the store pages and their different supported flows. For example, there are different pages to demonstrate an empty shopping cart, a shopping cart page with more than 20 items with pagination. The asset can be run by itself by opening the HTML files in a browser. You do not need a development environment that runs on a WebSphere Commerce server. When you view a static page, you can display the names of the JSP file that make up the current page by using the highlight feature. The highlight feature marks off each JSP page and shows its name in the upper left corner of the area.
Use case documentation	During a customization project, you must perform architectural design even when you use a WebSphere Commerce starter store. To reduce the time that is required to document use cases for your store, a modifiable use case document is provided. The use case document clearly describes all the default starter store capabilities that are available to shoppers.

In addition to these assets, implementers are responsible for creating and managing a macro design document. The macro design document contains the high-level description of how the new and changed use cases will be implemented. Details include identifying all of the code changes that must be made and providing a high-level description of what the code must implement. For example, a complete list and description of all JSPs, commands, schema, EJBs, BODs, DSL that must be created or changed.

For new code objects, the macro design document typically includes the name, input parameters, and expected output. Lower-level description is typically put in a micro design document that covers each piece of code in minute detail.

Important: The use cases, wireframes, and macro design documents are typical design phase deliverables. They must be consistent with one another. The use cases explain how the site behaves from a shopper perspective. The wireframes show a mockup of what the pages look like with the use cases implemented. The macro design document contains a list of all the code assets that must be changed, and what they must do, to implement the use cases. Many implementation project problems can be tracked back to inconsistent and incomplete information between these three documents.