Modular Scale

In 2010 Tim Brown released a calculator to help designers generate a list of meaningful values to use in their type sizing decisions. I gained interest in the project creating a Sass library to generate values and later I got the opportunity to completely redesign and rebuild the website from the ground up. The goal in creating this tool is to help designers make more meaningful decisions so iteration involved community outreach and data gathering to understand how people were using the tool. I wanted there to be a more direct connection between inputs and outputs so I created a multi-panel tool that updates live based on given inputs to help the designer to visualize the values that are being generated. Additional features like multiple strands and target values were added to create more complex harmonies and clearer mental models. Check it out at modularscale.com.

Athena ad products

array of Athena ad products

While I was working on the 2012 redesign of SB Nation I was tasked with creating big glossy feature entries which looked great but the standardized units that we were using fell flat in out layouts. To solve this problem I experimented with a large and responsive but distinct unit that was able to meet the quality level of the content around it while still being distinctly an advertisement just like a full page ad in a magazine. This experiment later became the Athena ad product across Vox Media websites, Concert partners, and numerous publishers have adopted similar formats across the web.

More recently I revamped the suite of Athena video products to create more immersive and intuitive experiences while also looking at other ways to engage audiences with interactivity in our advertisements. This work involves rapid prototyping and input from everyone from sales to ad executions teams to ensure that our ad products don’t just look cool, but can be created quickly and efficiently.

Vox.com

Collection of vox.com screenshots

Vox.com was launched as Vox Media’s premier hard news site in 2014. The site was launched after just nine weeks of rapid development on top of SB Nation’s codebase. To achieve this we took that scaffolding of SB Nation and scoped one new feature, card stacks, to have roughed out in a week long hackathon to kick off development. After that week, with scope locked down we had the focus to polish off the site easily within our launch window.

After launch we were able to set new goals and learn from the baseline we had put in place to launch on and were able to go deeper into specific areas we wanted to push boundaries on. With a growing number of card stacks we prototyped solutions on how to organize and search for explanatory content. We addressed the home page, what the roll of a home page is, what do people use it for, and new ways to organize that content. We worked closely with editorial teams to understand how they were using the tools we were giving them and tried to amplify their voice to resonate with new audiences through good product design.

Verge editorial design

On The Verge I worked closely with writers, editors, videographers, and photographers to help them tell their stories in an impactful way. I worked with these groups to understand the tone and creative direction of the pieces we were collaborating on. This work was largely about transporting people to a time, a place, or evoke some feeling or empathy towards characters in the stories. Stories about Second Life to arcades to what it’s like to live with a face transplant. These projects were all on fast timelines and required care and empathy to design and produce.

Some projects like gift guides around holidays come with plenty of heads up and we were able to create entirely custom experiences to make the most impact. On these projects I would work with an art director to plan photo shoots and stage shots to later take into the piece for user interaction. Interactive product maps or layered product shots to provide a parallax effect during navigation or hover were little details that added a huge amount of depth to what we were creating.

MMA live

This was an exploratory project on how might we create a live updating slideshow during a fight night, or get a quick recap after a fight. Taking this idea I designed and prototyped this experience to explore what a product like this might be like. I designed it with minimal text and an option of images to highlight key events in a sports match while providing context as to rounds and score. I wrote a custom swipe and pagination script to make transitions between key events smooth and elegant and I integrated places for sponsorship so that the experience can be monetized. Ultimately the project didn’t go anywhere but through iteration and prototyping we got a good grasp on how a product like this would behave and what it would be like to use if it were made.

Branded content

I helped kick off Vox Media’s branded content efforts, now Vox Creative, on a team that initially was put together to redesign article pages. The pressure here was where do we put branded content and how do we promote it in a way that is transparent to the audience that it is sponsored while also being easy to produce and editorially independent. Pictured is an early mock of what that might look like and we worked on a publishing system powered by Google Docs to push nicely formatted chunks of content to a page. Today the branded content workflow is now integrated into Chorus (Vox Media’s publishing tools) but the constraints we were working with at the time were more rigid when I designed this mock.

Type and lettering

Collection of vox.com screenshots

Earlier on in my career I worked as a draftsman at Darden Studio where I learned to love drawing letterforms. At Darden Studio I primarily worked on extending Omnes, creating custom versions for clients, and working on other retail type projects. While professionally I have moved more into web and digital product design I keep these skills active and every now and then redraw a logo or pick up a lettering project. Type design is similar to web design as both are forms of system design and every piece has to harmoniously fit into place within the rest of the system.