Susan Lin, Lead Product Designer

Susan is a Lead Product Designer at Cloudflare. Cloudflare powers 10% of global internet traffic and serves 2.8 million users each month. I manage the design team at headquarters. We are building world class products to keep the internet up and safe.

As a design lead, I've worked in cross functional multidisciplinary teams for the past 10+ years. I graduated from Carnegie Mellon University with the Masters in Human-Computer Interaction.

My design philosophy is to approach each iteration as part of a living system. Every design solution should have the potential to scale beyond its immediate feature. This applies to design processes and culture as well. Effective teams empower independent work while holding space for team members to lean on one another.

1. Building for 30 million applicants

Product Designer at Nava PBC, 2017-2018 isn’t your run-of-the-mill digitized questionnaire. Decades of policy constrain the user experience. Additionally, there are implications connected to the collection of sensitive information. What seems like a simple questionnaire is actually a complex set of design challenges that require teamwork to unravel.

I lead design of several complex decision-strategy flows in the application. I also gather and integrate lessons learned into the design process to build the capacity of the team for future sprints.

Below you will find some of the documented processes for both our internal team and stakeholders.

Users affected: 30 million.
8 million "complex" households.
3.3 million immigrant users.
21.9 million re-enrollees.
4 product designers for a cross-functional team of 18.

Sketch of problem space.

The simplest questions are the most complex

How long does it take to design one question on an application?

Duration: 5 months. This is how long it took to design the decision strategy flows used to capture household data. Building an accurate tax household was a high complexity, high importance objective. It appears deceptively simple because of the collective tendency to default to the nuclear family model of a father, mother, and children. Families come in all forms and the nuclear family model is not applicable to all applicants.

Animation of question.

22.2 million users are single applicants who now see a simplified experience

Single applicant households account for 74% of users. The other 26% of applicants — 8 million users — fall under what we define as complex households.

Reduced Call Center calls measured our success

As part of the process used to surface critical issues we tracked Call Center calls. We found that applications with more than one member often called. We learned that an increase in call volumes required additional support staff which increased the hiring and training budget. We discovered a clear correlation between a confusing user experience and increasing call volumes as well as longer calls.

Design of citizenship question.

26.7 million users are citizens who now see a simplified experience

Duration: 3 months. The stakes are high when gathering information on citizenship and immigration status. Immigration status in particular can stir up range of difficult emotions from an applicant.

There is a need to balance present day objectives with shifts in policy that could open a Pandora’s box of unintended consequences. Here, I took a “do no harm” stance and advocated for decision-strategy flows that prevented self-disclosure as an undocumented immigrant.

Filter questions became a systems level pattern

To address the duality, we framed our narrative to fit both groups. For example, answering Yes to Is everyone a U.S. citizen or national? expedited the experience. Follow-up questions never appear because of the new filter question. Such questions guide most users into the simplest flow. For example, 89% of applications now skip the immigration follow-up questions.

Animation of citizenship question.

3.3 million users are now guided with care through a tense section

Everyone else, those 3.3 million applicants, saw a step-by-step experience. Each question communicated the why and the what happens next. The stakes are high because we can never allow the user to attest to being an illegal immigrant. Thus, all follow-up questions were optional.

The trickiest part was users feel more comfortable selecting Prefer not to answer. The worst case is denying an applicant who was otherwise qualified. I made sure this experience did not sacrifice usability (A modal!) while communicating the dire consequences. We partnered with the in-house government content team to craft the appropriate language.

Screenshot of policy flow diagram.

Becoming a government policy expert in days

Deep dives into the world of government policy are an important step in the design process. Understanding the complexities of policy is necessary to design the best experience. I’ve become familiar with acronyms such as Non-MAGI. I partner with Product to understand and contextualize decision strategy flows within the relevant policy frameworks. I also lead stakeholder engagements to secure buy-in for design strategies that handle personal information and life events with care and sensitivity.

Design of biological sex question.

Handling sensitive information

Caring, yet efficient. The compassionate service worker is the persona of

Applying for coverage requires applicants to disclose sensitive information. For example, within the Household section of the application there are several sensitive topics. These include Gender, Social Security Number, Citizenship and Immigration status.

Are you a boy or a girl? The application sends back a variable, Female or Male, to the server and matches it to a government ID. The sex of the applicant is needed for the application to pass the identity proofing stage. We couldn't add new variables, but we could create an inclusive front-end experience. I advocated for a design strategy that used the term biological sex, explains why that data is collected and used an open input field to allow all users to self-identity.

Going above and beyond for the American people

I faced resistance at first. Our stakeholders thought of this as extra work. I re-framed it as an opportunity; an inclusive front-end experience would reduce call volumes and call times. Additionally, designing the application for gender minorities paves the way to the future. States such as Oregon and California use Non-binary as a variable. Having an open text field accounts for nuances.

Embedding the compassionate service worker persona

Complicated application changes happen when the household size changes. Adding a member is a common scenario. If the applicant gets married or has a child, they would likely add them to their plan. Removing a member is trickier. This could be an innocuous change like a spouse receiving coverage from a new job. Or it could be a delicate situation such as divorce or death.

Sketch of re-enrollment experience.

Saving time and heartache for 21.9 million re-enrollees

In 2018, re-enrollees accounted for 73% of total applicants. To improve the applicant experience, I created an expedited decision strategy flow for re-enrollees who have no life changes. I identified trigger events for updates to increase the percentage of automatic re-enrollees.

Flow of re-enrollment content.

Content matters as much as the design elements themselves

I crafted content guidelines for sensitive situations. The phrase “Remove this person” doesn't appear as the interface should not add agony to an already difficult situation. Other considerations include only asking for what's needed to process the application and the use of empathetic language.

Scaling resources for our team

Every iteration is an opportunity to build culture, improve processes, and increase capacity. I established a culture of feedback. We aimed to help each person deepen their domain knowledge. Many of the stories I told here were only possible because we shared context together weekly. Feedback was critical to our success.

It was challenging contracting with a government partner. I found ways to balance user experience, business objectives, and scope with each iteration. This included creating design patterns and process documents. I set-up cross functional team meetings with our stakeholders. It was important to teach our stakeholders about our process. Government did not have a history with agile processes.

When onboarding a new teammate, I made sure to bring them up to speed. My philosophy on onboarding is to make each person self reliant. With documented patterns and processes, they only need to know where to search. I paired with teammates to provide shadows for interviews. Growing the team was as important as doing the work.

I worked with Susan on and Nava PBC's internal branding initiative. During that time I've observed Susan to be a compassionate person who approaches problems thoughtfully and with intention.
As a leader, Susan looks out for her teammates and elevates quieter perspectives that deserve to be heard. She moderates discussions efficiently, pulling together multiple threads and is able to prioritize actions to take. Susan brings a certain level of comfort that makes collaboration so much easier. Working with Susan taught me to push to design for meaningful transparency and through a lens of sensitivity for the people impacted.
Kelli-Anne Ho, Designer at Nava PBC (2018)
Susan was a critical member of our design team as we worked on the new eligibility application for Her efforts on early design patterns and UI guidelines helped lay the key foundations of the application’s design. In her work with our cross-functional team, her intuition led thoughtful design changes that brought users a sense of security and safety in an otherwise arduous process. She persisted in transforming complex requirements into intuitive user experiences all while navigating the often ambiguous and challenging nature of discussions with policy subject matter experts and business analysts.
Additionally, Susan’s unique blend of skills and talents enabled her to effectively lead design initiatives that moved us forward as a team. Her unique perspective helped us to develop further sensitivity and empathy across all of our work.
Olivia Cheng, Design Manager at Nava PBC (2018)

2. Growing Treehouse B2B in a competitive market

Product Designer at Treehouse, 2015-2016

How can design and sales partner for product success in an overcrowded market?

In crowded market, the differentiator at Treehouse, an online code school, is the curriculum. Developed by an in-house team of experts of full time professors, the curriculum is robust and customizable. The challenge: Their content is behind a paywall in a market where freemium options are plentiful. I partnered with Sales & Product to identify design opportunities in the sales lifecycle and create design strategies for product performance in the enterprise market.

Users affected: 180,000 students.
24 new B2B users.
81% of users re-engaged.
2 product designers for a cross-functional team of 5.

Treehouse, Organzations B2B product dashboard.

Design support for product performance

Treehouse wanted to grow their enterprise market share. The tools needed to fit their acquisition strategy. I conducted user research with the sales team. It took time to pitch, discuss, close, and onboard the new users. I designed a system which automatically onboarded the majority of B2B users so the sales team could focus on selling.

Treehouse, Organzations B2B product onboarding.

Creating immediate results to unblock sales

The onboarding system for Treehouse for Teams:

Treehouse, Organzations B2B product analytic emails.

Motivating students to keep learning

Later on, I analyzed retention and discovered most users who signed up to Treehouse didn't come back after their first visit. Their trial would expire and they would drop off. Only 25% paid for their first month and 81% of them would drop off by the second month.

Treehouse, Sketc of a code student's engagement lifecycle.

Re-engaging 145,800 students at scale

To address this, I generated a wide range of ideas to increase retention based on data. These included:

Treehouse, flow of a code student's life. Service design map.

Getting in touch with our users

“Not having enough time” was the critical issue. Treehouse users were often parents with jobs. Luckily, each Treehouse course breaks down into small lessons. It would be possible for even the busiest user to complete a course if they sign on for 15 minutes twice a day.

Treehouse, design of scheduler.

Using psychological principles to benefit our users

To make it easier for users to schedule their courses, I created an integrated learning experience leveraging elements already built into Treehouse. The user has the option to create a custom schedule for themselves. Or, the interface will populate a schedule based on the most active hours in their time zone. This created a baseline schedule for users and clearly outlined their success pathway. At the bottom of the page was a dynamic progress bar and a motivational note that each minute adds up.

Treehouse, Email annoucing new scheduling feature.

Announcing new features to existing users

Finally, to ensure users take advantage of these new features, we sent an email an annoucement. The email reiterates their goals and presents their progress to date. This encouraged the user to log back in and put in 15 minutes when they are likely to have a moment. Often times, the user will stay online for longer.

Treehouse, screenshot of learning experience.

Wins for the consumer product meant wins for the B2B product

What consumer facing product ships also enhances the B2B experience. Added motivation to learn meant Teams increased their number of seats. This created a positive feedback loop increasing the lifetime value of the customer.

Additional writing for Treehouse

Susan is a thoughtful designer, curious problem solver and kind teammate. One of my favorite things about Susan’s design philosophy is she does not settle for the obvious. Susan is committed to understanding the problems she is solving, exploring new ideas and delivering quality work. Any team would benefit from her design talent and winsome spirit.
Matt Strickland, Engineering Manager at Treehouse (2016)

3. Creating & Piloting Trulia's first design system

Senior Product Designer at Trulia, 2012-2014

Trulia is a real estate search product for homes and rentals. I joined Trulia's design team in 2012. Back then, the design process included red-lined mock-ups and little communications between functions.

I was a founder and core maintainer of Trulia's original design system. Trulia was one of the first to complete a living CSS library with reusable components. I also lead design on Trulia consumer products. This included consumer search, algorithmic home recommendations, and design of the Android app. I used live data and feedback to build the design system. The core of the system I designed then still is the base for Trulia's experience language today.

Users affected: 100 millions.
50 million unique new users monthly.
733 deleted !important CSS floats.
11% increased page views, 3% increased clickthroughs.
Sole product designer for a cross-functional team of 7.

Trulia's first design system.

Behind the scenes building one of the first design systems

Experiences shipped different than designed. The term "Throw it over the wall" comes to mind. Product would come with business requirements and features were developed one-off. This lead to a disjointed and convoluted user experience.

Trulia mock-up with red lines.

Simplifying an experience while taking 251kb of CSS down to 101kb

Redundant work was common. At the peak, there were 733 !important CSS floats and 56 font-styles of black text. Besides page performance bloat, the search experience was faltering. Each element was competing for attention and search filters were hard to use. My cross functional design systems team partnered with expert consultants to drive enhancements. Meanwhile, I lead design on the second largest consumer product. I used those designs to pilot the design system.

Iterating on a home search experience 100 million visitors use

The search page needed a redesign. It was clear that no amount of changes would enhance the user experience without a trade-off.

Trulia's search experience brought in 100 million visitors monthly. About half — 50 million — were unique. The vast majority of users came in through a search engine. To maintain this bar, the SEO on the page had to remain stellar. A key advantage was that we would know about their interested location or keywords.

Sketch of Trulia's search experience.

Balancing user, business, and external stakeholder needs

I took the data and started exploring the future of search. While drawing explorations, I broke down the page into components. There were two key areas of high complexity: search filters and property cards. The challenging part of highlighting the properties were the constraints. Trulia gathered their listing data from MLS. The requirements asked that all the data points must show. The photographs were often small and blurry. Trulia also ran two competing business products: Agent ads and market ads. Both sponsored listings had to appear "above the fold."

Design moving Trulia's search filters off screen.

Using data to back up a bold design change

I worked within these challenging constraints and made a drastic change. The filters moved up to the top and were not exposed anymore. This meant more room for the properties. The properties became left-aligned. We learned from eye tracking research users scanned the top, then the left of websites. I fought to prioritize this key change. I felt comfortable tucking away most of filters because of our data. Most users do not use the majority of search filters. 83% of users only touched Price, Bedrooms, SqFt, and Property Type.

While the search results became easier to scan, the property cards needed refinement.

Designs of 18 different search card components.

Componentizing 18 distinct property cards with real data

I lead design on a comprehensive experience and visual refresh of the property cards. All card types share the same components, so they needed to be consistent. Rental cards had constraints such as different room types in apartments. Home cards had even more constraints. Paid agent content and helpful metadata like "Price Down" competed for attention. It was no easy task wrangling each detail into one unified experience.

After stress testing the variations, I came to a search experience I was able to bring to engineering. I partnered with the engineers to pilot the design system components I designed. We were able to test our design system components with real data.

Initial launch of Trulia's redesigned search experince using the design system.

111 million users visited the new search page monthly, 33.3 million more viewed a home

The result is a search experience using one of the industry's first design systems. I designed a Photos view in 1 day. The lead engineer only had to shuffle around CSS and add a card component to build it. The user reception was positive. Search page views increased by 11% and click-through to property pages increased by 3% from these changes alone. My work paved the way for their future.

Follow-up search designs iterating on the filters.

Enabling designers with code and engineers with design

After the release of the design system, I was able to design and test 3 versions of updated search filters. This work only took 2 months. The design support post hand-off was minimal. Our documentation was thorough and communication was at an all time high.

Susan giving a talk about Trulia's design system and team communications.

Mentoring a team to become systems-thinking designers

I ran front-end code literacy workshops for the user experience team. I wanted to share what I learned and fill the gaps in communication across the whole team. I mentored designers who wanted to take their prototyping skills to the next level. It was important to remove the inefficiencies between departments across the whole team. I built capacity for the design team as a result of these workshops.

Additional press about my work at Trulia

Susan was an extremely strong and creative colleague during my time working with her at Trulia. She led several key initiatives at Trulia, including the creation of Trulia’s first web-based component library. That initiative involved collaborating with an external team over many months, and championing the work internally to encourage adoption across the organization. That work resulted in greater product consistency and a stronger voice for design at Trulia.
Sean Thompson, Senior Designer at Trulia (2013)

4. Now

I'm not looking for new work.

If you're a fellow design leader, I'm open to sharing notes.

If you're a woman/enbie of color, I'll try to help. This includes advice on education, breaking into tech, and the dark art of compensation.

If you're a conference organizer, I'm taking inquiries for 2019. I'm working on a talk about Integrative Thinking, the lesser known sibling to design thinking. Check out my speaking page.

I look forward to hearing from you.