## **Snap Inc. Internship: Snapchat Product Sprint**

As a Design Intern at Snap Inc., I worked cross-functionally with two other designers, engineers, and marketers to imagine a Snapchat feature addressing the unique challenges faced by underprivileged teens and young adults in their academic journeys.

One core discovery through early research was that underprivileged students in high school and college are five times more likely to drop out than their higher-income peers. Given that information, our primary focus for our feature was, **“How might we use Snapchat to provide under-resourced students the tools and structure they need to succeed?”**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2F3b02a02e-5e42-4059-8f3d-0922586b7434.jpg?alt=media&token=7012aefc-0134-4c55-92e7-5ad2ac92ccc9","id":"3b02a02e-5e42-4059-8f3d-0922586b7434","width":2000,"height":1125,"filename":"final-showcase-deck_1.jpg","type":"image/jpeg","caption":"Problem statement for the team's feature planning.","border":true}]}
```

Early on, we had ideas about how to leverage Snapchat's existing functionalities; some of them included masterclasses on Snapchat's Spotlight page (their short-form video feature), interactive quizzes using Snapchat's AR filters, or something resembling Duolingo within Stories. **Ultimately, we decided the most relevant product areas for our features were My AI and Chat/Group Chat.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2F6afa001e-a678-4cda-89eb-0115cc201642.jpg?alt=media&token=91849356-2232-4d6c-aa82-11a5f7a8298d","id":"6afa001e-a678-4cda-89eb-0115cc201642","width":2933,"height":2412,"filename":"highlight-6.JPG","type":"image/jpeg","caption":"Aftermath of our needfinding and ideation sessions.","border":true}]}
```

**Our goals were to help foster a sense of accountability in teen and young adult students, but also provide some structure and guidance for students who are more likely to really need them; our answer was two features: AchieveAI and Pods.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2F560ee9d3-15f1-436e-9ff7-45a8ea7bf54c.jpg?alt=media&token=1470fe6a-a127-4bc7-a111-1b35209816a6","id":"560ee9d3-15f1-436e-9ff7-45a8ea7bf54c","width":2000,"height":1125,"filename":"final-showcase-deck_3.jpg","type":"image/jpeg","caption":"","border":true}]}
```

**The first feature, AchieveAI, leverages Snap's MyAI chatbot released in early 2023 and is meant to give under-resourced students targeted, individual guidance in the form of an AI mentor.** Achieve AI helps provide the knowledge or motivation students need when navigating the college application process, or once they've actually entered a college environment. Snapchatters can use Achieve AI to do things like build a study schedule, set studying timers for themselves, or jump into a pod to study with their friends.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapchat-feature%2Fd19f1c03-ccf4-43ee-837f-6978a40e060a.png?alt=media&token=f8e6dd84-f40e-4706-8b9c-cd7a541ae96a","id":"d19f1c03-ccf4-43ee-837f-6978a40e060a","width":1629,"height":951,"filename":"highlight-sketches.png","type":"image/png","caption":"Ideation sketches for the flow of Achieve AI","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2Ff2854f1c-5a5c-4fac-ae4f-bc371191e8c7.png?alt=media&token=8cda21e6-7b92-41e4-8486-ce4d1543ac7c","id":"f2854f1c-5a5c-4fac-ae4f-bc371191e8c7","width":1360,"height":952,"filename":"highlight-3.png","type":"image/png","caption":"Example of a user asking Achieve AI to help them create a studying schedule.","border":true}]}
```

**Pods, our second feature, are dedicated groups within Snapchat meant to serve as virtual study sessions for students who want to collaborate with friends remotely.** Research into academic performance and long-term goal setting (such as diet and workout plans) showed us people are 95% more likely to be successful when they commit to something within a group setting.

**We made sure not to lose focus of Snapchat's primary vehicle for communication: the camera.** Pods would utilize all of Snapchat's exhaustive text and chat functionality, but would also incorporate video chatting for (virtual) face-to-face interactions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapchat-feature%2F7a745ce9-caef-420c-b61a-1b8738a87444.jpg?alt=media&token=55b743b4-7701-468e-8b8a-90f72b0029ff","id":"7a745ce9-caef-420c-b61a-1b8738a87444","width":2000,"height":1125,"filename":"final-showcase-deck_6.jpg","type":"image/jpeg","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapchat-feature%2F18e29087-7417-485c-b353-fa90d40d7b3f.png?alt=media&token=63ea98a8-03af-4c1a-811a-b669994946e5","id":"18e29087-7417-485c-b353-fa90d40d7b3f","width":1360,"height":952,"filename":"highlight-2.png","type":"image/png","caption":"Example of the video chat screen within a Pod session.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2F9e78d28f-8604-446e-abd0-adbe8e6e3082.png?alt=media&token=3923fe0f-da05-4aa6-a113-1955cbdea0d8","id":"9e78d28f-8604-446e-abd0-adbe8e6e3082","width":1360,"height":952,"filename":"highlight-1.png","type":"image/png","caption":"Example of the text chat screen within a Pod session.","border":true}]}
```

Following the 2-week product sprint, our team presented our process and final features to 10+ leadership staff (SVP/VP), as well as other designers, engineers, and stakeholders throughout the company for feedback.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapchat-feature%2F68a9cb67-ea83-4203-806d-74c502c7f0d7.jpg?alt=media&token=cb890a2d-d39f-4a55-ba33-66898a4f1921","id":"68a9cb67-ea83-4203-806d-74c502c7f0d7","width":1478,"height":1108,"filename":"final_showcase-1.jpeg","type":"image/jpeg","caption":"The team and I practicing our keynote presentations.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FD4zZ9zH7OoDXBsho2bG9%2Fe4143fd5-18b8-4e86-bf97-78601a842c6e.jpg?alt=media&token=ff9e74e3-9a15-47d3-9093-91d33aa489d3","id":"e4143fd5-18b8-4e86-bf97-78601a842c6e","width":1024,"height":768,"filename":"final_showcase-2.jpeg","type":"image/jpeg","caption":"The team and I presenting our keynote presentations at a final event.","border":false}]}
```

Snapchat Product Sprint

**Until 2023, I had never owned a passport**; I ***still*** have never even been on an airplane despite having many places I want to visit.

For a few years, I used a spreadsheet in Notion to list destinations, sights, and interesting restaurants, but eventually, I decided I wanted a better way to plan my future trips; I imagined others might have as well, given the boom in travel following the COVID-19 pandemic.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2Fb9b6ab29-5776-4abe-b0c5-d2ba1ea5fa7d.png?alt=media&token=cce31fcc-266e-427c-a23e-b3858e17529c","id":"b9b6ab29-5776-4abe-b0c5-d2ba1ea5fa7d","width":2096,"height":1212,"filename":"highlight-notion-planning.png","type":"image/png","caption":"Example of my trip planning in Notion.","border":true}]}
```

**I saw that as an opportunity to grow and reinforce my design skills by creating a tool for myself and others to use. It is named Chronacle since it is meant to help you chronicle your journeys around the world.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F593705b6-58c8-4b0d-ba9a-bcc7eef1629a.png?alt=media&token=7971316b-4a0e-4fc0-abf7-d1a85a5077fd","id":"593705b6-58c8-4b0d-ba9a-bcc7eef1629a","width":1360,"height":952,"filename":"highlight-5.png","type":"image/png","caption":"The Explore screen in Chronacle.","border":true}]}
```

### **Research**

As the sole designer for Chronacle, I needed to be crafty when doing needfinding and figuring out which problems needed addressing or which parts of the travel planning process could be improved; **in addition to doing heuristic analyses on existing travel aggregators (Expedia, TripAdvisor, etc), a large part of my generative research involved leveraging data from a 2021 study by market research leader Mintel.**

Of the 1,300+ travelers surveyed, **people overwhelmingly reported booking reservations through their preferred brands' platforms**, with 76% using a brand's website or mobile app (ex: Marriott Hotels) vs. an aggregator. The study mentions **travel aggregators are “most competitive in activities booking,” *not accommodations***.

Mintel also discovered folks are taking fewer, shorter trips post-pandemic, only traveling to familiar places, and booking accommodations mere days / weeks before leaving. **Travelers need helpful starting points when going somewhere new and want ideas for things to do**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F91f47928-b76f-48e3-b90f-9fc160fc455f.png?alt=media&token=e2527ffc-cff2-4d19-aa60-78e9251d77a1","id":"91f47928-b76f-48e3-b90f-9fc160fc455f","width":1086,"height":634,"filename":"highlight-research.png","type":"image/png","caption":"Some questions I wanted to answer during my generative research. ","border":true}]}
```

### **Designs**

As such, I decided ***Chronacle would not handle things like flight reservations, hotel accommodations, car rentals, etc***. The reduced scope is better for engineering purposes (no need to integrate various airline/hotel platforms), but users also get a more focused and predictable experience with fewer potential failure points.

Ultimately, the main focus for Chronacle would just be ***helping people check out new places they're interested in visiting*** and save activities / experiences they want to make plans for (ex: shopping, places in nature, landmarks, etc).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F174cddce-9f82-44d1-b50d-a4556a762f22.png?alt=media&token=bf207876-dcfd-4c8c-93d1-64be933e337a","id":"174cddce-9f82-44d1-b50d-a4556a762f22","width":1557,"height":909,"filename":"highlight-sketches.png","type":"image/png","caption":"Some ideation sketches.","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F011c2e04-a4e5-4f39-8d14-668069cf0954.png?alt=media&token=237413ea-2d6f-44ef-9930-2ddf1d8e6bfa","id":"011c2e04-a4e5-4f39-8d14-668069cf0954","width":1360,"height":952,"filename":"showcase-1.png","type":"image/png","caption":"Example of a user's Trips List.","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F38fcda5f-b4b4-4564-abfe-556efe6a1187.png?alt=media&token=244bfe13-343b-4826-af82-c78c47f91861","id":"38fcda5f-b4b4-4564-abfe-556efe6a1187","width":1360,"height":952,"filename":"showcase-2.png","type":"image/png","caption":"The UI inside a specific Trip page.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F7e49ca67-38e1-4d9b-84ac-ef4c9d2f8a7d.png?alt=media&token=83a4569c-bf0f-432e-b28b-3037a20cf436","id":"7e49ca67-38e1-4d9b-84ac-ef4c9d2f8a7d","width":1360,"height":952,"filename":"showcase-3.png","type":"image/png","caption":"The Explore page and example Overview page for New York City.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F20762434-c1dd-40c5-97cd-2fcc3e86f3ed.png?alt=media&token=ee6ce642-5973-4815-8a0c-28585c4dde5c","id":"20762434-c1dd-40c5-97cd-2fcc3e86f3ed","width":1360,"height":952,"filename":"showcase-4.png","type":"image/png","caption":"Example of the Place Search screens/flow for New York City.","border":false}]}
```

### **Design System**

Chronacle's design system is being maintained in Figma and Storybook, allowing me to keep future designs consistent by using things like design tokens, as well as make development flows simple and seamless.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F142c1fd3-481f-43c3-94f8-545607d79b53.png?alt=media&token=660b3883-b593-483c-b4f2-e873e0b08778","id":"142c1fd3-481f-43c3-94f8-545607d79b53","width":1360,"height":952,"filename":"highlight-2.png","type":"image/png","caption":"Example component, its underlying structure, and the various design tokens/decision used.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F20963b2f-9b6f-49d6-a174-a2e3416b3aaf.png?alt=media&token=a6eb51ba-fc3d-4004-b1d3-78c5e002f3a2","id":"20963b2f-9b6f-49d6-a174-a2e3416b3aaf","width":1528,"height":1066,"filename":"highlight-component.png","type":"image/png","caption":"Example component, its underlying structure, and the various design tokens/decision used.","border":false}]}
```

### **Front-End Development**

In addition to being Chronacle's designer, I am also developing it as a progressive web application, so lots of my design decisions are informed by my understanding of modern web's possibilities and limitations.

I wanted to make my development process as streamlined as possible, so I thought ***a lot*** about different tools that would help make that happen. In terms of front-end specifically, some tools I'm using are:

* **Next.js**: I decided on Next.js as my framework since it supports a variety of useful front-end tech natively (Typescript/TSX, Postcss, CSS Modules, Web Vitals, etc).

* **Style Dictionary**: I'm using Style Dictionary to incorporate design tokens into my development flow; this helps keep design decisions consistent across all environments and reduces development time.

```javascript
// style-dictionary.config.js (Style Dictionary config file)

module.exports = {
  source: ['src/tokens/**/*.tokens.json'],
  platforms: {
    scss: {
      transforms: ['attribute/cti', 'name/ti/camel'],
      transformGroup: 'scss',
      buildPath: 'src/styles/scss/',
      files: tokenFileGenerator.baseTokens.map((tokenCategory) => ({
        destination: `_${tokenCategory}.module.scss`,
        format: 'scss/variables',
        filter: tokenFilter(`${tokenCategory}`),
      })),
    },
  },
};
```

```json
// tokens/color/base.tokens.json (Color tokens)

{
  "color": {
    "blue-100": {
      "value": "#99C7F2",
      "category": "color"
     // becomes $blue100 in _color.module.scss
    },
    "blue-200": {
      "value": "#4D9EE9",
      "category": "color"
     // becomes $blue200 in _color.module.scss
    },
    "blue-300": {
      "value": "#0074DF",
      "category": "color"
      // becomes $blue300 in _color.module.scss
    },
    "blue-400": {
      "value": "#004686",
      "category": "color"
    },
    "blue-500": {
      "value": "#002343",
      "category": "color"
    }
}
```

* **CSS Modules**: CSS Modules are helping me easily import CSS styling for multiple components and layouts without namespace collisions.

* **Class Variance Authority**: CVA allows me to define variants of each component and generate class names based on which variant is invoked. Generated class names match those imported from the CSS module for any respective component.

* **Storybook**: While static components are being maintained in Figma, I also build out each one and store them in Storybook. This helps make development much easier since I can modify components as needed and see how they interact with each other before publishing.

**An example of my workflow using my *Tilted Image Card* component:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F6bff7185-1ee2-4ccb-84b7-ac67efc75011.png?alt=media&token=59101fb9-8103-4b33-8d5a-bcd51b200d74","id":"6bff7185-1ee2-4ccb-84b7-ac67efc75011","width":1770,"height":1322,"filename":"highlight-component-2.png","type":"image/png","caption":"An example of the Tilted Image Card component with annotations in Figma Dev Mode.","border":false}]}
```

```scss
// TiltedImageCard.module.scss (Component stylesheet)

.TiltedImageCard {
  @include main.flex-column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(184, 184, 184, 0.64);
  border-radius: 12px;
}

.small {
  width: 9.8125rem;
  max-width: 9.8125rem;
  height: 7.75rem;
}

.small > .cardTitle {
  font-size: $fontSize16;
}

.large {
  width: 11.775rem;
  max-width: 11.775rem;
  height: 9.3rem;
}

.large > .cardTitle {
  font-size: typography.$fontSize18;
}

.cardTitle {
  font-family: $fontFamilyMain;
  font-weight: $fontWeightBold;
  letter-spacing: $letterSpacingRegular;
  color: $white300;
  padding: $spacing8;
  position: absolute;
  line-height: normal;
  align-self: stretch;
}
```

```tsx
// TiltedImageCard.tsx (Component file)

import styles from './TiltedImageCard.module.scss';

// Using Class Variance Authority to declare
// component variants and their associated class names:
const tiltedImageClasses = cva(styles.TiltedImageCard, {
  variants: {
    size: {
      // Class names for this variant will
      // include ".TiltedImageCard .small"
      small: styles.small,
      large: styles.large,
    },
    tiltDirection: {
      left: styles.leftTilted,
      right: styles.rightTilted,
    },
  },
  defaultVariants: {
    size: 'small',
  },
});

// Defining my variant categories as component
// props, along with the props 'title' and 'mediaSource':
interface TiltedImageCardProps extends VariantProps<typeof tiltedImageClasses> {
  title?: String;
  mediaSource: StaticImageData;
}

// The component with its props being
// passed in:
export default function TiltedImageCard({
  size,
  tiltDirection,
  title,
  mediaSource,
}: TiltedImageCardProps) {
  return (
    <article className={tiltedImageClasses({ tiltDirection, size })}>
      <div className={styles.cardGradient}></div>
      <img className={styles.cardMedia} src={mediaSource.src}></img>
      <p className={styles.cardTitle}>{title}</p>
    </article>
  );
}
```

```tsx
// TiltedImageCard.stories.tsx (Storybook file)

export const TiltedImages: Story = {
  render: () => ( 
    <TiltedImageCard
      tiltDirection={'right'}
      title={'New York City'}
      mediaSource={photoNewYork}
    ></TiltedImageCard>
        
    <TiltedImageCard
      tiltDirection={'left'}
      title={'Los Angeles'}
      mediaSource={photoLosAngeles}
    ></TiltedImageCard>
        
    <TiltedImageCard
       size={'large'}
       tiltDirection={'right'}
       title={'London'}
       mediaSource={photoLondon}
    ></TiltedImageCard>

    <TiltedImageCard
       size={'large'}
       tiltDirection={'left'}
       mediaSource={photoVesuvioBakery}
    ></TiltedImageCard>
  ),
  args: {},
};
```

***...and all of that eventually becomes*** 🧙🏾‍♂️ 🪄

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FRr8B7uJfMn4M3pEGUMUl%2F34219480-d2a5-45de-8199-eab4995c0f7c.png?alt=media&token=b5db2171-d4ac-4638-a6fb-c5e24b861402","id":"34219480-d2a5-45de-8199-eab4995c0f7c","width":1626,"height":1172,"filename":"Screenshot 2024-08-08 at 1.20.26 PM.png","type":"image/png","caption":"The Tilted Image Card component within Storybook with multiple variants.","border":true}]}
```

Helping others (and myself) explore the world easily with Chronacle

## **Snap Inc. Internship: Snap Inc. x LA Metro Collaboration**

As a Design Intern at Snap Inc., I crafted a potential partnership with LA Metro that included a Snapchat feature aimed at incentivizing public transit usage.

**Early ideas included a Transit Mode displaying transit paths and wait times on Snapchat Maps**, but I figured existing apps do those things well enough. Eventually, **I decided the main feature should be a collection of unique, Metro-branded Snapchat lenses users unlock by scanning Snapcodes found at transit stations.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FTEg3OwKp8xW6cY2XjOjb%2Fceae3ab1-9cf1-43b8-a467-1c209d8161ea.png?alt=media&token=68f08983-285e-40bf-a03b-6cbe3bf52c52","id":"ceae3ab1-9cf1-43b8-a467-1c209d8161ea","width":1629,"height":951,"filename":"highlight-sc-5.png","type":"image/png","caption":"Some brainstorming notes and ideation sketches.","border":true}]}
```

I considered how to ensure users get on transit in order to interact with the Snap x Metro experiences. **Snapchat users love gamification and achievement symbols like streaks, so I thought about including a Transit Score** on people's profiles. Scanning a Snapcode and using the Metro-branded Snap lenses would increase a user's score; once their score reached a certain amount, they could redeem various rewards like free Metro passes or trial subscriptions to Snapchat Plus.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FTEg3OwKp8xW6cY2XjOjb%2Fbcaa1a0b-0452-4f3f-8b24-b3905480cd0f.png?alt=media&token=094c0dd8-26aa-4f53-92f9-3ee12323078f","id":"bcaa1a0b-0452-4f3f-8b24-b3905480cd0f","width":1360,"height":952,"filename":"highlight-sc-1.png","type":"image/png","caption":"Example of a \"Mass Snap\" sent to users in Los Angeles promoting the feature and partnership.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapxmetro%2Ff24a3569-9bd8-40dd-b3d7-bd6759869596.png?alt=media&token=eaa40ec5-d078-485a-b535-320e7a7fd721","id":"f24a3569-9bd8-40dd-b3d7-bd6759869596","width":1360,"height":952,"filename":"highlight-sc-2.png","type":"image/png","caption":"Example of the Transit Score on a user's profile.","border":false}]}
```

Since LA Metro makes special editions of TAP cards, I thought **one great way to promote the collaboration and encourage usage of both companies' products would be a Snap-branded TAP pass with a special ghost logo**; users who ordered the pass would get 300 points added to their Transit Score.

**Snap now often uses their ghost logo as a canvas for theming and messaging, so I did the same by incorporating elements iconic to LA Metro**: the Metro “M,” the design of the rail station signs, the layout of their maps, and the bus signs found on street corners across Los Angeles.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapxmetro%2F6b3fffa6-1f39-48a0-8ba9-34e00f2d699d.jpg?alt=media&token=c9e442cd-08b7-40b8-926d-c493f9576e6e","id":"6b3fffa6-1f39-48a0-8ba9-34e00f2d699d","width":1600,"height":1000,"filename":"22-1716_LA_Kings_Metro_Shop_Header_jp_2048x.jpeg","type":"image/jpeg","caption":"An example of TAP passes with special designs.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapxmetro%2Fb0c4cc05-d627-4014-8092-29c0b67b5309.png?alt=media&token=8d889a07-597c-42c5-88d8-e19eaeb1e67e","id":"b0c4cc05-d627-4014-8092-29c0b67b5309","width":1629,"height":951,"filename":"highlight-sc-6.png","type":"image/png","caption":"Examples of the Snap logo being used to communicate a message. (All images property of Snap Inc.).","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2FTEg3OwKp8xW6cY2XjOjb%2F30ff21dd-d530-4ba0-8eaf-ad6f77a02231.png?alt=media&token=2356bf61-182d-4361-8c16-75bfdec12400","id":"30ff21dd-d530-4ba0-8eaf-ad6f77a02231","width":1360,"height":952,"filename":"highlight-sc-4.png","type":"image/png","caption":"Mockup of the branded Metro TAP card to promote the feature and partnership.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP6NgpXYBqnQPusa5dPZA4HusX5m2%2Fsnapxmetro%2Fad6612bf-02ee-4634-adb8-0577e1dd7651.png?alt=media&token=bff89fd3-eb25-4e21-ae33-781a9d606bee","id":"ad6612bf-02ee-4634-adb8-0577e1dd7651","width":1360,"height":952,"filename":"highlight-sc-3.png","type":"image/png","caption":"Example of an advertisement within a user's Stories promoting the partnership.","border":false}]}
```

Snap Inc. x LA Metro

person thing

A trip planning app born from my desire for a more engaging way to organize my future trips around the world.

Creator / Product Designer / Developer

As a Design Intern at Snap Inc., I helped imagine a Snapchat feature addressing the unique challenges faced by underprivileged teens and young adults in their academic journeys.

Using Snapchat for Social Good

As a Design Intern at Snap Inc., I crafted a partnership with LA Metro that included a Snapchat feature aimed at incentivizing public transit usage.

Snap Inc. x Metro Partnership

» Conceived 3 features for young adults (Snapchat’s main market), creating touchpoints for 60 million+ accounts.\
\
» Defined project roadmaps and incorporated 3+ core product areas (Camera, Maps, Chat, Streaks, My AI).\
\
» Built 30 UI components with Snapchat’s design system, ensuring visual cohesion / easy execution for engineers.\
\
» Synthesized project visions into compelling narratives and presented to 15+ leadership staff at SVP/VP levels.

Will Givens

Work Experience

Projects

Education

Contact