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!
