Rapid Prototyping
and ecommerce
projects
frankreimann.de
Creative Director
© Interone Worldwide GmbH. An Agency of BBDO Worldwide.

Usual workflow:
Start Analyze Concept
Development Design Technical
Development Implementation
Launch

This waterfall workflow doesn´t work
for huge projects with short timelines.

Case example:
Relaunch o2online.de

The challenge:
Relaunch of the site and the e-shop

IMAGE
The challenge:
Reinvent the information architecture

IMAGE
The challenge:
Reinvent the product communication,
selection and configuration

IMAGE
The challenge:
Reinvent the entire user experience

Some facts…
• Project duration: 4 months
• Project team: 15 staff members
• Rebuilding approx. 50 templates
• Migration of approx. 250 content pages
• Redesigning the shop flows (physical and non-physical products)
• Creating the product campaigns
• …
• Size of the project folder: 37.2 GB (concept and design only)

Iterative and incremental project
development from out the concept
designers view.

Iterative project development
Product Management
Project Management
(Client)
Requirements
Consulting
Concept Designer /
Information Architect
Technical Department
Design Department
(Client)

Iterative project development
Product Management
Project Management
(Client)
Requirements Actual effort
Consulting Estimated effort
Concept Designer /
Information Architect
Technical Department
Design Department
(Client)

Iterative project development
Product Management
Project Management
(Client)
Requirements Actual effort
Consulting Estimated effort
Concept Designer /
Information Architect
Documentation
Technical Demands
Technical Department
Design Department
(Client)

Iterative project development
Product Management
Project Management
(Client)
Requirements Actual effort
Consulting Estimated effort
Concept Designer /
Information Architect
Interface Wireframes Documentation
Screen Layouts Technical Demands
Technical Department
Design Department
(Client)

Input

Business requirements
Product Management
(Client)
Requirements
Concept Designer /
Information Architect
• Competitors / target groups
• Use cases / user scenarios
• Brand communication / product communication
• Conversion rate / log files
• Requirements SEO / SEM / SMO
• Maintenance process
• Lifecycle - user / lifecycle - product
• …

Technical demands
• CMS restrictions?
• Shop templates / shop process restrictions?
• Database restrictions: picture sizes / text lengths / product flags / login and checkout
process, ...?
• Application service providers?
Concept Designer /
Information Architect
Technical Demands
Technical Department
(Client)

Analyse the demands
Step 1 – define the scope of the flows
Concept Designer /
• CMS / shop applications / ASPs Information Architect
• User flows: anonymous / identified / logged in
Step 2 – define the needs of the UX
• Types of contents
• Types of interactions
• Types of display of the contents and interactions
• Develop a list of interface elements
• Classification: “must haves” and “nice to haves”
• Classification: CMS, shop applications, new, existing, ...

Project effort estimation
Project Management
Estimated effort
Concept Designer /
Information Architect
• Procedural methods (flow definition, wireframe development, rapid prototyping, ...)
• Efforts (Concept, Design, PM, Technical Department, Content Developer, ...)
• Delivery items (flows, content inventories, page migration lists, rapid prototypes, ...)
• Exclusions (amount of the content, tutorials,...)

List of recommendations
Product Management
(Client)
Consulting
Concept Designer /
Information Architect
• Optimisation UX
• Optimisation flows / user scenarios
• Optimisation SEO / SEM / SMO
• Optimisation content lifecycle

Rapid prototyping: axure.com
• Use dynamic panels
• Develop master for interface templates Concept Designer /
• Use hyperlinks only for defined use cases Information Architect
• Evaluate: shared project mode vs. subprojects
Design Department

Usability checks: silverbackapp.com
• “Spontaneous, unobtrusive usability testing software for
designers and developers.” Concept Designer /
• “Capture screen activity” Information Architect
• “Record the participant’s reactions on video”
• Prototype Test Prototype Test …
Design Department

Output

Homepage
Before Relaunch After Relaunch

Sub Index Page „Handys“
Before Relaunch After Relaunch

Product List (1/3)
Before Relaunch After Relaunch

Product List (2/3)
Before Relaunch After Relaunch

Product List (3/3)
Before Relaunch After Relaunch

Thank you!