https://studiostrikeout.com Studio Strikeout Tue, 27 Jul 2021 18:15:12 +0000 https://studiostrikeout.com en https://studiostrikeout.com/Websites-and-Apps Fri, 15 Mar 2019 21:44:26 +0000 Studio Strikeout https://studiostrikeout.com/Websites-and-Apps Websites and Apps https://studiostrikeout.com/NYC-Climate-Action-Tracker Tue, 13 Jul 2021 19:14:50 +0000 Studio Strikeout https://studiostrikeout.com/NYC-Climate-Action-Tracker NYC Climate Action Tracker On Earth Day 2020, the New York League of Conservation Voters Education Fund (NYLCVEF) launched the NYC Climate Action Tracker: a website that measured New York City’s progress toward achieving its ambitious climate goals. Conceived as part of a campaign to elevate climate action as a top priority for voters, elected officials, and political candidates, the website examined 13 goals that the City had committed to achieve under Mayor de Blasio’s OneNYC plan. The tracker was designed to be user-friendly, visually appealing, and educational. It was also developed to be easily managed and updated by internal staff. I was responsible for finding, hiring, and overseeing a product team that would work for a limited budget; editing and uploading the content; and creating and executing the digital campaign around the tracker. <img width="1200" height="2219" width_o="1200" height_o="2219" data-src="https://freight.cargo.site/t/original/i/fc9a7c758c239d781e5389ec3f12784b543da34fdca06b66339aaa63e1f2f848/nyc-climate-screenshot1.png" data-mid="114275225" border="0" src="https://freight.cargo.site/w/1000/i/fc9a7c758c239d781e5389ec3f12784b543da34fdca06b66339aaa63e1f2f848/nyc-climate-screenshot1.png" /><img width="1200" height="2635" width_o="1200" height_o="2635" data-src="https://freight.cargo.site/t/original/i/deb7165dccdcb810c3ddd49be305fb39a1fedecc441b8f0bfbcfe255c88ef174/nyc-climate-screenshot2.png" data-mid="114275800" border="0" src="https://freight.cargo.site/w/1000/i/deb7165dccdcb810c3ddd49be305fb39a1fedecc441b8f0bfbcfe255c88ef174/nyc-climate-screenshot2.png" /> https://studiostrikeout.com/Art-in-DUMBO-Website-Redesign Tue, 27 Jul 2021 18:15:12 +0000 Studio Strikeout https://studiostrikeout.com/Art-in-DUMBO-Website-Redesign Art in DUMBO Website Redesign Art in DUMBO promotes art events, galleries, and residency programs in Brooklyn’s DUMBO neighborhood. I oversaw a redesign of their website to improve the art discovery experience for visitors, deepen engagement with the art community inside and outside the neighborhood, and apply a new visual identity for the brand. My responsibilities included writing the project brief, vetting competing agencies, advising the project team on design and technical requirements, and leading site QA and launch. https://studiostrikeout.com/SOM-Website-Redesign Sat, 09 Mar 2019 20:40:03 +0000 Studio Strikeout https://studiostrikeout.com/SOM-Website-Redesign SOM Website Redesign I led a redesign of SOM's website to express the company’s design ethos and provide a flexible, enduring platform for its content. This would help drive new business and recruit top talent. All images courtesy SOM and AREA 17 The Challenge SOM’s website needed a better structure to effectively tell the company’s story. Flat, rigid page templates were preventing my teammates from creating an engaging narrative experience that could attract clients and talent to SOM. On top of that, the website’s homogeneity was disorienting users, and its lack of hierarchy was overwhelming them with options. We needed to create a website that would not only resolve the issues of the existing product, but also reflect SOM's ethos as a design firm. That meant creating a website that would be ambitious, forward-thinking, clear, legible, sustainable, and enduring. <img width="1212" height="1233" width_o="1212" height_o="1233" data-src="https://freight.cargo.site/t/original/i/56751f4d91e471b65bab081d65133e0f59b976956dbb9a7fca6a768a43039ac9/website-old.jpg" data-mid="37220296" border="0" src="https://freight.cargo.site/w/1000/i/56751f4d91e471b65bab081d65133e0f59b976956dbb9a7fca6a768a43039ac9/website-old.jpg" /> som.com, circa January 2017 A Plan of Action Before the project began, I surveyed staff and collated prior feedback on the website to gather requirements and create a vision for a redesign. This was turned into a memo to support our proposal and budget for the project. With our plan approved, I wrote an RFP that we issued to a small group of digital product agencies. I reviewed agency proposals and helped SOM select and hire AREA 17, negotiating the project’s scope, budget, and schedule with their team. I became SOM’s project manager for the redesign, working to build teams and define staff roles before the project started. Later on, I continued shaping the vision for the product, provided detailed feedback on deliverables, ran meetings, negotiated differences between SOM and the agency, and signed off on agency work. Designing the SolutionAt the outset of the project, we confirmed the website’s objectives: to attract new business, recruit top talent, strengthen SOM’s leadership in the design industry, and establish a sustainable and enduring digital platform for the company. We also confirmed our target audiences: prospective clients and employees, people and businesses in the industry, and SOM’s current employees.To achieve our objectives with SOM’s target audiences, we figured that the website would need to 1) surface relevant work, 2) promote our ideas, 3) express our culture and values, 4) showcase what we’ve been doing recently, and 5) provide clear points of contact. Then, for each of these five tasks, we generated hypotheses to test through the architecture and design of the site. For example, to surface relevant work, we thought that the website should: Use Work to organize Expertise and Project pages, and lead with curated content to encourage discovery.Enable discovery by presenting related content on Work, Expertise, and Project pages. Have a focused project list on Expertise pages, with the ability to cross-filter results.Have a more robust search tool. Project Archive: Hypotheses, Wireframes, and Designs Below is a selection of key pages that illustrate our approach to the website redesign. Navigation and Sitemap Limit navigation to five entry points.Create a Work section, add it to the navigation, and put Expertise and Projects under that section.Add a Careers entry point to the navigation.Organize Ideas around topics.Add a dedicated Events filter under News.Add Office landing and detail pages under About.Add a newsletter sign-up entry point to the footer.Add Contact, News, Press, and Careers links to the footer. <img width="2260" height="1360" width_o="2260" height_o="1360" data-src="https://freight.cargo.site/t/original/i/095074de1b1ef7367cb1bdb361ad962019a724180f01c7ea7cb06923aa7d2910/99_SOM_sitemap-2.png" data-mid="37220291" border="0" src="https://freight.cargo.site/w/1000/i/095074de1b1ef7367cb1bdb361ad962019a724180f01c7ea7cb06923aa7d2910/99_SOM_sitemap-2.png" /> Home Lead with a statement about SOM. Remove project carousel and expose curated content. Provide a clear distinction between curated content, Latest News and Upcoming Events. <img width="2824" height="4330" width_o="2824" height_o="4330" data-src="https://freight.cargo.site/t/original/i/a18a03999bf00cf3733063440d95d88fd6d1bb4341bd7f93c0c3f71a4a0aeb8b/wire-_01_home.png" data-mid="37220310" border="0" src="https://freight.cargo.site/w/1000/i/a18a03999bf00cf3733063440d95d88fd6d1bb4341bd7f93c0c3f71a4a0aeb8b/wire-_01_home.png" /> Home – Intro Home – Landing <img width="1420" height="6201" width_o="1420" height_o="6201" data-src="https://freight.cargo.site/t/original/i/fec229fb8d1f7ba999862ee25816d3057ee4fc1c5b6c7822193abeb2f6c2d713/00_home-no-cover.jpg" data-mid="37220312" border="0" src="https://freight.cargo.site/w/1000/i/fec229fb8d1f7ba999862ee25816d3057ee4fc1c5b6c7822193abeb2f6c2d713/00_home-no-cover.jpg" /> Work Use Expertise as an organizational principle for Projects. Expose Expertise navigational entry points. Provide quick access to Project and Client Story index through “Browse All Work” pane. Include filtering options for “Browse All Work” pane, and an index view for better scanability. <img width="2831" height="5636" width_o="2831" height_o="5636" data-src="https://freight.cargo.site/t/original/i/9ec8c61c7ddbe6f7d3172ce331ae8a28b3a9a4bbe7e13aca3ee3e3c0e8694b7e/wire-_02.0_work.png" data-mid="37220309" border="0" src="https://freight.cargo.site/w/1000/i/9ec8c61c7ddbe6f7d3172ce331ae8a28b3a9a4bbe7e13aca3ee3e3c0e8694b7e/wire-_02.0_work.png" /> Work – Landing <img width="1420" height="4361" width_o="1420" height_o="4361" data-src="https://freight.cargo.site/t/original/i/b0fd227b1f23579d3e6e54d44745292fbc206fe2462df795ec2b39a1e02d22f0/01_work_.jpg" data-mid="37220308" border="0" src="https://freight.cargo.site/w/1000/i/b0fd227b1f23579d3e6e54d44745292fbc206fe2462df795ec2b39a1e02d22f0/01_work_.jpg" /> Work – "Browse All Work" pane Expertise Detail Lead with Expertise-specific curated content, including projects, case studies, quotes, initiatives and other highlights. Include Expertise-specific “Browse All Work” pane. Add Expertise-specific contact module.<img width="2823" height="5734" width_o="2823" height_o="5734" data-src="https://freight.cargo.site/t/original/i/8cb430dac630bec8a7aa9d65072bf39651f32b992de57da427e013009cefda96/wire-_02.1_expertise.png" data-mid="37220306" border="0" src="https://freight.cargo.site/w/1000/i/8cb430dac630bec8a7aa9d65072bf39651f32b992de57da427e013009cefda96/wire-_02.1_expertise.png" /> Expertise Detail <img width="1420" height="6331" width_o="1420" height_o="6331" data-src="https://freight.cargo.site/t/original/i/8b85b45d3485ce9621f0da01018cab4d80a57dd5923735d9349f89964ded7c89/01_work_01-01_expertise.jpg" data-mid="37220301" border="0" src="https://freight.cargo.site/w/1000/i/8b85b45d3485ce9621f0da01018cab4d80a57dd5923735d9349f89964ded7c89/01_work_01-01_expertise.jpg" /> Expertise Detail – “Browse All Work” pane Project Detail Remove image carousel and accordion menu to expose content. Create an immersive narrative experience using different content types (images, videos, quotes, metrics, awards, and news). Enable discovery by presenting related content.<img width="2823" height="8505" width_o="2823" height_o="8505" data-src="https://freight.cargo.site/t/original/i/fcc2270f734a9d388393734e7f509701feb7cd2b69c8d507cd547915e355562d/wire-_02.2_detail_project.png" data-mid="37220304" border="0" src="https://freight.cargo.site/w/1000/i/fcc2270f734a9d388393734e7f509701feb7cd2b69c8d507cd547915e355562d/wire-_02.2_detail_project.png" /> Project Detail <img width="1420" height="15112" width_o="1420" height_o="15112" data-src="https://freight.cargo.site/t/original/i/e10d681c7bc2e1b28b68ca87fcd8bc4061078d0a074d124fc627383f5c15830f/01_work_01-02_project_detail_01.jpg" data-mid="37220300" border="0" src="https://freight.cargo.site/w/1000/i/e10d681c7bc2e1b28b68ca87fcd8bc4061078d0a074d124fc627383f5c15830f/01_work_01-02_project_detail_01.jpg" /> Project Detail – Chapter Navigation <img width="1420" height="956" width_o="1420" height_o="956" data-src="https://freight.cargo.site/t/original/i/4f890cd9b132795522cc348b700eba1012125bc898d16e0e79824b680d9cde78/01_work_01-03-01_project_scroll.png" data-mid="37222418" border="0" src="https://freight.cargo.site/w/1000/i/4f890cd9b132795522cc348b700eba1012125bc898d16e0e79824b680d9cde78/01_work_01-03-01_project_scroll.png" /><img width="1420" height="956" width_o="1420" height_o="956" data-src="https://freight.cargo.site/t/original/i/a4dd3fe928bdb7b092394a353bbc309ff635bc6f692bb1608744f7647b8bfc3d/01_work_01-03-04_project_scroll.png" data-mid="37222610" border="0" src="https://freight.cargo.site/w/1000/i/a4dd3fe928bdb7b092394a353bbc309ff635bc6f692bb1608744f7647b8bfc3d/01_work_01-03-04_project_scroll.png" /><img width="1420" height="956" width_o="1420" height_o="956" data-src="https://freight.cargo.site/t/original/i/77a2f947d80902bf9d175bc4f14ab0d3eb1d7cb16be8379c892d24805729e68d/01_work_01-03-02_project_scroll.png" data-mid="37222415" border="0" src="https://freight.cargo.site/w/1000/i/77a2f947d80902bf9d175bc4f14ab0d3eb1d7cb16be8379c892d24805729e68d/01_work_01-03-02_project_scroll.png" /> Search Create a more robust search tool. Provide suggested results as user types. Add filter by content type for search results. Add supporting visuals for search results. <img width="2823" height="2087" width_o="2823" height_o="2087" data-src="https://freight.cargo.site/t/original/i/4a12413ed5a17629841b6f48984a76925a2ede070b89f8d74f28fa7015b87cfb/99-search-wireframe.png" data-mid="37220297" border="0" src="https://freight.cargo.site/w/1000/i/4a12413ed5a17629841b6f48984a76925a2ede070b89f8d74f28fa7015b87cfb/99-search-wireframe.png" /> Search – Autocomplete <img width="1420" height="1008" width_o="1420" height_o="1008" data-src="https://freight.cargo.site/t/original/i/73417e19f75b765151def17ecc1c80574117408f133aeef54e2bf8399f498ab2/99_00_search.jpg" data-mid="37220298" border="0" src="https://freight.cargo.site/w/1000/i/73417e19f75b765151def17ecc1c80574117408f133aeef54e2bf8399f498ab2/99_00_search.jpg" /> Search – Results <img width="1420" height="5134" width_o="1420" height_o="5134" data-src="https://freight.cargo.site/t/original/i/7e7ab5a23a58702f0cb910d4b4bbc367a5a0da90bfa66eccc43863a5403a84a6/99_01_search.jpg" data-mid="37220299" border="0" src="https://freight.cargo.site/w/1000/i/7e7ab5a23a58702f0cb910d4b4bbc367a5a0da90bfa66eccc43863a5403a84a6/99_01_search.jpg" /> https://studiostrikeout.com/SOM-Website-Improvements Thu, 28 Feb 2019 21:53:06 +0000 Studio Strikeout https://studiostrikeout.com/SOM-Website-Improvements SOM Website Improvements From 2015–2019, I oversaw a number of significant updates to som.com as the Digital Content Team’s producer, strategist, and de facto website product manager. Localization for audience in China Clients in China have been key to SOM’s success for decades. But in 2015, SOM’s new website was only available in English. Facing a new generation of networked, internet-savvy clients and increased competition in the country, SOM invested in the creation of a localized, Chinese version of its website to support business development. I worked with translators, developers, and company leadership to launch som.com/china. Meanwhile, I proposed and managed the implementation of a content delivery network and image compression system to optimize site speed for our users. <img width="1920" height="1440" width_o="1920" height_o="1440" data-src="https://freight.cargo.site/t/original/i/22834c6ce25fa1eece6054e5d3179f3a9e3560b71f2f024076da917e627b1398/placeit-5.jpg" data-mid="37553393" border="0" src="https://freight.cargo.site/w/1000/i/22834c6ce25fa1eece6054e5d3179f3a9e3560b71f2f024076da917e627b1398/placeit-5.jpg" /> som.com/china Mobile revamp and UX upgrades&nbsp; som.com was not optimized for phones or tablets when it launched in 2014. The website was stunted by a budget cut, leaving it to only work properly on desktop devices. My proposal to remedy the issue and meet growing user demand was approved in late 2015. I spearheaded the responsive redesign, managing all phases of the project with same agency that designed the desktop site. I had recently completed a UX course at General Assembly, and used this project at SOM as an opportunity to apply my knowledge. Several pages and features of the website had to change to work on mobile, so I conducted user research, studied website analytics, and created wireframes and user flows to illustrate and recommend a new approach. For example, our Contact page pinned all of SOM’s offices on a static, unresponsive map that hid information until the user hovered their cursor over a hot spot. That was easy to address, but the page also contained a form for users to contact each office via email. We found that users often did not know which office to contact, and this caused employees in each SOM office to receive and redirect hundreds of emails each day. Time was being wasted and both users and employees were frustrated. To fix the issue, I surveyed each office to learn who was submitting these inquiries through the form, and what they wanted. I determined that there were five primary users: journalists, students, job applicants, vendors looking for new business, and potential clients. Based on the needs of the form users and email recipients, the form was redesigned to: – Shepherd the user through one of five funnels depending on their type of inquiry – Automatically direct journalist and student inquiries about a project to the SOM office that designed it – Label emails according to the type of inquiry, allowing recipients to easily sort and prioritize messages – Funnel job applications through HR’s appropriate channels <img width="1500" height="1125" width_o="1500" height_o="1125" data-src="https://freight.cargo.site/t/original/i/5b936be2a7933b289b0e56dddea491d512e694fea7ed7040641497c46d136393/1467562207666.jpg" data-mid="37553396" border="0" src="https://freight.cargo.site/w/1000/i/5b936be2a7933b289b0e56dddea491d512e694fea7ed7040641497c46d136393/1467562207666.jpg" /> New, responsive som.com <img width="2450" height="1813" width_o="2450" height_o="1813" data-src="https://freight.cargo.site/t/original/i/da429a8d9666a9a2a94a51e46acfe4b41eec0c149f0f4db30e7b6bad2c4ef27a/Contact-Page---Proposed-New-User-Flow.png" data-mid="37554875" border="0" src="https://freight.cargo.site/w/1000/i/da429a8d9666a9a2a94a51e46acfe4b41eec0c149f0f4db30e7b6bad2c4ef27a/Contact-Page---Proposed-New-User-Flow.png" /> User flow for new contact form <img width="1398" height="965" width_o="1398" height_o="965" data-src="https://freight.cargo.site/t/original/i/bed18d86aa9d4e56554ba881c18ea6c3982561bfaca5499936da18e9670f3d17/contact-new.2019-03-13-16_03_33.gif" data-mid="37565908" border="0" src="https://freight.cargo.site/w/1000/i/bed18d86aa9d4e56554ba881c18ea6c3982561bfaca5499936da18e9670f3d17/contact-new.2019-03-13-16_03_33.gif" /> New contact form https://studiostrikeout.com/DMV-Reservation-App-UX-Redesign Fri, 15 Mar 2019 21:13:12 +0000 Studio Strikeout https://studiostrikeout.com/DMV-Reservation-App-UX-Redesign DMV Reservation App UX Redesign For my User Experience Design course at General Assembly, I redesigned the New York DMV’s core app for connecting users with its services: the reservation maker. <img width="1720" height="821" width_o="1720" height_o="821" data-src="https://freight.cargo.site/t/original/i/122301bae111f4c5db4acc20e2ef7a64bb99cc5a4121e17b7128568b78211192/dmv-thumb-cover.jpg" data-mid="38112292" border="0" src="https://freight.cargo.site/w/1000/i/122301bae111f4c5db4acc20e2ef7a64bb99cc5a4121e17b7128568b78211192/dmv-thumb-cover.jpg" /> Wireframes for a redesigned New York DMV reservation app. The Challenge The Department of Motor Vehicles (DMV) is one of the most visible faces of New York State government, providing a wide range of essential services to millions of people every year. The agency also carries a bad reputation, earned long ago for consistently failing to meet basic customer service expectations. Why? A 1993 article in The New York Times explains: “For years, the reasons for dissatisfaction have been obvious to anyone who visited a district office: endless waits, surly clerks, poor information and a bureaucratic system that often forces people to spend half a day on a transaction that might take only 15 minutes in another state.” The agency was still plagued with many of these issues when Governor Andrew Cuomo was elected to his first term of office in 2010. Two years later, he acknowledged the problem and launched the DMV Customer Service Initiative, which promised to create a “fast, easy, and convenient” DMV experience. The DMV began providing online services as alternative to some office visits, and created a reservation web app to reduce wait times in their offices. Unfortunately, the DMV’s reservation maker was imperfect at best. After a confusing encounter with the app, I was inspired to redesign it as part of my User Experience Design course at General Assembly. Slow, difficult, and irritating: The customer experience at the DMV is a trope in American pop culture. Above: clips from Broad City and Zootopia (via Giphy) Walkthrough of the existing DMV reservation maker Understanding the DMV Before I could form a product vision for the redesign, I needed to better understand the objectives of the DMV. I found that they wanted to: Reduce wait times at DMV offices from more than 60 minutes to 30 minutes or less.Achieve 90% customer satisfaction by customers who use a DMV office.Be a national leader in providing efficient, innovative, and responsive government services. Understanding DMV customers I also needed to learn more about the needs of New Yorkers who were using the reservation maker. This started with interviews, which revealed a number of key insights about the app: “It met expectations for a government service, but it doesn’t hold up to what I’m used to from businesses.”“I had to use Google instead of their website.”“I thought I had the documents that I needed, but I didn’t. When I showed up to the DMV, I was turned away.”“I think I wasted the same amount time on their site that I would’ve spent in line at the DMV.”“There’s no clear hierarchy or organization; all of this information bubbles to the surface.”“It’s just not intuitive.”“I’m not sure if I’m doing this right.”Quantitative information on DMV user activity was also published on the agency’s website, which stated that the three most popular online transactions were: Registration renewals (1.8 million)Driver license, learner permit, or non-driver ID replacements (221,000)Driver license and non-driver ID renewals (128,000) Based on this research, I created two user personas to help guide the product vision. Natalie – Native New YorkerGoal: Renew New York identification Pain points: Feels that the information she needs is hard to find. And trying to understand it is taking up too much of her time.Isn’t sure if she can skip the trip to a DMV office and simply request a new license online.Believes that that the system could do more to help her through this process.The website says to call customer service with questions, but when she does, customer service says to reference the website.Terri – New York Transplant Goal: Transfer out-of-state license Pain points: Unclear which DMV office is closest that also provides this service.Isn’t confident that she has enough documents ahead of her visit.Has to do too much research in other areas of the DMV website (even resorting to Google at times) to understand what she needs to do.She doesn’t think that the reservation system lives up to the standards set by other technology. Analogous Products I also tracked down products that were similar to New York’s DMV reservation maker. At the time, only California, Florida, and Kansas had implemented anything similar, and none were as usable as New York’s app. Moving on, I looked to the business sector for transactional apps that seemed to empathize with its user base, and found Virgin America’s new flight booking system. It was the first of its kind: a fast, responsive airline website that shaped a clear, straightforward path for the user. The product was laser-focused around a few key use cases rather than dozens. The UX was restrained, only asking the customer to make one decision at a time. And last but not least, there was no upsell for car rentals, hotels, or credit cards during the booking process. I also found Apple’s Genius Bar reservation system to be similarly well-designed. The product was clearly focused around its objective: to connect users with a faulty Apple device to a specialist who could fix the issue. The booking process glided users through tight sets of options to select from, limiting their cognitive load to minimize the possibility of further frustration with the company. The app also helpfully suggested nearby Apple Stores where the user could book their appointment based on their current location. Virgin America’s flight booking system Apple's Genius Bar reservation system The Solution The New York DMV’s vision is “to be a national leader in providing efficient, innovative and responsive government services.” To accomplish this, I proposed that the DMV redesign its reservation maker—a prominent interface between internet-connected New Yorkers and in-person DMV services. The basic tool could be transformed from a utilitarian reservation maker for DMV experts into an app that helps the average New Yorker navigate the complexities of the DMV. I set out to redesign the app to help users understand: which services the DMV offers online vs in-personwhich documents are needed for DMV services of interestwhere DMV offices are locatedwhen their DMV reservation is scheduled By improving the app’s information architecture, navigation, forms, hierarchy, and structure, a clearer system with less friction could be produced. This would help New Yorkers get faster, easier access to the DMV services that they need, moving the DMV closer to its 90% customer satisfaction goal. Complete User Flow <img width="2400" height="1045" width_o="2400" height_o="1045" data-src="https://freight.cargo.site/t/original/i/d9f5791a0862ba6238861498b64439815d67cef2c8100b8662478307babf9e39/complete-user-flow.jpg" data-mid="38092129" border="0" src="https://freight.cargo.site/w/1000/i/d9f5791a0862ba6238861498b64439815d67cef2c8100b8662478307babf9e39/complete-user-flow.jpg" /> Primary User Flow <img width="6875" height="1081" width_o="6875" height_o="1081" data-src="https://freight.cargo.site/t/original/i/0d98974ec581286799104ea6c2969f27aec26271a651a2d6b2821c13f4087ef8/primary-user-flow.jpg" data-mid="38092128" border="0" src="https://freight.cargo.site/w/1000/i/0d98974ec581286799104ea6c2969f27aec26271a651a2d6b2821c13f4087ef8/primary-user-flow.jpg" /> Secondary User Flow <img width="3000" height="2647" width_o="3000" height_o="2647" data-src="https://freight.cargo.site/t/original/i/85a78b332c9451e73dbc16eeac8a657cb7f9f0286d155e0a1e7a8a71972a2817/secondary-user-flow.jpg" data-mid="38092127" border="0" src="https://freight.cargo.site/w/1000/i/85a78b332c9451e73dbc16eeac8a657cb7f9f0286d155e0a1e7a8a71972a2817/secondary-user-flow.jpg" /> Wireframes – Early Sketches <img width="1595" height="1230" width_o="1595" height_o="1230" data-src="https://freight.cargo.site/t/original/i/523317c4f3e8e2165f6ec83cfe89373289b3a3740740dccd1bab31de955b066e/early-sketch.jpg" data-mid="38090423" border="0" src="https://freight.cargo.site/w/1000/i/523317c4f3e8e2165f6ec83cfe89373289b3a3740740dccd1bab31de955b066e/early-sketch.jpg" /> <img width="1600" height="724" width_o="1600" height_o="724" data-src="https://freight.cargo.site/t/original/i/b49bca3ac149f77f9cb324b1df055a9c7fbecda98e103557e49fc31ea58f2685/early-sketch2.jpg" data-mid="38090229" border="0" src="https://freight.cargo.site/w/1000/i/b49bca3ac149f77f9cb324b1df055a9c7fbecda98e103557e49fc31ea58f2685/early-sketch2.jpg" /> Final, Annotated Wireframes (no UI) <img width="4500" height="3703" width_o="4500" height_o="3703" data-src="https://freight.cargo.site/t/original/i/8bdc25fde1da9b80ebab94c0e28ae9bc47bb174585333ac7ed156dde29724cdd/wire-1.jpg" data-mid="38094457" border="0" src="https://freight.cargo.site/w/1000/i/8bdc25fde1da9b80ebab94c0e28ae9bc47bb174585333ac7ed156dde29724cdd/wire-1.jpg" /> <img width="4500" height="3627" width_o="4500" height_o="3627" data-src="https://freight.cargo.site/t/original/i/60d21e7b02aee1b34db141dc9f40b6ff552ccd563ad31ad3f58c3d709b3efe5e/wire-2.jpg" data-mid="38094461" border="0" src="https://freight.cargo.site/w/1000/i/60d21e7b02aee1b34db141dc9f40b6ff552ccd563ad31ad3f58c3d709b3efe5e/wire-2.jpg" /> <img width="4500" height="2973" width_o="4500" height_o="2973" data-src="https://freight.cargo.site/t/original/i/e5ad6962110189b6d665639064101edb5b9aa6ca7b17ae4a9e4621314e52d3c1/wire-3.jpg" data-mid="38094519" border="0" src="https://freight.cargo.site/w/1000/i/e5ad6962110189b6d665639064101edb5b9aa6ca7b17ae4a9e4621314e52d3c1/wire-3.jpg" /> <img width="4500" height="3417" width_o="4500" height_o="3417" data-src="https://freight.cargo.site/t/original/i/16e2f50373f982b9c6461327d72812f0425b6733d85b9991fb12d6fe9e0d2699/wire-4.jpg" data-mid="38114362" border="0" src="https://freight.cargo.site/w/1000/i/16e2f50373f982b9c6461327d72812f0425b6733d85b9991fb12d6fe9e0d2699/wire-4.jpg" /> <img width="4500" height="3639" width_o="4500" height_o="3639" data-src="https://freight.cargo.site/t/original/i/e8d76dd9287e5b81afef8df2c224ce058dc9e80b918021283eb288bf616f742d/wire-5.jpg" data-mid="38114363" border="0" src="https://freight.cargo.site/w/1000/i/e8d76dd9287e5b81afef8df2c224ce058dc9e80b918021283eb288bf616f742d/wire-5.jpg" /> https://studiostrikeout.com/TechnoServe-Website-Redesign Fri, 01 Mar 2019 21:29:48 +0000 Studio Strikeout https://studiostrikeout.com/TechnoServe-Website-Redesign TechnoServe Website Redesign I oversaw a comprehensive redesign of technoserve.org as the product lead and project manager. The website was reimagined to express TechnoServe’s new brand and meet online fundraising best practices.&nbsp; All images courtesy TechnoServe and Bluecadet <img width="1748" height="835" width_o="1748" height_o="835" data-src="https://freight.cargo.site/t/original/i/c56288b9b17a9ffde36d6c0629c440e83281c8a213d044f982918abf74cea1de/tns-responsive-mockup2.jpg" data-mid="37706448" border="0" src="https://freight.cargo.site/w/1000/i/c56288b9b17a9ffde36d6c0629c440e83281c8a213d044f982918abf74cea1de/tns-responsive-mockup2.jpg" /> The Challenge During my first year-and-a-half at TechnoServe, an international nonprofit, I was focused on making moderate improvements to the design of their website. I also moved the site onto a new CMS and CRM. However, the underlying architecture and design system had its limits, and it was becoming clear that more significant changes needed to be made. We needed a different toolkit for our content to resonate with our audience, and encourage them to donate to us. At the same time, our department was leading a rebrand to modernize TechnoServe’s messaging and visual identity. The change would be dramatic, and the website would need to fully express the new brand. <img width="976" height="800" width_o="976" height_o="800" data-src="https://freight.cargo.site/t/original/i/2ba9c0b8b25d00c94c5b374643c40ad41b5346d6e1dfd840316f2243a0d1dcaa/tns-homepage-2012.jpg" data-mid="37698786" border="0" src="https://freight.cargo.site/w/976/i/2ba9c0b8b25d00c94c5b374643c40ad41b5346d6e1dfd840316f2243a0d1dcaa/tns-homepage-2012.jpg" /> The technoserve.org homepage, circa 2012 Our Approach After completing a requirements analysis for the product, I created an RFP, researched and contacted agencies, and helped select Bluecadet as our designer. Our existing developer stayed on. During the redesign, I kept the project aligned with the defined budget, milestones, and scope, and ensured that deliverables met our requirements and specifications. I also facilitated discussions between internal stakeholders, our branding agency, and our designers and developers, negotiating differences or clearing up points of confusion to help everyone see eye-to-eye. The product was shipped in six months, on schedule and under budget. The Solution Through close collaboration with marketing staff, our branding agency, and fundraising consultants, we tightly orchestrated the website’s design and content to manifest TechnoServe’s new visual identity and messaging. Page templates made bold use of color and texture, and put our photography and writing front and center. The templates were also responsive and modular, maximizing flexibility for both site visitors and content creators. All together, these components created a vehicle for compelling nonprofit storytelling in service of fundraising. Not only did we include direct appeals to donate throughout the site, we also prompted visitors to subscribe to our emails and social media accounts. We continued educating our audience about our work using those channels, priming them to eventually give. As a result, our new website and fundraising strategy facilitated a 58% increase in donations over the previous year. <img width="1202" height="2975" width_o="1202" height_o="2975" data-src="https://freight.cargo.site/t/original/i/17b5cbbf3ac3b9e9d22cca41f6b21bd5833569574d06bd104c9034c30fb3af87/TNS_01a_Homepage-border.jpg" data-mid="37736449" border="0" src="https://freight.cargo.site/w/1000/i/17b5cbbf3ac3b9e9d22cca41f6b21bd5833569574d06bd104c9034c30fb3af87/TNS_01a_Homepage-border.jpg" />The redesigned homepage of technoserve.org Design Samples <img width="1202" height="2332" width_o="1202" height_o="2332" data-src="https://freight.cargo.site/t/original/i/55e73cbc24e942c60eaf0bbe5d02423514daf403f142e815df1d2a60cc405e14/TNS_02a_AboutUs-border.jpg" data-mid="37737590" border="0" src="https://freight.cargo.site/w/1000/i/55e73cbc24e942c60eaf0bbe5d02423514daf403f142e815df1d2a60cc405e14/TNS_02a_AboutUs-border.jpg" /> <img width="1202" height="2602" width_o="1202" height_o="2602" data-src="https://freight.cargo.site/t/original/i/fea523ac1f0bbae48da2aa993cb7349ad51258ff2b853e3fe5ae4d56f422ceb9/TNS_02b3_Team_PopUp_Photo-border.jpg" data-mid="37737229" border="0" src="https://freight.cargo.site/w/1000/i/fea523ac1f0bbae48da2aa993cb7349ad51258ff2b853e3fe5ae4d56f422ceb9/TNS_02b3_Team_PopUp_Photo-border.jpg" /> <img width="1202" height="2502" width_o="1202" height_o="2502" data-src="https://freight.cargo.site/t/original/i/05c53174cb4fdbf7ae4b63981b5a865562f4118412544d920d0d5ea8f09b227e/TNS_02c_WorkWithUs-border.jpg" data-mid="37737230" border="0" src="https://freight.cargo.site/w/1000/i/05c53174cb4fdbf7ae4b63981b5a865562f4118412544d920d0d5ea8f09b227e/TNS_02c_WorkWithUs-border.jpg" /> <img width="1202" height="2442" width_o="1202" height_o="2442" data-src="https://freight.cargo.site/t/original/i/244c4cc658bfa32021e50d33d6e6f214cc06b397cd2ac67d0599102a946deacf/TNS_03a1_Our-Work-border.jpg" data-mid="37737231" border="0" src="https://freight.cargo.site/w/1000/i/244c4cc658bfa32021e50d33d6e6f214cc06b397cd2ac67d0599102a946deacf/TNS_03a1_Our-Work-border.jpg" /> <img width="1202" height="2304" width_o="1202" height_o="2304" data-src="https://freight.cargo.site/t/original/i/c44955bad6cbe335295b41dbc006b534fc2b18feb5a4d931a5b5d43973ec5530/TNS_03b2a_SuccessStory_Grid-border.jpg" data-mid="37737236" border="0" src="https://freight.cargo.site/w/1000/i/c44955bad6cbe335295b41dbc006b534fc2b18feb5a4d931a5b5d43973ec5530/TNS_03b2a_SuccessStory_Grid-border.jpg" /> <img width="1202" height="3742" width_o="1202" height_o="3742" data-src="https://freight.cargo.site/t/original/i/c70a27ca6b1cd3c3f840eb0c5c430ee5e61c3a8f9499962c16d9894a65b187c9/TNS_03b2b_SuccessStory_Story-border.jpg" data-mid="37737233" border="0" src="https://freight.cargo.site/w/1000/i/c70a27ca6b1cd3c3f840eb0c5c430ee5e61c3a8f9499962c16d9894a65b187c9/TNS_03b2b_SuccessStory_Story-border.jpg" /> <img width="1202" height="4382" width_o="1202" height_o="4382" data-src="https://freight.cargo.site/t/original/i/c7823ea0194ab8028d70d19a4a743f6da15337eb2401c54b0ae2635a413afd82/TNS_03c1a_OurWork_WhereWeWork_Region-border.jpg" data-mid="37737237" border="0" src="https://freight.cargo.site/w/1000/i/c7823ea0194ab8028d70d19a4a743f6da15337eb2401c54b0ae2635a413afd82/TNS_03c1a_OurWork_WhereWeWork_Region-border.jpg" /> <img width="1202" height="3370" width_o="1202" height_o="3370" data-src="https://freight.cargo.site/t/original/i/909a2d9a66b215b241dad9fc8fd5c2bc4cce58a359653e1dbcbfb267e461381c/TNS_05a_Blog-border.jpg" data-mid="37737238" border="0" src="https://freight.cargo.site/w/1000/i/909a2d9a66b215b241dad9fc8fd5c2bc4cce58a359653e1dbcbfb267e461381c/TNS_05a_Blog-border.jpg" /> https://studiostrikeout.com/Writing-and-Content-Production Sat, 16 Mar 2019 14:25:33 +0000 Studio Strikeout https://studiostrikeout.com/Writing-and-Content-Production Content Production Noguchi MuseumAdvancing the understanding and appreciation of Isamu Noguchi’s art and legacy.Mobile GuideI produced content to facilitate the launch of the Noguchi Museum’s mobile guide on the Bloomberg Connects app. The guide includes information and photos of all objects in the Museum’s permanent collection, an interactive map of the Museum, and details on current exhibitions. Text and photos for hundreds of objects were collected, organized, edited, and uploaded to the Bloomberg Connects CMS. Digital Features I work with curators, archivists, writers, and marketing staff to bring articles to life on the Noguchi Museum’s website. A typical assignment includes copyediting, image selection, and retouching. I produced the following digital features: Salvaged TimeMemorial MakingFlicker of an Eyelid: Isamu Noguchi, Ruth Page, and the Universe of ChicagoRepresenting America: Isamu Noguchi at the 1986 Venice BiennaleNoguchi as CollectorCurating Model BehaviorThe Incomplete Chronicle of Léonie GilmourShoji SadaoAltered and Destroyed Writing SOM Skidmore, Owings &amp; Merrill is one of the world's leading design firms. Architecture's Test Kitchen In SOM's Chicago model shop, sawdust flies, 3D printers hum, and buildings take shape for the first time in three dimensions. Go behind the scenes. Sweating the Details: An Interview with Architect Nicole Dosso The technical director behind many New York City landmarks, including One World Trade Center, talks about her journey, the future of the skyscraper, and more. The Chicago Picasso, From Dream to Reality Pablo Picasso's 50-foot-tall sculpture in Chicago has left an enduring impact—not only on the city, but also globally.&nbsp;Learn how the artwork was realized. Lonny Lonny is an online magazine that focuses on design and home decor. 5 Places to Go During London Design Festival 2015 With hundreds of events taking place, the annual London Design Festival cannot be missed—or ignored. Lonny distills the best that the festival has to offer. An Ethereal Art Installation with a Life of its Own For his first public installation, French artist Charles Pétillon installs a billowing cloud of 100,000 illuminated balloons in Covent Garden. Rodarte and Jonathan Saunders for The Rug Company At New York Fashion Week, The Rug Company releases a surprising decor-inspired collection. TechnoServe TechnoServe is an international nonprofit that promotes business solutions to poverty. A Sewing Machine and a Dream Rose Amachi, an alumna and mentor of TechnoServe's Young Women in Enterprise program, is working to empower girls and young women in Nairobi's Kawangware slum. Valet Valet is a men's lifestyle publication. Green Living Investigating matcha, a nutritional green tea long overlooked by American consumers. Harvest Brew A roundup of three Fall-favorite craft beers made in the United States. Eyes for DesignMoscot, the NYC-based eyewear company, relaunches its website. https://studiostrikeout.com/Marketing-Campaigns-and-Media Thu, 21 Mar 2019 18:09:49 +0000 Studio Strikeout https://studiostrikeout.com/Marketing-Campaigns-and-Media Marketing Campaigns and Media SOM's 80th Anniversary To mark 80 years of design at SOM, I organized a public photo competition on Instagram that drove awareness of the brand and its connection to popular architecture around the world. The #SOM80 campaign boosted Instagram audience growth by 85% and inspired hundreds of people to post about the firm's work, including some of the most influential photographers on the platform.<img width="1200" height="900" width_o="1200" height_o="900" data-src="https://freight.cargo.site/t/original/i/3b3adda901c70a85f0e91362eca7a963aacb4a128feeafc619a34704973acc50/1475110330034.jpeg" data-mid="38202515" border="0" src="https://freight.cargo.site/w/1000/i/3b3adda901c70a85f0e91362eca7a963aacb4a128feeafc619a34704973acc50/1475110330034.jpeg" /> Opening of One World Trade Center To celebrate the opening of One World Trade Center on November 3, 2014, I spearheaded SOM's first-ever photo contest. As the architects of the landmark New York City skyscraper, SOM was well-positioned to drive the conversation about the building. Primarily conducted through Instagram, the campaign increased public awareness of the firm, generated positive sentiment, and reached millions of people through social media and press coverage. <img width="1200" height="900" width_o="1200" height_o="900" data-src="https://freight.cargo.site/t/original/i/a6374c16a3f1aab31294de0c759325547919f6493e3a9cb436fb9764fd796b31/1430483501582.jpeg" data-mid="38202514" border="0" src="https://freight.cargo.site/w/1000/i/a6374c16a3f1aab31294de0c759325547919f6493e3a9cb436fb9764fd796b31/1430483501582.jpeg" /> Year-End Online Fundraising for TechnoServe In the last four months of 2013, I simultaneously managed several multichannel online fundraising campaigns from inception to completion, which contributed to a 58% increase in revenue over the previous year. I was not only responsible for developing the strategy, but executing it, which meant copywriting, graphic design, videography, and post-production.<img width="750" height="434" width_o="750" height_o="434" data-src="https://freight.cargo.site/t/original/i/57cc69da869d9d27c525deb5dd8fad1509b4272ffd3cd79c51e21a3318887511/fundraising-2.jpg" data-mid="38202512" border="0" src="https://freight.cargo.site/w/750/i/57cc69da869d9d27c525deb5dd8fad1509b4272ffd3cd79c51e21a3318887511/fundraising-2.jpg" /> TechnoServe Strategic Plan With a new website in place, but a slim budget to work from, I pushed the limits of TechnoServe's digital assets to create a beautiful, engaging reading experience for its new Strategic Plan. It was our first piece of longform digital content that was every bit as good as the print version. This paved the way for the organization's first-ever digital annual report. <img width="638" height="478" width_o="638" height_o="478" data-src="https://freight.cargo.site/t/original/i/f1bebe3b90a2a676f44afde86634796447a35d3fbdee06fb04276780a684078f/stratplan-2.jpg" data-mid="38202513" border="0" src="https://freight.cargo.site/w/638/i/f1bebe3b90a2a676f44afde86634796447a35d3fbdee06fb04276780a684078f/stratplan-2.jpg" /> Paper Craft Africa Video I led the development of a video about a women-owned business in Uganda that had benefited from working with TechnoServe. I art directed and managed all stages of post-production with a freelance videographer. The video was launched to coincide with International Women's Day. Email Templates for TechnoServe’s Newsletter and Fundraising Appeals In order to optimize TechnoServe's email communications and realign with our new visual identity, I led the development of a new, responsive email template. I managed discovery, created wireframes and designed final Photoshop mockups for an external developer.<img width="638" height="478" width_o="638" height_o="478" data-src="https://freight.cargo.site/t/original/i/d08267ba2671d1244f841877b743342d37fe6ec305dba93ba2cd146edd7b9b09/newsletter-mobile-2.jpg" data-mid="38202511" border="0" src="https://freight.cargo.site/w/638/i/d08267ba2671d1244f841877b743342d37fe6ec305dba93ba2cd146edd7b9b09/newsletter-mobile-2.jpg" /> TechnoServe Brand Story Video To unite TechnoServe's new brand assets and explain who we are, I provided project management and art direction services for a video that was to be a cornerstone of our new brand. https://studiostrikeout.com/About Sat, 16 Mar 2019 14:17:18 +0000 Studio Strikeout https://studiostrikeout.com/About About Studio Strikeout is a digital product and content consultancy created by Alex Miller and based in New York City. Capabilities Analytics and Optimization Art Direction Campaign Development Communications Planning Content Strategy and Production PhotographyProduct StrategyProject ManagementUser Experience DesignVideography Resume Download it → Contact Send email →&nbsp; Connect on LinkedIn →