Your SlideShare is downloading. ×
Jacob Reiff - A selection of UX work from Skyscraper
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jacob Reiff - A selection of UX work from Skyscraper

81
views

Published on

Examples and thoughts behind the decisions I made while building Skyscraper.

Examples and thoughts behind the decisions I made while building Skyscraper.

Published in: Design, Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
81
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jacob Reiff A selection of work from Skyscraper
  • 2. A selection of work from Skyscraper As product/technical co-founder, I designed and was responsible for full-stack development of MVP/V1, then worked with our back-end engineer to build V2. This document represents a few of the UX ideas I am most proud of. VISION PERSONAS ONBOARDING VIA VISUAL AD INTERFACE AUTOMATIC MEDIA KIT ORDERS DASHBOARD ADDITIONAL DOCUMENTS
  • 3. VISION A selection of work from Skyscraper Illuminate a path to success. Too many publishers struggle, overwhelmed with the methods available and execution required to extract the value out of their hard work. I knew plenty of publishers (and was one myself) who were producing work that had value—but we were stuck in a holding pattern. The effort required to turn that inventory into revenue, combined with all the work already being done to keep traffic growth up, simply outpaced the resources and time available. If Skyscraper could make the existing processes more efficient, that would be useful. If we could make timely, intelligent suggestions, introduce new tools, and grow revenues for all our stakeholders—we could become invaluable. These stuck publishers would be our “farm team”, and we’d help them graduate into the majors, growing our business alongside them.
  • 4. PERSONAS A selection of work from Skyscraper “Morgan” UNTAPPED INVENTORY & READY FOR GROWTH Blog-savvy with a growing site, Morgan is being contacted by advertisers for a Media Kit she’s procrastinated putting together. She’s frustrated that she’s leaving money on the table. “Susan” NEEDS HELP MANAGING HER CURRENT ORDERS EFFICIENTLY Susan tracked her sales for two years in Excel. Time and laborintensive, but it’s the only way she confidently stays on top of it all. “Jack” OVERWHELMED BY ALL THE OPTIONS Jack thinks he can sell ads next to the blog he’s written the past few months, but he’s not sure where to start.
  • 5. ONBOARDING VIA VISUAL AD INTERFACE VISION I wanted publishers to immediately experience the value in Skyscraper. Rather than push the user through an account creation before exposing the application, all Skyscraper required was a URL. We emulated the site in an iFrame and the publisher could immediately start dragging new Ad Spaces into their site. Not until they wanted to save their work did we prompt them to create an account. Transforming the old “copy/paste code snippets into your template” workflow into a visually intuitive, drag-and-drop interface helped us convert more publishers on their initial visit and gave us a quick reputation win in our users’ minds.
  • 6. ONBOARDING VIA VISUAL AD INTERFACE SCENARIO Jack types his URL into Skyscraper’s home page and clicks “Try it out!”. His site loads up with Skyscraper’s interface above it, and a modal window welcoming him appears. Jack clicks through a short walkthrough that has him create his first Ad Space—he learns the difference between an Ad Space and an advertisement. After dragging the newly created Ad Space into his website, he’s prompted for his email and a password to save his work. Creating an account, Jack is redirected to page that shows him how to install Skyscraper (a one-time process) on SquareSpace, his blogging platform (which Skyscraper silently detected). After the application confirms a successful installation, Jack is prompted to share how simple it was to set up Skyscraper.
  • 7. ONBOARDING VIA VISUAL AD INTERFACE PROCESS FLOW
  • 8. ONBOARDING VIA VISUAL AD INTERFACE IN BROWSER
  • 9. ONBOARDING VIA VISUAL AD INTERFACE IN BROWSER
  • 10. AUTOMATIC MEDIA KIT VISION The problem with Media Kits is twofold. They’re a chore to produce and keep current. Plus every publisher shapes their data differently, slowing down advertisers looking to make a purchase. What if we could solve both problems at once? Combining the Ad Space prices created by the user during their initial sign up, and an OAuth connection to Google Analytics, I designed an auto-updating Media Kit with ecommerce built-in. Skyscraper handled the payment processing and related communication, and the advertiser was prompted after purchase to upload their creative. Publishers had the tools to flesh out their Media Kit with additional data they felt pertinent to advertisers, and within 5-10 minutes, they could start accepting sales.
  • 11. AUTOMATIC MEDIA KIT SCENARIO After Morgan completes her initial sign-up, Skyscraper prompts her for access to Google Analytics. She’s weary, but the application says exactly what the data will be used for, and Google confirms that the application isn’t asking for additional permissions. She clicks Accept, and Skyscraper imports her Pageviews, Uniques, Time on Site and Average Pages Seen. She also gives Skyscraper access to her Twitter and Facebook Page accounts, so that her real-time Social Reach is displayed on her Media Kit. Morgan clicks to her Media Kit, where she changes the title and adds an introductory paragraph, cribbing from her back-and-forth emails with already interested advertisers. Her Ad Spaces are already listed with the correct pricing, and she likes how advertisers can drag the date sliders to dial in the right balance of time and exposure for their budget. Morgan returns to her dashboard where Skyscraper prompts her to share her Media Kit with interested advertisers and social media.
  • 12. AUTOMATIC MEDIA KIT PROCESS FLOW
  • 13. AUTOMATIC MEDIA KIT IN BROWSER
  • 14. AUTOMATIC MEDIA KIT IN BROWSER
  • 15. ORDERS DASHBOARD VISION Managing your site’s orders could be similar to playing SimCity. I wanted to create an interface where you could get a “thirtythousand foot view”; you’d be able to see far ahead in time and know where you need to focus your long-term sales efforts, but also see gaps in this week’s inventory that could be sold for additional revenue. Whenever a specific order needs your attention, it’s one click to dive down to “sea level” and get the full story. Gap Selling was a concept I wish we could have explored further. I wanted to take advantage of the existing OAuth connection to enable one-click social media promotion of small chunks of unsold inventory. Unfortunately it was not a high enough development priority so we transitioned to a table-based order dashboard in V2.
  • 16. ORDERS DASHBOARD SCENARIO Because Susan has a variety of small to mid-size advertisers purchasing in various time increments, she’s been struggling with the rote busywork it takes to manage when to enable specific ad campaigns, how much to bill each advertiser, and what percentage of her inventory is sold each month. Skyscraper’s 30K dashboard gives Susan an at-a-glance visual on which Ad Spaces have sold inventory, and where the gaps are that she can focus on selling. Susan hovers on any particular order to get a quick overview of how it is performing, and can always click through to a specific order’s management page. Skyscraper automatically manages displaying campaigns, processing payments—Susan receives a direct deposit with her earnings.
  • 17. ORDERS DASHBOARD WIREFRAME
  • 18. ORDERS DASHBOARD IN BROWSER (V1)
  • 19. ORDERS DASHBOARD IN BROWSER (V2)
  • 20. Jacob Reiff jacob@jacobreiff.com 503-360-6718 http://about.me/jacobreiff Additional work documents are available Download archive of assorted thoughts, sketches, mindmaps, wireframes    