https://maryasmirnova.com Marya Wed, 11 Dec 2019 20:05:17 +0000 https://maryasmirnova.com en https://maryasmirnova.com/About-Me Sat, 17 Nov 2018 23:18:33 +0000 Marya https://maryasmirnova.com/About-Me Hey I’m Marya, a UX/UI designer based in Vancouver! For the past 2 and half years, I’ve been working at Hootsuite.&nbsp; When I'm not designing or making videos, I'm playing piano, going on adventures with my cat, or biking! Let's chat! ︎ RESUME ︎ EMAIL ︎ LINKEDIN <img width="4016" height="5473" width_o="4016" height_o="5473" data-src="https://freight.cargo.site/t/original/i/9f4f0813fcfbdd72daf9e96ce3f745b96848e81ebc607bf9454213a249861769/MARIONBRUNELPHOTOGRAPHIE-200-1.jpg" data-mid="29264144" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/9f4f0813fcfbdd72daf9e96ce3f745b96848e81ebc607bf9454213a249861769/MARIONBRUNELPHOTOGRAPHIE-200-1.jpg" /> https://maryasmirnova.com/Home Thu, 12 Sep 2019 11:42:49 +0000 Marya https://maryasmirnova.com/Home Hi! I’m Marya Smirnova, a UX/UI designer based in Vancouver I’m currently making social media marketing better for everyone at Hootsuite. https://maryasmirnova.com/Work Sat, 14 Sep 2019 07:03:34 +0000 Marya https://maryasmirnova.com/Work Below are some of my old projects that I’ve worked on until 2019. Please feel free to contact me to have access to my most recent case studies :) https://maryasmirnova.com/Improving-Wishpond-s-Editor-Experience Wed, 11 Dec 2019 20:05:17 +0000 Marya https://maryasmirnova.com/Improving-Wishpond-s-Editor-Experience Improving Wishpond’s Editors Drag &amp; Drop Experience UX/UI, User Research, Usability Testing In 2018 as the UX/UI Lead for this project,&nbsp; I helped the team improve the drag &amp; drop editor experience to make moving and editing page elements simple and intuitive. <img width="4000" height="2160" width_o="4000" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b2b810d50ba2d85a91dd79e179264ccf0a2875414e26f97d10a72da6d33435e8/Landing-Page.jpg" data-mid="56460845" border="0" src="https://freight.cargo.site/w/1000/i/b2b810d50ba2d85a91dd79e179264ccf0a2875414e26f97d10a72da6d33435e8/Landing-Page.jpg" /> My Role I lead user experience and interaction design of the Improving Drag &amp; Drop Experience Project. Collaborated with CPO and development team to understand, conceptualize and design a new drag &amp; drop experience. I was responsible for creating research deliverables, prototyping, and the interaction and visual design of the improved editor. Diving into the problem space In 2016 we redesigned the UI of the editor and since then have been working hard on making improvements to the experience of the editor.&nbsp; Over the years we have gathered lots of feedback from our customer support team and we interviewed our in house marketing teams and as well as self-serve customers. This provided lots of great insights, but also revealed one of the biggest problems to be solved. New users were stuggling to figure out how to move and arrange elements on the page and could not figure out how sections, rows and columns work. This lead to great frustration and users couldn’t reach the value factor before the free-trial ends. <img width="2560" height="1448" width_o="2560" height_o="1448" data-src="https://freight.cargo.site/t/original/i/4e54e4e0e4c11cbc913706f7adaf34410b2b56a844b0a445122a1781cf68932e/Screen-Recording-2019-11-21-at-9.26.14-PM.2019-11-21-21_39_35.gif" data-mid="56460860" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/4e54e4e0e4c11cbc913706f7adaf34410b2b56a844b0a445122a1781cf68932e/Screen-Recording-2019-11-21-at-9.26.14-PM.2019-11-21-21_39_35.gif" /> Current editor: Arranging objects in a column Challenge Design an intuitive drag &amp; drop editing experience with an aim at increasing campaign publishing rates and upgrades. Help new users create campaigns easily and efficiently. Reduce time spent inside the editor so that users can focus on achieving results and growing their business. Taking a closer look at Campaign Creation When a marketer or a small business owner signs up for Wishpond, they are looking for a intuitive and easy to use marketing campaign tools. Wishpond’s marketing site promises an inutitive drag &amp; drop builder experience, that requires no technical knowledge and where you can build a high-converting campaign in minutes. Creating a successful campaign can be very time consuming and can require lots of work, from planning, choosing a template, editing, adding and creating content, setting up links, publishing, driving traffic, A/B testing and so forth. I wanted to improve the usability of the editor to make editing as efficient and simple as possible. <img width="3000" height="1444" width_o="3000" height_o="1444" data-src="https://freight.cargo.site/t/original/i/e82b5340d2054a1cfaf06fc8efc96a373a0608d5d390e4969315af5395a44aa7/Persona-Copy-22x.png" data-mid="56841294" border="0" src="https://freight.cargo.site/w/1000/i/e82b5340d2054a1cfaf06fc8efc96a373a0608d5d390e4969315af5395a44aa7/Persona-Copy-22x.png" /> <img width="3000" height="1444" width_o="3000" height_o="1444" data-src="https://freight.cargo.site/t/original/i/40dd8630197698c3573bba347c62f749f6b210c72cd66f6dbf17c3d56b4be7bd/Persona-Copy2x.png" data-mid="56841295" border="0" src="https://freight.cargo.site/w/1000/i/40dd8630197698c3573bba347c62f749f6b210c72cd66f6dbf17c3d56b4be7bd/Persona-Copy2x.png" /> <img width="8290" height="2658" width_o="8290" height_o="2658" data-src="https://freight.cargo.site/t/original/i/7487a4e1cd27fb31ca695c19e53a8e305a24e02b1f3fb8a9caca9fa8c424227b/Campaign-Creation-Flow.jpg" data-mid="56840426" border="0" src="https://freight.cargo.site/w/1000/i/7487a4e1cd27fb31ca695c19e53a8e305a24e02b1f3fb8a9caca9fa8c424227b/Campaign-Creation-Flow.jpg" /> Competitor Comparison When researching and comparing other drag &amp; drop content editors (like Unbounce, Instapage, Canva, Wix, Keynote), I found that most of them are true drag &amp; drop editors, where users can freely move and arrange objects anywhere they like within the bounds of the page. I wanted to find out what our users think about other editors on the market so I ran user tests using usertesting.com and internally with our inhouse marketing team, comparing Wishpond's Editor to one of it's main competitors. <img width="2560" height="1386" width_o="2560" height_o="1386" data-src="https://freight.cargo.site/t/original/i/5dfd8ca1334990700b15e602da875a0d2e5abbc1afd4716e272e622973fc7a47/Screen-Shot-2019-12-16-at-9.58.39-AM.png" data-mid="56840435" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/5dfd8ca1334990700b15e602da875a0d2e5abbc1afd4716e272e622973fc7a47/Screen-Shot-2019-12-16-at-9.58.39-AM.png" /> [Wishpond's] editor was so frustrating... I hated that the boxes wouldn't just move where I wanted them to. I also never quite figured out the rows and columns. Research Findings: 70% of participants preferred our competitors' editor over Wishpond mainly because they could easily move elements anywhere on the page and the drag-and-drop interactions matched their expectations. Participants on average rated Wishpond's editor 2/10 compared to the competitor editor, 7/10 Not so tech savy participants who had less experience with web editors prefered the true drag &amp; drop format, but our inhouse designers and tech savy marketers prefered Wishpond's editor Techincal challenges Making any changes to the existing drag &amp; drop interaction is a big decision and would require our development team to rewrite the entire editor from scratch. This is a massive effort and would take around 6-7 months to develop. Over the years, we tested out simpler solutions, such as creating an interactive onboarding walkthroughs for and making better templates that require minimal changes. But all of these felt like band-aid solutions and new users continued to struggle with creating campaigns. Finally by the end of 2018, the executive team finally agreed to move forward with this massive project. <img width="1444" height="828" width_o="1444" height_o="828" data-src="https://freight.cargo.site/t/original/i/0b3cb828ca030dcf52b1631a9cb8883747c678e93bdd8d3704b0dc3bc797d99e/walkthrough.png" data-mid="56460871" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/0b3cb828ca030dcf52b1631a9cb8883747c678e93bdd8d3704b0dc3bc797d99e/walkthrough.png" /> What makes a good drag &amp; drop experience? I started to research more and take a look at other editors in more detail to find what features make a good drag &amp; drop experience. &nbsp; Smooth drag &amp; drop micro-interactions Smart alignment/size/spacing guides and snapping abilities Grouping and arranging multiple objects at once A smart way to automatically maintain the layout on Mobile and retain responsiveness. Complex objects like forms should automatically re-align and re-arrange themselves automatically when adding/removing components I presented my research findings along with design solutions to the development team and stakeholders to determine the technical realities and what we can actually implement. After many discussions and iterations, I created a list of feature requirements, detailed user flows, mockups and design specifications that are necessary for the Beta version of the new editor. Collaboration is key In order to design this new absolute postioned experience and find edge cases, I collaborated closesly with the CTO and the development team to build and test a working beta version of the editor. Throughout the development process we stumbled upon many new challenges. For example: How do users expect the tablet &amp; mobile editor views to work? No other editor has a tablet mode, do we even need to keep the tablet mode? What happens to objects when you edit/move them to another section in another view? Should the automatic mobile layout assistant be triggered manually or automatically when you switch to mobile view? Do you need an automatic layout assistant on tablet? Back to the drawing board I had to go back and do more research to find answers to these questions. I interviewed inhouse marketers to gather feedback and discovered that: Arranging, re-sizing elements and having the option to hide/show certain elements on mobile should only affect the Mobile view. 60% of participants expect that adding, deleting and editing content on tablet &amp; mobile should affect all views. We need to keep the tablet mode for Facebook publishing, but only 1% of campaigns are published on Facebook. Marketers mostly focus on creating campaigns for desktop and mobile because our current editor is responsive. <img width="2311" height="1393" width_o="2311" height_o="1393" data-src="https://freight.cargo.site/t/original/i/8e9d2a67cdc79fa927c9bb4020f3c78dbacffac18ea2c5f3d21936bfba2c421c/Screen-Shot-2019-12-16-at-3.10.01-PM.png" data-mid="56840736" border="0" data-scale="76" src="https://freight.cargo.site/w/1000/i/8e9d2a67cdc79fa927c9bb4020f3c78dbacffac18ea2c5f3d21936bfba2c421c/Screen-Shot-2019-12-16-at-3.10.01-PM.png" /> Mobile View: Position and size of elements are device specific <img width="1110" height="506" width_o="1110" height_o="506" data-src="https://freight.cargo.site/t/original/i/347af40fb1458917dab9d79870a5ab121ae853004e7a8474431c5bb2032d60be/Tablet-view.png" data-mid="56840782" border="0" data-scale="51" src="https://freight.cargo.site/w/1000/i/347af40fb1458917dab9d79870a5ab121ae853004e7a8474431c5bb2032d60be/Tablet-view.png" /> Keep Tablet view optional <img width="8164" height="1976" width_o="8164" height_o="1976" data-src="https://freight.cargo.site/t/original/i/25106b6218e328addf079402e6cd24c8e84efdb406b6458bbef784562c425f03/Facebook-Publishing-Flow.jpg" data-mid="56460861" border="0" data-scale="71" src="https://freight.cargo.site/w/1000/i/25106b6218e328addf079402e6cd24c8e84efdb406b6458bbef784562c425f03/Facebook-Publishing-Flow.jpg" /> Enable Tablet View to publish to Facebook Beta launch &amp; beyond Wishpond launched the new beta editor in 2019 &amp; its currently its only available for beta-testers. Since then have continued to optimize and develop new features like keyboard shortcuts, helpful tips for starting out users and further improvements based on feedback. We found that beta users could successfully reach the campaign publishing step. Among beta users campaign publishing rate increased by 30% and they reported to have continued using Wishpond for other campaigns. <img width="2560" height="1448" width_o="2560" height_o="1448" data-src="https://freight.cargo.site/t/original/i/cec82e39a5cd2d21d125c6d01fda20dff0ec6444ebbe36a8f78828d4e4aa7049/Screen-Recording-2019-11-06-at-11.30.28-AM.2019-11-17-17_12_02.gif" data-mid="56460868" border="0" data-scale="75" src="https://freight.cargo.site/w/1000/i/cec82e39a5cd2d21d125c6d01fda20dff0ec6444ebbe36a8f78828d4e4aa7049/Screen-Recording-2019-11-06-at-11.30.28-AM.2019-11-17-17_12_02.gif" /> Takeaways &amp; lessons learned Be on top of what your competitors are doing learn from them. Involve your development team as early as possible to catch edge cases and work out technological challenges. Facilitate user testing as early as possible to gather insights and to test your ideas. https://maryasmirnova.com/Wishpond-s-Onboarding-Flow Fri, 13 Sep 2019 18:34:50 +0000 Marya https://maryasmirnova.com/Wishpond-s-Onboarding-Flow Wishpond’s New Onboarding Flow UX/UI, Motion Design&nbsp; Wishpond's new 4-step onboarding flow helps sales, marketing, and customer support team learn more about first time users. My role in this project was to work alongside with our Customer Success team to design the UX/UI of the 4-step flow and animate a short intro video about Wishpond. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/652fbfbc0c5379e96094409e559fe2730844451acf290b2c3c90f2bf897ccc45/End-.png" data-mid="51065169" border="0" src="https://freight.cargo.site/w/1000/i/652fbfbc0c5379e96094409e559fe2730844451acf290b2c3c90f2bf897ccc45/End-.png" /> Challenge The main challenge was how to make a delightful and smooth onboarding experience for Wishpond's first-time users and as well as capture all of the necessary information. We didn't want our users to fill out a form because it's not the best practice for conversion, and we wanted to get our users into the platform as soon as possible. So we decided to divide the questions into four simple steps. Visual Design I designed friendly illustrations of people throughout the flow that animate depending on the users' input. The video follows the same visual style as the onboarding flow, inspired by Material design and the Wishpond website branding in 2018. <img width="5476" height="2687" width_o="5476" height_o="2687" data-src="https://freight.cargo.site/t/original/i/670398c5a4cf58a7bb4d083cedaa944d059c0d9f1f98dbeec6f670b1b0ce587e/Flow.jpg" data-mid="51560041" border="0" src="https://freight.cargo.site/w/1000/i/670398c5a4cf58a7bb4d083cedaa944d059c0d9f1f98dbeec6f670b1b0ce587e/Flow.jpg" /><img width="4400" height="2248" width_o="4400" height_o="2248" data-src="https://freight.cargo.site/t/original/i/717aeca64d8f6efaa14d2aec8dbc0c5a0cb59c78551b1322acff4fa15966d1d8/Company-Size.jpg" data-mid="51258396" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/717aeca64d8f6efaa14d2aec8dbc0c5a0cb59c78551b1322acff4fa15966d1d8/Company-Size.jpg" /><img width="4400" height="3424" width_o="4400" height_o="3424" data-src="https://freight.cargo.site/t/original/i/203ed9b6e98b32fb59a57c5cf449044167153b7321c2928902db1ba6c0329d5c/Industry-Characters.png" data-mid="51258395" border="0" src="https://freight.cargo.site/w/1000/i/203ed9b6e98b32fb59a57c5cf449044167153b7321c2928902db1ba6c0329d5c/Industry-Characters.png" /> Onboarding Video <img width="4027" height="878" width_o="4027" height_o="878" data-src="https://freight.cargo.site/t/original/i/8742b71989837b7d8378c067e4c3c38b8e7732ba4015ca63a8df2ffef9cd5c28/gradients.png" data-mid="52333895" border="0" src="https://freight.cargo.site/w/1000/i/8742b71989837b7d8378c067e4c3c38b8e7732ba4015ca63a8df2ffef9cd5c28/gradients.png" /><img width="4000" height="1620" width_o="4000" height_o="1620" data-src="https://freight.cargo.site/t/original/i/9d01b63e9cc6f0fd1cc9394e1c70c84df40e39bf82bc05294e5b7450c8c6b5fa/pages.png" data-mid="52333896" border="0" src="https://freight.cargo.site/w/1000/i/9d01b63e9cc6f0fd1cc9394e1c70c84df40e39bf82bc05294e5b7450c8c6b5fa/pages.png" /><img width="4000" height="1620" width_o="4000" height_o="1620" data-src="https://freight.cargo.site/t/original/i/1a7f44601a1c338acb357eaf3eada27cba65abe0a5e2faca0033c763577e11d2/wishpond-ui.png" data-mid="52333897" border="0" src="https://freight.cargo.site/w/1000/i/1a7f44601a1c338acb357eaf3eada27cba65abe0a5e2faca0033c763577e11d2/wishpond-ui.png" /> Step 1: Contact Information Our sales team wanted to know the users' full name, email, company name, and website (so that they could check out their company and learn more about them). <img width="1280" height="689" width_o="1280" height_o="689" data-src="https://freight.cargo.site/t/original/i/2e6a1a6ecf0dbabc8ad0fbf321b33566ac2c8e322eb912b4249013dbb89e76f0/step-1.gif" data-mid="51560073" border="0" src="https://freight.cargo.site/w/1000/i/2e6a1a6ecf0dbabc8ad0fbf321b33566ac2c8e322eb912b4249013dbb89e76f0/step-1.gif" /> Step 2: Industry We wanted to learn more about what's their industry so we can later show relevant campaigns to our users. <img width="1280" height="689" width_o="1280" height_o="689" data-src="https://freight.cargo.site/t/original/i/aae219456db48253e1f499b8967a9c64321cb02a2a7b296cfd8cc1e605f898a8/step.gif" data-mid="51526992" border="0" src="https://freight.cargo.site/w/1000/i/aae219456db48253e1f499b8967a9c64321cb02a2a7b296cfd8cc1e605f898a8/step.gif" /> Step 3: Company Size We wanted to learn more about what's their company size for analytic purposes. <img width="1280" height="689" width_o="1280" height_o="689" data-src="https://freight.cargo.site/t/original/i/f37a91d7d7f557d12555c17ed2a490998f5b1238f9f6a62ac357100b5e962e6a/step-3.gif" data-mid="51516709" border="0" src="https://freight.cargo.site/w/1000/i/f37a91d7d7f557d12555c17ed2a490998f5b1238f9f6a62ac357100b5e962e6a/step-3.gif" /> Step 4: Intro We wanted to show a one minute animated introductory video about the platform, explaining how it works. <img width="2880" height="1600" width_o="2880" height_o="1600" data-src="https://freight.cargo.site/t/original/i/34fe6058b6098eab8d63df60f80647d170ac2231961fe39eb59497ab7f2e0791/Step-4---Video-already-booked-VIP.jpg" data-mid="51517407" border="0" src="https://freight.cargo.site/w/1000/i/34fe6058b6098eab8d63df60f80647d170ac2231961fe39eb59497ab7f2e0791/Step-4---Video-already-booked-VIP.jpg" /> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/cc3a14ffcba2625e4b4f757299dde26148370f0ee3ca74b46a557a9a3dacbe6d/Logo-Animation.gif" data-mid="51258402" border="0" src="https://freight.cargo.site/w/1000/i/cc3a14ffcba2625e4b4f757299dde26148370f0ee3ca74b46a557a9a3dacbe6d/Logo-Animation.gif" /><img width="4400" height="4148" width_o="4400" height_o="4148" data-src="https://freight.cargo.site/t/original/i/802f9f3d8399bb052b9609e1775573eeaab12aaaa8204755f6baa0455ace268f/Industry-Characters.png" data-mid="51560309" border="0" src="https://freight.cargo.site/w/1000/i/802f9f3d8399bb052b9609e1775573eeaab12aaaa8204755f6baa0455ace268f/Industry-Characters.png" /><img width="4400" height="4148" width_o="4400" height_o="4148" data-src="https://freight.cargo.site/t/original/i/802f9f3d8399bb052b9609e1775573eeaab12aaaa8204755f6baa0455ace268f/Industry-Characters.png" data-mid="51560309" border="0" src="https://freight.cargo.site/w/1000/i/802f9f3d8399bb052b9609e1775573eeaab12aaaa8204755f6baa0455ace268f/Industry-Characters.png" /> Takeaways Don't marry your design I loved how the initial onboarding steps turned out. After Wishpond launched the onboarding flow, it turned out we didn't need the company size and the intro video anymore because it wasn't helping conversion. We could easily find out about their company size from visiting their website, and the video was placed on the main page of Wishpond's website instead. Delight is all about the microinteractions One of the things that I find is missing in Wishpond's platform, is the small elements of delight, that you can get from just pressing a button or selecting something. I was super excited and happy to have the opportunity to create cool animations for this project. I found that I'm passionate about adding motion and dynamics to design. I also really enjoyed animating the intro video! https://maryasmirnova.com/Wishpond-s-Campaign-Creation-Flow Fri, 13 Sep 2019 18:34:18 +0000 Marya https://maryasmirnova.com/Wishpond-s-Campaign-Creation-Flow Improving Wishpond's Campaign Creation FlowUX/UI, User Research In 2017 we introduced industry-based campaign blueprints inside Wishpond's central campaign dashboard to make it easier for self-serve marketers and small business owners create successful online marketing campaigns to grow their businesses online. <img width="1600" height="600" width_o="1600" height_o="600" data-src="https://freight.cargo.site/t/original/i/ae7cf4ac68998c52944475a5975bdcef2adaf4358cf5431e5d296cd13df6bac4/Templates.png" data-mid="56039123" border="0" src="https://freight.cargo.site/w/1000/i/ae7cf4ac68998c52944475a5975bdcef2adaf4358cf5431e5d296cd13df6bac4/Templates.png" /> My Role I worked closely with Wishpond’s CPO, inhouse marketing team and fully-managed design team on this project. I was responsible for user research, interviewing inhouse marketers, creating the UI and the the interaction design of the dashboard,&nbsp; visual design of templates, and working closely with the development team to deliver results. Background This project started with a kick off meeting with the executive team at Wishpond. They wanted to increase the signup-to upgrade rate and customer retention after the 14-day trial. We were tasked with looking into how we can improve the campaign dashboard and levrage the information we gather form our onboarding steps and make the campaign creation flow relevant to self-serve users. <img width="3360" height="1908" width_o="3360" height_o="1908" data-src="https://freight.cargo.site/t/original/i/0d22b141d30725612d8d7e5a5d0f1aa2499198694282fdbef5634e3fce64d6fd/Screen-Shot-2016-05-12-at-10.39.18-AM.png" data-mid="52294439" border="0" src="https://freight.cargo.site/w/1000/i/0d22b141d30725612d8d7e5a5d0f1aa2499198694282fdbef5634e3fce64d6fd/Screen-Shot-2016-05-12-at-10.39.18-AM.png" /> Previous Central Campaign Dashboard Gathering Insights We started the project by gaining insights on our self-serve users, what are their need and goals and motivations regarding online marketing, and what are they trying to achieve with Wishpond. I gathered information from Wishpond's customer success team, marketing team, and reached out to users. Here is are some of our findings:Starting out users are not aware of the full potential of the platform. For example many users I talked to&nbsp; didn’t know that they can run email marketing campaigns.Many of our self-serve users sign up for Wishpond&nbsp; to run social media contests and promotions.The biggest industry that uses Wishpond for online marketing is E-commerce.Small business owners who are new to online marketing are not familiar with Wishpond’s terminology and what are the benefits of running different types of campaigns for their business.Template selection step has too many templates and many of them are very industry specific - not goal based.The “Create New” buttons were confusing. Should they make a template first or create a campaign type? So how can we make it easier for users to create the right marketing campaigns for their business so they can achieve their business goals faster and find value in Wishpond? We interviewed our Project Managers to learn more about what campaigns work for what industry and gathered successful campaign examples from our marketing teams. We decided to narrow down our focus to a handful of industries based on the onboarding step analytics and the industries our fully-managed marketing service teams were targeting. Questions we asked ourselves during our research and ideation process: How can users create aestheticaly pleasing, high-converting campaigns that are easy to modify?How can we explain different campaign types better to users?How can we show relevant campaigns based on their business and goals?Which campaigns work best for that industry?How do we help users see value in creating different types of campaigns and show what they can achieve? <img width="3766" height="1406" width_o="3766" height_o="1406" data-src="https://freight.cargo.site/t/original/i/822fba621851868cb53797712496044c276f1fd98ed975dcb2a3ba931baff7b9/Artboard.png" data-mid="56038261" border="0" src="https://freight.cargo.site/w/1000/i/822fba621851868cb53797712496044c276f1fd98ed975dcb2a3ba931baff7b9/Artboard.png" /> Previous campaign creation flow <img width="3766" height="1843" width_o="3766" height_o="1843" data-src="https://freight.cargo.site/t/original/i/3208aef15d9ba9b0673032aafbd728c0f374cb0d572afc9a7bc15f77efaf3c1a/Journey-1.png" data-mid="56038262" border="0" src="https://freight.cargo.site/w/1000/i/3208aef15d9ba9b0673032aafbd728c0f374cb0d572afc9a7bc15f77efaf3c1a/Journey-1.png" /> New guided campaign creation flow Challenges There were some techincal challenges regarding making changes to the central dashboard. The left side panel is a completely different app and is not related to the campaign table. We wanted to A/B test our concepts quickly and needed to find compromises with the technical realities. Making Campaign Creation Visible Inspired by other creation flows on other platforms, we wanted to do a simple test whether adding icons or images to display the different campaign types would help users to differentiate campaigns better. I designed a simple "Create new campaign" section above the campaign table. We wanted to show the most popular campaigns and the option to view all campaign types in an expanded view. <img width="3200" height="743" width_o="3200" height_o="743" data-src="https://freight.cargo.site/t/original/i/6b449312bc5f192e63258313376189d48eccc8cfa9f1d4a6cef67c446c813627/Artboard-Copy-2.jpg" data-mid="55959718" border="0" src="https://freight.cargo.site/w/1000/i/6b449312bc5f192e63258313376189d48eccc8cfa9f1d4a6cef67c446c813627/Artboard-Copy-2.jpg" /><img width="3200" height="1022" width_o="3200" height_o="1022" data-src="https://freight.cargo.site/t/original/i/7dde7324b51c4e9cc0ff02f732a69f1a0cae5068f902070afa11f05a9b5aa262/Artboard-Copy-3.jpg" data-mid="55959717" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7dde7324b51c4e9cc0ff02f732a69f1a0cae5068f902070afa11f05a9b5aa262/Artboard-Copy-3.jpg" /> We ran an A/B test whether and found that this top section approach worked better and resulted in increased campaign creation rates. However we found that images where not enough to explain the value and use-cases of the different campaign types and we needed to improve templates to reflect user goals. Creating relevant, goal driven industry campaign templates We thought of improving the template selection step for each campaign type, but what if we could somehow allow the user to choose campaigns based on their goal right away and take away that second step? We wanted to test whether showcasing goal-based industry campaign blueprints with description text and would help users to learn more about the different campaigns and launch them faster. We worked with the marketing team to create many different campaign templates for different industries and I created the design of templates. <img width="3200" height="1022" width_o="3200" height_o="1022" data-src="https://freight.cargo.site/t/original/i/3445a30747c118815ac704a673b3432cebd0969ef7527ca7e7e5111a55bf1e54/Industry-Based.jpg" data-mid="55960095" border="0" src="https://freight.cargo.site/w/1000/i/3445a30747c118815ac704a673b3432cebd0969ef7527ca7e7e5111a55bf1e54/Industry-Based.jpg" /><img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/e3cc860decd0a6de9316cc5f669617e2c4fd3b5534a11e55ec5daee3ddc23fab/industry-campaign-creation.gif" data-mid="52043548" border="0" src="https://freight.cargo.site/w/1000/i/e3cc860decd0a6de9316cc5f669617e2c4fd3b5534a11e55ec5daee3ddc23fab/industry-campaign-creation.gif" /> Marketing Website I worked with the CPO and the marketing team to create a catalog of industry campaign templates with a full on strategy guide explaining how the campaign works. I was incharge of the UX/UI of the website experience.&nbsp; <img width="2560" height="1386" width_o="2560" height_o="1386" data-src="https://freight.cargo.site/t/original/i/674efe254e5d9ceeacda812e5042681d74209fdab55d58a33b42113932f19360/Screen-Shot-2019-12-03-at-8.07.43-PM.png" data-mid="55956422" border="0" src="https://freight.cargo.site/w/1000/i/674efe254e5d9ceeacda812e5042681d74209fdab55d58a33b42113932f19360/Screen-Shot-2019-12-03-at-8.07.43-PM.png" /> <img width="2560" height="1386" width_o="2560" height_o="1386" data-src="https://freight.cargo.site/t/original/i/7231dd09790597aab778245d52e01425571de29a1dda2d45ce6b4ae184d112bb/Screen-Shot-2019-12-03-at-8.18.48-PM.png" data-mid="55956435" border="0" src="https://freight.cargo.site/w/1000/i/7231dd09790597aab778245d52e01425571de29a1dda2d45ce6b4ae184d112bb/Screen-Shot-2019-12-03-at-8.18.48-PM.png" /> <img width="2556" height="1382" width_o="2556" height_o="1382" data-src="https://freight.cargo.site/t/original/i/268be9313791618029716aa139b7003e589028013ea786af13a1e535a82725cb/Screen-Shot-2019-12-03-at-8.21.22-PM.png" data-mid="55956540" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/268be9313791618029716aa139b7003e589028013ea786af13a1e535a82725cb/Screen-Shot-2019-12-03-at-8.21.22-PM.png" /> <img width="2556" height="1382" width_o="2556" height_o="1382" data-src="https://freight.cargo.site/t/original/i/5f28e2abe735406053e68249eb0d8a6e4300ac6f387e8ca46ab35b1edd0fecfe/Screen-Shot-2019-12-03-at-8.23.15-PM.png" data-mid="55956539" border="0" src="https://freight.cargo.site/w/1000/i/5f28e2abe735406053e68249eb0d8a6e4300ac6f387e8ca46ab35b1edd0fecfe/Screen-Shot-2019-12-03-at-8.23.15-PM.png" /> Launch &amp; beyond We launched the first batch of industry-campaign templates to test it out with users. I was tasked with looking into whether the upgrade rate for users from that industry has increased since launching the new campaign templates and gather feedback from customers. Specific sub-categories of each industry that used those templates have increased in upgrades. We found that the campaign creation rate increased by 15% Dark background color feels intimidating for users. I made a ticket to change the background colorThere are too many campaigns presented in the “View more” page, resulting in a visual overload and indecisiveness. We considered adding a search and filter functions in the future.Users who created campaigns from templates reported to generate great conversion rates. <img width="1440" height="973" width_o="1440" height_o="973" data-src="https://freight.cargo.site/t/original/i/d4575b09129fcc0f4fad10a2d5ab532203f1f6c5c85da4cc284638db8fa9ff9a/Campaign-Dashboard--Long-Title-Example-Copy-11.png" data-mid="56038600" border="0" data-scale="65" src="https://freight.cargo.site/w/1000/i/d4575b09129fcc0f4fad10a2d5ab532203f1f6c5c85da4cc284638db8fa9ff9a/Campaign-Dashboard--Long-Title-Example-Copy-11.png" /> We decided to launch the rest of the industry-campaign templates for other industries. Even if they might not work for some specific businesses, they work as examples of different campaigns you can run with Wishpond. Here are some of my takeaways from this project: Test your ideas and iterate from results. Work with the development team early as possible to learn about the technical challenges. Design never ends, keep iterating and if it's, necessary start from scratch. https://maryasmirnova.com/Wishpond-s-Campaign-Editor-UI-Redesign Wed, 20 Nov 2019 21:30:36 +0000 Marya https://maryasmirnova.com/Wishpond-s-Campaign-Editor-UI-Redesign Wishpond's Marketing Campaign Editor UI Redesign Ux/UI Design Wishpond is a fast growing Vancouver based SAAS company that is on a mission to making online marketing easy for marketers of all skill levels. The platform features a powerful drag and drop editor for creating landing pages, popups, and social promotion contests with no coding required. <img width="1440" height="800" width_o="1440" height_o="800" data-src="https://freight.cargo.site/t/original/i/40116fa12a0b74f3521945b15437f5fb82d265954daa02f3461f30eb990dfcbf/Wishpond-editor.jpg" data-mid="55148092" border="0" src="https://freight.cargo.site/w/1000/i/40116fa12a0b74f3521945b15437f5fb82d265954daa02f3461f30eb990dfcbf/Wishpond-editor.jpg" /> About the project In 2016 Wishpond decided to modernize the drag &amp; drop marketing campaign editor and make it easier for self-service users to create successful campaigns. I had the pleasure of working together with Wishpond's Chief Product Officer to completely redesign the UI of editor while maintaining the same functionality. My Role I joined the product team in 2016 as a Junior UX/UI designer and worked together with Nick, Wishpond's Chief Product Officer analyzing, researching, and coming up with ideas. I was responsible for: Interaction design, creating high-fidelity mockups &amp; interface flows Creating UI Patterns &amp; preparing designs for dev handoff. Working closely with the software development team to conduct feature reviews and make the new UI come to lifeUsability testing and gathering feedback from customers. Defining the Problem We started the project by analysing and gathering insights on paint points users are currently experiencing. We gathered feedback from our support team, watched Hotjar screen recordings, and facilitated usability tests. Here are some of our findings: Editor felt overwhelming &amp; clutteredThere were too many additional options that were presented at once, resulting in a small editing space. The editor also lacked aesthetics and minimal design. Lack of efficiency Editing options appeared in a sliding side panel, and organized by type using tabs. Users would spend one hour or more to create a simple landing page. Templates were also long and complicated. They required lots of design and content changes. A steep learning curve to perform essential functions Starting-out users could not figure out how to use Wishpond's Section/Row/Column page structure or how to move contents within the page. (This is something we could not address in this redesign) Page objects aligned inside the column instead of just dragging &amp; dropping them to the desired location. Users had to add spacer objects to create space in between objects or add margin and padding. <img width="3360" height="1910" width_o="3360" height_o="1910" data-src="https://freight.cargo.site/t/original/i/96eded9a747df48bd25d43a0c3e7694459060441c2a0d9571a4f104c9a0dff15/Screen-Shot-2016-03-20-at-2.16.26-PM.png" data-mid="55148071" border="0" src="https://freight.cargo.site/w/1000/i/96eded9a747df48bd25d43a0c3e7694459060441c2a0d9571a4f104c9a0dff15/Screen-Shot-2016-03-20-at-2.16.26-PM.png" /> <img width="1916" height="1086" width_o="1916" height_o="1086" data-src="https://freight.cargo.site/t/original/i/4c39f0ffa214cc406b047439e7c9904e1c0d6d1acba0a131c9cac607042ddc8c/emailfield2x.png" data-mid="55148117" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4c39f0ffa214cc406b047439e7c9904e1c0d6d1acba0a131c9cac607042ddc8c/emailfield2x.png" /> 2016 Marketing Campaign Editor Initial Explorations I started by gathering inspiration from popular drag &amp; drop editors on the market, like Canva, Wix, Squarespace, and Instapage. I was also looking for a UI Framework that our development team could use to speed up the process. I chose Material UI for its adaptable system of guidelines, components, and tools that support the best practices of user interface design. It also has most of the globally known icons that we needed inside our editor. <img width="1600" height="800" width_o="1600" height_o="800" data-src="https://freight.cargo.site/t/original/i/65807ce3c1e917a7428b53cabe5db3884654b0f2aa7c90784ffe4dcd7495b27a/Early-Explorations2x.png" data-mid="55148114" border="0" src="https://freight.cargo.site/w/1000/i/65807ce3c1e917a7428b53cabe5db3884654b0f2aa7c90784ffe4dcd7495b27a/Early-Explorations2x.png" /> Initial UI exploration on how to edit a button Design Solutions Simplifying Navigation &amp; decluttering the editor We decided to remove the side panel and remove the main navigation bar, which opened up the editing space and creates focus only on editing. The "Add contents" panel and the page design options are accessible from the side fab buttons at any time. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/b11983f1b25dcc152270629fc74dd7585e87d684f92587bbf805a99adb276762/navbar.gif" data-mid="55148097" border="0" src="https://freight.cargo.site/w/1000/i/b11983f1b25dcc152270629fc74dd7585e87d684f92587bbf805a99adb276762/navbar.gif" /> Instant editing on the spot We created a toolbar-menu system that simplifies the editing process by only showing the essential editing options. We hid all of the rarely used and more advanced options under “More”. We chose to use icons to make the toolbar as short as possible. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/9ddda9054bdea1bf4690e1891dde56aa74a337400b5fa6248698a6cee6fd9541/Editing-toolbars-stuff..gif" data-mid="55148098" border="0" src="https://freight.cargo.site/w/1000/i/9ddda9054bdea1bf4690e1891dde56aa74a337400b5fa6248698a6cee6fd9541/Editing-toolbars-stuff..gif" /> Instead of having a slide-out side panel for settings, we designed movable panels that can be easily accessible from the component toolbars. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c21adf73ba542c78e45998e5bc97e7f87f74e991d1916ebbd15a1fc6c4a397b6/Panels.gif" data-mid="55148119" border="0" src="https://freight.cargo.site/w/1000/i/c21adf73ba542c78e45998e5bc97e7f87f74e991d1916ebbd15a1fc6c4a397b6/Panels.gif" /> UI Guidelines Inspired by Material UI, I created UI guidelines for all components inside the editor to ensure consistency for new features. <img width="1600" height="600" width_o="1600" height_o="600" data-src="https://freight.cargo.site/t/original/i/8edc40df5fa157e80de674ffcc801e3b054ea6b17b1bb7b156d157d7d4c9ee80/typography2x.png" data-mid="55148123" border="0" src="https://freight.cargo.site/w/1000/i/8edc40df5fa157e80de674ffcc801e3b054ea6b17b1bb7b156d157d7d4c9ee80/typography2x.png" /> Color &amp; Typography <img width="3108" height="1447" width_o="3108" height_o="1447" data-src="https://freight.cargo.site/t/original/i/26d0450d030be27380e9107ffff7acb4bfaa3f8eb80b690379440c5ffad94c84/Panels---Dialogs---Lists---Headers-1.png" data-mid="55148122" border="0" src="https://freight.cargo.site/w/1000/i/26d0450d030be27380e9107ffff7acb4bfaa3f8eb80b690379440c5ffad94c84/Panels---Dialogs---Lists---Headers-1.png" /> Building blocks of editor components https://maryasmirnova.com/CV Fri, 13 Sep 2019 13:06:19 +0000 Marya https://maryasmirnova.com/CV <img width="4016" height="5473" width_o="4016" height_o="5473" data-src="https://freight.cargo.site/t/original/i/9f4f0813fcfbdd72daf9e96ce3f745b96848e81ebc607bf9454213a249861769/MARIONBRUNELPHOTOGRAPHIE-200-1.jpg" data-mid="50536260" border="0" src="https://freight.cargo.site/w/1000/i/9f4f0813fcfbdd72daf9e96ce3f745b96848e81ebc607bf9454213a249861769/MARIONBRUNELPHOTOGRAPHIE-200-1.jpg" /> I am passionate about creating user-centered design that deeply focuses on the customers needs, frustrations and stories. In the past 4 years, I poured my heart working at Wishpond, a startup based in Vancouver where I worked directly with the CPO and the dev team to make major design overhauls to an all-in-one online marketing platform used by thousands of customers. Recently: I left my job, sold most of my belongings to travel around the world, bought a Ronin-S to record my travels, and challenged myself to draw something everyday. If you've got an exciting challenge, and you'd like to work together, let's chat! https://maryasmirnova.com/Axe-Sings-Mobile-App Fri, 08 May 2015 18:29:01 +0000 Marya https://maryasmirnova.com/Axe-Sings-Mobile-App Axé Sings Mobile App UX Design, USER Research, Videography In 2015 as part of an Experience Design class, my classmate Brendon and I had the chance work with local capoeira group to design a digital experience for them. Axé Sings is a mobile app that helps Axé Capoeira students learn songs in order for them to become more comfortable singing and playing in the roda. .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } My Role Brendon and I worked together conducting ethnographic research, coming up with ideas and concept design. My primary role consited of storyboarding, illustration, filming/editing, and creating posters with our findings. Initial Observations Over the course of 13 weeks, we used various design ethnography techniques to really understand the core values, needs and wants of our participants at Axé Capoeira martial arts group From initial research we found out that capoeira much more than the physical aspect of the martial art. It’s really important for each member of the group to understand the history, learn the language, immerse themselves into the Brazilian culture and strive to develop the proper capoeira style of the group. Most importantly, the role of the Mestre Barrão and his sons really define the culture and the direction of the art form. The teachers at Axé Capoeira really prove that capoeira is real martial form that can be used to defend yourself and fight in the ring. <img width="1200" height="810" width_o="1200" height_o="810" data-src="https://freight.cargo.site/t/original/i/17e9f516f87ac9eebec347c887f5450f21c54a17b4732256ac1d55cd364c2217/posters.png" data-mid="51608806" border="0" src="https://freight.cargo.site/w/1000/i/17e9f516f87ac9eebec347c887f5450f21c54a17b4732256ac1d55cd364c2217/posters.png" /> Diving Deeper In the next part of our research, we wanted to dive deeper into understanding our participants by conducting interviews and creating cultural probes. Cultural probes interactive objects that are meant to be taken home by capoeirstats for a week, and used on their own time so we can gain more understanding about each one of them. We used our insights to create personas that represented the different types of capoeristas in our group. <img width="1200" height="2401" width_o="1200" height_o="2401" data-src="https://freight.cargo.site/t/original/i/ed81e3a3907602c9ab205239ff935f424f678b92922c8afcfda5a5b3695ac936/research-probes2x.png" data-mid="51608285" border="0" src="https://freight.cargo.site/w/1000/i/ed81e3a3907602c9ab205239ff935f424f678b92922c8afcfda5a5b3695ac936/research-probes2x.png" /> Importance of Music Through our research we discovered that one of the most important aspects of capoeira is music. Capoeira heavily involves music and it’s unique in each capoeira academy. Capoeristas spend a lot of their time outside of their training time learning how to play drums, berimbau and singing songs. Most of the songs at Axe Capoeira are entirely composed by Mestre Barrão - the founder of this group. Learning these songs in Portuguese is one of the mandatory challenges you needed to face as a capoeirista.Challenges:- understand Protuguese lyrics- memorize lyrics &amp; melody&nbsp;- Sing along with the music There were very few resources provided by the group and that exist on the web that allows them to learn the lyrics, read the translations and play the music in one place. We started to design a solution that could help capoeiristas to learn Axé Capoeira songs and develop confidence in singing them in class. We created journey frameworks and storyboards to learn more about the process of learning music to find out the various pain points our participants encounter along the way and where our design could help. We presented and shared our initial ideas with the group and received their feedback which further helped us finalize our design. <img width="1200" height="1528" width_o="1200" height_o="1528" data-src="https://freight.cargo.site/t/original/i/78439369bc033b54fd10e3ff22ebd72a8e41a1e059863299b0a0701e610faec8/pre-final2x.png" data-mid="51608159" border="0" src="https://freight.cargo.site/w/1000/i/78439369bc033b54fd10e3ff22ebd72a8e41a1e059863299b0a0701e610faec8/pre-final2x.png" /> Final Design Axé Sings is a mobile app that helps Axé Capoeira students learn songs in order for them to become more comfortable singing and playing in the roda. It provides onscreen lyrics, translation, and history as well as singing along mode. By providing various levels of learning, Axé Sings helps supplement the learning of Axé Capoeira’s songs outside of class, while also empowering students and making them more comfortable singing the songs. <img width="1200" height="793" width_o="1200" height_o="793" data-src="https://freight.cargo.site/t/original/i/2bc2f2a6a4f246af3b852a9a42f6d710f2d2dc5343cb47eb29df634004a1dabc/final-app2x.png" data-mid="51608065" border="0" src="https://freight.cargo.site/w/1000/i/2bc2f2a6a4f246af3b852a9a42f6d710f2d2dc5343cb47eb29df634004a1dabc/final-app2x.png" /> Results &amp; Takeaways I really enjoyed using the various design research methods to learning more about our participant group, what their needs, frustrations and wants are. Who knew how important music is to capoeira! We originally wanted to design a capoeira training app for them, but after we realized that its not what they need. Our participants and the main leader at the academy were really looking forward to using this app. They asked us to look into how much it would cost to develop but unfortunately it was way too expensive for Axé Capoeira at the time, so it was never realized. This project was presented at the SFU Surrey Campus Open House for the university's 50th Anniversary Celebration. https://maryasmirnova.com/About-Wishpond-Video Fri, 13 Sep 2019 18:35:22 +0000 Marya https://maryasmirnova.com/About-Wishpond-Video About Wishpond Videography, Motion Graphics I joined Wishpond as a Videographer, helping Bree, Customer Success lead to create videos for Wishpond’s Youtube channel and as well as for product onboarding. One of the videos I created was the new "About Wishpond" video for the website :) .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }