Interactive/User Experience Design Phases
Abstract
1.
2.
3.
5.
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?
Goals
Goals
Goals
Goals
Goals
-
-
-
Ensure each user
-
Wireframe Exploration
-
scenario is captured
-
Preliminary Usability
User Centric Design
resources needed
Consulting
-
User Research
Determine UX design
-
Develop User Personas
Deliverables
Deliverables
-
-
-
UX Goal statement
Structure / User Flow
gives shape to scope:
How will the pieces of
the application or site
fit together and
behave?
4.
User Research Reports
-
-
Skeleton / Wireframes
makes structure
concrete: What
components will
enable people to use
the sites?
Technical SME
Testing/ Prototype
validation
Surface / Visual
Design brings
everything together
visually: What will the
finished product look
like?
Develop Look and Feel based
on branding requirements
-
Assist Development with final
graphic assets and design
Proto-site
UX/ UI Resource Plan
Deliverables
Deliverables
Document
-
Storyboards
-
Wireframes
Deliverables
User Personas
-
Sitemaps
-
Clickable Comps/
-
High-Fidelity Comps/ Mockups
Sketch flow
-
UI Guidance Documents
documents
On to Production Cycle
Concrete
Interactive/User Experience Design Phases
1.
Concrete
2.
3.
4.
Example of different projects taken on at different phases:
AT&T Developer
Portal
Microsoft Finance –
Microsoft Investor
Relations
Managepoint
Finweb Redesign
NEOSIP
Others Project
Samples
5.
On to Development Cycle
Abstract
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.
AT&T Developer Website Redesign:
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.
AT&T Developer Website Redesign:
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.
AT&T Developer Website Redesign:
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.
AT&T Developer Website Redesign:
Page Comps
5.
AT&T Developer Website Redesign:
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.
AT&T Developer Website Redesign:
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.