photo of my head

Hi! I'm Drew ๐Ÿ‘‹

I am a product designer and entrepreneur with 8 years of experience and a track record of delivering simple, easy-to-use products that solve problems.

But when I'm not working, you can find me: ๐Ÿถ Obsessing over corgis
๐Ÿ“ธ Snapping pics around the city
๐ŸŒฎ Complaining that Mexican isn't as good as Tex-Mex
โšฝ Watching soccer nonstop
๐Ÿ™Š Cracking one too many dad jokes

DBK Labs

๐Ÿ’ผ Founder, Designer, and Developer

๐Ÿ—“02/2019 - Present ๐Ÿ“SF, NYC ๐Ÿ—ฃ 25k Customers

macOS Apps Product Design UX Design UI Design User Research Sketching User Research Landing Pages Swift HTML CSS3 JavaScript Icon Design

DBK Labs is an app design studio I founded with the goal of fixing user experience issues larger companies seem to neglect. My category of focus was streaming services, such as Netflix and Hulu.

Hypothesis

I treated the entire company as one large experience design problem, and my hypothesis was that if I fix annoying issues with streaming services, users would find enough value to pay actual money for them.

Background

This endeavor grew out of a Chrome extension I created for Netflix called Netflix Classic to fix several personal frustrations of mine with the Netflix experience in my browser. The main frustrations included auto-playing trailers Netflix would force you to watch, strange hover states on posters which were awkward to scroll over, and showing the prompt asking what profile to use whenever you return to the site.

The extension received a large positive reception, which confirmed to me that fixing annoyances with streaming services could be something people would be willing to pay for.

One of the other main annoyances bothering me personally (and I assumed for others as well based on the reception to my previous fixes) was that I had to go into the browser to watch Netflix. This caused me to have to navigate away from other work I was already doing in the browser, and the context switching would get confusing. In other words, there was no standalone Netflix app for Mac, and I wanted to fix that.

Long story short, I doubled down on these problems to create a macOS app for Netflix that both allows users to instantly launch the app from their Mac dock and fix major experience issues that these services were not fixing. After the Netlix app garnered a decent amount of initial attention, sales, and press, I continued on this path to develop a suite of macOS apps for all major streaming services with experience issues.

Process

To identify experience issues in each app, I did several things:

  • Conducted an audit of the entire streaming service, testing out all features and functionality
  • Scoured online user forums to look for issues most complained about
  • Surveyed friends and family about things that particularly bothered them
  • Used my experience to pick out issues that users were likely to complain about
  • After releasing an app, I also listened to customer feedback and released updates to the apps to fix pain points I may have missed beforehand

In total, I have created apps for Netflix, Hulu, Prime Video, HBO Max, YouTube TV, Disney+, and YouTube as well.

Visual Design

If you are interested in my visual design or landing page work, I designed all icons and landing pages myself.

Outcome

10's of thousands of sales. The experience issues I identified were clearly enough of a problem that people were willing to pay money out of their own pockets to improve these experiences, validating my overall hypothesis.

Press

Udemy

๐Ÿ’ผ Product Designer

๐Ÿ—“06/2015 - 02/2019 ๐Ÿ“San Francisco ๐Ÿ—ฃ 40 million students & 50k instructors

Product Design UX Design UI Design Interaction Design Prototyping HTML CSS JavaScript User Research Sketching Wireframing

Udemy is a two-sided, online educational platform where instructors can create and manage online courses, and students can discover and take courses.

Case Studies:
Other Work:

Amazon.com

๐Ÿ’ผ Design Technologist, ACS Global Browse UX Team

๐Ÿ—“06/2014 - 02/2015 ๐Ÿ“Seattle ๐Ÿ—ฃ 275 Million Customers

HTML5 Jade CSS3 Sass Bourbon JavaScript jQuery Git Ajax JSON Node.js Express.js Grunt.js GSAP Ractive.js

amazon electronics gift guide
Electronics Holiday Gift Guide - One of many projects my work was showcased on.

The Amazon Creative Services Global Browse UX Team designs and develops interactive reusable components that live on Amazon Browse/Category pages across the globe. The main goal of this team is to elevate the retail browse experience for Amazonโ€™s customers, and the widgets created are used by millions of people every day.

During my time on this team, I operated as a Design Technologist, a role somewhat specific to Amazon in title, but not in intention. As a member of a cross-functional team of about 10, I operated closely with both ux designers, web developers, and an SDE to create delightful and interactive experiences for Amazon's customers. I played an active role in everything from design ideation and concept development to prototyping and iterating on design concepts to final front-end development depending on the project.

Event Nav - Concept Development, Interaction Design, Prototyping, UI Development
Waterfall Grid - Prototyping, Interaction Design, Partial UI Development
Electronic Gift Guide Deals Shoveler (never released) - Concept Development (popslider yo), Prototyping, Interaction Design
Woot.com On-Amazon Experience - Concept Development, Layout, Prototyping, Interaction Design, Partial UI Development
Left Nav Accordian - Concept Development (cookies!), Prototyping, Interaction Design, UI Development
Interactive Billboard - Prototyping, Interaction Design, UI Development

Farmplicity (acquired 2014)

๐Ÿ’ผ Co-founder/CEO/Lead Designer

๐Ÿ—“01/2013 - 05/2014 ๐Ÿ“St. Louis ๐Ÿ—ฃ Hundreds of chefs and farmers

HTML5CSS3jQueryTwitter BootstrapRuby on Rails

farmplicity homepage

Farmplicity is an online marketplace where farmers can sell local ingredients directly to chefs in an easy-to-use virtual farmers market. Farmplicity was founded in January 2013 with the intention of making local ingredients easier to obtain, thus benefiting local economies and, over time, reducing prices. To date, over 100 farmers and 100 chefs have utilized Farmplicity in the St. Louis market.

For this project, I worked on a team of four to develop the concept, create the business plan, and launch the company. I then assumed the role of CEO and led all aspects of the company for six months. Additionally, I led design for the entire project. This included designing the logo and building the brand, creating marketing materials, and designing and developing the front-end of the website.

For the design of Farmplicity, I wanted to achieve a warm, homey, down-to-earth feel that would lend itself well to the concept of local food. I also wanted to create an air of professionalism while still being fun and a little quirky.

The first step was to create a logo. I went with a script font that was fun, colorful, and exciting, in the hope that our company would bring new life to the local food distribution industry.

farmplicity logo

To start on the website, I built out a user flow of the web app. While the main home page is accessible to everyone, farmers and chefs have different permissions - farmers only have the ability to upload listings and chefs only have access to the marketplace.

I then began wireframing out each of the individual pages, to give a blueprint of the componenets needed to build out in code.

farmplicity wireframe
Wireframe of Farmplicity homepage

After sketching out wireframes, I developed each page using HTML5, CSS3, and jQuery within the Bootstrap framework. The pages were then integrated into the Ruby on Rails app in coordination with a back-end developer. The "finished" results can be seen below.

Voyager

๐Ÿ’ผ Team Leader

Request: Responsive prototype in four days

HTML5CSS3jQuerySkeleton

voyager homepage

During the Code Fellows UX Engineering bootcamp I participated in, I was assigned to a team of three to build out a prototype web app in four days. After a deep brainstorming session, we settled on Voyager, a web app that allows for user-generated expeditions of cities. This was inspired by that fact that I was new to living in Seattle, but I didn't want to go on boring tourist-y tours. Nor do I want to wander around aimlessly. Typically, when a new person goes to a city, they ask others about cool places to check out around town. But what if you don't know any locals? That's where Voyager comes in. By allowing locals to curate expeditions, a visitor can have the chance to see unique and interesting spots around town quickly and easily.

As a result of the time constraint, my team decided to build out the three core pages to a site like this: a home page, a city listings page, and an expedition details page.

We began by sketching out wireframes, utilizing a mobile-first strategy and adding content as the window expanded.

voyager wireframe 1
Wireframe - Voyager Homepage
voyager wireframe 2
Wireframe - Voyager Expeditions Pages

Next, a style guide was developed to allow for consistency throughout the project. I personally took charge of the style guide development. I decided to go with a modern font, Open Sans, as well as several different shades of blue and an accent color of green, to play into a nature, outdoors-y, explorer mood. Inspiring, hip but not alienating, engaging, motivating, and discovery are the words we used to keep us on track with the feel of the app we were to build out.

voyager styletile
Styletile - Voyager

At this point, we were ready to begin coding out the structure of the pages, utilizing pair programming as we built out a semantic HTML structure. Skeleton was our grid system of choice for this project.

voyager code
HTML DOC - Voyager Homepage

After the core HTML structure was in place, we began to incorporate design elements in CSS, incorporating elements from the style guide throughout. jQuery was then used to add interactivity to our prototype. The finished results can be seen below.

Pantastic

๐Ÿ’ผ Founder

๐Ÿ—“ 12/2012 - 03/2013 ๐Ÿ“St. Louis

HTML5CSS3jQueryTwitter Bootstrap

pantastic homepage

Pantastic was a company I founded that allowed anyone to order three-foot-long prints of iPhone panoramas for $25, at the click of a button. This was my first foray into startups and building out websites, and the learnings I gleaned from this experience were invaluable.

I have always had a passion for photography, and I remember how difficult it was pre-iPhone to take panoramas. The panorama naturally lends itself well to large format printing and wall display, as its dimensions make it difficult to view at smaller sizes. While the iPhone allowed for panorama capture, there was no good way to display the beautiful panoramas people were taking. This is why I started Pantastic. I wanted to make it dead-simple to get a large, beatiful panorama on your wall.

While knowing very little at the time about developing a website, I leaned on the Bootstrap framework to get the following website up and running. With a large-format printer and lots of shipping boxes in tow, Pantastic was up and running!