In Part 2 of this 2 part webinar we share real-world success stories highlighting projects we’ve designed and built using a pipelining approach, as well as show you what it means to integrate pipelining into your own product development process.

1. © Integrated Computer Solutions, Inc. All Rights Reserved
Accelerating Time to
Market by Pipelining
UX and Development
Presented by
Jeff LeBlanc
Director of UX, ICS

2. © Integrated Computer Solutions, Inc. All Rights Reserved
About the Presenter
Jeff LeBlanc
Director of User Experience
• Software developer for 20+
years
• Certified Qt trainer since 2003
• Human Factors team at HP
Medical
• Adjunct faculty at WPI
teaching HCI
jeffl@ics.com

3. © Integrated Computer Solutions, Inc. All Rights Reserved
About ICS
Delivering Smart Devices for a Connected World
• Founded in 1987
• Largest source of independent Qt
expertise in North America
• Trusted Qt Service Partner since 2002
• Exclusive Open Enrollment Training Partner in North
America
• Provides integrated custom software development
and user experience (UX) design
• Embedded, touchscreen, mobile and desktop
applications
• HQ in Waltham, MA with offices in California,
Canada, Europe

4. © Integrated Computer Solutions, Inc. All Rights Reserved
Agenda
• Who, What and Why UX Design
• When to bring UX Design thinking to a project
• UX, Agile and the software lifecycle
• The Pipeline Approach

5. © Integrated Computer Solutions, Inc. All Rights Reserved
Integrating UX into Your Process
• UX Design should not happen in a vacuum
• Designers need to recognize implementation concerns
and toolkit capabilities
• Huge design specs may not be the way to go
• Requirements can change over a long project

6. © Integrated Computer Solutions, Inc. All Rights Reserved
UX, Requirements Gathering and the
Customer
• Project requirements come from all
stakeholders
• Sales
• Marketing
• Engineering
• The UX person can play the Champion of the
User
• Look at features through the eyes of the user
• The person using may be different than the person
buying (sales and marketing)

7. © Integrated Computer Solutions, Inc. All Rights Reserved
The Big Picture
• Development sprints focus on deliverable features with
a timebox
• Different developers may work on different features
over course of the project
• The focus on only what is in the sprint may lead to
inconsistencies in the product
• UX maintains that big picture consistency

8. © Integrated Computer Solutions, Inc. All Rights Reserved
UX and Software Development
Cycle
• Waterfall
• Requirements, specs, code, test, release
• UX done up front, large specs given to developers
• Agile
• Light specs, features coded in short sprints
• Very common practice today
• UX done just ahead of implementation

9. © Integrated Computer Solutions, Inc. All Rights Reserved
Agile Development
• A development methodology that allows software to
be delivered at a modern pace
• From the “Manifesto for Agile Development”
– Individuals and interactions over processes and tools
– Working software over comprehensive documentation
• Used successfully at many companies
• Agnostic to UX
http://www.uxmatters.com/mt/archives/2012/07/is-ux-strategy-
fundamentally-incompatible-with-agile-or-lean-ux.php

10. © Integrated Computer Solutions, Inc. All Rights Reserved
Lean vs Agile
• Lean UX is not the same as Agile UX
• Intended to be used in lean start ups
• Highly strategic in nature, get the most value
• Agile UX is a set of practices to integrate UX into Agile
development

11. © Integrated Computer Solutions, Inc. All Rights Reserved
Treading Lightly
• Agile has always been by developers, for developers
– The UX is often a side effect
• Danger of small working pieces at the expense of
cohesive UX
– The Big Picture
• Agile must be approached broadly, not just as a
programmer thing
http://www.nngroup.com/articles/agile-development-and-usability/

12. © Integrated Computer Solutions, Inc. All Rights Reserved
Agile UX
• An Agile UX process to match development
• Lightweight docs, user stories, sketches, prototypes
• UX needs a head start
• at least one sprint, preferably more
• Never design and develop a feature in the same sprint!
• Participate in grooming the backlog and sprint
planning
• UX and development can then proceed in parallel

13. © Integrated Computer Solutions, Inc. All Rights Reserved
The Big Picture
• Development sprints focus on deliverable features with
a timebox
• Different developers may work on different features
over course of the project
• The focus on only what is in the sprint may lead to
inconsistencies in the product
• UX maintains that big picture consistency

14. © Integrated Computer Solutions, Inc. All Rights Reserved
Making Agile UX Work
• Executive buy in
• Your Agile process has to be agile (flexible)
• Communication effectively and often
• UX people need to be part of the product team

15. © Integrated Computer Solutions, Inc. All Rights Reserved
Sprinting Ahead
• Development can be done on screens the next sprint
after design is finished with them
• Lets design and development proceed in parallel

16. © Integrated Computer Solutions, Inc. All Rights Reserved
UX Pipelining
• Process for syncing UX deliverables with development
schedules
• Lets the development backlog be filled as the UX team
completes pieces of the overall design
• Leverages industry standard best practices

17. © Integrated Computer Solutions, Inc. All Rights Reserved
Design Patterns
• Design Patterns have become a popular method of
applying best practices and shared experiences since
the GoF book
• A simple definition of ‘design patterns’ is elusive
• “The abstraction from a concrete form which keeps recurring
in specific non-arbitrary contexts” (Riehle and Zullighoven)
• A literary form of software engineering problem-solving, with
roots in architecture
• Christopher Alexander, A Pattern Language (1979)
• Documentation of best practices
• A common vocabulary and shared language

18. © Integrated Computer Solutions, Inc. All Rights Reserved
Design Patterns
• “Design Patterns: Elements of
Reusable Object-Oriented
Software”, 1994

19. © Integrated Computer Solutions, Inc. All Rights Reserved
Model View Controller Pattern
• MVC separates a UI-based
application into three parts
• Display of information to the
user
• Interaction with the user
• The data itself

20. © Integrated Computer Solutions, Inc. All Rights Reserved
Driven by the IA
• The Information Architecture contains many of the
elements needed for an MVC application
• Information to display to a user: Model
• Map and Flow tells us screens: early View
• Types of UI components: Controller
• Drop downs, selectable lists and radio buttons
are all types of One of Many Selectors

21. © Integrated Computer Solutions, Inc. All Rights Reserved
The Controller and Qt
• Knowing types of components lets us make certain
API assumptions and start to put appropriate Signals
and Slots together
• Example: QSpinBox and QSlider both have
setValue(int) and valueChanged(int)

22. © Integrated Computer Solutions, Inc. All Rights Reserved
The Controller and Qt
• We don’t care about the final View yet

23. © Integrated Computer Solutions, Inc. All Rights Reserved
UX Pipeline
• First part of the pipeline
• Model, early View, parts of the Controller

24. © Integrated Computer Solutions, Inc. All Rights Reserved
Wireframes
• UX process proceeds to detailed wireframes
• Chose specific controls
• Why wireframes?
• Can be validated with users
• Still easy to update

25. © Integrated Computer Solutions, Inc. All Rights Reserved
Adding Visual Design
• Apply visuals to validated wireframes
• Create visual specs and pattern library
• Export assets for development

26. © Integrated Computer Solutions, Inc. All Rights Reserved
Agile Delivery
• Finished screens can be delivered per sprint to
match user stories
• Screens need to be fully designed in the sprint
prior to implementation
• Development being involved during design
validation helps ensure screens are implementable

27. © Integrated Computer Solutions, Inc. All Rights Reserved
Completed View

28. © Integrated Computer Solutions, Inc. All Rights Reserved
UX Pipeline
• Second part of the pipeline
• Final complete View, rest of the Controller (specific
components)

29. © Integrated Computer Solutions, Inc. All Rights Reserved
Advantages to the Pipeline
• Brings UX into the Agile process in a very meaningful
way
• Optimizes the interaction between design and
development
• Breaks down the silos
• Much faster time to market compared to traditional
waterfall development

30. © Integrated Computer Solutions, Inc. All Rights Reserved
In Closing
• Agile UX is becoming an effective methodology in
development organizations
• UX needs a head start over development to be
effective
• Pipelining UX activities with development can greatly
accelerate project completion

31. © Integrated Computer Solutions, Inc. All Rights Reserved
Thanks for Attending