Download
1 / 14
200 likes | 463 Views
Interactive/User Experience Design Phases. Abstract. Concrete. 1. 2. 3. 4. 5. Surface / Visual Design. Skeleton / Wireframes. Structure / User Flow. Strategy. Scope. On to Production Cycle.
E N D
Interactive/User Experience Design Phases Abstract Concrete 1. 2. 3. 4. 5. Surface / Visual Design Skeleton / Wireframes Structure / User Flow Strategy Scope On to Production Cycle 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 • Determine UX design resources needed • Develop User Personas • Deliverables • UX/ UI Resource Plan Document • User Personas • Goals • User Centric Design Consulting • User Research • Deliverables • UX Goal statement • User Research Reports • Goals • Ensure each user scenario is captured • Technical SME validation • Deliverables • Storyboards • Sitemaps • 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 • Goals • Wireframe Exploration • Preliminary Usability Testing/ Prototype Proto-site • Deliverables • Wireframes • Clickable Comps/ Sketch flow
Interactive/User Experience Design Phases Abstract Concrete 1. 2. 3. 4. 5. Surface / Visual Design Skeleton / Wireframes Structure / User Flow Strategy Scope Example of different projects taken on at different phases: On to Development Cycle AT&T Developer Portal Microsoft Finance – Microsoft Investor Relations Managepoint Finweb Redesign NEOSIP Others Project Samples
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 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.
