I'm a designer currently crafting digital magic at Y Media Labs. I have a deep understanding of design systems, user experience, interaction, and visual design.

Experience

Y Media Labs

2021 - Now

I currently work on projects with notable clients for a wide range of design needs, including: art direction, user experience and design systems.

Clients I've worked with include: Kaiser Permanente, Ally Bank, Twitter, Outdoorsy, Mayo Clinic, and Albertsons.

Kaiser Permanente + YML won the 2022 Webby Awards

Climatebase

2020 - 2021

I lead the design and supported in product development and strategy. This improved accessibility and scalability which lead to an increase in site discovery and engagement.

On product, I improved the user experience for web and mobile platform; and launched several new designs from ideation to development.

On brand, I collaborated with the team to establish a new art direction; created a responsive design system to unify components across the platform; established a stronger brand identity; and improve the overall visual design.

Startup Experience

2019 - 2020

I worked briefly in startup companies as a product designer, where I collaborated closely with founders to take product concepts to beta launch.

I demonstrated the core experience and UI through wireframes and prototypes; and provided clarity on user interaction through task flows and information architecture.

Clients I worked with include: Chea Seed, FlipKat, and SewerAI.

Chea Seed is now live on the Apple App Store

Illustration

Journal

Name	Rows
1	Dribbble • Instagram • LinkedIn
2	Made with love on Super + Notion. Copyright Jamie Catt 2022.

‣

Instructions

Duplicate this template to your Notion workspace. Ensure that ‘share to the web’ is on in Notion.
Create a site in Super, using your duplicated template as the Notion URL.
Set up your fonts and add the code to Super and configure your options:

‣

Fonts

There are two themes for fonts. You’ll need to choose which theme you want and add the fonts and weights listed below to a new web project in your Adobe Typekit account. Once you’ve done that you can paste the Unique ID into the code. Editorial PS Fournier: Light Reason New: Regular and Medium Rational Neue Haas Unica: Light, Regular, Regular Italic

If you don’t have a Typekit account you can rely on the chosen Google Webfonts as a fallback instead. They’re a pretty good match, here’s the difference:

Editorial theme

Rational theme

‣

Using your own font choices

If you want to change the fonts you’ll need to add custom overrides in the CSS editor.

:root {
  --font-family-primary: [your-font-goes-here], serif !important;
  --font-family-secondary: [your-font-goes-here], sans-serif !important;
}

‣

Code For Super Editor

1. Go to Code > Global site code 2. Paste the following code into Head

<!-- /// Hosted styles /// -->

<!-- Using the hosted stylesheet will ensure you automatically get future updates and fixes. Any custom overrides should be done in the CSS area of your Super settings. -->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">

<!-- /// Hosted fonts /// -->

<!-- Fonts for "editorial" theme -->
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
<!-- Typekit -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">

<!-- Fonts for "rational" theme-->
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
<!-- Typekit -->
<link rel="stylesheet" href="https://use.typekit.net/mrh3xxw.css">


<!-- /// Theme options /// -->

<!-- Colour theme: change the name of the file to pick your colour 

  Options: [cotton], [charcoal], [coppice]
 
-->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/colour/[option].css">

<!-- Font theme: change the name of the file to pick your fonts (requires set up with Typekit or Google Fonts, see above) 

  Options: [editorial], [rational]
  
-->
<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/fonts/[option].css">

3. Paste the following code into Body

<!-- Navigation -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Cy</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/projects">Projects</a>
    <a class="nav-link" href="/about">About</a>
    <a class="nav-link" href="/writing">Writing</a>
  </div>
</nav>

‣

Theme Options Reference

A handy grid to see the 6 possible theme options:

4. Make sure you’ve done these things before you go live

‣

Go Live Checklist

~~Change all links in the footer database~~

~~Check that the Show or hide page properties option in Super settings is set to ‘Enable’~~

~~Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages.~~

Add pretty links for your pages, projects, and articles into Super’s pretty URL settings. By default you’ll need to use projects/ and writing/, you can amend these if you want but you’ll need to add CSS overrides.

‣

Hidden Pages