Chapter 14: Collaborative Design

Chapter 14: Collaborative Design

Introduction

  • Quote by Amy Poehler: "Be open to collaboration. Other people and other people’s ideas are often better than your own. Find a group of people who challenge and inspire you, spend a lot of time with them, and it will change your life."

Definition of User Experience

  • User Experience (UX): The sum total of all interactions a user has with a product or service.

    • Created by decisions made about pricing, packaging, selling, onboarding, support, maintenance, and upgrades.

    • Emphasis on collaboration in UX design:

    • Lean UX: Advocates for user experience design as a collaborative process.

    • Combines efforts of designers and non-designers in cocreation, leading to superior ideas than individual contributions.

Distinction from Design by Committee

  • Design by Committee: Implies poor compromises and uninformed decision-making.

  • Lean UX: Facilitated by designers, led by specialists working from a common playbook.

  • Ownership: Increases team ownership through shared viewpoints and continuous collaboration.

  • Final Goal: Utilize diverse team expertise to develop effective designs.

Collaborative Design Methods

Importance of Collaboration

  • Effective for testing hypotheses in product cycles.

  • Generates better results than hero-based design (the practice of calling in a designer or design team to drop in, come up with something beautiful, and take off to rescue the next project); reduces team conflict over design choices.

  • Collaborative design sessions increase team’s design IQ:

    • Team members articulate ideas, expanding the palette of design options.

    • Promotes team ownership and shared understanding.

Facilitating Collaborative Design

  • Designer’s Role:

    • Lead and facilitate collaborative meetings, whether they are informal chats, structured one-on-ones, or design sprint exercises.

    • Examples of sessions include:

      • Design Studios: Structured sessions for design exploration.

      • Design Sprints: Intense, focused design and prototyping processes.

Typical Collaborative Design Session Structure

  • Teams sketch together and critique emerging designs.

  • Output: Low-fidelity sketches and wireframes, allowing:

    • Contributions from all team members regardless of drawing skills.

    • Flexibility to pivot swiftly if initial tests are unsuccessful.

Case Study: Informal Collaborative Design

  • Example: Jeff and Greg’s Dashboard Design

    • Jeff, designing a dashboard for a web app for TheLadders' recruiter and employer audience, struggled to fit a lot of necessary information onto a single screen.

    • Instead of working alone, Jeff initiated a collaborative session with Greg, the lead developer, using a whiteboard.

    • Jeff began by sketching his initial layout ideas, followed by Greg sketching his own ideas on the same whiteboard.

    • This two-hour back-and-forth process led to a converged design—a layout and flow deemed both usable and feasible for their two-week sprint.

    • The session resulted in a shared understanding of the feature's requirements and goals.

    • This collaborative approach allowed Jeff to refine the wireframe and workflow while Greg simultaneously developed the necessary infrastructure code, enabling the first version to be built within a two-week timeframe without documentation delays.

Conversation as a Tool

  • Emphasized as the main communication method, aligning with the Agile Manifesto.

  • Early and ongoing conversations encourage:

    • Insight sharing from various disciplines, leading to informed design changes.

    • Parallel paths for software development and design.

  • Importance of social engagement among team members:

    • Builds trust and facilitates higher quality collaboration.

Lean UX and Design Sprints

Overview of Design Sprints

  • Five-day process: define a question, develop ideas, build a prototype, and test it within a week.

  • “A design Studio on steroids”.

  • Design Sprints vs. Lean UX:

    • Different framing of problems and methodologies for testing ideas.

    • Design Sprints: Frame problems on day one using a specific method and conduct prototyping and testing during the final days of the sprint without explicitly using hypotheses or the term MVP.

    • Lean UX: Has a particular way to frame problems and recommends hypotheses, experiments, and MVPs (Minimum Viable Products) to test ideas.

    • Compatibility: Despite these potential conflicts, both encourage innovation and evaluation of ideas, being compatible in spirit.

  • Key Insights from Jake Knapp:

    • Recommends following the steps to Design Sprints exactly before trying to tweak it.

    • Design Sprints are ideal for initiating new projects but are limited for extensive planning.

Best Practices

  • Leverage Lean UX techniques during Design Sprints:

    • Reframe your work as a problem to solve rather than a “thing to build.” Use your sprint to figure out “How can we solve our problem”.

    • Articulate your assumptions about the problem, the target audience, potential solutions, and what success looks like. This allows you to frame hypotheses, which can be a great way to frame a design sprint.

    • Use your hypothesis(es) as input to your Design Sprint.

    • Use the work you do in the sprint to start to tear apart these assumptions, test them, and come out the other end with a better set of hypotheses and a clear set of next steps.

    • This next set of hypotheses can be used as input to your next cycle of Lean UX work.

Design Systems in Collaborative Design

Definition and Functionality

  • Design Systems: Comprehensive resources allowing for scalable design implementations.

    • Combine elements of style guides, pattern libraries, and branding guidelines.

    • Serve as a single source of truth for the presentation layer of a product.

  • “Style guides on steroids”.

  • A good design system contains:

    • Comprehensive documentation of the elements of a design

    • Rules.

    • Examples that govern the use of these elements.

    • The code and other assets that actually implement the design.

Benefits of Design Systems

Team benefits:

  • Design faster: Reduce redundancy in design efforts.

  • Prototype faster: Pre-built components available for developers, enhancing speed.

Organizational benefits:

  • Increased consistency: Higher adherence to brand standards through easy-to-use design elements.

  • Increased quality: A few highly trained UI designers and developers can create components that make it easy for any less-specialized developer to utilize and produce top notch results.

  • Lower costs: While requiring investment to build and staff for maintenance, a good design system pays for itself over time by making developers more efficient and productive, and by allowing new designers and developers to onboard more quickly due to documented conventions and easy-to-use frameworks.

Design Systems Teams Are Product Teams

  • A design systems team functions as a product team, even when serving internal users.

  • Its primary goal is to create a valuable product for its users, with success measured by adoption, not sales.

  • Understanding user needs is crucial for rapid adoption and overall success.

  • Such teams can employ Lean UX methods, though some experimentation may be limited by compatibility and stability concerns inherent to platform products.

  • Given easy access to internal users, design systems teams can effectively use collaborative design techniques, including workshops, sprints, and shared whiteboard sessions, to foster understanding and collaboration.

Don’t Skip the Fat Markers

  • Design systems make it tempting for designers to move directly to high-fidelity work, bypassing early-stage conceptualization.

  • High-fidelity mock-ups can lead stakeholders and non-designers to focus on minor details (fonts, colors) rather than core concepts.

  • Paper-and-pencil sketches encourage conceptual feedback, as there are no distracting details. This helps in validating core ideas.

  • Designers should resist the urge to immediately use design system components for credible mock-ups; always start with low-fidelity methods like fat markers.

  • Design systems teams can help by integrating sketch-fidelity elements into their toolkits, guiding users to choose appropriate tools for each design stage.

Case study: GE design system

  • In 2012, GE opened GE Software in San Ramon, California, as a "Center of Excellence" (CoE) to improve its software capabilities.

  • A strategic review revealed GE was one of the largest software companies globally by lines of code, yet it lacked proportional focus on software development.

  • The GE Software User Experience Team, a small team, created their first design system, IIDS (Industrial Internet Design System), in 2013.

  • IIDS aimed to scale the impact of fewer than 50 designers collaborating with over 14,000 developers across a 300,000-person organization.

  • Designed by internal GE designers with help from Frog Design, IIDS was built on Bootstrap.

  • IIDS achieved significant success, with over 11,000 internal downloads and use in hundreds of applications, enhancing consistency and visibility for the software and UX teams.

  • Success brought challenges: a UI kit alone doesn't guarantee well-designed products, and Bootstrap proved hard to maintain, update, and was too large for many needs.

  • In 2015, GE Software evolved into GE Digital, a revenue-generating business, and launched Predix, a platform for industrial applications.

  • This strategic shift necessitated a new design system, focused on enabling great Predix applications, limiting UI choices, and being easy to maintain while still user-friendly.

  • The design system team grew to about 15 members, including design technologists, interaction designers, graphic designers, technical writers, and a product owner.

  • The new system moved from Bootstrap to Polymer, leveraging Web Components for more mature front-end development.

  • The team spent nearly six months prototyping, collaborating directly with an application team to ensure components met user needs (a hybrid of cross-functional and end-user collaborative design).

Collaboration Across Geographical Barriers

Remote Working Tools

  • Tools for effective collaboration across distances:

    1. Zoom, Skype, Google Meet - for real-time discussions.

    2. Google Docs for cooperative document editing.

    3. Mural and Miro for creative collaboration.

    4. Figma for integrated design sessions.

Strategies for Effective Virtual Collaboration

  1. Level the Playing Field: Use shared online tools for equitable contributions.

  2. Cultivate Social Connections: Encourage informal interactions to foster team bonds.

Improving Collaboration in Teams

Practical Techniques

  • Incorporate Agile retrospectives and team working agreements to enhance collaboration.

    • Retrospectives: Reflections on sprints to improve processes.

    • Working Agreements: Documents outlining team operations and values.

Example Components of Team Working Agreements

  1. Process overview: Identify methodologies used, e.g. Agile.

  2. Ceremonies: Designate regular meetings and ceremonies. E.g. when is stand-up each day?

  3. Communication/Tools: Specify platforms for collaboration. Specify where assets are stored.

  4. Culture/Safety/Conflict resolution: What kind of team culture do we want? What do we need as individuals to feel safe with our teammates? What will we do when (not if!) there’s conflict? How will we resolve disagreements?

  5. Working hours: Who works where? When are folks in the office? If we’re in different locations, what accommodations will we make for time-zone differences?

  6. Requirements and design: How do we handle requirements definition, story writing, and prioritization? When is a story ready for design? When is a design ready to be broken into stories?

  7. Development: What practices have we settled on? Do we use pair programming? What testing style will we use? What methods will we use for source control?

  8. Work-in-progress limits: What is our backlog and icebox size? What WIP limits exist in various stages of our process?

  9. Deployment: What is our release cadence? How do we do story acceptance?

Psychological Safety in Collaborative Design

  • Critical for creativity and openness.

  • Defined as creating an environment where no one feels embarrassed for sharing ideas, mistakes, or asking questions.

  • Tools like lectures and literature can help address concerns around psychological safety.

Conclusion

  • Collaborative design as an evolution within the UX design landscape promotes team integration in the design process.

  • Using shared tools, frameworks like design systems, and structures promotes a faster problem resolution mechanism compared to traditional methods.