Ruby Video | Incremental Design - A conversation with a designer and a

Sass

Incremental Design - A conversation with a designer and a developer

Rebecca Miller-Webster

4 talks

Incremental Design - A conversation with a designer and a developer

by Rebecca Miller-Webster and Savannah Wolf

In the video titled 'Incremental Design - A conversation with a designer and a developer' presented by Rebecca Miller-Webster and Savannah Wolf at RailsConf 2013, the concept of incremental design is explored as an effective alternative to traditional large-scale redesigns in web development. The discussion opens with common frustrations faced by developers and designers when executing significant design changes, often leading to misaligned expectations and extended timelines.

Key points discussed in the video include:

- Understanding Incremental Design: Incremental design advocates for making small, manageable changes rather than relying on a total overhaul during redesign phases. This approach draws parallels from methodologies like Agile and TDD, emphasizing maintainability and testability.

- Team Collaboration: Continuous conversation between designers and developers is highlighted as essential for ensuring cohesive outcomes. This collaboration helps to create designs that not only meet aesthetic expectations but also align with technical feasibility.

- Practical Applications: The presenters relay experiences from their work at How About We, where they have implemented incremental design while working on projects like their revamped dating site and the launch of their couples' product. They discuss various life-cycle considerations and speed of implementation, revealing the complexities faced during these processes.

- Reusable Components: An important aspect of incremental design mentioned is the creation and use of reusable design components, which help maintain consistency and efficiency during development.

- Sprints and Iterative Processes: The integration of short design and development sprints creates a focused environment for addressing feedback quickly, allowing for quicker iterations on projects.

- User Testing and Feedback: Regular user feedback loops are essential to ensure that design changes are meeting user needs without overwhelming them, balancing aesthetic beauty with functionality.

- Standardization and Simplification: The presenters emphasize the importance of standardizing design languages and utilizing CSS preprocessors like SASS for effective design management.

The video concludes with an invitation for the audience to engage with the speakers for further discussion on the incremental design process, underscoring the value of collaboration in both design and development fields. This conversation champions a culture of continuous improvement, aiming for sustainable and satisfying user experiences without drastic upheavals in design.

00:00:16.480 Hi, I am Rebecca Miller-Webster, a Ruby and JavaScript developer, and I'm currently the lead developer at How About We. I'm Savannah Wolf, a UX and visual designer, and I’m the head of design at Hawaii. We're here to talk to you about incremental design, which is a process we've been using at How About We to successfully make design changes and have development and design work together.

00:00:27.359 Before discussing what incremental design is, let’s talk about some common ways that everyone here probably approaches design changes. When you think of design changes, you likely envision a large-scale effort, often leading to a major redesign. This typically requires dedicating a month or two, or even longer, of resources toward creating a brand-new experience, which sounds great in theory.

00:00:50.160 However, this process usually doesn't go as smoothly as hoped. As a designer, my experiences with big redesigns often involve spending significant time gathering requirements to ensure a great user experience and beautiful visuals, only to pass it off without knowing the final outcome.

00:01:08.799 Developers receive a PSD file, and there are often frustrations because it doesn’t consider technical constraints. Alternatively, developers might feel like rock stars when implementing these designs in CSS and Javascript, only to have designers comment that the end result doesn’t match their vision. This is exactly what we aim to avoid.

00:01:28.479 Sometimes, teams adopt a page-by-page redesign approach, where old designs are transitioned to new ones incrementally. This can create a weird user experience. As a designer, it’s often unclear whether to work in old or new styles, or how to create a blended experience, which confuses users. Developers, too, face challenges like maintaining multiple stylesheets, leading to technical debt, as they have to remember which styles are deprecated.

00:02:02.719 The solution is incremental design, which has been discussed within the Ruby community for the past several years. It revolves around best practices for maintainable software development. These include methodologies like Agile, TDD, and sprints, all emphasizing making the smallest possible changes in a testable and maintainable way. Incremental design applies these same principles to design changes, advocating for tiny deployable changes to be implemented repetitively.

00:02:59.840 This promotes a continuous conversation between design and development, facilitating better communication. We work together to make design more beautiful and enhance user experience while creating less friction in our teams. As a little context, we work at How About We, a dating site founded in 2010, focusing more on proposing exciting dates than on superficial traits like 'long walks on the beach.'

00:04:00.640 Last year, we launched How About We for Couples, a subscription-based service offering a curated collection of fantastic dates to help couples maintain their relationships. What you see here is our unified landing page, incorporating our broader brand identity. Our design team, which is relatively new and less than a year old, aims to create a universal design language while evolving and enhancing the brand.

00:04:53.680 Currently, we are redesigning our dating site, which utilizes an older design created by an agency. The redesign started with our mobile apps, specifically the iPad and iPhone versions, and we are now working on an Android redesign and a complete web redesign. We’re driving this design evolution through our couples' product, creating a seamless experience and evolving to reflect our unified brand.

00:05:29.520 In addition to standard startup challenges like aggressive timelines and frequent model changes, we have the extra hurdle of managing two products at different ends of their lifecycle. The dating site is well-established and international, and we need to avoid disrupting the user experience that continues to drive revenue. Conversely, the couples' site is just six months old and has undergone multiple changes, launching soon in San Francisco.

00:06:07.039 Thus, we needed a process that successfully addresses both sides' needs. Furthermore, there’s a renewed focus on beautiful design within the company as a core initiative. We base many feature decisions on split testing and metrics, which adds another layer of complexity. Brian Woods is presenting on this subject tomorrow; I recommend checking it out.

00:06:50.800 Now, let’s look at an example. This is our couples product, specifically a date details page. Each date we create is designed to provide a captivating experience that is heavily photo-driven, allowing users to fully understand what they are paying for. For instance, one date features a yoga instructor coming to your home to teach you yoga, possibly with a glass of wine included.

00:07:36.480 Initially, we launched this service as a members-only option, but we wanted to expand access by allowing anyone to purchase dates. This led us to test two pricing structures side by side. Users responded positively to the dual pricing model, allowing non-members to experience the site while showcasing the benefits of membership.

00:08:09.440 Once we know that this approach is successful, we enter a formal design process. Here’s our end-goal design showcasing the new pricing structure, clearly emphasizing the comparison between membership and non-membership benefits. It also includes versatile design elements such as a sub-navigation that we aim to use consistently throughout the site.

00:09:01.920 When approaching this design, we emphasize breaking down the components to prioritize the most essential features first. After gathering feedback and passing the design to development, we prioritize iterations while remaining mindful of the impact of design changes on mobile and tablet experiences.

00:09:55.040 If we had rushed the design and made major changes without careful refinement, it could have severely impacted the user experience. The incremental approach allows us to make small adjustments and revert unsuccessful elements without dismantling the entire design framework.

00:10:14.560 Part of the incremental design philosophy includes creating reusable design components that can be applied throughout the site. The goal is to maintain consistency around key elements, such as pricing structures, while also allowing for isolated modifications to user experiences.

00:11:05.040 As we refine our design, we often have discussions about what may not look perfect at first but ensure that the functionality remains intact. The trade-off between aesthetics and usability is essential to consider in this process. Therefore, we might sidestep minor graphical changes to prioritize more critical enhancements.

00:11:49.920 For instance, we prioritize feedback loops when starting a project, engaging developers right from the outset. We ask them if our proposed designs are feasible and consider whether they can be accomplished within the given timeline. From there, we move forward based on their insights, ensuring consistent experiences while allowing for quick design adaptations.

00:12:49.600 One effective tactic is to deploy features with existing styles, making minor adjustments as needed. This collaboration solidifies our working relationship and improves the speed and efficiency of the development cycle.

00:13:28.000 In our collaborative approach, we've integrated sprints into our design process, with our design team working on one-week sprints while developers tackle two-week sprints. This understanding helps us organize our work and maximize efficiency during reviews, and it allows us to include design discussions at the right times.

00:14:06.640 Retrospectives are also vital for refining processes, and fostering communication in our teams rather than making check-ins feel chore-like. Continuous improvement is key in these discussions, ensuring both design and development teams remain aligned towards common goals.

00:15:24.160 From a development standpoint, we have standardized our styles to enforce a consistent design language. Designers are encouraged to think critically about new colors and styles, ensuring they contribute meaningfully to the overall project. Additionally, utilizing living style guides keeps both design and development informed about current standards, which helps alleviate discrepancies and fosters collaboration.

00:16:37.600 We've transitioned to semantic markup, significantly simplifying our codebase, making it easier to maintain global styles, and clear in its purpose. This allows us to maintain a clean separation of design and functionality while improving readability for future developers.

00:17:23.839 Utilizing CSS pre-processors like SASS enhances our ability to create reusable components. By naming variables based on their meaning rather than value, we enable ourselves to make scalable adjustments more effectively.

00:18:44.640 This well-structured organization extends to all components, allowing designers to communicate efficiently while adjusting the visual aspects of our products, ensuring rapid and effective iterations.

00:19:13.679 We prioritize maintaining a minimal number of fonts and variables, streamlining our design process, and eliminating overwhelming choices that hamper creativity. Our CSS structures allow for scopes within classes, ensuring that changes propagate smoothly throughout our design.

00:19:54.720 By encapsulating our components using partials, we prevent repetition and complexity, making it simpler to manage our design logic. This ongoing evaluation of when and how to encapsulate becomes essential for clean, maintainable code.

00:21:18.080 Design changes should ideally stem from CSS alone, allowing markup to focus on content rather than design aesthetics. Adopting this mindset provides greater flexibility, especially for teams learning and evolving their brand.

00:22:49.040 Recognizing that emotional responses to design changes can be significant, we believe it is essential to routinely question the approach taken in our design decisions, ensuring that they align with our overall vision and user experience.

00:23:45.760 The conversation between designers and developers should be a collaborative effort, emphasizing cooperation to create sustainable outcomes. This culture of collaboration is vital as everyone strives to build impressive products and move the business forward.

00:25:19.440 Equally important is fostering communication with our users. Regular feedback from user testing sessions allows us to adapt our services continuously. We prioritize delivering value incrementally to our users, ensuring that they have a positive experience without overwhelming them with sudden changes.

00:26:30.160 Outcomes of running tests and implementing changes effectively showcase to users the improvements being made at any given time. Brands must remain cautious, particularly within subscription models. We aim to avoid major overhauls that could push users towards discontent.

00:27:32.640 In closing, we’d love to engage in a conversation about the incremental design processes we’ve adopted. Please feel free to connect with us online or approach us afterwards with any questions.

00:28:35.760 Thank you!

RailsConf 2013