{"version":3,"sources":["webpack://akasha-portfolio/./src/pages/portfolio/microcopy.js"],"names":["Microcopy","name","content","headerText","className","Styles","src","alt"],"mappings":"4NAMe,SAASA,IACtB,OACE,2BACE,gBAAC,IAAD,KACE,4EACA,wBAAMC,KAAK,cAAcC,QAAQ,yCAEnC,gBAAC,IAAD,CAAQC,WAAW,cACnB,uBAAKC,UAAWC,KAAoB,YAClC,sFACA,uBAAKD,UAAWC,MACd,uBAAKD,UAAWC,MACd,yCACA,yBACE,gDAEF,mMAKA,yGAKF,uBAAKD,UAAWC,MACd,wCACA,yBACE,iDAEF,oIAIA,8GAMJ,2BACE,wCACA,sQAMA,sDACA,0BACE,2FAEE,0BACE,0BACE,sCADF,iKAOJ,iHAGE,0BACE,0BACE,sCADF,sFAMJ,kEAEE,0BACE,0BACE,sCADF,iEAMJ,wFACA,oIAIA,8DAEE,0BACE,6DACA,2EAKR,2BACA,2BACA,6EACA,uBAAKD,UAAWC,MACd,uBAAKD,UAAWC,MACd,yCACA,uBACEC,IAAI,6BACJC,IAAI,wDAGR,uBAAKH,UAAWC,MACd,wCACA,uBACEC,IAAI,qCACJC,IAAI,gFAIV,2BACE,0BACE,6CAEF,sLAGyB,KAEzB,yBACE,kDAEF,0BACE,2CAEE,0BACE,0BACE,sCADF,6EAMJ,yEAC+C,IAC7C,0BAAQH,UAAWC,MAAnB,SACA,0BACE,0BACE,sCADF,oDAMJ,oDAC0B,IACxB,0BAAQD,UAAWC,MAAnB,sBAGA,0BACE,0BACE,sCADF,+EAON,yBACE,iDAEF,0BACE,gDAEE,0BAAQD,UAAWC,MAAnB,eAFF,IAGE,0BACE,0BACE,sCADF,8CAKJ,6CACmB,IACjB,0BAAQD,UAAWC,MAAnB,WAFF,IAE6D,IAC3D,0BACE,0BACE,sCADF,mKAIE,0BAAQD,UAAWC,MAAnB,gBAJF,QAUN,sMAOJ,gBAAC,IAAD","file":"component---src-pages-portfolio-microcopy-js-8073502a28a84a810b25.js","sourcesContent":["import React from \"react\"\nimport Header from \"../../components/header\"\nimport * as Styles from \"../../styles/main.module.css\"\nimport Footer from \"../../components/footer\"\nimport { Helmet } from \"react-helmet\"\n\nexport default function Microcopy() {\n  return (\n    <div>\n      <Helmet>\n        <title>Microcopy · UX writing · Akasha Chamberlain</title>\n        <meta name=\"description\" content=\"Example of microcopy for UX writing\" />\n      </Helmet>\n      <Header headerText=\"Microcopy\" />\n      <div className={Styles.mainColumn + \" wrapper\"}>\n        <h1>​Making Waymo more accessible through better riding tips</h1>\n        <div className={Styles.twoColumns}>\n          <div className={Styles.column_1}>\n            <h2>Copy before</h2>\n            <p>\n              <strong>Ride Controls</strong>\n            </p>\n            <p>\n              Each Waymo vehicle has a button pod located on the ceiling between\n              the front headrests. It contains four buttons that can be used to\n              control the vehicle and get help.\n            </p>\n            <p>\n              Braille labels are found on the button pod, above each of the four\n              buttons.\n            </p>\n          </div>\n          <div className={Styles.column_1}>\n            <h2>Copy after</h2>\n            <p>\n              <strong>Rider Controls</strong>\n            </p>\n            <p>\n              To start your ride, pull over, or get help, use the buttons on the\n              ceiling between the front headrests.\n            </p>\n            <p>\n              Braille labels are found above each of the 4 buttons to help you\n              identify them.\n            </p>\n          </div>\n        </div>\n        <div>\n          <h2>What I did</h2>\n          <p>\n            I worked with PM, UX, and engineering on copy to give riders better\n            tips on how to use the car, with a focus on writing for\n            accessibility. I rewrote engineering and PMs original in-app copy to\n            make it more human and simple to follow.\n          </p>\n          <h3>​Changes I made and why:</h3>\n          <ul>\n            <li>\n              Adjusted to remove some jargon like “button pod” and “vehicle”\n              <ul>\n                <li>\n                  <strong>Why:</strong> Makes language more user friendly. Also\n                  for consistency across the product. We don't use \"button pod\"\n                  in the onboarding training or elsewhere in the app.\n                </li>\n              </ul>\n            </li>\n            <li>\n              Flipped some sentence structures to put the context before the\n              action the user takes\n              <ul>\n                <li>\n                  <strong>Why:</strong> Easier for users to skim. Also answers\n                  what the customer wants to know upfront.\n                </li>\n              </ul>\n            </li>\n            <li>\n              Reworded and shortened some sentences\n              <ul>\n                <li>\n                  <strong>Why:</strong> Shorter sentences look less intimidating\n                  to read on mobile\n                </li>\n              </ul>\n            </li>\n            <li>Made it clearer what a user can do with the in-car buttons</li>\n            <li>\n              Ensured photos used in the app design had appropriate alt text so\n              they could be read by screen readers\n            </li>\n            <li>\n              Per Google UX writing guidelines:\n              <ul>\n                <li>Edited headers to sentence case</li>\n                <li>Changed numbers to numerals (4 vs. four)​</li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n        <br></br>\n        <hr></hr>\n        <h1>Improved transparency &amp; action in error message</h1>\n        <div className={Styles.twoColumns}>\n          <div className={Styles.column_1}>\n            <h2>Copy before</h2>\n            <img\n              src=\"../../../error-message.jpg\"\n              alt=\"error message: Oops, something unexpected happened\"\n            />\n          </div>\n          <div className={Styles.column_1}>\n            <h2>Copy after</h2>\n            <img\n              src=\"../../../error-message-rewrite.jpg\"\n              alt=\"error message revised: We're sorry, your order was cancelled unexpectedly\"\n            />\n          </div>\n        </div>\n        <div>\n          <h2>\n            <strong>What I did</strong>\n          </h2>\n          <p>\n            After receiving an unclear and frustrating error message through the\n            Waymo app, I worked with Product Operations and Engineering to\n            improve the messaging.{\" \"}\n          </p>\n          <p>\n            <strong>Message updates</strong>\n          </p>\n          <ul>\n            <li>\n              Removed \"Oops\"\n              <ul>\n                <li>\n                  <strong>Why:</strong> Too insincere when we may have\n                  significantly inconvenienced a customer\n                </li>\n              </ul>\n            </li>\n            <li>\n              Added apology since our system cancelled the{\" \"}\n              <strong className={Styles.highlightword}>order</strong>\n              <ul>\n                <li>\n                  <strong>Why:</strong> This is our error. We owe the user an\n                  apology\n                </li>\n              </ul>\n            </li>\n            <li>\n              Explained up front that{\" \"}\n              <strong className={Styles.highlightword}>\n                order is cancelled\n              </strong>\n              <ul>\n                <li>\n                  <strong>Why:</strong> The user wants to know right away why\n                  they are reading a pop-up message\n                </li>\n              </ul>\n            </li>\n          </ul>\n          <p>\n            <strong>Button updates</strong>\n          </p>\n          <ul>\n            <li>\n              Changed button to \"\n              <strong className={Styles.highlightword}>ORDER AGAIN</strong>\"\n              <ul>\n                <li>\n                  <strong>Why:</strong> Gives the user an easy way to try again\n                </li>\n              </ul>\n            </li>\n            <li>\n              Updated to \"CALL{\" \"}\n              <strong className={Styles.highlightword}>SUPPORT</strong>\"{\" \"}\n              <ul>\n                <li>\n                  <strong>Why:</strong> \"REQUEST CALLBACK\" sounds too robotic,\n                  like language you wouldn't use in real conversation. Also\n                  doesn't explain who you would be talking to, so updated to \"\n                  <strong className={Styles.highlightword}>CALL SUPPORT</strong>\n                  \"\n                </li>\n              </ul>\n            </li>\n          </ul>\n          <p>\n            ​*Based on real error message copy update I wrote with some contexts\n            changed for confidentiality purposes. Parts redacted and replaced\n            for confidentiality are in blue.\n          </p>\n        </div>\n      </div>\n      <Footer />\n    </div>\n  )\n}\n"],"sourceRoot":""}