Noah Shrader

Digital Product Designer

Let's Talk
About

Hi, I'm Noah Shrader. I'm an award-winning product designer and developer from Memphis. I'm driven by crafting interactive experiences built with intention and a focus on the end user. I currently work full-time at St. Jude Children's Research Hospital as a senior product designer. I've worked with a long list of amazing clients both locally and internationally. I write and speak occasionally. I also work on a number of music projects.

Work

Concept/Branding/Design/Development

Explore
Pullr

Design/Development

Explore
Zeldathon

Branding/UI/UX

Coming Soon
Tagtician

Concept/Branding/Design/Development

Explore
PK Radio
PK Radio

An online broadcast of the best in Earthbound/Mother fan music.

To truly appreciate this project takes having experienced the magic of the Earthbound series from Nintendo. Years ago, I was fortunate to have come across this particular video game franchise and the impact it had on me was immeasurable.

Along with incredibly unique storylines and messaging are simple, yet deeply moving soundtracks. To me, they're some of the best in video game history. I spent months searching the web, gradually building a collection of covers and remixes of the original soundtracks. After enjoying them privately for some time, I became inspired to create a 24/7 radio station dedicated solely for these Earthbound fan covers so others can experience the same joy from these melodies.

PK Radio

The Branding

Overall, I used basic shapes to reflect the renowned simplicity of the graphics in all three games. In addition, I also sought to incorporate primary themes found throughout the series. One common element in each game is the presence of the extraterrestrial. In some cases, you battle actual flying saucers, which is the reason I chose to widen the central diamond shape.

Another common trait among the games are the magic powers several of the main characters possess that are often prefaced with "PSI" or "PK". Essentially, these are special attacks on enemies, and the graphic animations for these can take the form of a number of shapes, including triangles which you notice protruding from the sides. The name "PK Radio" just seemed to fit that schema.

PK Radio

The Website

In its current state, the website allows you to tune into the station, see recently played tracks, browse the song library and get updates on new weekly song additions. The website also features a popout player so you can browse the web freely while listening. Or, you can download the server playlist to include with iTunes or your favorite media player.

Tagtician

A tag management companion

Zeldathon

A marathoned playthrough of the Legend of Zelda series while benefitting charity.

Zeldathon Zeldathon Zeldathon Zeldathon Zeldathon Zeldathon

It makes sense that with The Legend of Zelda being my favorite video game franchise of all time, I would have to do something more with it than just play it. A few years ago, I found Zeldathon and immediately felt connected - to the spirit of it, and to the people. I spent every marathon wanting somehow to be a bigger part of it. In 2013, I contacted the Zeldathon team and offered to work on their online experience.

Eventually, I was invited to my first Zeldathon and have attended pretty regularly since. We continue to innovate the online experience, giving viewers more ways to interact with the marathon, and to the Zeldathon legacy. To date, Zeldathon has raised over $625,000 for charity.

Zeldathon

The Countdown

The countdown is an integral part of the Zeldathon experience. The Zeldathon team are masters of anticipation, with gradual releases and teasers leading up to the start of the marathon.

For Zeldathon Hope, I went with a timeline metaphor, with each milestone in the timeline being a link revealing a teaser video that had been published that day. The subtle countdown was enlarged and positioned subtly in the back for a more exaggerated effect. And of course, there's Link gradually making his way to the Triforce.

Zeldathon

The Stream

With each marathon, we learn new habits about our viewers - the stream layouts they prefer, as well as their viewing preferences. And each time, we accommodate the design to fulfill those needs.

For Zeldathon Hope, we refined the experience even further. The stream and chat combined fill 100% of the space for optimal viewing. All of the interaction points are together in one location. Interacting with any of those reveals the content within an overlay so that you can explore without ever having to leave the stream.

Zeldathon

With the overlays, I added a blur effect to the background elements, providing contrast to the forefront content while keeping you immersed in the sights and sounds of the Zeldathon experience.

Zeldathon

The Timeline

Staying true to the concept of the "timeline" of the Legend of Zelda series, Zeldathon too has a unique footprint. Having a dedicated area of the website for viewers to return to previous marathons and relive those experiences sounded like a great idea.

Zeldathon

As you scroll the timeline, you can click on the logos of past marathons, bringing you into that particular marathon archive. Each archive contains relevant information about the marathon, access to past trailers and teaser videos and the entire marathon recording - chaptered and viewable on the website.

Zeldathon
Pullr

An all-in-one fundraising platform for streamers

In late 2013, I was working on a donation system for Zeldathon. The codebase was breaking and we were expending the last bit of effort to keep it alive. We came to the conclusion that it was time to implement a new structure that could evolve and scale with Zeldathon's growing technical demands.

At the same time, the online community that hosted this event were looking to build a similar platform upon which they could organize monthly gaming events and raise for various charitable causes. I had also been working on an open source script, Twitch Streamr, that pulled teams and their channels from Twitch and displayed them stylistically onto a webpage with a number of nifty features. This script eventually became popular with a number of streamers and community owners contacting me on a daily basis with requests.

Pullr

The Strategy

As I continued to work through these scenarios, curiosity led me to research the market more, and in doing so found a number of problems streamers were facing with their current fundraising and on-stream alerts software. There were a number of simple applications that provided fundraising opportunities for streamers. There were tools that gave streamers the ability to connect to these fundraising applications to display on-stream alerts and other overlays. However, there weren't any applications that simplified the experience by integrating them together into one platform.

My hypothesis was that there needed to be an all-in-one fundraising platform that allowed streamers to raise for charitable and personal causes, individually or with a team, which also included a suite of integrated, on-stream tools. The Twitch Streamr script would then be repurposed into the campaign pages streamers would use to fundraise.

Going into the project, I had a number of advantages. For one, I was a gamer and a streamer. I was also working with a large community of streamers who were involved in stream fundraising. I also knew several high-profile streamers I could leverage for insight and reach. With those resources alone, I was able to quickly validate my assumptions and move straight to the drawing board.

Pullr

The Branding

The name "Pullr" came soon after I turned to a good gamer friend who would eventually run business operations. Knowing that fundraising was the primary focus of this platform, I wanted a name that reflected an action people would be taking, or a word that represented the essence of the mission. Minutes later, Pullr was suggested - we instantly embraced it.

The concept was that each person using the platform would be "pulling" for a cause, whether personally or for charity. We also featured an area on our website where visitors could browse live streams and "pull" for (donate to) those streamers.

In terms of branding, the logo was given a slight italic with diagonally cut letters to give the illusion of a pulling action, as well as reflect the campaign and progress-to-goal nature of the platform. The flat green accent was chosen to represent fundraising and giving.

Pullr

The Experience

Pullr was much more than a platform; it was a movement. While we encouraged personal campaigns and tip jars, our team was philanthropic at heart. We wanted to make streaming for charity super simple and engaging. We aimed to build a supportive community, a place where streamers and their viewers could pull for each other and the causes they care about. That was our mission. And so for the website, we took that mission and wrapped it into a single question that essentially became the entry point to the Pullr experience: What are you pulling for?

While our website generally served as an outline for our platform, we incoporated functionality that listed all of the charity campaigns active within Pullr. As a viewer, you had the option to filter the results, locating relevant streams and visiting their respective campaign pages.

Pullr

Pullr had a number of unique features on the frontend, specifically with campaign pages. Alongside of standard customization of components like themes, colors, images and call-to-action text, you could set up your campaign page based on whether you were fundraising individually or as a team.

Team fundraising was a staple in the Pullr platform. You simply invited other users to a campaign which then allowed you to track and contribute to the campaign together. Team-based campaigns gave you the added ability to create campaign pages that pulled all of the individual team members onto the page so that you could switch back and forth between channels from one location.

One of my personal favorite features of the campaign page was the integrated donation form. While each campaign had its own donation page, you could also donate directly from the campaign page without ever having to miss the stream.

Pullr

The App

The most significant challenge with Pullr was taking what was essentially a warehouse of functionality and making it fit snuggly into a bedroom. The goal was simplicity. When a streamer launched Pullr, they needed easy access to and management of their campaigns. Everything that wasn't a priority was tucked away.

Pullr

The Dashboard gave users a quick glance into their campaigns with the ability to filter by dates and times. It also included an activity feed and a list of the user's followers and subscribers from Twitch or Hitbox.

The Campaigns area is where users created, edited and managed their campaigns. Some features included a filterable, importable/exportable list of donations made to a campaign, campaign archiving, link shortening for sharing, and manual donations.

Pullr had a very intuitive donor management strategy. Targeting the donors' Paypal names and email addresses, it combined all of the donations made by a specific donor into a single record, regardless of the names used on the donation form. Each record included every transaction by that donor across all of your campaigns, as well as relevant data about their activity.

The backend featured themes to customize the look and feel of the application to fit your style and preference. Also, Support articles and videos were included within the app itself so you could get immediate assistance without having to switch over to another tab or window.

Pullr

Streamboard

Streamboard was one of the very first facets of Pullr to be researched and considered as it was the most sought-after solution of our platform. The level of intricacy involved with this particular piece of technology was unreal, and took a great deal of time and effort to get right.

Streamboard gave users the ability to track campaigns, as well as show progress, alerts of new donations, Twitch and Hitbox followers and subscribers and more on stream, all from one location and with extensive customization. You simply screen captured from the left (if using that method), and read donations and made edits from the right. All settings were automatically saved and nearly every component was draggable and resizable for easy, on-the-fly adjustments.

Pullr

Among a lengthy list of features, Streamboard had a few noteworthy callouts. Streamboard allowed you to track single or mulitple campaigns, depending on what you selected. Streamers could capture alerts and prgress trackers in two regions simultaneosly. Users could configure each region with highly-customizable widgets, such as alerts, progress bar and a donation ticker showing a list of their donors and the amount each has donated. Streamboard allowed for HTML capture, integrating with popular broadcasting software like XSplit and OBS.

The API

The Pullr API was unique in that we not only implemented it properly from the backend, but we also built a frontend API which allowed users to embed shortcodes into their own custom webpages and pull specific data from their campaigns, including their campaign page layouts and donor lists. From research conducted in the early stages of Pullr, we knew there was a small niche of community owners that would benefit from this frontend functionality.

Notes