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.
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.
Illustration
- 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:
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
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;
}
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>
A handy grid to see the 6 possible theme options:
4. Make sure you’ve done these things before you go live
projects/
and writing/
, you can amend these if you want but you’ll need to add CSS overrides.