http://kathrynstorm.com Kathryn Storm, User Experience Designer Sun, 03 Feb 2013 23:11:28 +0000 http://kathrynstorm.com en http://kathrynstorm.com/Anatomy-of-a-Buy-Box http://kathrynstorm.com/following/kathrynstorm.com/Anatomy-of-a-Buy-Box Sun, 03 Feb 2013 23:11:28 +0000 Kathryn Storm, User Experience Designer 4908615 The buy box is a widget on the Amazon product detail page that defines a purchase through price, quantity, and shipping. With the introduction of the wine buy box, which has a pointed focus on how wineries sell their product, how might this change the experience for other categories? Exploration to scale the wine buy box design for current, future, and blue sky categories. Using the metaphor of anatomy, breaking down the buy box by into its most basic components and focusing on category needs with particular attention to the most dynamic sections, (1) Unit Detail and (2) Inventory. The document provides a a guide for internal category teams to structure and interactions. Anatomy of a wine buy box, In context, and shipping detail interactions <img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-a.gif" width="600" height="369" width_o="600" height_o="369" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-a_o.gif" data-mid="26257079" border="0" align="left"/> Unit Detail Promotions, Sub-promotions, Interactions, and In context <img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-01.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-01_o.jpg" data-mid="26256715" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-02.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-02_o.jpg" data-mid="26256713" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-03.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-03_o.jpg" data-mid="26256712" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-04.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-04_o.jpg" data-mid="26256711" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-05.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-05_o.jpg" data-mid="26256710" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-06.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-06_o.jpg" data-mid="26256709" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-07.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-07_o.jpg" data-mid="26256708" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-08.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-08_o.jpg" data-mid="26256705" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-09.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-09_o.jpg" data-mid="26256704" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-10.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-10_o.jpg" data-mid="26256703" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-11.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-ud-11_o.jpg" data-mid="26256701" border="0" align="left"/> Inventory Messaging and interactive needs, Primary Components, Secondary Components, and In context <img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-01.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-01_o.jpg" data-mid="26257112" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-02.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-02_o.jpg" data-mid="26257110" border="0" align="left"/><img src="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-03.jpg" width="600" height="370" width_o="600" height_o="370" src_o="http://payload130.cargocollective.com/1/6/216563/4908615/aoabb-i-03_o.jpg" data-mid="26257109" border="0" align="left"/> The buy box is a widget on the Amazon product detail page that defines a purchase through price, quantity, and shipping. With the introduction of the wine buy box,... http://kathrynstorm.com/Case-Study-Character-Creator http://kathrynstorm.com/following/kathrynstorm.com/Case-Study-Character-Creator Thu, 20 Dec 2012 16:43:53 +0000 Kathryn Storm, User Experience Designer 4642653 A self-directed, ongoing project investigating and supporting a character creation system for a tabletop role-playing game such as Pathfinder for larger mobile/devices. Design is informed through recurrent iteration and research. Goals: (1) Guide a novice to casual gamer through character creation for a new campaign (2) Provide moderate context for extensive attributes and terminology with the intention of introducing game mechanics (3) Accommodate campaign/character management Deliverable Schedule I. Personas II. Narrative journey map III. User case and task flow IV. Information Architecture V. Wireframes VI. Mockups VII. A/B test proposal VIII. Documentation IX. Prototype I. Personas The result of a process investigating users and their goals. The personas here are grouped by objectives, attitudes, and age. Objectives and attitude: to create characters, independently, for an upcoming campaign without being overwhelmed by game manuals and the need for extensive knowledge. To increase knowledge of game mechanics, expectations, and scenarios through character build. Age: 20's - 30's. <img src="http://payload117.cargocollective.com/1/6/216563/4642653/personas_900.png" width="800" height="600" width_o="800" height_o="600" src_o="http://payload117.cargocollective.com/1/6/216563/4642653/personas_o.png" data-mid="24718311" border="0" align="left"/> A self-directed, ongoing project investigating and supporting a character creation system for a tabletop role-playing game such as Pathfinder for larger... http://kathrynstorm.com/Mobile-Selling http://kathrynstorm.com/following/kathrynstorm.com/Mobile-Selling Thu, 29 Nov 2012 13:01:32 +0000 Kathryn Storm, User Experience Designer 4451267 Amazon Marketplace business leaders want to build a mobile app that will serve seller "task and check" needs from the Amazon selling platform, Seller Central. At a high level, the mobile app will (1) support actionable items for order fulfillment and re-pricing and have the ability to (2) check vital analytics and seller account health through alerts. Role: visual, interaction, and user experience. The final deliverables shown below support the business proposal and represent four days of work while connecting daily with project stakeholders. • User statements and workflow scenario diagram • Screenflows and interactions from push notification and from app launch for managing both Take Action tasks and viewing Alerts. <img src="http://payload107.cargocollective.com/1/6/216563/4451267/121109-reprice-workflows_900.jpg" width="700" height="398" width_o="700" height_o="398" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/121109-reprice-workflows_o.jpg" data-mid="23599919" border="0" align="left"/> Take Action <img src="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-from-push_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-from-push_o.png" data-mid="23600836" border="0" align="left"/><img src="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-launch-home_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-launch-home_o.png" data-mid="23600862" border="0" align="left"/><img src="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-nav_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-nav_o.png" data-mid="23600870" border="0" align="left"/><img src="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-interactions_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-interactions_o.png" data-mid="23600855" border="0" align="left"/><img src="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-interactions-1_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/takeaction-interactions-1_o.png" data-mid="23600845" border="0" align="left"/> Alerts <img src="http://payload107.cargocollective.com/1/6/216563/4451267/alerts-launch-home_900.png" width="900" height="460" width_o="2048" height_o="1047" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/alerts-launch-home_o.png" data-mid="23600976" border="0" align="left"/><img src="http://payload107.cargocollective.com/1/6/216563/4451267/alerts-interactions_900.png" width="900" height="461" width_o="2048" height_o="1049" src_o="http://payload107.cargocollective.com/1/6/216563/4451267/alerts-interactions_o.png" data-mid="23600966" border="0" align="left"/> Amazon Marketplace business leaders want to build a mobile app that will serve seller "task and check" needs from the Amazon selling platform, Seller Central. At a... http://kathrynstorm.com/HappyCow http://kathrynstorm.com/following/kathrynstorm.com/HappyCow Thu, 22 Mar 2012 12:29:09 +0000 Kathryn Storm, User Experience Designer 3058954 Initial sprint contract to redesign a review and local search site seeking to increase the number of registered users, their engagement, and position it at the forefront of the market. Challenge: Overall: Increase user engagement through reviews, community, and social. Incite content seeding through social channels. Elevate and reposition brand. Content audit. Current: Resolve multiple search based on backend constraints, revisit information architecture and content in order to meet user needs and behavior, and lower barriers to registration. Registration considerations: Understanding how users engage with their community both online and off, motivations for creating an account, what signals credibility amongst users, and what can be asked for at registration without risking abandonment. First sprint: Research included site audit, complimenting quantitative data with qualitative investigation such as card sorting to organize a solid and focused site architecture, user interviews, user task flows. Based on research and business requirements, focus was set on redesigning experiences for registration, listings, and addressing search. Design extended to visual and brand experience. Role: lead visual and user experience designer. Design team structure consisted of a designer and engineer duo. Additionally, advised and brainstormed with the executive team on marketing, mobile, and product design. Home page wireframes to visual design <img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-1.jpg" width="600" height="482" width_o="600" height_o="482" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-1_o.jpg" data-mid="26158992" border="0" align="left"/><img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-2.jpg" width="600" height="482" width_o="600" height_o="482" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-2_o.jpg" data-mid="26158997" border="0" align="left"/> Process highlights Home page wireframe iterations, login interaction states, and documentation <img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-01.jpg" width="500" height="519" width_o="500" height_o="519" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-01_o.jpg" data-mid="26159287" border="0" align="left"/><img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-03.jpg" width="500" height="519" width_o="500" height_o="519" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-03_o.jpg" data-mid="26159282" border="0" align="left"/><img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-02.jpg" width="500" height="519" width_o="500" height_o="519" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-02_o.jpg" data-mid="26159283" border="0" align="left"/><img src="http://payload37.cargocollective.com/1/6/216563/3058954/hc-04.jpg" width="500" height="519" width_o="500" height_o="519" src_o="http://payload37.cargocollective.com/1/6/216563/3058954/hc-04_o.jpg" data-mid="26159280" border="0" align="left"/> Initial sprint contract to redesign a review and local search site seeking to increase the number of registered users, their engagement, and position it at the... http://kathrynstorm.com/Interactive-Chats http://kathrynstorm.com/following/kathrynstorm.com/Interactive-Chats Mon, 19 Mar 2012 19:55:18 +0000 Kathryn Storm, User Experience Designer 3038792 Branding and motion design for AIGA San Francisco's Interactive Chats series. <img src="http://payload36.cargocollective.com/1/6/216563/3038792/e18a95622fda519918453ada1610ed6c.jpeg" width="500" height="372" width_o="500" height_o="372" src_o="http://payload36.cargocollective.com/1/6/216563/3038792/e18a95622fda519918453ada1610ed6c_o.jpeg" data-mid="15495406" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038792/da3cf146e96c247b7ddc1320a1dfec91.png" width="600" height="443" width_o="600" height_o="443" src_o="http://payload36.cargocollective.com/1/6/216563/3038792/da3cf146e96c247b7ddc1320a1dfec91_o.png" data-mid="15495410" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038792/f14a061ad7a45e11b1c5519b51dd8896.jpeg" width="600" height="853" width_o="600" height_o="853" src_o="http://payload36.cargocollective.com/1/6/216563/3038792/f14a061ad7a45e11b1c5519b51dd8896_o.jpeg" data-mid="15495411" border="0" align="left"/> Branding and motion design for AIGA San Francisco's Interactive Chats series. http://kathrynstorm.com/Force-for-Good http://kathrynstorm.com/following/kathrynstorm.com/Force-for-Good Mon, 19 Mar 2012 19:50:25 +0000 Kathryn Storm, User Experience Designer 3038768 A Force for Good connects lawyers and people in need to Los Angeles' Public Counsel, the largest not-for-profit law firm of its kind in the country. The use cases for the mobile app allow for lawyers to (1) view current Public Counsel cases, (2) select a case or cases they are interested in representing, and (3) refer a case that fits Public Counsel's mission. Images below represent workflow and samples of visual design. <img src="http://payload36.cargocollective.com/1/6/216563/3038768/Screen Shot 2012-12-04 at 10.53.10 AM.png" width="400" height="489" width_o="400" height_o="489" src_o="http://payload36.cargocollective.com/1/6/216563/3038768/Screen Shot 2012-12-04 at 10.53.10 AM_o.png" data-mid="24195195" border="0" align="left"/> <img src="http://payload36.cargocollective.com/1/6/216563/3038768/pc-1.png" width="400" height="548" width_o="400" height_o="548" src_o="http://payload36.cargocollective.com/1/6/216563/3038768/pc-1_o.png" data-mid="24195442" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038768/pc-2.png" width="400" height="548" width_o="400" height_o="548" src_o="http://payload36.cargocollective.com/1/6/216563/3038768/pc-2_o.png" data-mid="24195443" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038768/pc-3.png" width="400" height="548" width_o="400" height_o="548" src_o="http://payload36.cargocollective.com/1/6/216563/3038768/pc-3_o.png" data-mid="24195444" border="0" align="left"/> A Force for Good connects lawyers and people in need to Los Angeles' Public Counsel, the largest not-for-profit law firm of its kind in the country. The use cases... http://kathrynstorm.com/Bear-Girl-Whistle http://kathrynstorm.com/following/kathrynstorm.com/Bear-Girl-Whistle Mon, 19 Mar 2012 19:41:48 +0000 Kathryn Storm, User Experience Designer 3038728 Application for iOS that dually serves as a survival utility and social engagement tool. The Bear portion of the application supports the confusion of bears through audio to be used while out in the wild. The Girl portion supports a unique and humorous way to engage with women in social settings. The primary functions include audio which are triggered by upward motion gestures specific to each setting. The Bear whistle is triggered by toggling the selection and the gesture of putting one’s arms over the head, a natural gesture suggested by wildlife suvivalists to show dominance or appear large. The Girl whistle activated by the toggle and upward motion gesture of “call me”, putting the mobile device up to the ear. The social feature of the Girl whistle allows users to check in to venues and incite participation from both males and females, wingman support and exchange of contact information, respectively. Further achievements may be unlocked by frequency of use. The meager monetary gain of the application is donated 100% to a wildlife foundation. <img src="http://payload36.cargocollective.com/1/6/216563/3038728/3ba86520a6a00cfd9c80e0cad3678d29.png" width="577" height="428" width_o="577" height_o="428" src_o="http://payload36.cargocollective.com/1/6/216563/3038728/3ba86520a6a00cfd9c80e0cad3678d29_o.png" data-mid="15495119" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038728/2e28f230f19ba2f1747863fda572024d.png" width="600" height="611" width_o="600" height_o="611" src_o="http://payload36.cargocollective.com/1/6/216563/3038728/2e28f230f19ba2f1747863fda572024d_o.png" data-mid="15495127" border="0" align="left"/> Application for iOS that dually serves as a survival utility and social engagement tool. The Bear portion of the application supports the confusion of bears through... http://kathrynstorm.com/RR http://kathrynstorm.com/following/kathrynstorm.com/RR Mon, 19 Mar 2012 19:37:11 +0000 Kathryn Storm, User Experience Designer 3038713 Portfolio site with minimal interactions: scrolling mosaic project navigation and inquiries. Role: visual and user experience designer Visit the site <img src="http://payload36.cargocollective.com/1/6/216563/3038713/75a4f79f07ad5267d66978a450cbb72f.png" width="600" height="378" width_o="600" height_o="378" src_o="http://payload36.cargocollective.com/1/6/216563/3038713/75a4f79f07ad5267d66978a450cbb72f_o.png" data-mid="15494760" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038713/2fee3842b8cb5563b2c290df6a659fe2.jpeg" width="600" height="378" width_o="600" height_o="378" src_o="http://payload36.cargocollective.com/1/6/216563/3038713/2fee3842b8cb5563b2c290df6a659fe2_o.jpeg" data-mid="15494763" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038713/867d2f3c13e6093be15962b963004ba0.jpeg" width="600" height="378" width_o="600" height_o="378" src_o="http://payload36.cargocollective.com/1/6/216563/3038713/867d2f3c13e6093be15962b963004ba0_o.jpeg" data-mid="15494766" border="0" align="left"/> Portfolio site with minimal interactions: scrolling mosaic project navigation and inquiries. Role: visual and user experience designer Visit the site http://kathrynstorm.com/FoodBox http://kathrynstorm.com/following/kathrynstorm.com/FoodBox Mon, 19 Mar 2012 19:26:07 +0000 Kathryn Storm, User Experience Designer 3038623 An interactive recipe catalog. Cross-platform tablet application that provides a resource for the health-conscious male demographic with both existing content and a recipe creation wizard. Feature proposals include video, exportable shopping lists, social sign-in and sharing. Currently, design is a weekly event consisting of cooking, recipe photography, design, and development. Considerations are also collected from on-going user interviews and documenting content and behavior by diagramming user task flows. Current challenge: Guiding a user through recipe documentation that will be easy to follow and understand upon retrieval, or after sharing with another user. Below screenshots document information architecture, screen flow, and interactions. Role: visual and user experience designer, co-strategy. Team structure consists of one designer and one developer. <img src="http://payload36.cargocollective.com/1/6/216563/3038623/0a79a1c95755c37bc5d8d9a7c90a29c2.jpeg" width="600" height="235" width_o="600" height_o="235" src_o="http://payload36.cargocollective.com/1/6/216563/3038623/0a79a1c95755c37bc5d8d9a7c90a29c2_o.jpeg" data-mid="15494298" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038623/c30ea5bea89b638e7cfbeb071e01bbfe.jpeg" width="600" height="195" width_o="600" height_o="195" src_o="http://payload36.cargocollective.com/1/6/216563/3038623/c30ea5bea89b638e7cfbeb071e01bbfe_o.jpeg" data-mid="15494303" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038623/871caf97e9d3cd60996e2660ec955925.jpeg" width="600" height="600" width_o="600" height_o="600" src_o="http://payload36.cargocollective.com/1/6/216563/3038623/871caf97e9d3cd60996e2660ec955925_o.jpeg" data-mid="15494304" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038623/f56a131ea8718331914475fde17dac3d.jpeg" width="600" height="600" width_o="600" height_o="600" src_o="http://payload36.cargocollective.com/1/6/216563/3038623/f56a131ea8718331914475fde17dac3d_o.jpeg" data-mid="15494306" border="0" align="left"/> An interactive recipe catalog. Cross-platform tablet application that provides a resource for the health-conscious male demographic with both existing content and a... http://kathrynstorm.com/Shop-for-Japan http://kathrynstorm.com/following/kathrynstorm.com/Shop-for-Japan Mon, 19 Mar 2012 19:12:42 +0000 Kathryn Storm, User Experience Designer 3038497 With a 24-hour design and development phase, and week-long iterations for user experience, Shop for Japan aimed to connect locals with local businesses to provide global support for Japanese tsunami relief. Challenge: Make participation easy and intuitive for both businesses and locals, foster trust, and deliver on an aggressive timeline. Role: visual and user experience designer, co-concept/strategy. Team structure consisted of two designers, three engineers, and two business consultants. Postmortem: Based on feedback, mobile support may have added value to the use case of connecting locals out in the field to participating local businesses of interest. Two directions for mobile support: (1) responsive site, (2) product such as a native app whose proceeds would further benefit the cause. This project also inspired the opportunity to broaden impact by serving as a high level local-to-global causes platform. Watch the video <img src="http://payload36.cargocollective.com/1/6/216563/3038497/ks-shopforjapan-v2.png" width="430" height="752" width_o="430" height_o="752" src_o="http://payload36.cargocollective.com/1/6/216563/3038497/ks-shopforjapan-v2_o.png" data-mid="23094576" border="0" align="left"/><img src="http://payload36.cargocollective.com/1/6/216563/3038497/ks-shopforjapan-02.png" width="500" height="583" width_o="500" height_o="583" src_o="http://payload36.cargocollective.com/1/6/216563/3038497/ks-shopforjapan-02_o.png" data-mid="15493935" border="0" align="left"/> With a 24-hour design and development phase, and week-long iterations for user experience, Shop for Japan aimed to connect locals with local businesses to provide...