Integrated Design & Development

Transcription

1 Integrated Design & Development Shawn Crowley 1 Atomic is a consultancy and handles many types of projects. Challenges we face may be different. agile and technical excellence, predictable delivery via PM mostly lived without design for desktop and pre web 2.0 apps ish, started to increase amount of web development Started to feel design deficit and took action what didn t work, what did and where we re headed...

2 Our History Growing Pains 2

3 Upfront Design with Partners 3 We started working with design partners who heavily engaged upfront...

4 Design spec is 100% complete. Implement application, view by view, from design spec. R1 R2 Design Development The Plan 4 clients worked with design firm then turned the design over to the Atomic team It rarely goes according to plan...

5 Design spec is 70-80% complete. New features added. Gaps or flaws in design. Constraints force change. R1 R2 R3 Design Development Reality 5 Can t get design capacity during development. Product is not completely thought through. Lack of involvement with discovery, Research Design and Planning We decided to own the design process...

6 Owning The Process 6 We wanted to control the way design was integrated into our projects...

7 RDP 7 Intentionally delay getting started on iterative product dev Iteration 0 / RDP (Research Design and Planning) is born Started growing AUX practices Influenced by Cooper and Adaptive Path, Jeff Patton (finding the forest in the trees, story mapping) Workshop with Lane Halley and Jeff Patton Stakeholder interviews, user interviews Lightweight personas, Story mapping, wireframing Growth puts stress on the status quo...

8 Culture Stress 8 Can we really charge $$ for playing with paper? Breaking the chains of slavery to bits First floor, Different looking activities Internally defending value of non-coding activities How much design is enough? Go read and listen to Ian McFarland from Pivotal We decided to integrate design throughout the development process...

9 Integrated Design/Dev with Partners 9 We tried integrated design and dev with partners...

10 0 Project A Project B The Plan 10 Why Parallel Design/Dev? Balance responsibility with flexibility Just enough up front Get started without too much design WIP Integrated design dev relationships get complicated (unless it s with Cooper or Mighty)...

11 0 Project A Code is ahead of Design Project B The Reality 11 Design team pressured by their other clients Atomic can t fully control the lead/lag of design/dev Separate business relationships, budget stress Client mismanaging teams The writing was on the wall for working with partners...

12 Building Balanced Teams 12 Partners couldn t follow process Still have capacity issues Partners felt diminished in their role Lacked a shared vision or framework for design/dev integration Time tracking, reporting and budget issues Need a design specialists at AO to integrate directly with out teams Decided to organically grow skills and hire specialists to have in-house balanced teams...

13 Today Toward Balanced Teams in Action 13 How we work today...

14 In-House Design 14 2 Full time designers that support ~22 developers ~6-10 active projects at any given time Just hired 2 additional designers Culture focused on agile product dev. Upfront design and design process is respected. Still learning and improving on management and execution...

15 Agile Product Development 15 Embraced transition from engineering technical excellence to product excellence Well tested, on time and on budget used to be the focus. Focus has grown to include building the right product, on time and on budget... process highlights...

16 Process 16 We start projects with collaborative sessions including the team and clients...

17 Kickoff 17 Understand the project s mission and vision Business objectives, success metrics, intended users Initial research, market info, competitors Customer, Problem, Solution statement Identify high-level functionality We identify the features included in the client s product vision...

18 Feature Planning Innovation Games Story Maps 18 Identify features to plan releases and estimate cost and timelines Innovation Games (Luke rocks!) Product Box, Start Your Day Focus games on personas walking through context scenarios Post process Product Box and Start Your Day results into story map Lessons Learned: * Starting story maps with clients can be difficult * Priming a story map with post-processed results is helpful * Keeping groups focused is a challenge. Divide and conquer. Crisscross the map. Turn features into UI concepts...

19 Strategic Design 19 Identify a few core user experiences (Anders Ramsay s UX tracer bullet) for the first release Design Charrettes * Developer, Designer and client sketch interfaces * Timebox sketches, critique, combine to master, maybe move on to med-fi wireframes Lo-fi design leads to hi-fi concepts and estimates...

20 Hi-Fidelity Design 20 Hi-fi design starts with style exploration...

21 21 Identity Exploration Logo, color studies, style guide Create and explore variations...

22 22 Also apply style to key interfaces...

23 23 After design direction is set create a plan for iterative development...

24 Planning Development 24 Core conflict: Just enough planning to set the direction without being too rigid Focus on planning team composition over cosmetically planning tasks based on specialized skills...

25 Design Strategy RDP IxD IA Visual Design Markup Front End Dev Code Architecture 1 Designer 2 Senior Dev 3 Junior Dev Balanced Teams 25 Manage your team's skills, not their schedules. Allocate each team member 100% Allow team to adapt to emergent bottlenecks. All team members are expected to help as necessary based on where the team is blocked. Tasks are code and design tasks. The team decides who works on what. The schedule is managed at a high level with a story map and kanban board...

26 Storymap & Kanban 26 Story Map shows activities and tasks related to user experience. All backlog tasks are related to the story map. Use the story map for higher level project reporting and product management Use kanban board to manage flow of activities Subordinates team to keep design ahead of code Remove waste from deferred design integration X,V,M,C, T, P (IxD, visual design, markup, code, manual q/a, polish) estimate time to move cards across the boards at two levels...

27 Estimation High-level Low-level 27 High-level estimates: Range Estimates time-based, range estimates for features not included in design charretts SRSS, ROT Mike Cohen, Agile estimating and planning Low-level: Power of 2 based Detailed power-of-two estimates for mocked-up interfaces Tasks are distributed out in time in our backlog tool...

28 Backlog 28 Predict iteration velocity, distribute decomposed stories and epics across iterations Design and dev stories are in the same backlog * Encourages poly-skilled behavior * Easier to see design lead/lag and manage scope Look for bottlenecks, use research, testing and systems stories to balance Team members work closely with each other throughout iterations...

29 Balanced Teams in Action 29 Designers and developers are part of teams, not a department...

30 Incremental Build & Delivery 30 Teams build and deliver in weekly iterations Track velocity weekly to predict delivery time and cost The team manages who works on what task...

31 Team Tasks XVMCTP 31 Iteration work is tactical and task oriented X is mostly done. Focus on V and M, then C Design and code patterns emerge over the course of several iterations. Team members use the flexibility of their skill set to manage the lead/lag of design/dev...

32 Hi-fi Wireframes Hi-fi Visual Design Strategy Scenarios Feature planning Prototypes IxD Patterns Markup Front End Dev Coding Managing Lead/Lag 32 The power of poly-skilled teams. Middle ground of IA, IxD, Markup Devs can help with IA, IxD and Markup Designers can help with test plans, build management, demos, user testing Ideally try to keep design 1-2 iterations ahead as a buffer Subordinate code to what is designed We often work in a fixed-budget, scope controlled manner...

33 Scope Breadth via Activities Scope Depth via Polish Scope Depth via Tasks Fixed Budget, Scope Controlled 33 There are multiple ways of managing scope Revisit Kanban idea of polish Defer the last 10% of fancy (fit and finish) The impact of scope management is shown in project burnup charts...

34 Points Iterations Integrated Burn Graphs 34 Team velocity based burnups to track progress Top line is total design and dev points There can be issues with this approach Design, front-loaded, back-loaded or evenly dispersed? Same velocity...

35 Integrated Burn Graphs Points 150 Points Iterations Iterations Design Velocity Report Code Velocity Report 35 Varying velocities can skew total velocity to be less predictable for various projects. Design may finish early What skill is the bottleneck? Local and overall? Balanced teams try to keep the team in sync, but velocity is affected Don t just look at velocity, look at efficiency too. Tried apples to apples estimation on pts based estimates Code tasks, Design tasks 0.37 pts/hr, 0.83 pts/hr Process is still predictable, but we re still learning lessons too...

36 The Future Lessons we re still learning 36 We re still sorting out best tool chains for various projects...

37 Building a Shared Tool Chain 37 Prototype to application migration vs. prototyping in the application MS, Adobe and open tools Building shared vision and integrating more seamlessly...

38 Building a Shared Vision 38 Designers want to present formed ideas but developers are pulling for raw ideas Not enough space for design to flourish??? Building shared skills and balanced teams...

39 Building Shared Skills 39 Developers need to treat front-end coding as their responsibility Developers need to learn more IA and IxD concepts Designers need to feel comfortable allowing devs and clients a voice in the design process * How to structure and not strip respect/responsibility from design We are tweaking our lightweight pm tools...

40 Lightweight Management Tools 40 Our tools are being stressed Need to be able to tag stories as code or design. Burnups and other charts might be tweaked. 3rd party tools can t be modified and are often bloated Despite challenges, we re building better products, providing more value and having more fun...

41 Thank You! 41 Check out balancedteam.org...