http://cargo.scottpae.com Scott Pae / Designer Wed, 21 Mar 2012 01:24:46 +0000 http://cargo.scottpae.com en http://cargo.scottpae.com/On-patient http://cargo.scottpae.com/following/cargo.scottpae.com/On-patient Wed, 21 Mar 2012 01:24:46 +0000 Scott Pae / Designer 3047249 Project scope and documentation coming soon. <img src="http://payload37.cargocollective.com/1/4/156548/3047249/1.png" width="670" height="483" width_o="670" height_o="483" src_o="http://payload37.cargocollective.com/1/4/156548/3047249/1_o.png" data-mid="15538046" border="0" align="left"/> <img src="http://payload37.cargocollective.com/1/4/156548/3047249/2.png" width="670" height="487" width_o="670" height_o="487" src_o="http://payload37.cargocollective.com/1/4/156548/3047249/2_o.png" data-mid="15538048" border="0" align="left"/> <img src="http://payload37.cargocollective.com/1/4/156548/3047249/3.png" width="670" height="483" width_o="670" height_o="483" src_o="http://payload37.cargocollective.com/1/4/156548/3047249/3_o.png" data-mid="15538082" border="0" align="left"/> <img src="http://payload37.cargocollective.com/1/4/156548/3047249/4.png" width="670" height="483" width_o="670" height_o="483" src_o="http://payload37.cargocollective.com/1/4/156548/3047249/4_o.png" data-mid="15538189" border="0" align="left"/> <img src="http://payload37.cargocollective.com/1/4/156548/3047249/5.png" width="670" height="483" width_o="670" height_o="483" src_o="http://payload37.cargocollective.com/1/4/156548/3047249/5_o.png" data-mid="15542238" border="0" align="left"/> http://cargo.scottpae.com/Uber http://cargo.scottpae.com/following/cargo.scottpae.com/Uber Tue, 24 Jan 2012 18:53:32 +0000 Scott Pae / Designer 2666453 December 2011 Summary Please note that I did this project for fun and practice to explore mobile user interface guidelines and best practices. I sketched out a hypothetical user flow for the Uber iPhone application in Balsamiq, as well as a high fidelity mock that focused on hedonic qualities. I tried to keep in mind possible mode errors and task reduction. Sketches <img src="http://payload18.cargocollective.com/1/4/156548/2666453/uber-sketches-final.png" width="670" height="192" width_o="1770" height_o="509" src_o="http://payload18.cargocollective.com/1/4/156548/2666453/uber-sketches-final_o.png" data-mid="13523356" border="0" align="left"/> Visual design <img src="http://payload18.cargocollective.com/1/4/156548/2666453/uberhiresfinalfinal.png" width="640" height="960" width_o="640" height_o="960" src_o="http://payload18.cargocollective.com/1/4/156548/2666453/uberhiresfinalfinal_o.png" data-mid="13527114" border="0" align="left"/><img src="http://payload18.cargocollective.com/1/4/156548/2666453/iphone-uber-finalfinal.png" width="640" height="900" width_o="640" height_o="900" src_o="http://payload18.cargocollective.com/1/4/156548/2666453/iphone-uber-finalfinal_o.png" data-mid="13527160" border="0" align="left"/> http://cargo.scottpae.com/GigaOM http://cargo.scottpae.com/following/cargo.scottpae.com/GigaOM Tue, 24 Jan 2012 10:33:44 +0000 Scott Pae / Designer 2665357 January 2012 – Ongoing www.gigaom.com Summary The current GigaOM news website has typographic inconsistencies and contradictions across its various sections. The current structure of the site also does not allow for variation within the visual design that can be tailored for each section. For this reason, I thought a granular grid system should be introduced so that a) variation can be introduced into new sections and b) common elements can be grouped and shared across different sections. I established a grid system to provide visual and functional coherency across the GigaOM news websites. According to traffic logs, users seldom arrive directly to GigaOM's homepage. Users rather go directly to specific stories linked from social media sources or from search engines. I chose to use the article template page as the basis for the construction of the grid because of its high engagement from SEO and social media referrals. Objectives 1. Introduce visual tags to emphasize the section that the user is currently is on. 2. Introduce common widgets that promote new content discovery. 3. Standardize typography. 4. Redesign the interaction of the author / post date / # of comments tab bar in order to provide deeper and personalized author related content. Requirements and constraints 1. The template should accommodate a minimum screen resolution of 1024x768 pixels with a live area of ~ 960 x 650. 2. The structure of the page must accommodate an IAB standard 300x250 ad unit. 3. The completed design should reflect the objective and transparent tone of GigaOM. Sketches <img src="http://payload18.cargocollective.com/1/4/156548/2665357/sketch.jpg" width="670" height="330" width_o="670" height_o="330" src_o="http://payload18.cargocollective.com/1/4/156548/2665357/sketch_o.jpg" data-mid="13507195" border="0" align="left"/> Grid system <img src="http://payload18.cargocollective.com/1/4/156548/2665357/template.png" width="670" height="453" width_o="960" height_o="650" src_o="http://payload18.cargocollective.com/1/4/156548/2665357/template_o.png" data-mid="13507819" border="0" align="left"/> Typographic scale <img src="http://payload18.cargocollective.com/1/4/156548/2665357/template2_full.png" width="670" height="453" width_o="960" height_o="650" src_o="http://payload18.cargocollective.com/1/4/156548/2665357/template2_full_o.png" data-mid="13508100" border="0" align="left"/> Widget behavior <img src="http://payload18.cargocollective.com/1/4/156548/2665357/interactions.png" width="670" height="465" width_o="1400" height_o="972" src_o="http://payload18.cargocollective.com/1/4/156548/2665357/interactions_o.png" data-mid="13508958" border="0" align="left"/> High fidelity mock <img src="http://payload18.cargocollective.com/1/4/156548/2665357/hifi.png" width="670" height="1902" width_o="1024" height_o="2907" src_o="http://payload18.cargocollective.com/1/4/156548/2665357/hifi_o.png" data-mid="13508232" border="0" align="left"/> Thoughts Implementing this grid system will allow GigaOM to reuse and share common elements. Implementing such a structured design will also streamline the design and development for new features. The CSS will also be simplified, thus leading to a decreased page load time. http://cargo.scottpae.com/Bag-Borrow-or-Steal http://cargo.scottpae.com/following/cargo.scottpae.com/Bag-Borrow-or-Steal Tue, 10 Jan 2012 02:59:31 +0000 Scott Pae / Designer 2368519 Bag Borrow or Steal (bagborroworsteal.com) is a rental luxury goods company where customers can rent handbags and other luxury good items at a monthly membership fee similar to Netflix. The goal of this project was to drive more conversions to Bag Borrow or Steal's trial customer base while maintaining and reinforcing the Bag Borrow or Steal brand. Different selling angles were brainstormed by conducting audience research from sources such as adplanner, quantcast, and compete. The 3 main selling angles were boiled down to: a) Emphasis on boosting the customer's status with budget glamor b) Emphasis on only the Free Trial c) Emphasis on Free Trial, ability to purchase the rented luxury item, and access to discount private sales Different headlines, videos, photographs, benefits/bullet points, press quotes, press logos, and call to actions were tested using Visual Website Optimizer's ab split testing software. A clear converting winner that was well below the given customer acquisition cost was then found. Display advertisements were also optimized in the same fashion. Metrics used to guide the success of this campaign included ad ctr, bounce rate, landing page click through rate, and conversion rate. My role as project lead involved research, strategy, design, front end development, and funnel analysis. http://cargo.scottpae.com/Meebooth http://cargo.scottpae.com/following/cargo.scottpae.com/Meebooth Wed, 16 Nov 2011 20:48:29 +0000 Scott Pae / Designer 2317483 Meebooth (a play on words of meebo) was a web application that was part of the Good Operating System (deprecated) app family that was co-branded and bundled with Ezonics Cameras. I designed two versions of the software: one for Linux (in green) and another for windows (in blue). The cameras were distributed by Walmart. My role as lead designer involved ui, ux, prototyping, and all aspects of visual design. <img src="http://payload.cargocollective.com/1/4/156548/2317483/meebo-green.jpg" width="670" height="529" width_o="670" height_o="529" src_o="http://payload.cargocollective.com/1/4/156548/2317483/meebo-green_o.jpg" data-mid="11701005" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2317483/meebooth-blue.jpg" width="670" height="529" width_o="670" height_o="529" src_o="http://payload.cargocollective.com/1/4/156548/2317483/meebooth-blue_o.jpg" data-mid="11645477" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2317483/gCam.jpg" width="670" height="635" width_o="670" height_o="635" src_o="http://payload.cargocollective.com/1/4/156548/2317483/gCam_o.jpg" data-mid="11637509" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2317483/biz.jpg" width="670" height="593" width_o="670" height_o="593" src_o="http://payload.cargocollective.com/1/4/156548/2317483/biz_o.jpg" data-mid="11638358" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2317483/closeup.jpg" width="670" height="593" width_o="670" height_o="593" src_o="http://payload.cargocollective.com/1/4/156548/2317483/closeup_o.jpg" data-mid="11638360" border="0" align="left"/> http://cargo.scottpae.com/American-Apparel http://cargo.scottpae.com/following/cargo.scottpae.com/American-Apparel Fri, 04 Nov 2011 23:36:13 +0000 Scott Pae / Designer 2208839 About the Company American Apparel is a vertically integrated clothing manufacturer in the United States; best known for making basic, solid-color cotton knitwear such as T-shirts and underwear. The company was founded by Dov Charney in 1991. Visual Language American Apparel's clothing typically uses bright and solid colors. Its visual language relies heavily on the use of a grid and the Helvetica typeface. The brand itself is unisex, but caters to a very specific demographic indigenous to Los Angeles. American Apparel conveys three primary ideas through their advertising efforts. First, they communicate the tight, lean, and sexy fit that their products are known for. Second, they illustrate which culture of people wear its clothing. These people are conveyed as 20-30 year old individuals who value independent thinking, creativity, sexual rights, gender neutrality, intelligence, counter-culture, and progressive politics. Third, the models within the photographs are in risqué and revealing poses. These models suggests a sense of spontaneity, impulsivity, and liberation, all of which challenge the conservative ethos of high luxury and redefines "ordinary" as being sexy once again. Objectives American Apparel is a unique and interesting company exploring the intersection between art and fashion. I therefore wanted to build a video for them, since they did not produce any video work for their company. My goal then was to build a 30 second video in order to introduce two new models: Sofia and Stryder. Each model would be representing their respective genders line: Standard American and Classic Girl. I focus on animating and personifying the camera. Final Video Audio Credit: Strokes – Hard to Explain http://cargo.scottpae.com/Catcher-in-the-Rye http://cargo.scottpae.com/following/cargo.scottpae.com/Catcher-in-the-Rye Fri, 04 Nov 2011 23:36:13 +0000 Scott Pae / Designer 2208854 A 12 week exploration in typography using the Grotesque font family. Weeks progressed from using only black type on white canvas, to white type on black canvas, to the use of 1-2 spot colors. The goal of the project was to design a book cover given one restraint: to utilize the very first paragraph of text from the novel, Catcher in the Rye, by J.D. Salinger. The culmination of this typographic exploration was a book cover that marketed the novel as a literary classic using the literary acclaim of its author. <img src="http://payload.cargocollective.com/1/4/156548/2208854/front.jpg" width="486" height="585" width_o="486" height_o="585" src_o="http://payload.cargocollective.com/1/4/156548/2208854/front_o.jpg" data-mid="11522171" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/side.jpg" width="641" height="471" width_o="641" height_o="471" src_o="http://payload.cargocollective.com/1/4/156548/2208854/side_o.jpg" data-mid="11522362" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/spine.jpg" width="400" height="531" width_o="400" height_o="531" src_o="http://payload.cargocollective.com/1/4/156548/2208854/spine_o.jpg" data-mid="11522172" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/back.jpg" width="471" height="641" width_o="471" height_o="641" src_o="http://payload.cargocollective.com/1/4/156548/2208854/back_o.jpg" data-mid="11522174" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/process-catcher.jpg" width="670" height="726" width_o="800" height_o="867" src_o="http://payload.cargocollective.com/1/4/156548/2208854/process-catcher_o.jpg" data-mid="11571082" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/3.jpg" width="670" height="726" width_o="670" height_o="726" src_o="http://payload.cargocollective.com/1/4/156548/2208854/3_o.jpg" data-mid="11571098" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/4.jpg" width="669" height="726" width_o="669" height_o="726" src_o="http://payload.cargocollective.com/1/4/156548/2208854/4_o.jpg" data-mid="11574420" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/7.jpg" width="669" height="726" width_o="669" height_o="726" src_o="http://payload.cargocollective.com/1/4/156548/2208854/7_o.jpg" data-mid="11571103" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208854/9.jpg" width="670" height="726" width_o="670" height_o="726" src_o="http://payload.cargocollective.com/1/4/156548/2208854/9_o.jpg" data-mid="11571105" border="0" align="left"/> http://cargo.scottpae.com/Jobfuse http://cargo.scottpae.com/following/cargo.scottpae.com/Jobfuse Fri, 04 Nov 2011 23:36:11 +0000 Scott Pae / Designer 2105769 Jobfuse.com is a job search website. Users can search for and save jobs. Once a user has registered, he or she can also opt in to receive daily job alerts. Jobfuse licenses multiple third party job databases and also utilizes sponsored job listing advertisements from Indeed.com in order to aggregate the maximum number of jobs possible for users. My role involved ab testing, media buying, information architecture, user experience, and visual design. <img src="http://payload.cargocollective.com/1/4/156548/2105769/55.jpg" width="670" height="410" width_o="670" height_o="410" src_o="http://payload.cargocollective.com/1/4/156548/2105769/55_o.jpg" data-mid="11641351" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2105769/1.jpg" width="670" height="528" width_o="670" height_o="528" src_o="http://payload.cargocollective.com/1/4/156548/2105769/1_o.jpg" data-mid="11641187" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2105769/2.jpg" width="670" height="640" width_o="670" height_o="640" src_o="http://payload.cargocollective.com/1/4/156548/2105769/2_o.jpg" data-mid="11641188" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2105769/3.jpg" width="670" height="603" width_o="700" height_o="630" src_o="http://payload.cargocollective.com/1/4/156548/2105769/3_o.jpg" data-mid="11641191" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2105769/jf-2.jpg" width="670" height="691" width_o="670" height_o="691" src_o="http://payload.cargocollective.com/1/4/156548/2105769/jf-2_o.jpg" data-mid="11646092" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2105769/compete.jpg" width="670" height="410" width_o="670" height_o="410" src_o="http://payload.cargocollective.com/1/4/156548/2105769/compete_o.jpg" data-mid="11676230" border="0" align="left"/> http://cargo.scottpae.com/Zeeto-Track http://cargo.scottpae.com/following/cargo.scottpae.com/Zeeto-Track Fri, 04 Nov 2011 23:36:09 +0000 Scott Pae / Designer 2102067 Scope Zeeto is a quantitative marketing agency who helps other companies acquire new customers through its publishing partners (affiliates). In order for Zeeto and its affiliates to measure the effectiveness of their efforts, a proprietary tracking platform had to be designed. The goal of the project was to design an intuitive, simple, and clear user interface and experience to record and display important marketing metrics. My role as lead designer involved: research, prototyping, usability testing, design, and front end development. <img src="http://payload.cargocollective.com/1/4/156548/2102067/s11.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/s11_o.jpg" data-mid="11675887" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2102067/1statsoverlay.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/1statsoverlay_o.jpg" data-mid="11675913" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2102067/s2.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/s2_o.jpg" data-mid="11675917" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2102067/s2222.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/s2222_o.jpg" data-mid="11675896" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2102067/3payments.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/3payments_o.jpg" data-mid="11649521" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2102067/4myaccount.jpg" width="670" height="485" width_o="670" height_o="485" src_o="http://payload.cargocollective.com/1/4/156548/2102067/4myaccount_o.jpg" data-mid="11649752" border="0" align="left"/> Research My research involved studying how a typical affiliate conducted his or her business. This is what I learned. 1. Affiliates earn revenue every time a visitor to his or her website performs an action. A typical action involves clicking on a link and filling out a registration form, subscribing to a mailing list, or purchasing an item or service. 2. Affiliate links are generated and given to affiliates which are installed on their web properties (informational / resource websites) 3. Variables are passed in the form of "?subid=[number]" at the end of the generated affiliate link. 4. Multiple subids are then tracked under one affiliate link in order to track multiple channels of web traffic and for a/b split testing. The key metrics that affiliates use to measure the successes or failures of a campaign include: clicks, unique clicks, leads, EPC (earnings per click = uniques / total revenue), Leads, CR (conversion rate = leads / uniques), CPA (cost per acquisition), and total revenues (leads * CPA). Design and Front end Development A rough workable prototype was released where user feedback was collected via Click Tale in the form of recorded videos, heat maps, and click maps. User feedback was then implemented into the final release using html, css, and jQuery. http://cargo.scottpae.com/Dead-Celebrity-Society http://cargo.scottpae.com/following/cargo.scottpae.com/Dead-Celebrity-Society Fri, 04 Nov 2011 04:15:05 +0000 Scott Pae / Designer 2208843 Scope I designed a pair of foldable posters (34" x 22") to celebrate the life of a dead celebrity given specific constraints. The constraints of the project involved using keywords taken from a page of text from a dead celebrity's biography corresponding to the age at which he died (83) as the initial source of research. My goal then, was to retell this dead celebrity's story with image and type without directly revealing his name or photograph. This is why certain parts of text found on the poster are stamped out in green. The type was set in Goudy, an American typeface released in 1915 known for its legibility, grace, and balance. <img src="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-1.jpg" width="670" height="427" width_o="670" height_o="427" src_o="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-1_o.jpg" data-mid="11478636" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-2.jpg" width="670" height="427" width_o="670" height_o="427" src_o="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-2_o.jpg" data-mid="11478638" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-3.jpg" width="670" height="427" width_o="670" height_o="427" src_o="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-3_o.jpg" data-mid="11478640" border="0" align="left"/><img src="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-4.jpg" width="670" height="427" width_o="670" height_o="427" src_o="http://payload.cargocollective.com/1/4/156548/2208843/carnegie-4_o.jpg" data-mid="11478642" border="0" align="left"/> Notes The primary source of research and inspiration for this project came from the biography, Andrew Carnegie by David Nasaw, specifically for its wealth of personal letters and insights written by Carnegie himself, as well as its objectivity and historical depth. In the biography, Nasaw explains how Carnegie made his early fortune and what prompted him to give it all away, how he was drawn into the campaign first against American involvement in the Spanish-American War and then for international peace, and how he used his friendships with presidents and prime ministers to try to pull the world back from the brink of disaster.