Interactive/User Experience Design Phases

1. 2. 3. 4. 5.

Interactive/User Experience Design Phases

Strategy is where it all begins: What do we want to get out of the project? What do our users want?

Scope transforms strategy into requirements: What features will the project need to include?

Structure / User Flow gives shape to scope: How will the pieces of the application or site fit together and behave?

Skeleton / Wireframes makes structure concrete: What components will enable people to use the sites?

Surface / Visual Design brings everything together visually: What will the finished product look like?

Goals- User Centric Design

Consulting- User ResearchDeliverables- UX Goal statement- User Research

Reports

On to

Pro

duct

ion

Cycle

StrategyScope Structure / User

Flow Skeleton /

Wireframes Surface / Visual

Design

Abstract Concrete

Goals- Determine UX design

resources needed- Develop User

PersonasDeliverables- UX/ UI Resource Plan

Document- User Personas

Goals- Ensure each user

scenario is captured- Technical SME

validationDeliverables- Storyboards- Sitemaps

Goals- Wireframe

Exploration- Preliminary Usability

Testing/ Prototype Proto-site

Deliverables- Wireframes- Clickable Comps/

Sketch flow

Goals- Develop Look and Feel based

on branding requirements- Assist Development with final

graphic assets and design documents

Deliverables- High-Fidelity Comps/ Mockups - UI Guidance Documents

1. 2. 3. 4. 5.

StrategyScope Structure / User

Flow Skeleton /

Wireframes Surface / Visual

Design

Abstract Concrete

AT&T Developer Portal

Microsoft Finance – Microsoft Investor Relations

Managepoint

Finweb Redesign

NEOSIP

Others Project Samples

Interactive/User Experience Design Phases

Example of different projects taken on at different phases:

On to

Dev

elop

men

t Cyc

le

AT&T Developer Website Redesign

AT&T Developer Website Redesign:

Strategic Discovery

The strategy was to capture the needs of the sites target users and with that define the goal for the new site. The time was spent strategizing with AT&T to gather requirements and gain an in-depth understanding of user behavior to guide the design process. Key areas of focus during Discovery:

• Stakeholder reviews to gather detailed requirements

• Complete content audit of the site to align content with user needs

• Establish clear site goals and objectives, with detailed business and feature requirements list that will be assembled into business requirements document (BRD) that will inform the design phase

• Build detailed project plan based on defined requirements

• Deployment plan• Review existing branding guidelines 1-2.


Site Mapping

The BRD guides the information architecture process as features are explored and the navigation more clearly defined through the site map. Keeping the main target audience as the central focus, we begin prioritizing and categorizing features into the general content areas that will subsequently inform site presentation and navigation. iSoftstone’s Technology Leads and Information Architect actively engaged with AT&T’s technology team to ensure that all proposed solutions and user paths were technically feasible and compatible with their existing systems and databases.

3.


Wireframes

Once a general Site Map had been established, iSoftStone moved into wireframe development. During this important step in the process, page templates were defined to account for each user task, as well as overall navigation and page structure design. We

We recommended a strategy around the number of page templates to ensure that the site could scale when adding new pages and features to ensure consistent visually and in user flow.

4.


Page Comps

The visual design (or graphic design) process began as soon as the homepage structure/wireframe was complete.

We provided various rounds of creative concepts for the Home Page and key subpages, to reach consensus. Having the existing guidelines from the AT&T brand guideline along with mood/style board explorations and a strong wireframe foundation, the visual design brings the site to life through color, design details, imagery, and meaningful and immersive interactive components.

5.


Page Comps

5.


Page Specs/Redlines

This is where we documented all critical design information at an individual page level for the front end developers to start building out the HTML pages.

The redline documents included everything the developers needed to create the page structure & Cascading Style Sheets.

5.


Design Style Guides

This is where we documented all critical design information that the site maintenance team would need when updating graphics or modifying or adding new pages.

The document elements included detail references to source files, color values, font specifications, templates, Navigation elements and form field styling.

6.

Other Wireframe Examples

Microsoft Investor Relations:

Wireframes

8.

Microsoft Headtrax NEO SIP:

Wireframes

9.

Microsoft finweb portal:

Wireframes

10.

Interactive/User Experience Design Phases

Documents

Transcript of Interactive/User Experience Design Phases