Scott Kellum

Making a Smartphone, Dumb

Fri, 20 Jun 2025 00:00:00 GMT

Sometimes, I find myself scrolling. A quick check on a friend or a break with a YouTube video can add up to hours of wasted time every day. If you asked a social media company about my engagement with these apps, they would claim the solid metrics indicate I had an enjoyable experience. While I might have gained value from that first check-in or video, these sessions leave me feeling pretty messed up, foggy, and unhappy with the precious time I’ve wasted. Our devices are addictive, and I think a lot of my peers are in the same boat. So, let’s do something about it.

Like many people trying to simplify their digital lives, I have been following the latest crop of dumbphones with interest. Years ago, I was known to rock an original Nokia 3390 on the weekends. As iMessage lock-in and the responsibilities of fatherhood have taken hold, the jump to a dumbphone isn’t as easy. Still, the biggest flaw in switching to a dumbphone is that it’s yet another device to have when my iPhone 13 mini works perfectly fine. For Android, there are ROMs and home screens, but is it even possible to effectively lobotomize an iPhone?

Deleting the apps

Deleting the apps is a significant first step. Some apps were difficult to part with, as I used them for work, but work doesn’t need to be in your pocket while you’re at the grocery store or the park with you and your kids. Instead of asking yourself if you need this app, ask yourself if you need it on your phone. In our society, we often need to engage with and be connected to the world through the Internet, and that’s okay, but we don’t need to be tethered to the world at all times. When it came to deleting, I asked myself two simple questions: Can I do this on my computer instead? And do I need this app when I’m away from my computer?

Being in front of a computer requires intention. It involves going to a physical place to sit down and lock in. It’s where I can act on information instead of mindlessly consuming it. This exercise helps me be more intentional about the utility of my phone, as well as implicitly consider the utility of my computer. LinkedIn, Mastodon, and even email are the platforms I primarily use on my computer now. Additionally, ScreenTime is a valuable tool to help curb both website and app usage on all your (Apple) devices.

Safari, the Everything app

As hard as you work to remove the apps from your phone, Safari will happily get you back into Instagram, Twitter, or whatever social media you just deleted. If you’re the kind of person who needs to look that thing up that popped into your brain, it’ll let you do that, too. Having access to the world’s information in your pocket is incredible. It’s also unnecessary. Instant access to information can stifle our sense of wonder. If the information I’m seeking is essential, I can always look it up later. Or, if I need help in a store or museum, it turns out those places are filled with helpful and knowledgeable people. For everything else, I am learning to savor my sense of wonder.

Assistive Access

This is an accessibility mode you can put your phone into. It is the most dramatic step you can take on your iPhone to simplify your experience. The Home Screen, Lock Screen, and gesture-based navigation, along with key apps such as Phone, Messages, and Camera, have been completely redesigned to be more straightforward. There are advantages to this mode, alongside significant tradeoffs. The simplified Home Screen is a huge benefit, but the navigation is clunky. Privacy controls are outstanding in this mode, as you explicitly set location, camera, microphone, and contacts access for each app during the setup process. However, app and device features can be limited in some places. For me, this mode is available via a toggle in my Control Panel. Assistive Access is not a great experience, but it’s nice to switch into when I want to more intentionally detach.

My Phone

This is all well and good, but how exactly is my phone set up?

Accessibility

Display & Text Size / On/Off Labels is turned on
Display & Text Size / Reduce Transparency is turned on
Display & Text Size / Differentiate Without Color is turned on
Display & Text Size / Color Filters is turned on and set to Grayscale
Assistive Access is set up and toggleable via a Control Panel shortcut. There is a lot to configure here, and you will be walked through every setting.

Home screen

Only the bare necessities: Phone, FaceTime, Messages, and Camera in the bottom bar, and a light meter, Photos, Google Maps, and Reminders on my Home Screen. There is no search, black wallpaper, and no widgets.

Lock screen

Weather is displayed at the top, and that’s it. Grouped notifications can be shown here.

Control panel

I have two screens on my control panel. The first screen features standard controls at the top, including music, volume, and brightness, along with toggles for color filters and Assistive Access options below. The second screen is simple; it controls the radios, like Cellular, Wifi, Bluetooth, and Airplane Mode.

Notifications

Aside from Phone, Messages, and transportation apps, all notifications are turned off.

Battery life

As a bonus of removing functionality, I don’t find I need a lot of speed from my processor or network. To maximize battery life, I have turned off 5G radios in my cellular settings and keep my phone in battery-saver mode using a shortcut and automation. Talk to Siri and Raise to Wake are also disabled to remove background processing. With my iPhone 13 Mini at 82% battery health, I get about 2 days of battery life out of a charge.

Conclusion

Through this process, I’ve found my phone fits into my life better. This isn’t intended to be prescriptive, but rather to share what has worked for me, and I hope it can help you build a better relationship with your phone as well.

I couldn’t find a way to weave this into the rest of the article, but the folks over at Speeed came up with an opaque screen protector called Screenless, allowing you to use your iPhone as a dumb phone temporarily.

A Human-Centered Design Group Reborn

Thu, 10 Apr 2025 00:00:00 GMT

After a wildly successful run, including performing the first digital audit finding $11 million in profit for the General Services Administration (GSA) and winning a Service to the Citizen Award, this group of federal employees found themselves subject to mass layoffs and firings. Eager to continue the work, they are carrying on their mission to bring Human-centered Design (HCD) training and mission-oriented focus to people and organizations in both the public and private sectors. Over two months, I have been building a new brand for this work, archiving and compiling public domain materials, and giving them a new home.

The bulk of the work was building a new platform for the Human-centered Design Guide series, an eight-part book with hundreds of pages of material. These guides provide detailed yet approachable steps for every phase of the design process, from discovery to measuring success. I built a platform in Astro, then designed and developed an interface that navigated all eight books efficiently and clearly. One of the most difficult challenges with an extensive web content collection is providing clarity about where you are. With a physical book, it’s easy to see how many pages of content you’ve read through and mark sections as you go. I created a navigation with sections that persist to make a clear map of where you are in the context of what you are actively reading.

To add value to the work and create an artifact people can hold and take notes on, I also developed a series of PDF variants of the guides. These two forms meet people where they are in their projects. Eight and a half years of research, development, planning, testing, and execution has gone into this material, so ensuring the guides have a quality place to exist has been the primary focus of my work with Ishmael Interactive.

With mission-critical content mostly sorted, branding work came second. The goal was to create something that expressed optimism and creativity while still being competent and well-structured. The logo mark can carry expressiveness, while a rigid grid can have structure, and color can carry optimism. With the logo, grid, and color working hand-in-hand, the cohesive brand experience is welcoming, inviting, competent, and clear.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">Our new branding and website literally makes me weep for joy. At Ishmael Interactive, we had traditional branding needs paired with a massive amount of text to wrangle, and Scott organized it all into this fun, sleek, cohesive website that’s inviting and easy to navigate.</p> <p class="cite"><a href="https://anamonroe.com" target="_blank">Ana Monroe</a>, Founder</p> </li> </ul>

<a href="https://ishmaelinteractive.com" target="_blank" class="cta">Visit Ishmael Interactive</a>

Connecting Our Social Personas

Mon, 24 Mar 2025 00:00:00 GMT

A New Social offers a bold new vision for social media: a vision in which you can control how and where you connect with your friends online. Their first product, Bridgy Fed, allows you to talk and interact with accounts across Bluesky and Mastodon, but the vision is bigger. I introduced the concept of “constellations,” where unique networks intertwine to create a single image. These constellations enable people to connect with you, and enable you to connect with others across multiple networks. Each line in a constellation is a bridge.

Reference material, predominantly sourced from Margret and H. A. Rey illustrations

Inspired by the wonderous simplicity of Margret and H. A. Rey's illustrations, I distilled a visual language incorporating star diagrams and a very warm and human aesthetic. I also explored typography treatments, settling on Libre Caslon for this iteration. It was important for the typography to be OFL licensed, not just for budgetary concerns, but to align with the open principles of A New Social.

A logo from the first round of brand ideation for A New Social

Another requirement is that this iconography needs to work across platforms and networks. While the client loved the aesthetics and flavor of this branding, it would stand out on platforms where we might want it to blend in to become a part of an existing interface. We needed something that would work as an icon and a logo. A tighter logo mark, and typography that is more common.

After more iterations, I played with bringing the stars closer together, overlapping the celestial bodies to eclipse each other’s form partially. This resulted in an icon at home in a button within an app or work as a logo atop a website. I also cast aside color schemes, relying on shape alone to forge the identity. The consequence was more flexibility with brand colors, enabling dramatically different light and dark mode color schemes, using warm oranges for light mode and cool blues and purples for dark mode. I also created assets like a constellation map that can be incorporated into designs, building depth and complexity.

<el-slides> <img src="/img/a-new-social/presentation-1.avif" alt="" /> <img src="/img/a-new-social/presentation-2.avif" alt="" /> <img src="/img/a-new-social/presentation-3.avif" alt="" /> <img src="/img/a-new-social/presentation-4.avif" alt="" /> <img src="/img/a-new-social/presentation-5.avif" alt="" /> <img src="/img/a-new-social/presentation-6.avif" alt="" /> <img src="/img/a-new-social/presentation-7.avif" alt="" /> </el-slides>

The resulting brand guidelines enabled A New Social to launch a platform that connects people across networks. With their board recently announced, there is still work to be done. This effort establishes a solid foundation and brand identity to support that work.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">I obviously loved what you made for us, but the process was definitely my favorite part. Can’t wait to work with you again in the future!</p> <p class="cite"><a href="https://mastodon.social/@quillmatiq/114235605739776683" target="_blank">Anuj Ahooja</a>, CEO & Executive Director</p> </li> </ul>

<a href="https://anew.social" target="_blank" class="cta">Visit A New Social</a>

Discussing our design practice

Mon, 16 Dec 2024 00:00:00 GMT

Design is an intimate practice between my clients, their customers, and myself. Branding is talk therapy for a business. It is a practice of working through what a business is, where it is now, and goals for what it should become. So, while I spend most of my time doing design work, I spend little time wading into discussions on design. Who am I to judge a logo or type choice without sitting with the stakeholders and understanding what went into their decision-making process? Who am I to tell you what the best fonts are without sitting with you to understand your brand voice? A lack of curiosity and insight leads to hot takes, shitposts, and pedantry.

When painters talk shop, they discuss turpentine and pigments. Carpenters discuss joins and tools. Instead of writing about design and what it does for people, I gravitate towards CSS, fonts, and features in Figma. We too often value what we consume over what we produce. So I discuss and write about what I consume. But discussing design is worthy and worthwhile. We, as designers, are in leadership roles now. To keep our long-fought and hard-won seat at the table, we need to be able to discuss the impact of our work in a way that is approachable and compelling.

So I challenge myself, and I challenge you, to consider the impact design has on the world. We can be curious and consider the things we see. We can learn through earnest inquisition. We can share those insights through thoughtful and compassionate conversation.

A Fresh New Look for We Distribute

Tue, 17 Sep 2024 00:00:00 GMT

Sean Tilley has been a part of the federated social web for over 15 years and is covering news, updates, and profiles in this space through We Distribute. They have already seen success with their coverage and investigations over the past year. With an interest in expanding the scope of the project, they sought help elevating their brand to be something more impactful and distinguished.

I worked with Sean and his business partner Damon to identify the goals of We Distribute, and where they needed it to stand out or fit into the competitive landscape. We identified the color and typography that other brands were using and crafted a look that distinguished itself from other publications while still feeling like a technology publication. We chose bright brand colors that steered away from the usual blue and purples of other tech publications and used contemporary serif fonts instead of usual sans-serif fonts. We leaned heavily on Redaction by MCKL Type and MoMA to provide a pixelated and digitally distressed aesthetic while remaining crisp and modern.

After solidifying the brand for both We Distribute and their podcast Decentered, we re-themed their WordPress website to incorporate the new brand. Quickly making the website feel fresh and contemporary to use and interact with.

I am extremely excited about the results of this redesign. We Distribute now has a more own-able brand that will aid in audience growth and retention. This project is still ongoing and we will continue to update this post with more details.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">I absolutely love the work you’ve done with us. We Distribute looks so good thanks to your thoughtfulness and skillful approach.</p> <p class="cite"><a href="https://social.wedistribute.org/users/deadsuperhero" target="_blank">Sean Tilley</a>, Founder</p> </li> </ul>

<a href="https://wedistribute.org/" target="_blank" class="cta">Visit We Distribute</a>

How unit division works in CSS, and how to use it today

Fri, 13 Sep 2024 00:00:00 GMT

Unit division in CSS has been at the top of my CSS wishlist for years. It allows you to take one value and manipulate it to do something else entirely. This is huge. CSS units may be typed as a <length>, <color>, <number>, or <angle>. Unit division allows us to compare and manipulate any type of unit with any other type of unit for the first time. Here at Typetura we use it to take a container width and manipulate it to change the timing of CSS animations, but you might want to use it to manipulate colors, proportions, variable font properties, or percentages without the <length> type. To my surprise and delight, Safari launched unit division in CSS this week.

But how exactly are we using this feature if it’s only just now released in Safari Technology Preview? For the past few months we have been using a workaround by Jane Ori that uses tan(atan2()) alongside @property to achieve unit division in CSS. This week we released a new version of Typetura.css that uses native unit division when available, and falls back to Jane’s technique when it’s not. Previously we were using a little JS to handle this math.

Using unit division in CSS

In grade school math class you might have remembered dividing by x to solve for an equation. For example, if you have 10x you can divide by x leaving you with 10. Similarly, if you have 10px and divide by 1px you’re left with 10. Now, you can take this 10 and multiply it by 1deg to convert it to an <angle> or 1s to convert it to <time>.

Another thing to remember is that the denominator always takes precedence in the calculation. For example, if you have 1in / 1px, the result will be 96, as 1 CSS inch always equals 96 CSS pixels. CSS converts both the numerator and denominator to the same units as the denominator, then divides the values and removes the units. This is particularly handy when using relative length values. Dividing a relative value by a fixed value, like 100vw / 1px, will give you the corresponding viewport width as a <number> of pixels. You now have a way to manipulate values based on screen width without needing to use JavaScript.

Changing the background color of a page with the viewport

As a quick example, we can change the background color of a page with this technique. We can convert the viewport width to a number, then convert that to degrees for our HSL value.

html {
	background: hsl(calc(100vw / 1px * 0.2deg), 100%, 80%);
}

Currently, this only works in Safari Technology Preview, so let’s add a fallback using Jane Ori’s technique. We can isolate a lot of complexity here and use custom properties to run our calculations. Let’s add a --num, and --denom property to hold our values and run the division calculation in isolation.

/* Division math happens here for when you need it */
* {
	--div: calc(var(--num) / var(--denom));
}

/* Write your styles here */
html {
	--num: 100vw;
	--denom: 1px;
	background: hsl(calc(var(--div) * 0.2deg), 100%, 80%);
}

Now that we have our styles well isolated, we can add Jane Ori’s technique to the mix without impacting the area of the stylesheet where we have our page styles.

/* Division math happens here for when you need it */
* {
	--div: calc(var(--num) / var(--denom));
}

/* Fallback support */
@supports not (width: calc(1% / 1px * 1px)) {
	@property --num {
		syntax: "<length>";
		initial-value: 0px;
		inherits: false;
	}
	@property --denom {
		syntax: "<length>";
		initial-value: 0px;
		inherits: false;
	}
	* {
		--NUM: calc(tan(atan2(var(--num),1px)));
		--DENOM: calc(tan(atan2(var(--denom),1px)));
		--div: calc(var(--NUM) / var(--DENOM));
	}
}

/* Write your styles here */
html {
	--num: 100vw;
	--denom: 1px;
	background: hsl(calc(var(--div) * 0.2deg), 100%, 80%);
}

<a href="https://codepen.io/scottkellum/pen/ZEdZwLv?editors=1100" target="_blank" class="cta">Edit on CodePen</a>

Conclusion

Unit division can be a powerful tool, and now that it is available in CSS, it opens up a world of possibilities for developers. It will greatly reduce our reliance on JavaScript for calculations, speeding up page performance. Jane’s fallback is a bit of a hack and should be used with consideration, but this technique of isolating hacks is a great way to start using unit division today with the ability to easily remove the hack in the future when it is no longer needed.

Creating Artifacts with Fonts

Tue, 13 Aug 2024 00:00:00 GMT

Darden Studio is a renowned digital type foundry, creating fonts used by major brands and campaigns across the world like AT&T, Mazers, Crayola, Bernie Sanders, and Hearst. With the new releases of Kit and Gamay, the studio needed a way to promote their new fonts. The primary challenge of promoting these new fonts is that nothing has been made with them yet. Fonts are a material, something that you make things with. So naturally, I worked with Joyce Ketterer and Quinn Keaveney at Darden Studio to make these artifacts.

<div class="bento"> <p class="box"> <span class="value">+17%</span> <span class="label">Website traffic</span> </p> <p class="box"> <span class="value">+2x</span> <span class="label">Adobe activations</span> </p> </div>

With the marketing efforts I have been involved with over the past year, there have been sizable improvements in the traffic and activations of new Darden Studio releases. Merch has been a key part of the marketing strategy, creating a delightful touchpoint for conference and meetup attendees.

The Kit Pin

With Darden Studio merch being handed out for promotions at conferences and meetups, we wanted something that people could engage with. Something that would be visible and have utility. Pronoun pins were the perfect artifact to create for these events. We also wanted to create one pin, a spinner or slider, to accommodate different pronouns. After numerous iterations we broke down the 3rd person subject pronoun into their parts and found we could make a slider that contained the letters “t”, “s”, and “y” on the back plate and “he” on the front plate, revealing different letters for each pronoun.

The resulting pin is compact and versatile, yet it displays the pronoun prominently when worn.

Merch will be available from Darden Studio’s website soon if you want to get your hands on your own Kit pin.

<a target="_blank" href="https://www.dardenstudio.com/merch/kit-pronoun-pin" class="cta">Available from Darden Studio</a>

Contains Multitudes Gamay Tape

With the success of the Kit pins, Darden Studio wanted an item for the release of Gamay. After substantial ideation with the Darden Studio team tape was the idea that stuck. We had originally looked into washi tape of different widths for each of Gamay’s widths but landed on packing tape that says “CONTAINS MULTITUDES” — a reference to Walt Whitman’s poem Leaves of Grass as well as whatever might be packed inside a box wrapped in this tape.

<a target="_blank" href="https://www.dardenstudio.com/merch/gamay-packing-tape" class="cta">Available from Darden Studio</a>

Showcasing Roslindale: A New Specimen Microsite

Wed, 24 Jul 2024 00:00:00 GMT

We love Roslindale by David Jonathan Ross, so when he approached us to design a specimen site to showcase the font’s rich design characteristics and history we jumped at the opportunity. We worked with David to scaffold a rough outline of the microsite and André Mora to draft content.

The design space of Roslindale is something we wanted to highlight. David visualizes this space as a triangular prism, a shape we dubbed “the horn”. It shows how widths stem out as optical size increases, creating a richer and more complex area for large type. We created an interactive version of this horn so that people could navigate around the design space, gaining a better understanding of how Roslindale works.

Interspersed within the sections we wanted to create a more traditional specimen. With all the styles available, we had the roman, italic, and uppercase variations scroll past when moving down the page while still being editable.

With the popularity of Roslindale, there was no shortage of in-use material to pull from. For this, we created a rich grid of images linking back to Fonts In Use. It’s one of our favorite parts of the design with an editorial yet visuals-forward aesthetic.

<a href="https://djr.com/roslindale" target="_blank" class="cta">Visit the Roslindale specimen website</a>

Elevating the Artistry and Art of Kaplan Art Tours

Wed, 14 Dec 2022 00:00:00 GMT

Background

Lauren A. Kaplan has decades of experience crafting and leading fine art tours in New York City and throughout the U.S. As she built her vibrant business, she gradually outgrew her original branding and digital workflow. She identified the need to present herself with the same sophistication and attention to detail that she had built over her years of experience, but she wasn't sure what the possibilities were or even where to start. That’s when a friend connected her with Typetura.

Brand

We took art deco themes Lauren gravitates to along with a color scheme common in many galleries and museums around the city to anchor her brand voice. This created a cohesive aesthetic that is authentic to and representative of the work she does.

This brand consisted of Zenith by DJR, typeset into a square logo. The logo paired with Futura for headlines and Fern, again by DJR, for text. The result is an aesthetic that’s bold yet sophisticated. Large impactful images were used throughout, with cutaways to both give the design structure and lead people to further consume content on the pages.

We revised the content architecture and copy on her website to facilitate her connection with her clients. This ensured the content was appropriate and accessible for each section. The Tours page in particular needed to guide people through the vast expanse of art, architecture, and galleries of New York City.

The blog was an area of focus as well. Moving content on the home page to separate posts and pages and ensuring updates are surfaced throughout.

Code

To implement the changes while retaining Lauren’s workflow we developed a custom WordPress theme, then implemented it on a staging site to ensure all plugins worked appropriately. We also managed the migration and redirects of URLs for better SEO. After ensuring everything was perfect on staging, we migrated to the main website. The result was no website downtime. Client bookings never missed a beat.

Magic

We created a brand and digital presence that brings Lauren and her clients closer together. The Lauren A. Kaplan Tours vision shines in this dynamic yet balanced branding work, and we're wildly proud to be a building block in this New York institution.

<a href="https://kaplanarttours.com/" target="_blank" class="cta">Visit Kaplan Art Tours</a>

Building an Accessible Education Platform

Sat, 13 Aug 2022 00:00:00 GMT

EL Education is one of the largest providers of online learning materials and they were in the midst of a major redesign with Type/Code. They reached out to me and Typetura to create a robust and accessible front end for the platform. We took on this project, closely collaborating with the team at Type/Code while staffing up our team with specialized contractors to ensure on-time and on-budget implementation.

Design

We collaborated closely with Type/Code and their team of designers to ensure high fidelity and interactivity across the site, including areas with parallax effects and overlays. Children’s artwork was featured throughout the website and provided a unique implementation challenge to preserve the ability to collage the images into the pages.

Code

I developed this site using the front-end framework, Vue, providing a dynamic component architecture to build pages and routes. This componentization used Atomic Design Principles, building up tokens, atoms, molecules, and organisms, to coalesce into page templates. This allowed us to build rapidly with our project partners.

Magic

This project is a testament to tight collaboration, project, and team management. Building and working with others to deliver on client needs. Creating robust but impactful and accessible systems at scale that help EL Education grow and thrive.

<a href="https://eleducation.org/" target="_blank" class="cta">Visit EL Education</a>

A Luxe Design for Gold’s Guide

Fri, 13 Aug 2021 00:00:00 GMT

<div class="bento"> <p class="box"> <span class="value">2x</span> <span class="label">page views</span> </p> <p class="box"> <span class="value">3x</span> <span class="label">time on site</span> </p> <p class="box"> <span class="value">15%</span> <span class="label">lower bounce rate</span> </p> </div>

We partnered with Tyler Gold to create a website showcasing his coverage of tech, culture, and personalities. His writing is thorough with deep and thoughtful insights and we worked to elevate the design to better align with his goals. The website is built on top of Ghost, an outstanding CMS for bloggers, publications, and newsletters. We iterated quickly to deliver a complete rebrand and website within two months.

Our goal was to create a website that would better retain readers of their long-form articles. To do this we needed two things: a recognizable brand people would know to come back along with compelling yet readable article pages that would better capture and retain a reader’s attention.

For the brand we chose a vibrant gold color and liberally used it across the background, making the whole website pop at a glance. The logo used a classical serif, Fern by DJR, to create a unique richness and character. The result was something that felt fresh and interesting while retaining authority.

Increasing email signups was another goal of this project, and we created a dedicated email signup area on the home page with a sticky signup notice. We wanted to create something intentional and native feeling while also being ever-present.

The article page was focused on ergonomics. People came to read and Gold’s Guide had relatively long articles. For these pages, we stick with straightforward black text on a white background or a dark mode with white text on a black background. Frances is the typeface we used for text, adding character to the page while retaining great readability.

After the redesign of Gold’s Guide, they saw a 2x uptick in page views and a reduction in bounce rates of 10%. Readers were spending 3x more time on the site increasing engagement.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">Not to brag, but... Gold’s Guide now has better typesetting than Monocle, GQ, and even the New York Times.</p> <p class="cite"><a href="https://www.linkedin.com/in/tylergold/" target="_blank">Tyler Gold</a>, Founder</p> </li> </ul>

<a href="https://goldsguide.com/" target="_blank" class="cta">Visit Gold’s Guide</a>

Scaling a Global Fitness Platform

Tue, 01 Oct 2019 00:00:00 GMT

<div class="bento"> <p class="box"> <span class="value" style="font-size: 35cqi;">+3x</span> <span class="label">Product Velocity</span> </p> <p class="box"> <span class="value" style="font-size: 35cqi;">+4x</span> <span class="label">Countries served</span> </p> </div>

In leading design for business-side products at Mariana Tek, I coordinated with sales, research, product, and development on new features. I worked across the organization to build a coalition and gain insights directly with major stakeholders, both in the C-suite and with customers. This human-centered design approach enabled me to work through complex problems with a high degree of confidence and efficiency.

Every project started with research. Fitness promotions and class schedules are convoluted. In conducting interviews directly with our customers, we gained critical insights; deciphering the needs from the wants. Alongside our research and executive teams, we synthesized our findings to ensure they were aligned with industry regulations.

<p class="caption">A whiteboarding session workshopping customer refunds and the complexities of how they should function with partially used class packs and memberships.</p>

The challenges of designing for boutique fitness are complex. I designed point-of-sale, reporting, and class packages encompassing various promotional options, scheduling, class roster, and front-desk sign-in interfaces. Each of these features has to follow and empower the unique processes of every studio while complying with local regulations and tax codes. It was a joy to work through these puzzles with my team to achieve the best outcomes.

The company was in the midst of rapid growth, and scaling our product to meet the increasing demands of customers was putting a strain on feature development. Mockups I was creating in Sketch were being pieced together with utility classes instead of fully built-out patterns. This resulted in inconsistencies along with delays in development and design reviews. I identified the need for a clear and structured design system, leveraging common components built using Atomic Design principles. Working closely with front-end development, product, and client relationship partners we moved swiftly to create and implement a phased build and release schedule. The result was a 3x increase in product velocity and improved consistency and reliability for our clients.

With these improvements to the product pipeline and a sleek, unified aesthetic, Mariana Tek was successfully sold and scaled up from a US domestic fitness platform to serve hundreds of clients in four countries worldwide.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">Scott is not only an incredible designer, but an even more incredible person and leader!</p> <p class="cite"><a href="https://www.linkedin.com/in/lindsayboylan/" target="_blank">Lindsay Thomason</a>, Global Product Lead</p> </li> </ul>

Advertising that enhances experiences

Sat, 09 Apr 2016 00:00:00 GMT

<div class="bento"> <p class="box"> <span class="value" style="font-size: 35cqi;">$200M+</span> <span class="label">YoY Revenue</span> </p> <p class="box"> <span class="value" style="font-size: 35cqi;">90%</span> <span class="label">US Audience Reach</span> </p> </div>

Advertising is the price everyone can afford for high-quality content. The problem is that digital ads are often low quality, tarnishing the customer relationship with both the publisher and advertiser. There is an opportunity for online ads to be better; A chance to build trust and value with the audience.

After prototyping new high-impact storytelling experiences at SB Nation in 2012, I identified a problem with our standard ad units. The beautiful layouts we were building were dotted with low-quality advertising, so I designed a new ad unit that was beautiful and responsive, distinguishing itself on the page but not overwhelming the viewer. This prototype was affectionately dubbed the “fishtank” ad, and it encapsulated a brand experience that you could peer into. A little slice of the page a brand could build a world in. An idea that grew into the Concert ad platform.

<div class="athena"> <div class="desktop"> <a href="javascript:activate(sidebar);" class="dot" style="top:89%;left:65%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:40%;left:25%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:19%;left:44%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:47%;left:43%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:82%;left:12%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:30%;left:84%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:90%;left:36%;"><img src="/img/athena/thumb.avif" /></a> </div> <div class="mobile"> <a href="javascript:activate(sidebar);" class="dot" style="top:89%;left:65%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:40%;left:25%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:19%;left:44%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:47%;left:43%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:82%;left:12%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:45%;left:84%;"><img src="/img/athena/thumb.avif" /></a> <a href="javascript:activate(sidebar);" class="dot" style="top:90%;left:36%;"><img src="/img/athena/thumb.avif" /></a> </div> <div class="sidebar"> <a href="javascript:activate(sidebar);" class="bkg"></a> <a href="javascript:activate(sidebar);" class="close"><svg class="closeSVG" viewBox="0 0 40 40"><title>close</title><line class="a" x1="9.4" y1="9.4" x2="30.6" y2="30.6"/><line class="a" x1="30.6" y1="9.4" x2="9.4" y2="30.6"/></svg></a> <img src="/img/athena/sidebar.avif" alt=" " /> </div> </div>

<p class="caption">Prototype ad for the Concert ad platform</p>

.sidebar img { position: absolute; right: 6px; bottom: 6px; height: calc(100% - 12px); width: auto; transform: translateX(100%); opacity: 0; transition: all 0.2s ease-out; box-shadow: 0 0 6px #000; z-index: 3; } .sidebar .bkg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; transition: all 0.4s ease-out; opacity: 0; pointer-events: none; z-index: 2; margin: 0 !important; } .sidebar .close { position: absolute; top: 3%; right: calc(38.5% + 6px); height: 0; width: 4%; padding-bottom: 4%; background-color: #fff; border-radius: 50%; z-index: 4; transition: all 0.4s cubic-bezier(0.5, 0, 0.4, 1.5); box-shadow: 0 0 6px #000; transform: scale(0); opacity: 0; transition-delay: 0.2s; } .sidebar.active img { opacity: 1; transform: none; } .sidebar.active .bkg { pointer-events: auto; opacity: 0.5; } .sidebar.active .close { transform: scale(1); opacity: 1; }

.closeSVG { stroke: #555; stroke-width: 4; }

.dot { position: absolute; width: 140px; height: 140px; border: 20px solid #fff; filter: drop-shadow(0 0 6px #000); border-radius: 50%; transform: translate3d(-50%, -50%, 0) scale(0); transition: all 0.4s cubic-bezier(0.5, 0, 0.4, 1.5); overflow: hidden; } .dot.active { transform: translate3d(-50%, -50%, 0) scale(0.25); } .dot img { width: 100%; opacity: 0; transition: all 0.4s cubic-bezier(0.5, 0, 0.4, 1.5); } .dot:hover { border-width: 2px; transform: translate3d(-50%, -50%, 0) scale(1); z-index: 1; } .dot:hover img { opacity: 1; }

.products { position: absolute; overflow: auto; top: 37.3%; bottom: 0; left: 0; right: 0; display: none; flex-direction: column; align-content: flex-start; flex-wrap: wrap; } @media (max-width: 640px) { .products { display: flex; } } .products img { flex: 1; height: 50%; max-height: 50%; display: block; float: left; } </style>

setTimeout(function () { var counter = 0; function next() { if (counter++ < dots.length) { activate(dots[counter - 1]); setTimeout(next, 100); } } next(); }, 600);

function activate(e) { e.classList.toggle('active'); } </script>

In 2016 I rejoined the Concert team to expand the reach of the ad platform, reaching over 90% of the US online audience and driving over $200M YoY in revenue. To achieve this scale we brought our ad suite to over 80 outside publications including Condé Nast, Comcast, and NBC.

<ul class="testimonials" id="testimonials"> <li> <p class="quote">Scott is one of those designers who can do it all, and truly does so with grace. From design execution to front-end development, Scott is truly a master of his craft.</p> <p class="cite"><a href="https://www.linkedin.com/in/joshlaincz/" target="_blank">Josh Laincz</a>, VP of Design at Vox Media</a></p> </li> </ul>

Launching a Marquee News Vertical

Sun, 09 Mar 2014 00:00:00 GMT

<div class="bento"> <p class="box"> <span class="value">9w</span> <span class="label">Weeks to launch</span> </p> <p class="box"> <span class="value">+5M</span> <span class="label">Launch Month Uniques</span> </p> </div>

I led the front end and heavily assisted with the design for the launch of Vox (2014). The timeline was rapid, as it took just 9 weeks to go from the idea of a news vertical to launch. To achieve this we carefully managed the scope, expanding it in areas where it would be most impactful with the new explainer format, then iterating on what we had built for other sites. It was an immensely successful launch and it has become Vox Media’s marquee news vertical.

Design

While focusing on the front end, I played a pivotal role in selecting the fonts for Vox and refining the logo. The logo, designed by Dylan Lathrop, needed refinement and redrawing before launch. I took the initiative to ensure the curves were pristine and smooth. We also needed an elegant news-worthy typeface that was still contemporary enough to hold up to more modern design sensibilities. I suggested Harriet by Okay Type. While the website has gone through numerous redesigns over the past decade, these design decisions have proven resilient.

I worked collaboratively with brand designer Georgia Cowley and product designer Warren Schultheis on the design of Vox; taking the lead in areas like home page hero design and longform content layouts.

Code

To launch quickly we focused on recycling as much of our existing infrastructure as possible. Much of Vox started out on top of SB Nation scaffolding, getting a re-skin and updates. We expanded the scope in a few key areas, notably explainers, and the home page. Explainers were regularly updated encyclopedia-style pages that provided useful context for articles. These explainers had unique paginated sections built on Backbone.js, a new introduction to Vox Media’s tech stack.

Magic

With tight collaboration and dedication, we were able to launch Vox with unprecedented speed and quality, exceeding expectations. With a continued push to iterate and improve the website Vox quickly became the marquee news vertical for Vox Media.

<a href="https://vox.com/" target="_blank" class="cta">Visit Vox</a>