{"version":3,"sources":["webpack:///./src/pages/sympli.js"],"names":["IndexPage","render","title","keywords","Section","style","opacity","src","alt","href","React","Component","styled","section"],"mappings":"4KAKMA,E,kGACJC,OAAA,WACE,OACE,6BACE,kBAAC,IAAD,CACEC,MAAM,SACNC,SAAU,CAAC,OAAQ,SAAU,aAAc,WAE7C,uDACA,kBAACC,EAAD,KACE,uBAAGC,MAAO,CAAEC,QAAS,SAArB,mDAGA,yBAAKC,IAAI,oBAAoBC,IAAI,mBACjC,yCAEG,IACD,uBAAGC,KAAK,qBAAR,eACC,IAJH,sJAQE,uBAAGA,KAAK,8BAAR,YARF,OAYF,kBAACL,EAAD,KACE,oCACA,kEACA,gEACA,+JAEF,kBAACA,EAAD,KACE,uCACA,8hBAUA,wMAIG,IACD,uBAAGK,KAAK,+EAAR,YALF,iHAYF,kBAACL,EAAD,KACE,6DACA,ubASA,4BACE,0HAIA,mJAIA,8IAIA,qJAIA,6FAGA,gLAKA,wTASJ,kBAACA,EAAD,KACE,sDACA,yBAAKG,IAAI,oBAAoBC,IAAI,mBACjC,kRAMA,yBAAKD,IAAI,oBAAoBC,IAAI,mBACjC,gMAKA,yBAAKD,IAAI,oBAAoBC,IAAI,mBACjC,8RAMA,yBAAKD,IAAI,qBAAqBC,IAAI,mBAClC,8QAMA,mRAMA,gMAMF,kBAACJ,EAAD,KACE,yDACA,yBAAKG,IAAI,qBAAqBC,IAAI,mBAClC,iPAMA,+LAKA,uPAMA,gPAKG,IACD,uBAAGC,KAAK,8HAAR,iBAGC,IATH,kCAaF,kBAACL,EAAD,KACE,2CACA,yBAAKG,IAAI,oBAAoBC,IAAI,mBACjC,wdASA,yBAAKD,IAAI,oBAAoBC,IAAI,oBAEnC,kBAACJ,EAAD,KACE,oDACA,6WASF,kBAACA,EAAD,KACE,uCACA,yBAAKG,IAAI,oBAAoBC,IAAI,mBACjC,kTAOA,4BACE,wKAKA,6IACA,2IAIA,mNAKA,oIAIA,uIAIA,6R,GA1OYE,IAAMC,WAuPxBP,EAAUQ,IAAOC,QAAV,qEAAGD,CAAH,ivBAiFEZ","file":"component---src-pages-sympli-js-6811a8dc9f5579712c4d.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from 'styled-components';\nimport SEO from '../components/seo';\n\nclass IndexPage extends React.Component {\n render() {\n return (\n
\n \n

Designing for designers

\n
\n

\n product design ・ UX research ・ design direction\n

\n \"Sympli\n

\n I’ve joined\n {' '}\n Sympli team\n {' '}\nin mid’2017.\n My main task was to define the vision and create concepts for the\n new Sympli product: version control system for Sketch files called “\n Versions\n ”.\n

\n
\n
\n

Team

\n

Product Manager / CTO: Max Ignatyev

\n

Development Lead: Kirill Kozionov

\n

Development and QA: Olga Vozchikova, Andrey Grebennikov, Alexey Martemyanov, Ilya Kozlov, Alexandra Postovalova, Alyona Didenko

\n
\n
\n

My Role

\n

\n Once again, I became a single designer in a mainly technical team. I\n was doing everything design-related: starting with marketing\n materials and ending with creating general user-flows and creating\n body copy for most interfaces. Our team used daily syncs to stay on\n the same page, and I worked with the dev team as close as I could,\n which sometimes involved working directly with the codebase. We\n worked in sprints and did regular retrospectives afterwards, trying\n to learn on our own mistakes whenever possible.\n

\n

\n My secondary goals were to maintain all the existing Sympli\n ecosystem with MAU of 40 000+: web app, plugins for Sketch, Adobe\n Photoshop, Xcode, Android Studio, later on —\n {' '}\n \n Adobe XD\n \n , and work with all the marketing assets for Sympli products: blog\n illustrations, social media, videos, etc.\n

\n
\n
\n

Business Goals and Challenges

\n

\n Sympli as a growing business needed to reach for new users, mainly\n enterprise design teams, that have made up the core of our\n eco-system — in turn, so that we can increase the revenue and do a\n better service for our client base: adding new integrations, scaling\n our tech solutions, focusing on the needs of big teams. So, here are\n the most important things we wanted to do with the Sympli's line of\n products:\n

\n
    \n
  1. \n Build new product for design version control that could\n dramatically expand our user-base;\n
    2. \n
  2. \n Design and build an eco-system for the new product: native apps\n and plugins, plus, web service for the whole thing;\n
    3. \n
  3. \n Improve brand language and marketing communications, so we can\n easier onboard new users and improve retention;\n
    4. \n
  4. \n The existing app (Simply Handoff) with all its integrations and\n multiple platforms needed to receive a design update;\n
    5. \n
  5. \n Reduce the churn rate for the Sympli Handoff by improving UX;\n
    6. \n
  6. \n As a small agile team we had to make a lot of design iterations\n fast, so I sometimes had to work directly with our codebase and\n iterate in code;\n
    7. \n
  7. \n When I assumed the role of the lead designer I had to deal with a\n legacy library of design sources, mixed with badly done assets and\n screenshots embedded in vector Sketch files. This slowed the work\n dramatically, so I had to slowly rebuild the relevant files from\n the ground up.\n
    8. \n
\n
\n
\n

Designing the Versions

\n \"Sympli\n

\n Launching Versions app from 0 to 100% was an enormous team effort.\n We started with a rough tech prototype which served as a\n proof-of-concept, and made several iterations on Finder daemons, to\n get a grasp of what operating system is capable of.\n

\n \"Sympli\n

\n Then we've done multiple takes on UX design, defining most relevant\n user scenarios, and thinking about the connections between different\n services from the start.\n

\n \"Sympli\n

\n Versions was initially a purely native macOS app with tight OS\n integrations, but in a couple of months before the beta release,\n we've designed web service allowing our users to view design changes\n online — think Bitbucket or Github but for Sketch designs.\n

\n \"Sympli\n

\n Another important part was advertising the new app among our\n existing users and making the necessary announcements. I've done\n designs for newsletters and landing page describing the advantages\n of the new app in Sympli's family of products.\n

\n

\n I've scripted and conducted 20+ interviews showing designers from\n different client teams interactive prototypes, trying to understand\n their pain points, whether Sympli Versions help to tackle them or\n not, and adapting the scenarios accordingly.\n

\n

\n Versions launched successfully in about 6–7 months, and the team\n started improving user experience further on the live product with\n the first ≈100 beta-testers.\n

\n
\n
\n

Working on the eco-system

\n \"Sympli\n

\n In parallel, we worked with our existing products including handoff\n plugins for Photoshop, Sketch, and plugins for XCode or Android\n Studio helping the devs to get designs right in their IDEs of choice\n directly.\n

\n

\n I helped to design and launch a new plugin for Adobe XD which was\n right out of beta, and some of our users implemented the new product\n in their design pipeline.\n

\n

\n Sketch team introduced prototyping feature around that time, so we\n quickly adapted this new functionality to the core Sympli product,\n allowing our users to hand-off and preview Sketch prototypes right\n in our web app.\n

\n

\n With our user base being mostly enterprise design teams we wanted\n them to be able to work flexibly with the most ubiquitous task\n management system, Jira; so we've introduced Sympli live embeds in\n Jira tasks via\n {' '}\n \n Sympli plugin\n \n {' '}\n on the Atlassian marketplace.\n

\n
\n
\n

UX research

\n \"Sympli\n

\n We've started doing regular user interviews with data scientists\n working on our team, and later — with data scientists, architects,\n and managers working on our potential clients' teams. This included\n the whole thing from writing the script, to sitting next to a user\n and watching them traverse the particular scenario, analyzing the\n results (usually through a direct discussion), and then simplifying\n and adapting our interface if necessary.\n

\n \"Sympli\n
\n
\n

Communication design

\n

\n I created a small design system to be able to build communication\n banners, blog post previews, etc. quickly. Also, I supervised the\n overhaul of Sympli's main website with increasing the retention and\n expanding our userbase in mind. This included clarifying\n communication in everything related to payments and new users'\n registration.\n

\n
\n
\n

Results

\n \"Sympli\n

\n From the design perspective, all this was done by me\n single-handedly, but of course enormous tasks of native programming,\n product direction, quality assurance were all team efforts. We\n talked with our users constantly trying to understand their goals\n and frustrations better.\n

\n
    \n
  1. \n sympli.io website was fully refreshed, a new, clearer, pricing\n scheme was introduced, which helped to lower the workload on the\n support;\n
    2. \n
  2. We've reduced the churn rate in our userbase, and the audience of the core product started to grow naturally;
    3. \n
  3. \n In a half-year or so we’ve managed to build a beta version of a\n design VCS called “Versions” for the macOS;\n
    4. \n
  4. \n We’ve made several newsletters, done ≈20 user-interviews, launched\n Versions landing page, and demoed Versions for some existing\n Sympli clients, collecting feedback in the process;\n
    5. \n
  5. \n Sympli plugin for Sketch was refreshed; a new plugin for the\n recently introduced Adobe XD was built;\n
    6. \n
  6. \n Several new service integrations were introduced — main being the\n Jira / Confluence live design embeds;\n
    7. \n
  7. \n I assumed a new role of an art director and copywriter, sometimes\n doing illustrations myself. I believe, that a good body copy is\n 80% of a good interface, so I’ve tried to make both Sympli and\n Versions interface copy succinct and easy to understand.\n
    8. \n
\n
\n
\n );\n }\n}\n\nconst Section = styled.section`\n padding: 0;\n p {\n color: #000;\n }\n\n &:first-child {\n margin: 8rem 0 2rem;\n }\n\n &.typeA,\n &.typeB,\n &.typeC {\n border-radius: 0.5rem;\n padding: 1rem;\n }\n\n &.typeA {\n background: #ffd84d;\n }\n\n &.typeA p,\n &.typeB p,\n &.typeC p {\n color: #000;\n }\n\n & > img,\n & > iframe {\n width: 100%;\n margin: 4rem 0;\n }\n\n h2 {\n text-align: left;\n color: #000;\n }\n\n &.secondaryHolder {\n display: flex;\n justify-content: space-between;\n align-items: top;\n }\n\n & .secondary {\n border-radius: 0.5rem;\n padding: 1.5rem;\n background: rgba(232, 233, 239, 1);\n // background: #FFD84D;\n width: 28rem;\n }\n\n @media (max-width: 1024px) {\n &.secondaryHolder {\n flex-direction: column;\n }\n\n & .secondary {\n width: 100%;\n margin: 0 0 3rem;\n }\n }\n\n .secondary h2,\n .secondary p {\n text-align: left;\n color: #000;\n padding: 0;\n }\n\n .secondary a {\n color: #000;\n text-decoration: none;\n border-bottom: 4px solid rgba(0, 0, 0, 0.75);\n }\n\n .secondary a:hover {\n border-bottom: 4px solid #ffd84d;\n }\n`;\n\nexport default IndexPage;\n"],"sourceRoot":""}