InteractiveUser Experience Design Phases Abstract 1 Strat 2

Interactive/User Experience Design Phases Abstract 1. Strat 2. egy e Scop 3. ture Struc / Us 4. ow er Fl ce Surfa 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 - - - 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 - - - UX Goal statement Structure / User Flow gives shape to scope: How will the pieces of the application or site fit together and behave? eton Skel 5. es fram e r i /W User Research Reports - - Skeleton / Wireframes makes structure concrete: What components will enable people to use the sites? Technical SME Testing/ Prototype Proto validation esign ual D / Vis 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 -site UX/ UI Resource Plan 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. Strat Concrete 2. egy e Scop 3. ture Struc / Us ow er Fl 4. eton Skel es fram e r i /W 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. ce Surfa esign ual D / Vis 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. i. Softstone’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, i. Soft. Stone 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.