UX Portfolio Derek Smith. Overview Slides to walk through the UX activities of a sample project...

UX PortfolioDerek Smith

Overview

• Slides to walk through the UX activities of a sample project• Present key design elements of the sample project• Some design elements from other projects• Brief mention on a few other projects I’ve been involved with• Work product examples

CareerSmart: Project Overview

Mission: Provide a single application for career management and learning • 3 old existing applications that hosted most functionality• Needed to merge all 3 into 1 site but largely preserve the information

architecture• Had to generally look and feel like an IBM w3 site

CareerSmart: Object Mapping

CareerSmart: Task Flow Modeling

CareerSmart: Low Fidelity Prototyping

CareerSmart: Prototyping in dreamweaver

CareerSmart: Prototyping in dreamweaver

CareerSmart: Usability Evaluation

• Tested using our high fidelity prototypes

• Remote Testing via screen sharing and conference call

• Global participant pool• Captured data on Task

completion rates, time on task, Critical/non critical errors, user comments, satisfaction questions

• Identified areas for improvement in the design and made adjustments

Design Components: Home/ Career snapshot

Design Components: Overview Pages

Design Components: Learning Card

Design Components: Learning Card

Design Components: Search for learning

Design Components: Search for learning

Design Components: Portlet for reuse on other IBM sites

BPpeople Project

• Redesign of BP’s Intranet• Had to design with severe limitations

– Built on SAP– Minimal opportunity for custom code

• Huge success– Raised user satisfaction of the site by 69%– 17% increase in task completion rates– 20% increase in Error-free rate– Reduced time on task and increased ability to locate specific content

Design Components: Content Page Templates

Design Components: Rich Navigation Menu

Design Components: Search Results

Design Components: Indexes

Enhancing SSI Search: Before

Enhancing SSI Search: After

Lotus Connections

Integrated Sales Environment

Data Power

Work Product Examples and Experience

Model:• Task Flows• Card Sort• Object Mappings• User Surveys• UX project plans

Design• Custom Prototyping

Tool Creation• UI wireframes• Low Fidelity

Prototypes / Mock Ups

• Interactive Prototypes

• Visual UI Specs• Detailed UI Specs

Evaluation• Heuristic Reviews• Accessibility Reviews• Test Plans• Usability Testing

Card Sort

User Surveys

UX Project Plans

UI Wireframes

Visual UI Specs

Detailed UI Specs

Heuristic Reviews

Accessibility Reviews

Usability Tests