https://haley.digital Haley's Portfolio Tue, 19 Jan 2021 05:38:29 +0000 https://haley.digital en https://haley.digital/Home Thu, 26 Sep 2019 01:44:36 +0000 Haley's Portfolio https://haley.digital/Home A collection of work by digital designer Haley Clarke A concept-driven designer who operates at the intersection of design, technology, art, and culture. <img width="2862" height="1800" width_o="2862" height_o="1800" data-src="https://freight.cargo.site/t/original/i/59410758f3d8454e671787f31f53d867ca23913384eb806af3520b490481a9c1/Frame-17.png" data-mid="151602992" border="0" src="https://freight.cargo.site/w/1000/i/59410758f3d8454e671787f31f53d867ca23913384eb806af3520b490481a9c1/Frame-17.png" /> xMatters Design Systemdesign systems, ui design, research <img width="3400" height="1800" width_o="3400" height_o="1800" data-src="https://freight.cargo.site/t/original/i/0ca2afe1c9e1ea48e7e4d6db7d72e13f1b3b7ebe9f7a3de13315a173d4d12527/xmatters-mobile-min.png" data-mid="151605224" border="0" src="https://freight.cargo.site/w/1000/i/0ca2afe1c9e1ea48e7e4d6db7d72e13f1b3b7ebe9f7a3de13315a173d4d12527/xmatters-mobile-min.png" /> xMatters Mobile App Designui design, ux design, visual design <img width="637" height="534" width_o="637" height_o="534" data-src="https://freight.cargo.site/t/original/i/eca0d8fc0aee7046cb36b16a9e4255beda88cb8cc1c079f3dcb14f41b0fdafb1/image3-digital.png" data-mid="51486305" border="0" src="https://freight.cargo.site/w/637/i/eca0d8fc0aee7046cb36b16a9e4255beda88cb8cc1c079f3dcb14f41b0fdafb1/image3-digital.png" /> Optix Marketing Site branding, ux design, ui design <img width="1544" height="1712" width_o="1544" height_o="1712" data-src="https://freight.cargo.site/t/original/i/217a148c1ad796c5e332675e78d33539d1009b10a3c45b308131973daa3b024e/optix-illustrations-7.png" data-mid="95689413" border="0" src="https://freight.cargo.site/w/1000/i/217a148c1ad796c5e332675e78d33539d1009b10a3c45b308131973daa3b024e/optix-illustrations-7.png" /> Optix Product Illustrationsart direction, graphic design, animation <img width="772" height="856" width_o="772" height_o="856" data-src="https://freight.cargo.site/t/original/i/42940d329d56e2586ff1614e6f2c3d6b9101623026ef86e915fa0021edafbb8c/salt-branding-1.png" data-mid="98133364" border="0" src="https://freight.cargo.site/w/772/i/42940d329d56e2586ff1614e6f2c3d6b9101623026ef86e915fa0021edafbb8c/salt-branding-1.png" />Salt Branding Internshipcopywriting, content strategy <img width="2040" height="920" width_o="2040" height_o="920" data-src="https://freight.cargo.site/t/original/i/942065b782eb640ae0b6086f56b79f502aecdd34d6c1ed574b7bb19a100078d5/optix-blog-1.png" data-mid="98133328" border="0" src="https://freight.cargo.site/w/1000/i/942065b782eb640ae0b6086f56b79f502aecdd34d6c1ed574b7bb19a100078d5/optix-blog-1.png" />Optix Blogart direction, graphic design <img width="926" height="496" width_o="926" height_o="496" data-src="https://freight.cargo.site/t/original/i/ab45d7eeb8ae2d366f3e8d1c4f15b0aa980247ccd1b166fadedae8abe9bd5415/italia-design-1.png" data-mid="98133145" border="0" src="https://freight.cargo.site/w/926/i/ab45d7eeb8ae2d366f3e8d1c4f15b0aa980247ccd1b166fadedae8abe9bd5415/italia-design-1.png" />italiaDesignin-field research, branding, videography <img width="637" height="782" width_o="637" height_o="782" data-src="https://freight.cargo.site/t/original/i/e8d3bdddada994e369a694fb9a44c402c2cf7d73c75348c222c77c82dba728b9/image2-digital.png" data-mid="51486292" border="0" src="https://freight.cargo.site/w/637/i/e8d3bdddada994e369a694fb9a44c402c2cf7d73c75348c222c77c82dba728b9/image2-digital.png" />IKEA Stayux design, service design https://haley.digital/Optix-Site Thu, 26 Sep 2019 01:44:37 +0000 Haley's Portfolio https://haley.digital/Optix-Site Optix Marketing Site <img width="2372" height="1272" width_o="2372" height_o="1272" data-src="https://freight.cargo.site/t/original/i/93a5a827f11069afba3ae69a71d99491301383ea27e1fdc18c39d1da1c1cd733/optixsite-1.png" data-mid="51538673" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/93a5a827f11069afba3ae69a71d99491301383ea27e1fdc18c39d1da1c1cd733/optixsite-1.png" /> &nbsp; Optix Marketing Site / 2018~ branding, ux design, ui designAs part of my work as a digital designer at Optix, I lead the redesign of the Optix marketing website. My worked included researching the competitive landscape, refining the Optix brand, building out a structure through sitemaps and wireframes, and creating visual assets for the site. This project strengthened my ability to create meaningful work from a user-focused design process. ︎&nbsp;View the site Identity Updated style guide for Optix that complements the original wordmark and reflects the growing brand’s values and platform. This included a new typeface, colours, imagery, and cta styling to introduce a more modern and distinctive brand. <img width="2424" height="3760" width_o="2424" height_o="3760" data-src="https://freight.cargo.site/t/original/i/bdd40fb1d73f87d0dfef248bda2eccae10761aa1c4f6acfcb59b5a9c8fddce13/optixsite-6.png" data-mid="52009827" border="0" src="https://freight.cargo.site/w/1000/i/bdd40fb1d73f87d0dfef248bda2eccae10761aa1c4f6acfcb59b5a9c8fddce13/optixsite-6.png" /> Site map Worked with stakeholders of the busines to understand the needs of the company. We worked together to create a site map from a card sorting exercise using a white board. This allowed us to organize the company’s needs into the verticals of the site and prompted the initial information architecture.Bringing the map digital allowed me to articulate how pages connect and the opportunities for conversion. <img width="2372" height="2158" width_o="2372" height_o="2158" data-src="https://freight.cargo.site/t/original/i/ef4ccaf678e20bde88487a971c75e76be93b71bf7632364e56d488990747cbb5/optix-3.png" data-mid="74916165" border="0" src="https://freight.cargo.site/w/1000/i/ef4ccaf678e20bde88487a971c75e76be93b71bf7632364e56d488990747cbb5/optix-3.png" /><img width="2372" height="2158" width_o="2372" height_o="2158" data-src="https://freight.cargo.site/t/original/i/0eaf838b53519a01a3e25be556b8ce407f14d1211d7b9f97e28dd914d017774a/optixsite-3.png" data-mid="52425223" border="0" src="https://freight.cargo.site/w/1000/i/0eaf838b53519a01a3e25be556b8ce407f14d1211d7b9f97e28dd914d017774a/optixsite-3.png" /> Content architectureUsed Invision to upload wires and create clickable prototypes for iteration. This was a great tool to gather quick feedback and start to get a feel for how the site connects. <img width="2544" height="2078" width_o="2544" height_o="2078" data-src="https://freight.cargo.site/t/original/i/fa7d748ec5c298524fee863be05fc243cc79bc9d436a6af558e452648e716941/optixsite-4.png" data-mid="52008667" border="0" src="https://freight.cargo.site/w/1000/i/fa7d748ec5c298524fee863be05fc243cc79bc9d436a6af558e452648e716941/optixsite-4.png" /> <img width="2680" height="1984" width_o="2680" height_o="1984" data-src="https://freight.cargo.site/t/original/i/2741b4f7ae494fc0e6b9d04b28b955b88c1c09ef99be5d930afbd0d03396ccb5/optixsite-5.png" data-mid="52444498" border="0" src="https://freight.cargo.site/w/1000/i/2741b4f7ae494fc0e6b9d04b28b955b88c1c09ef99be5d930afbd0d03396ccb5/optixsite-5.png" /> System approach I worked directly with our developers to formulate a system that was easy for them to build and implement. That meant creating a consistent grid for all the pages, consistent image ratios, and a set selection of spacing between sections that could be interchanged throughout the site. Ultimately, I created a system of building blocks that could be added and removed throughout the site. <img width="2680" height="1352" width_o="2680" height_o="1352" data-src="https://freight.cargo.site/t/original/i/b4d9d56efb3dd2e390ed778d916f296d4352f3e0056cc9465f5d7e44e7defad8/optixsite-8-3.png" data-mid="52501996" border="0" src="https://freight.cargo.site/w/1000/i/b4d9d56efb3dd2e390ed778d916f296d4352f3e0056cc9465f5d7e44e7defad8/optixsite-8-3.png" /> Key momentsBelow are a few key moments from the website that showcase unique user experiences, elements of delight, and areas that I’m truly proud of.&nbsp; <img width="2680" height="5086" width_o="2680" height_o="5086" data-src="https://freight.cargo.site/t/original/i/87cebf446ee365a700febc5331cabc2988261df71bd6b4472fd07d0035b49e1e/optixsite-7.png" data-mid="52444964" border="0" src="https://freight.cargo.site/w/1000/i/87cebf446ee365a700febc5331cabc2988261df71bd6b4472fd07d0035b49e1e/optixsite-7.png" /> Results This project resulted in an increase in overall page views, and time spent on the website. As well, an increase of visits to the ‘request a demo page’, and demos booked. The new brand was also rolled out to the various brand touchpoints and a brand guideline was created by me for the refreshed brand. https://haley.digital/Optix-Product-Illustrations Tue, 19 Jan 2021 05:38:29 +0000 Haley's Portfolio https://haley.digital/Optix-Product-Illustrations Optix Product Illustrations <img width="2372" height="1272" width_o="2372" height_o="1272" data-src="https://freight.cargo.site/t/original/i/b556b33b859fb82bbba9890a271531ceae049b69f0bbc2be11bf695b06ea9736/product-hero-3.png" data-mid="95684611" border="0" src="https://freight.cargo.site/w/1000/i/b556b33b859fb82bbba9890a271531ceae049b69f0bbc2be11bf695b06ea9736/product-hero-3.png" /> Optix Product Illustrations / 2017 - present~ art direction, graphic design, illustrations, branding, animation During my time working at Optix, I’ve had the opportunity to design a wide variety of illustrations and animations for the platform.I’ve created many of the current illustrations that exist in the product, built out a visual style with design components to match; while, maintaining true to Optix’s simple and clean brand language.Below are a few of the illustrations and animations I’ve created for the web and mobile products. Mobile Onboarding Alongside our product designer, I worked on a new onboarding flow for users into the mobile app. This included a variety of illustrations to communicate the steps. Below is a collection of illustrations from this onboarding flow. <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/436070cf5b1bd886b8a8dbf97164fe4160e477cc07c111476a510904bb81f8d1/request-access.png" data-mid="95685024" border="0" src="https://freight.cargo.site/w/1000/i/436070cf5b1bd886b8a8dbf97164fe4160e477cc07c111476a510904bb81f8d1/request-access.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/35b056c0bbc833b242ca65fd65f6ab2507ee87301b8a9036b09d29e1d7e073bb/payment-method.png" data-mid="95612792" border="0" src="https://freight.cargo.site/w/1000/i/35b056c0bbc833b242ca65fd65f6ab2507ee87301b8a9036b09d29e1d7e073bb/payment-method.png" /> Web Empty States I’ve designed, and continue to design, the empty state graphics used throughout the Optix web platform. Each instance is designed to communicate the specifics of the context for the user, while also following a consistent visual style. Below are a few examples of my work. <img width="3200" height="1612" width_o="3200" height_o="1612" data-src="https://freight.cargo.site/t/original/i/e2d4650b51c0f42c03c236f019de6595937ab700e7297ee2231fe2e8c234d149/empty-states.png" data-mid="95612904" border="0" src="https://freight.cargo.site/w/1000/i/e2d4650b51c0f42c03c236f019de6595937ab700e7297ee2231fe2e8c234d149/empty-states.png" /> <img width="3200" height="2378" width_o="3200" height_o="2378" data-src="https://freight.cargo.site/t/original/i/08b8756eb0bc015c510f4523f91db78cd833178eacb95ffaed41bc416fea5749/something-wrong.png" data-mid="95613301" border="0" src="https://freight.cargo.site/w/1000/i/08b8756eb0bc015c510f4523f91db78cd833178eacb95ffaed41bc416fea5749/something-wrong.png" /> <img width="3200" height="1612" width_o="3200" height_o="1612" data-src="https://freight.cargo.site/t/original/i/af25929c8fdba7282657fd6dc6ca6d02eb136929cc93b5a10639256fa0395bb2/web-empty-states.png" data-mid="95613587" border="0" src="https://freight.cargo.site/w/1000/i/af25929c8fdba7282657fd6dc6ca6d02eb136929cc93b5a10639256fa0395bb2/web-empty-states.png" /> Mobile Welcome Screens &amp; Empty States Small illustrations throughout a mobile experience make a big difference. They often delight users, and help convey a message. I designed these with a careful balance of communicating the context to the user, while still maintaining the positive and welcoming voice of Optix.&nbsp; <img width="3200" height="1612" width_o="3200" height_o="1612" data-src="https://freight.cargo.site/t/original/i/4f1a87a12a563dcb9aa1f4f9994d92cdd5e3ecae00383faa4593a2df0f714a0f/welcome-screens.png" data-mid="95988564" border="0" src="https://freight.cargo.site/w/1000/i/4f1a87a12a563dcb9aa1f4f9994d92cdd5e3ecae00383faa4593a2df0f714a0f/welcome-screens.png" /> <img width="3200" height="1612" width_o="3200" height_o="1612" data-src="https://freight.cargo.site/t/original/i/859a05b0efcc8e2eede81179c558d5fa8f13a58a0f5f74b83a24a0c74916595f/community-welcome-screens.png" data-mid="95988563" border="0" src="https://freight.cargo.site/w/1000/i/859a05b0efcc8e2eede81179c558d5fa8f13a58a0f5f74b83a24a0c74916595f/community-welcome-screens.png" /> <img width="3200" height="1612" width_o="3200" height_o="1612" data-src="https://freight.cargo.site/t/original/i/348e4ebc32148ddb8dfce550f6f0335359cb548ddb7fd9e801de45d0804f2d63/empty-state-mobile.png" data-mid="95989340" border="0" src="https://freight.cargo.site/w/1000/i/348e4ebc32148ddb8dfce550f6f0335359cb548ddb7fd9e801de45d0804f2d63/empty-state-mobile.png" /> https://haley.digital/Optix-Blog Fri, 27 Sep 2019 03:46:48 +0000 Haley's Portfolio https://haley.digital/Optix-Blog Optix Blog <img width="2372" height="1272" width_o="2372" height_o="1272" data-src="https://freight.cargo.site/t/original/i/5f31392ca4d0c6a086eb4bb570f54249a0fad53fedc6ca9b056ef9b36a545fd9/optixblog-1.png" data-mid="52429056" border="0" src="https://freight.cargo.site/w/1000/i/5f31392ca4d0c6a086eb4bb570f54249a0fad53fedc6ca9b056ef9b36a545fd9/optixblog-1.png" /> Optix Blog / 2017 - present ~ art direction, graphic design, illustrations, branding When I began working at Optix, their blog was in its youth, and I was given the opportunity to take the reigns and grow the visual style. I’ve created all of the current illustrations that exist on the blog, building out a variety of visual styles for each series; while, maintaining true to Optix’s simple and clean brand language. Below are a few of the illustrations I’ve created for some of the series on the blog, each showcasing a graphic relating to the theme of the article. ︎&nbsp;View the blog <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/60d9b6c7f4eb0f06049fc7ca4403991e0abbea621e38134c13bce50de4a550d6/optixblog-2.png" data-mid="52429368" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/60d9b6c7f4eb0f06049fc7ca4403991e0abbea621e38134c13bce50de4a550d6/optixblog-2.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/398eeff93c3b6b36067d09dae62eaabadf2101d403cc5b31b73f45e9e00ba460/optixblog-3.png" data-mid="56605238" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/398eeff93c3b6b36067d09dae62eaabadf2101d403cc5b31b73f45e9e00ba460/optixblog-3.png" /> <img width="6400" height="3200" width_o="6400" height_o="3200" data-src="https://freight.cargo.site/t/original/i/80a1932ab9c44d0bbe049fc52979e763fe233cda6591b67f7f593b6234750009/optixblog-5.png" data-mid="56604791" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/80a1932ab9c44d0bbe049fc52979e763fe233cda6591b67f7f593b6234750009/optixblog-5.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/313ceef737b1b0ef355d306af9a48e5c7f54d9565cfaab48ca97e191b0b04423/optixblog-4.png" data-mid="52445136" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/313ceef737b1b0ef355d306af9a48e5c7f54d9565cfaab48ca97e191b0b04423/optixblog-4.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/df961c93008d130fa7534caa8f4fb829d6b05defd28ce48361b4919d420ae84f/optixblog-6.png" data-mid="52445129" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/df961c93008d130fa7534caa8f4fb829d6b05defd28ce48361b4919d420ae84f/optixblog-6.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/67d94d73c3a55d12c10225b83e85096f1493349634263d1959d0a26d0d4b5c12/optixblog-7.png" data-mid="53212189" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/67d94d73c3a55d12c10225b83e85096f1493349634263d1959d0a26d0d4b5c12/optixblog-7.png" /> <img width="3200" height="1600" width_o="3200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/9c04c35d7d5efc33bbe80b1ac047b8763af21112ba5290bde6012b7525009207/optixblog-8.png" data-mid="56604494" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/9c04c35d7d5efc33bbe80b1ac047b8763af21112ba5290bde6012b7525009207/optixblog-8.png" /> Optix newsletter Most of the blog traffic comes from our monthly newsletter. Along with the redesign of our website, I implemented the new brand across our newsletter. This included implementing the brand styling as well as laying out a new flow. The new newsletter design increase click rates/click through rates, improving overall traffic to the blog. <img width="3804" height="7540" width_o="3804" height_o="7540" data-src="https://freight.cargo.site/t/original/i/07d0f699307b6c6c38f9ab6522430448f61c6bbb35ff9c4fdcef48da85270355/optix-newsletter-min.png" data-mid="98237204" border="0" src="https://freight.cargo.site/w/1000/i/07d0f699307b6c6c38f9ab6522430448f61c6bbb35ff9c4fdcef48da85270355/optix-newsletter-min.png" /> https://haley.digital/Salt-Branding Thu, 26 Sep 2019 01:44:39 +0000 Haley's Portfolio https://haley.digital/Salt-Branding Salt Branding Internship <img width="1600" height="800" width_o="1600" height_o="800" data-src="https://freight.cargo.site/t/original/i/6d8e82f48491b64871014506f8bab5ffec91af084aa0626b626694cb7e8a255a/salt-1-2.jpg" data-mid="70094872" border="0" src="https://freight.cargo.site/w/1000/i/6d8e82f48491b64871014506f8bab5ffec91af084aa0626b626694cb7e8a255a/salt-1-2.jpg" /> Writing Intern, Salt Branding&nbsp; / 2015~ copywriting, product naming, marketing &nbsp; &nbsp;&nbsp; I worked with Salt's Creative team in San Francisco on various writing assignments. This work included accomplishing product naming assignments, producing branded website content, and contributing to video marketing ideas. ︎ View Salt’s website <img width="2746" height="154" width_o="2746" height_o="154" data-src="https://freight.cargo.site/t/original/i/3623b211265c0f47b7aa9c3ce2ef5da3f8aacf82fd647d152c95fc87801a7279/salt-4.png" data-mid="53209935" border="0" src="https://freight.cargo.site/w/1000/i/3623b211265c0f47b7aa9c3ce2ef5da3f8aacf82fd647d152c95fc87801a7279/salt-4.png" /> Responsibilities: NamingNaming is tricky. Did you know a brand's name has been thought over, and contemplated for over 1000 times. A brand's name is everything, and means more than you think. Every company needs a name, and at Salt Branding they are known for naming top brands and products such as: Jawbone, Microsoft Surface, X-box One, and more. The various naming projects I contributed to were for a wide range of industries such as: air conditioning, healthcare, virtual reality, and office spaces. I was lucky enough to work for clients such as Blueshield of California, LindenLab, Aspen Air, and Red Wing to help in the process of naming new sectors, products, and company names. I even&nbsp;wrote a blog article for Salt about my experience with naming. Fun fact: I was the winner of a naming contest for one of Salt's conference rooms. My role was to help produce as many names and variations of names as I could for the client. The strategy team would provide me with the brand positioning, and this would lead to a more specific direction to head into for naming. For each client, there would be about 3 rounds of naming, and I would produce up to 500 names per round. Brand messaging I was given the brand positioning and voice and asked to portray the brand's messaging in that voice, in a selection of different ways. Usually this started with the company description for themselves. For example, if the company was said to be 'honest, reliable, and tough', I would create messaging for that company that would directly fit their brand positioning and the voice that was given to me by the strategy team. I was also provided personas in which I would create messaging/narratives for each that fit the brand voice. These were all done through multiple iterations. Web content Salt completed a variety of brand overhauls, which included the brands' websites. Working with senior writers, I helped write website content; such as headers and body content, for clients. Not only would I work on forward facing content (homepages, about pages, etc.) for clients, but I would also create work for the nitty gritty details such as the FAQs and even a video script for one of our clients. Featured project: <img width="3200" height="1228" width_o="3200" height_o="1228" data-src="https://freight.cargo.site/t/original/i/8b19211f7ac5f905407db6c434db3d21d33d4ab885428a1f54a28af65a53ac2f/salt-2-2.png" data-mid="52887637" border="0" src="https://freight.cargo.site/w/1000/i/8b19211f7ac5f905407db6c434db3d21d33d4ab885428a1f54a28af65a53ac2f/salt-2-2.png" /> ClearXChange One of the main projects I worked on at Salt, had me playing a huge role in writing the web content for the new ClearXchange brand. I worked on every single page of the website, wherever there was written content to be said. Since I was writing for a company that had people's security and money safety in mind, I had to keep the voice professional. However, the client did want some colloquial writing, as the audience for the product are tech-savvy individuals. At the beginning of the project I was given the strategy for the brand voice and types of messaging ClearXchange wanted and converted that voice into the content seen throughout the site. ︎ View clearxchange’s website <img width="3198" height="1218" width_o="3198" height_o="1218" data-src="https://freight.cargo.site/t/original/i/d50709a8cb51ee03e8e7f8361ade7dc7fe4b578091c4a6c22966be0645e5d63e/salt-3-2.png" data-mid="52887665" border="0" src="https://freight.cargo.site/w/1000/i/d50709a8cb51ee03e8e7f8361ade7dc7fe4b578091c4a6c22966be0645e5d63e/salt-3-2.png" /> Reflection Overall my experience with Salt Branding was a very positive one. I grasped the importance of communicating on behalf of a brand, and even more so the importance of iteration. I grew more confident in my writing skills and learnt to clearly pitch my work and educate others on my rationale.&nbsp; https://haley.digital/italiaDesign Thu, 26 Sep 2019 01:44:38 +0000 Haley's Portfolio https://haley.digital/italiaDesign italiaDesign &nbsp; <img width="2372" height="1272" width_o="2372" height_o="1272" data-src="https://freight.cargo.site/t/original/i/a84ce00b86adadb404efdf258afe816ca5f1d263263f3569942cf643b213bb70/italia.png" data-mid="53211709" border="0" src="https://freight.cargo.site/w/1000/i/a84ce00b86adadb404efdf258afe816ca5f1d263263f3569942cf643b213bb70/italia.png" /> italiaDesign / 2016~ in-field research, branding, videography, ux design, copywritingA website showcasing interviews and photos taken during a two-month Italian Design field study inspired by Italian history, art, culture, architecture, and design. ︎&nbsp;Visit the site About ItaliaDesign is a 7-week long intensive undergraduate field study and research program with a focus on documenting Italy’s rich design culture. The study was conducted across Italy, from Florence to Milan, as well as in 2 cities in North America. As a part of the program, our team conducted and produced studio interviews on design and developed a website to document our experience and findings. We spoke with 19 prominent and emerging designers in the industry such as Mario Trimarchi, Massimiliano Fuksas, and Moleskine. Our team distilled these findings down into 70 short films for the global design community. I was a part of Gruppo Dieci, the tenth group of senior design students to take part in this adventure. <img width="3196" height="1332" width_o="3196" height_o="1332" data-src="https://freight.cargo.site/t/original/i/0a5ef2acecffe79d3e434c9f4b4cf2c0809145e796d3ab649dda0a0c12ce8ac5/italia-4.jpg" data-mid="52892037" border="0" src="https://freight.cargo.site/w/1000/i/0a5ef2acecffe79d3e434c9f4b4cf2c0809145e796d3ab649dda0a0c12ce8ac5/italia-4.jpg" /> Exploration through layersMuch like the layers of history in contemporary Rome, italiaDesign 2016 was built on 10 years of past italiaDesign groups' research and insights. Being the 10th anniversary of italiaDesign, we took this concept and brought it into the brand and website we developed and created. <img width="3198" height="1332" width_o="3198" height_o="1332" data-src="https://freight.cargo.site/t/original/i/fcec25b753f61001dc2df5b04451c98bad4af08f94bb691e64dd75a5d9a7644c/italia-3.jpg" data-mid="56605375" border="0" src="https://freight.cargo.site/w/1000/i/fcec25b753f61001dc2df5b04451c98bad4af08f94bb691e64dd75a5d9a7644c/italia-3.jpg" /> Cheerful &amp; CuriousWe decided to create a brand that was young and lively, representing our group and us as designers. By creating colour overlays, we could further demonstrate the concept of layering. Each element acting as a block stacked ontop of one another. We paired a sans-serif typeface with the use of shapes to help portray this voice. <img width="3198" height="1218" width_o="3198" height_o="1218" data-src="https://freight.cargo.site/t/original/i/8ac265272deadca7433787bd5115b33247539af6b28037909a81709161e8150c/italia-1-2.png" data-mid="52890833" border="0" src="https://freight.cargo.site/w/1000/i/8ac265272deadca7433787bd5115b33247539af6b28037909a81709161e8150c/italia-1-2.png" /> Patterns &amp; ShapesUsing the word Dieci, our group’s name and meaning 10 in Italian, we were able to create block elements to build patterns and shapes relevant to Italy. <img width="3198" height="1218" width_o="3198" height_o="1218" data-src="https://freight.cargo.site/t/original/i/a81cda1bdc42c5f7225875545d9269d114fba038c4c89e901b2b77f2cfa72365/italia-2.png" data-mid="52891442" border="0" src="https://freight.cargo.site/w/1000/i/a81cda1bdc42c5f7225875545d9269d114fba038c4c89e901b2b77f2cfa72365/italia-2.png" /> Discovery &amp; NavigationGoing against typical navigation conventions, our content is physical built on top of one another, with the action of scrolling to reveal new content.With scrolling as the key way to navigate around, viewers can move back and forth between content blocks (layers) quickly, and navigate smoothly. Users are handed pops of discovery, delighted with content that showcases photography and quotes from our experience. Our focus was to get viewers to feel as though they are digging deeper into our site and exploring the layers of content like one does walking the streets of Rome. <img width="1766" height="3396" width_o="1766" height_o="3396" data-src="https://freight.cargo.site/t/original/i/c9e5c9deb00e28c7096b0e441ec28da7493d9a7442c99015c54860f23eac2bea/italia-11-3.png" data-mid="70093584" border="0" src="https://freight.cargo.site/w/1000/i/c9e5c9deb00e28c7096b0e441ec28da7493d9a7442c99015c54860f23eac2bea/italia-11-3.png" /> Films page Building on top of the past to create a stronger future. To celebrate ten years of italiaDesign, we also included some of the most informative and engaging work done by previous italiaDesign cohorts, as well as work from the sister program, dutchDesign.By scrolling through the films page, viewers can see that there’s a lot to learn from the past. Each year, the field study offers the same program opportunity resulting in very different experiences to share. It was important for us to take a moment and showcase this content. Since italiaDesign revolves around interviews in the form of film, the films page became the epicentre of content. The page features each designer we interviewed as blue cards, and the larger collaborative films/cultural films as green cards. They live in parallax to each other on separate planes to create further layering. ︎&nbsp;Visit films page <img width="3532" height="5562" width_o="3532" height_o="5562" data-src="https://freight.cargo.site/t/original/i/94974d477a82d2f524b689480bcce1c3cca3944386e768176425c02a4b9f48cd/italia-9-small.png" data-mid="77598271" border="0" src="https://freight.cargo.site/w/1000/i/94974d477a82d2f524b689480bcce1c3cca3944386e768176425c02a4b9f48cd/italia-9-small.png" /> SearchThe search feature for the films page was an opportunity for a useful and unique experience for visitors. The prompt for searching is placed in the left hand corner ‘type to search’ and to search anything on the page, users can start typing and the search takes over the films page to reveal results.<img width="2680" height="854" width_o="2680" height_o="854" data-src="https://freight.cargo.site/t/original/i/2e9401c658a8df8fc9ab4d20f1346388e94c8bb0cf45797bcfeb5ffc2188691f/italia-10.png" data-mid="53217240" border="0" src="https://freight.cargo.site/w/1000/i/2e9401c658a8df8fc9ab4d20f1346388e94c8bb0cf45797bcfeb5ffc2188691f/italia-10.png" /> Interviews I had the opportunity to co-lead interviews for executive director Fabio Sergio (frog design), creative director Benjamin Williams (r/ga), architect and maker Omer Arbel (bocci design), and designer Federico Ferretti (continuum). ︎&nbsp;Watch an overview from interviews <img width="3196" height="1332" width_o="3196" height_o="1332" data-src="https://freight.cargo.site/t/original/i/1e580ad11c8cfd4e45b9e90567ccdf5a206e8c1935e601751757ce7f3c98929d/italia-8.jpg" data-mid="53216772" border="0" src="https://freight.cargo.site/w/1000/i/1e580ad11c8cfd4e45b9e90567ccdf5a206e8c1935e601751757ce7f3c98929d/italia-8.jpg" /> "What we should be making now are things that could gain in value over time, not lose value." - Omer Arbel, Bocci Prior to our interviews in Italy, we conducted 3 interviews in Portland, and 3 interviews in Vancouver. One of the Vancouver interviews was with architect and maker, Omer Arbel. He spoke about the importance of sustainability in design, not necessarily with the use of sustainable materials, but by producing products that are loved by their owners for years and years. When designing a product, Arbel asks himself, "if I make this object, will it be here 500 years from now?" He spoke about how if an object is beautiful enough, and if it has enough cultural emotional value to it, then it will never be thrown out. Its value is then enormous from a sustainability perspective.︎ Watch video <img width="3196" height="660" width_o="3196" height_o="660" data-src="https://freight.cargo.site/t/original/i/55c240152a7b61fcbea470d8502b30da05f93348f07515eb48946594c4021413/italia-7.jpg" data-mid="53216647" border="0" src="https://freight.cargo.site/w/1000/i/55c240152a7b61fcbea470d8502b30da05f93348f07515eb48946594c4021413/italia-7.jpg" /> "It's not about what you make, it's actually why you make it." - Fabio Sergio, frog designInterviewing frog design in Milano was quite an insightful experience. What differentiates frog from some other agencies is that they focus on getting into touch with the real end-users of their products and services that they design together with their clients. Instead of designing for the client, they design with the client. This way they get a better understanding of the needs of the communities they are helping rather than designing a product without fully understanding the use case for the end-users. ︎ Watch video<img width="3196" height="660" width_o="3196" height_o="660" data-src="https://freight.cargo.site/t/original/i/b3ebca313c4d3b35f9e0d2ff9a7ba4124195da5863fd15ad3d3cb0a461477404/italia-6-2.jpg" data-mid="53216480" border="0" src="https://freight.cargo.site/w/1000/i/b3ebca313c4d3b35f9e0d2ff9a7ba4124195da5863fd15ad3d3cb0a461477404/italia-6-2.jpg" /> Sharing The videos and website were shared amongst the design communities in both Vancouver and Italy. The feedback has been overwhelmingly positive, with over 1000 views on some videos, and multiple shares on social media. <img width="3198" height="1218" width_o="3198" height_o="1218" data-src="https://freight.cargo.site/t/original/i/e4f5b029bffe3b61bcaacea9f74abec152544af8fd9bcb5e64242a380f81d054/italia-5.png" data-mid="96453574" border="0" src="https://freight.cargo.site/w/1000/i/e4f5b029bffe3b61bcaacea9f74abec152544af8fd9bcb5e64242a380f81d054/italia-5.png" /> Reflection italiaDesign became a huge learning experience for me. Experiencing a new culture and speaking to role models in the industry brought me to understand more about the field of design and what makes a designer a designer. This field school has given me the ability to shift gears when necessary and truly be in the 'moment'. I never would have learned how to ‘really’ observe a city, a street, or a corner if it weren't for the valuable lessons I was taught in field. Now I feel I am able to look for the unexciting, the unobvious, the extraordinary in the ordinary and see that design is based on culture and people first. https://haley.digital/IKEA-Stay Thu, 26 Sep 2019 01:44:38 +0000 Haley's Portfolio https://haley.digital/IKEA-Stay IKEA Stay <img width="2372" height="1272" width_o="2372" height_o="1272" data-src="https://freight.cargo.site/t/original/i/fb62ea6898360bb91e65265701709460ca9b89125c29d966390440e06343f23e/ikeastay-1.png" data-mid="53648212" border="0" src="https://freight.cargo.site/w/1000/i/fb62ea6898360bb91e65265701709460ca9b89125c29d966390440e06343f23e/ikeastay-1.png" /> IKEA Stay / 2016~ Student project in group of 6, my role being ux design, visual design, and copywriting ~ Winner of Best UX by Students award at Vancouver’s UX Awards~ Winner of People’s Choice award at Vancouver’s UX Awards IKEA Stay is a conceptual service that allows IKEA customers to test out products that best suit their needs through an immersive Airbnb stay and web experience. A blend between a physical and digital showroom, IKEA Stay allows people who are moving to a new city to visualize the way their homes could look and get a further understanding of what products work for them. IKEA Stay moves people towards their online platform, so customers are drawn to the ecommerce and encouraged to order products online. Discovery When you are at IKEA, they try to make you feel at home. IKEA's strength is in their brick and mortar stores. In particular, they’re well known for their engaging showroom experience. The IKEA team spends hours understanding what differentiates a home from a house, enabling them to design showrooms that immerse customers in various living scenarios and allows customers to envision their future homes. <img width="3200" height="1378" width_o="3200" height_o="1378" data-src="https://freight.cargo.site/t/original/i/712efebf7a9fe1bf28c698f71893c820af6de21ba5c3259209966d9a0b447d7f/ikeastay-2-2.jpg" data-mid="53866868" border="0" src="https://freight.cargo.site/w/1000/i/712efebf7a9fe1bf28c698f71893c820af6de21ba5c3259209966d9a0b447d7f/ikeastay-2-2.jpg" /> Business Problem IKEA is falling behind other furniture retailers in online sales. Despite their strong competency with their showrooms, my initial research found that IKEA's business model is less suited to online selling compared to other retailers, as it has mostly relied on shoppers visiting their physical showroom experience and collecting purchases themselves in-store. This has resulted in IKEA falling behind other furniture retailers in online sales. Meanwhile, their in-store experience is still strong and truly provides customers with product confidence. So, how could we blend IKEA's physical showroom experience with their online experience? <img width="2680" height="1274" width_o="2680" height_o="1274" data-src="https://freight.cargo.site/t/original/i/90a545663adcd2aacbf8943f9f702ba7a18c378ccdb94589a5903b8a3e698af8/ikeastay-3.png" data-mid="53220630" border="0" src="https://freight.cargo.site/w/1000/i/90a545663adcd2aacbf8943f9f702ba7a18c378ccdb94589a5903b8a3e698af8/ikeastay-3.png" /> Insight How could we leverage current trends of moving, to bring people to IKEA's online website? Alongside my research, I looked into instances of why and when people were purchasing furniture and found that the industry is tightly interlocked with the trends in how people move. <img width="2680" height="1274" width_o="2680" height_o="1274" data-src="https://freight.cargo.site/t/original/i/5bcb909fcadd025fd82962db14028d878f33a5f7d23e0ea51ea4c386ba92ef23/ikeastay-4.png" data-mid="53221133" border="0" src="https://freight.cargo.site/w/1000/i/5bcb909fcadd025fd82962db14028d878f33a5f7d23e0ea51ea4c386ba92ef23/ikeastay-4.png" /> Demographic and partnership By following the insights discovered, I was able to pin-point a particular demographic whose needs could be full-filled by IKEA. Those that are moving to a new city for work in the tech industry, looking to rent or buy a home, desires a stylish home, but on a budget, and stays in short-term living solutions, such as Airbnbs.By partnering with Airbnb, IKEA can unlock new customer segments by gaining access to Airbnb’s worldwide customer network. They can gain a faster ROI for online presence and increase customer attention and flow. IKEA doesn’t have to start from scratch in an industry they aren’t as familiar with, but instead gain access to spaces they can place the IKEA Stay experience. ︎ See more about the benefits for all stakeholders <img width="3200" height="1378" width_o="3200" height_o="1378" data-src="https://freight.cargo.site/t/original/i/adf032dfb6508faf050e834d7714b44b789037dd48149f188d5cf89e4b1f4447/ikeastay-8-3.jpg" data-mid="54041157" border="0" src="https://freight.cargo.site/w/1000/i/adf032dfb6508faf050e834d7714b44b789037dd48149f188d5cf89e4b1f4447/ikeastay-8-3.jpg" /> Experience overview IKEA Stay is driven by its core digital experiences that play a part in the pre, during, and post experience. <img width="2680" height="1536" width_o="2680" height_o="1536" data-src="https://freight.cargo.site/t/original/i/d91a0db2657a0fe82bf841c2d9b6c132be8a3f778ef17deb6bc6754b1da5a15f/ikeastay-5.png" data-mid="53221550" border="0" src="https://freight.cargo.site/w/1000/i/d91a0db2657a0fe82bf841c2d9b6c132be8a3f778ef17deb6bc6754b1da5a15f/ikeastay-5.png" /> 1. Discover Booking an IKEA Stay Guests start by booking their IKEA Stay through the Airbnb website, or they can visit the IKEA website and discover it through the 'IKEA Stay' tab. <img width="2684" height="1762" width_o="2684" height_o="1762" data-src="https://freight.cargo.site/t/original/i/8ff97e27c90e8645d9ebec8f6e5fbc8a95aaa88ef5849246b8526ab9a9cf5c6b/ikeastay-11.png" data-mid="53866822" border="0" src="https://freight.cargo.site/w/1000/i/8ff97e27c90e8645d9ebec8f6e5fbc8a95aaa88ef5849246b8526ab9a9cf5c6b/ikeastay-11.png" /> 2. Engage Staying at the Airbnb When guests first arrive at their Airbnb, they are greeted with a tablet that they can use during their stay. This tablet allows guests to bookmark their favourite IKEA items that are in the Airbnb by browsing through products room by room. They also have the option to view more details about the items, or purchase items on the spot. The key purpose of the tablet is for customers to keep track of, and learn more about the items they like throughout their stay.A tablet was chosen as the medium because it is a light portable tool that is already pre-loaded with IKEA products, making it really easy for the consumer to start bookmarking products. ︎ See video of tablet experience <img width="2684" height="4490" width_o="2684" height_o="4490" data-src="https://freight.cargo.site/t/original/i/def57ba2f94a10a45de46da8948fbbed6edbadcb4bf487b273c24734a7fce6a9/ikeastay-10-2.png" data-mid="53866533" border="0" src="https://freight.cargo.site/w/1000/i/def57ba2f94a10a45de46da8948fbbed6edbadcb4bf487b273c24734a7fce6a9/ikeastay-10-2.png" /> <img width="2684" height="2134" width_o="2684" height_o="2134" data-src="https://freight.cargo.site/t/original/i/8d9b94f54a12e4927bea5d5f240162d81312d4815d294c9e65496b1f9d1d9c72/ikeastay-9.png" data-mid="53863697" border="0" src="https://freight.cargo.site/w/1000/i/8d9b94f54a12e4927bea5d5f240162d81312d4815d294c9e65496b1f9d1d9c72/ikeastay-9.png" /> 3. Explore Personalized email Once they leave the Airbnb they will be reminded to take a look at the products they bookmarked during their stay through a personalized email invitation. This email has a button that brings the guests to a landing page that allows them to revisit their IKEA Stay. If they did not bookmark items, they’ll still receive the email and be invited to revisit their stay and browse the products within their stay. <img width="2680" height="2906" width_o="2680" height_o="2906" data-src="https://freight.cargo.site/t/original/i/17fce69fe62b6a7bc0810079a4570b620c439e5095a2ff6f71489c6dc383aa11/ikeastay-6-3.png" data-mid="54110040" border="0" src="https://freight.cargo.site/w/1000/i/17fce69fe62b6a7bc0810079a4570b620c439e5095a2ff6f71489c6dc383aa11/ikeastay-6-3.png" /> 4. Continue exploringProducts in new contexts By clicking through to the website via the email, guests are brought to a landing page where they can browse the items they bookmarked, allowing them the opportunity to see them again in closer detail. One of the most valuable aspects of the web experience is the context tab, which allows customers to see the same product they love from their IKEA Stay in different usage scenarios and environments (other IKEA Stays). This reduces the cognitive overhead of having to think about which items and colours best suit their home, and provides customers with options on how they can style their room and configure these items. After looking at the different contexts, customers can decide to add the item to their cart or bookmark it for later. ︎ View a clickable prototype <img width="2684" height="5278" width_o="2684" height_o="5278" data-src="https://freight.cargo.site/t/original/i/83d4f8e82c297fa8c2570f408488af67baf625c590e2b19e7f76fc34a02c3bfa/ikeastay-12.png" data-mid="70092543" border="0" src="https://freight.cargo.site/w/1000/i/83d4f8e82c297fa8c2570f408488af67baf625c590e2b19e7f76fc34a02c3bfa/ikeastay-12.png" /> Sector-wide implications The IKEA Stay service model can translate to not only IKEA, but to other furniture or home stores as well. Collaborations could be built amongst Airbnb and multiple companies, or other short-term housing options. As well, IKEA Stay could also lead IKEA to developing their own short-term housing service, so instead of renting out spaces through Airbnb, IKEA would rent spaces from their own rental service. <img width="3200" height="1378" width_o="3200" height_o="1378" data-src="https://freight.cargo.site/t/original/i/6a235354e1ac9a1514d1af9ed4a309d3582a8a12326d36d18e0f0512d1a5f96e/ikeastay-13.jpg" data-mid="56603531" border="0" src="https://freight.cargo.site/w/1000/i/6a235354e1ac9a1514d1af9ed4a309d3582a8a12326d36d18e0f0512d1a5f96e/ikeastay-13.jpg" /> Potential results Increase online sales Moves people towards their online platform, now customers are drawn to the ecommerce and encouraged to order products online.Build up market Creates an interest in an IKEA lifestyle by introducing potential customers to a home filled with IKEA furniture and products. This makes the transition into the brand more inviting for customers.Refresh catalogue of inspiration Provides new ways to style homes through the Airbnb context photos. This allows customers to see products in an authentic light, giving them further reasons to purchase items. Leverage Airbnb guests' stay IKEA items are placed inside Airbnb homes, becoming a showroom they can live in, strengthening the brand’s vision of ‘creating the perfect home’ for customers. https://haley.digital/Left-side-Navigation Thu, 26 Sep 2019 01:44:40 +0000 Haley's Portfolio https://haley.digital/Left-side-Navigation ← &nbsp;Home Projects xMatters Design System xMatters Mobile App DesignOptix Marketing Site Optix Product IllustrationsSalt Branding Optix Blog italiaDesign IKEA Stay Contact Email LinkedIn AboutResume