[Test Cookie] DASH-99: [Desktop][Dasher Signup Page - All] Sign Up Details Module on Desktop

0.DASH99_README.md

To the Dapper Dasher Devs,

This package contains all of the information that we used to create this experiment in Optimizely.

We are happy to answer whatever questions you might have regarding any of this. This experiment ran for 51 days and counting for a total of 397.5K visitors - across all variations. Our winning variation is --> 'V1'

We've included the original specification that was generated by the product manager and handed off to an engineer. This demonstrates the general format, details, and workflow that we use to generate new experiments.

You will also find the code that we've written to accomplish the task. Notice: We typically use a build system that compiles our ECMAScript 2015 code into ES5 compatible code in order to support older browsers, we also use the SASS css compiler, and PostCSS autoprefixer.

Our compilation also generates this SHARED variable which we use to pass values between shared code and variation code. This primarily helps reduce redundancy, minimizing snippet size. The SCSS file recieves a $TAG string variable which relates to the experiment name (in this case dash99). The same value is provided to JS as SHARED.tag.

We are happy to answer whatever questions you might have regarding any of this.

1.specification.md

ENG Notes

Please create a custom dimension scoped to this test so we can filter results of other experiments by the treatment a user has in this one.

name = DASH99

values: ** v0: fires if user is in control of this experiment ** v1: fires if user is in v1 of this experiment

Retain this order of modules (class names for each module should exist):

Value Props (productionalized)

Sign up Details (this test DASH99)

How It Works (will be built in DASH98)

FAQ (will be productionalized)

Dev Notes

v0: Control No Sign Up Details

No change

v1: Add Sign Up Details

Use this zeplin for Sign Up Details styling specifics - https://app.zeplin.io/project/5cc31460f62b202ce927b293/screen/5d8272675a019a8808cf5272

Similar to DASH53 but for desktop

Add a new section underneath pre-existing value props section

“Sign Up Details” centered, title case headline

Section pink background color (#fbf1f0)

Add two columns side by side

“Requirements” centered subheadline bold (font color #191919)

Add the following bullets (font color #4d4d4d):

18 or older

Any car, scooter, or bicycle (in select cities)

Driver's license number

Social security number (only in United States)

Final Step: consent to a background check

“How to sign up” centered subheadline bold (font color #191919)

Add the following bullets (font color #4d4d4d):

Submit application

Choose driver orientation

Complete sign up

Get the app and go

shared.js

// eslint-disable-next-line no-unused-vars
import { utils, log, error, init } from "cromedics/base";
log("v0.1");

SHARED.init = (variation, page) => {
  init(variation, page);

  // set attribute
  window.optimizely.push({ type: "user", attributes: { dash99: variation } });
  window.optimizely.push({ type: "event", eventName: "attribute_push" });
  if (variation === "v0") return;

  const detailsSection = `
    <div class="signup-details">
      <h1>Sign up details</h1>
      <section>
        <div class="requirements">
          <h4>Requirements</h4>
          <ul>
            <li>18 or older</li>
            <li>Any car, scooter, or bicycle (in select cities)</li>
            <li>Driver's license number</li>
            <li>Social security number (only in United States)</li>
            <li>Final step: consent to a background check</li>
          </ul>
        </div>
        <div class="how">
          <h4>How to sign up</h4>
          <ul>
            <li>Submit application</li>
            <li>Choose driver orientation</li>
            <li>Complete sign up</li>
            <li>Get the app and go</li>
          </ul>
        </div>
      </section>
    </div>
  `;

  utils
    .waitForElement('[data-anchor-id="LandingPage__ValueProps"]')
    .then(valueProps => {
      valueProps.insertAdjacentHTML("afterend", detailsSection);
    })
    .catch(error);
};

shared.scss

.#{$TAG} {
  &v1 {
    .signup-details {
      background-color: #fbf1f0;
      font-family: DD-TTNorms, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      padding: 80px 0;

      h1 {
        color: #191919;
        font-size: 36px;
        margin: 0;
        text-align: center;
      }

      > section {
        display: flex;
        justify-content: center;
        margin-top: 25px;

        > div {
          margin: 0 2%;
          width: 250px;

          h4 {
            color: #191919;
            font-size: 20px;
            margin-bottom: 15px;
            text-align: center;
          }

          ul {
            margin: 0;

            li {
              color: #4d4d4d;
              font-size: 16px;
              margin: 5px 0;
            }
          }
        }
      }

    }
  }
}