Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

Look, Feel, TouchCreating Realistic User Experiences

with Interactive Prototypes


About Perficient

Perficient is a leading information technology consulting firm serving clients

throughout North America.

We help clients implement business-driven technology solutions that

integrate business processes, improve worker productivity, increase

customer loyalty and create a more agile enterprise to better respond to new

business opportunities.


Fast Facts

Founded in 1997 Public, NASDAQ: PRFT 16 locations throughout the U.S. & Canada:

– Chicago, Cincinnati, Cleveland, Columbus, Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Minneapolis, New Orleans, Philadelphia, San Jose, St. Louis and Toronto

1,100+ employees Dedicated solution practices Served 400+ clients in past 12 months Alliance partnerships with major technology

vendors Multiple vendor/industry technology and growth

awards


Our Solutions


Our User Experience Capabilities

Research Design & Validation ImplementationProven user research and analysis techniques enable us to understand users’ goals, attitudes, and behaviors. We prioritize their needs against business and IT goals to define an experience strategy that guides our design decisions.

Based on user input, we define the information structure and develop layered blueprints, from information architecture through interaction and visual design. Our focus on brand integration and usability bring the user experience to life and ensure that it exceeds user expectations.

Development and Engineering teams work closely with Design teams to execute the supporting technical solutions. Perficient uses flexible collaboration models and program lifecycles, tailored to specific engagement type.


Our Experience in Interactive Prototypes

Lo-Fidelity

Sketching

Mid-Fidelity

Page layout with some interaction

Corp Logo


Our Experience in Interactive Prototypes

Hi-FidelityRich interactions and visual design concepts

Example from protoshare.com Example from irise.com

http://www.protoshare.com/

http://www.irise.com/




Purpose of Today’s Webinar

Description

• Test requirements with stakeholders before the development begins

• Look, Touch and Feel what will be built before you build it

Look: See how the requirements are fulfilled (lo)

Touch: Click through some key tasks (mid)

Feel: See, Click, Experience (hi)

Test design with real users before or during the development


Prototyping Maturity

That was then, this is now


Stakeholder Review

Requirement Solidification

• Define, discuss and visualize requirements

• Confirm users and tasks

• Use prototype to directly engage the business owners

• A visual contract between IT and the business

• Less scope creep

• Reduces late requirements

• Reduces change requests

Consensus Building

• Build consensus of what the product/site needs to do and for whom

• Facilitate collaborative design sessions


Prototyping Fidelity

Lo

• Paper, ePaper

• Human supplied interaction

• No electronic interaction

Mid

• ePaper with some interactivity

• Key task flow pages are designed and linked

• May look raw or visual brand is fully employed

Hi

• Prototyping Tools

• UI Development tools

• Interaction of key tasks, with complex UI interactions present

• May look almost ready or already built


Lo-Fidelity

Method• Determine key business objectives, users and tasks

• Sketch pages

Favorite Tools

• Paper: Paper/Pencil, White Out, Post-its

• ePaper: PowerPoint,Visio, Photoshop

Feedback In-person: bring copies and have people mark up the pages

Remote: Scan/email, web host, collaboration tools

Advantages: Low learning curve, small investment, easy to throw away


Lo-Fidelity Case Study

Lo

• Sketched key tasks with 3 different design patterns

• Iteratively test those concepts with target users to determine the most successful content organization and transactional flow

Corp Logo

Corp Logo


Mid-Fidelity

Method• Determine key business objectives, users and tasks

• Whiteboard or Sketch some before jumping to electronic

Favorite Tools• Visio with active hyperlinks – easy to share

• Protoshare – affordable monthly subscription

• Axure – some rich interactions

Feedback In-person: Display on projector, make changes on the fly

Remote: Webshares, collaborative design meetings

Advantages: Easy to learn, medium investment, beginning to touch full UX


Mid-Fidelity Case Study

What We Did Designed page

layout, task flow

Used Visio to prototype flow

Gained requirement consensus

• Proceeded to build a Hi-fidelity prototype in iRise for user feedback


Hi-Fidelity

Method• Define business objectives, users, tasks and key features

• Developed interactive prototype to demonstrate the application functionality including movement and behavior

• Leveraged the prototype to define business requirements

Favorite Tools• Photoshop, Fireworks

• Dreamweaver, iRise

• HTML/CSS, Flash Catalyst, Flex

Feedback In-person: Projection, Encourage participants to take a test drive

Remote: Webhost, place in collaborative workspace


Hi-Fidelity Case Study

What We Did Designed a multi-sourced web

application that allowed the user to work with the company as one source for services, rather than traversing multiple systems.

Allowed business to cross sell service offerings

Used iRise to visualize branding, cross SBU core functionality



Corp Logo

Corp Logo



What We Did Designed an improved

data visualization model

Used Flash Catalyst to prototype core functionality

Integrated a Flex interface with a portal infrastructure










High-Level Visual Design

Method• Explore high-level design concepts through Mood Boards

• Conduct visual preference testing

Favorite Tools• Semantic differential survey

• Online survey

Feedback In-person: Sample user completes survey during usability testing

Remote: Survey is posted on-line for users to complete


High-Level Visual Design


User Feedback

Ah-hah! Moments

• Users can teach you

• Highly interactive prototypes can provide feedback on all elements that impact user experience

• This is even more important as you move to the mobile space.

Design Iterations

• Every great product/system idea needs to be conceived, concepted, chewed up for awhile and THEN built.

• Don’t start building if you should still be chewing.

• Interactive prototyping helps you describe the design in ways a 100 page document never could do.

Talk to us more about mobile another time. We know how to achieve great mobile user experiences.


Summary

• Test requirements with stakeholders before the development begins

• Look, Touch and Feel what will be built before you build it

Look: See how the requirements are fulfilled (lo)

Touch: Click through some key tasks (mid)

Feel: See, Click, Experience (hi)

Test design with real users before or during the development


Tool Links

• Visio | Download and Trials Site

• ProtoShare | Video Tutorials

• Axure | Product Tour

• iRise | Usage Scenarios

• Flash Catalyst | Design Projects

• Flex | How it is Being Used

• Photoshop | Creative Impact

http://visiotoolbox.com/2010/visio-download.aspx

http://www.protoshare.com/services-support/tutorials/index.html

http://www.axure.com/tourOverview.aspx

http://www.irise.com/products/usage.php

http://www.adobe.com/products/flashcatalyst/design/

http://www.adobe.com/products/flex/

http://www.photoshop.com/


Questions?


Follow Perficient Online

Facebook.com/Perficient

Perficient.com/SocialMedia Daily unique content about content management, user experience, portals and other enterprise information technology solutions across a variety of industries.

Twitter.com/Perficient