{"version":3,"sources":["webpack:///./src/pages/habidatum.js"],"names":["IndexPage","render","title","keywords","Section","style","opacity","src","alt","href","React","Component","styled","section"],"mappings":"2KAKMA,E,kGACJC,OAAA,WACE,OACE,6BACE,kBAAC,IAAD,CACEC,MAAM,YACNC,SAAU,CAAC,OAAQ,SAAU,aAAc,WAE7C,qDACA,kBAACC,EAAD,KACE,uBAAGC,MAAO,CAAEC,QAAS,SAArB,wCAGA,yBAAKC,IAAI,uBAAuBC,IAAI,uBACpC,kDAEG,IACD,uBAAGC,KAAK,wBAAR,yBACC,IAJH,sEAQF,kBAACL,EAAD,KACE,oCACA,6DAGA,kDAGA,mEAGA,8JAIF,kBAACA,EAAD,KACE,uCACA,4JAIA,wXAQA,0VAQF,kBAACA,EAAD,KACE,qEACA,yBAAKG,IAAI,uBAAuBC,IAAI,uBACpC,yWAGA,8FACA,4BACE,4HAIA,4KAKA,4JAIA,mPAMA,yLAKA,wJAKF,yBAAKD,IAAI,uBAAuBC,IAAI,wBAEtC,kBAACJ,EAAD,KACE,4CACA,yBAAKG,IAAI,uBAAuBC,IAAI,uBACpC,keASA,4EACA,4BACE,gGAGA,yJAIA,kKAKA,+FAKJ,kBAACJ,EAAD,KACE,8CACA,ocAQA,ieAUF,kBAACA,EAAD,KACE,2CACA,mdAUF,kBAACA,EAAD,KACE,+CACA,qXAQA,yBAAKG,IAAI,uBAAuBC,IAAI,uBACpC,mXAQA,yBAAKD,IAAI,uBAAuBC,IAAI,uBACpC,udAUF,kBAACJ,EAAD,KACE,uCACA,4BACE,iIAIA,sEACA,qEACA,+EACA,yHAIA,oGAIA,uIAIA,0OAMA,6G,GA3NYM,IAAMC,WAsOxBP,EAAUQ,IAAOC,QAAV,wEAAGD,CAAH,ivBAiFEZ","file":"component---src-pages-habidatum-js-98b77c496eb549abfd21.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

Making smarter cities

\n
\n

\n UI design ・ UX research ・ design ops\n

\n \"Chronotope\n

\n I started working on\n {' '}\n Habidatum+Mathrioshka\n {' '}\nurban analytics platform in mid’2016 and worked on it for a year.\n

\n
\n
\n

Team

\n

\n Design Director: Eduard Haiman\n

\n

\n CTO: Vadim Smakhtin\n

\n

\n Analytics Director: Ekaterina Serova\n

\n

\n Development team: Nikita Pestrov, Alexei Pyzhyanov, Anton Vasin, Tim Tavlintsev, Nadya Klevakina, Galya Sarkisyan, and others.\n

\n
\n
\n

My Role

\n

\n At first, I was a single designer in a company and collaborated\n closely with development, management, and data science teams.\n

\n

\n I designed and updated various interface components and flows using\n instruments at hand, sometimes working — literally — side-by-side\n with the developers, which helped us to iterate swiftly. My main\n tools were Sketch for mocking the designs, Principle for UI\n animations, and front-end stack (JS, Stylus, HTML, Git) for building\n hi-fi prototypes.\n

\n

\n After two more designers joined the team, we re-created the design\n pipeline completely with Figma (yes, back in early 2017). In all\n these ventures I was the leading designer. My job was also to\n maintain the design library and share the knowledge with new\n designers in the team, which was one of the favorite parts.\n

\n
\n
\n

Business Goals and Product Challenges

\n \"Chronotope\n

\n In the ever-changing market of urban analytics and big data, the brand new product made by a relatively small team should be well-designed and properly marketed to stand out from the \"heavy-weight\" competition. This task implies finding the right niche and doing a lot of UX and market research, adding tech perfection to the mix.\n

\n

There were several pain points our team was trying to overcome:

\n
    \n
  1. \n We needed to onboard first actual users for the Chronotope\n platform and start earning money;\n
    2. \n
  2. \n User testing process paired with basic product analytics needed to\n be established for the team to be able to measure the success of\n the app;\n
    3. \n
  3. \n The platform — a web app with an intricate high-load back-end\n needed a “face-lift” on the client-side, and in the dashboard;\n
    4. \n
  4. \n After our design team was expanded with two more designers working\n primarily on PCs a question of design continuity arose, along with\n the necessity to build a system of reusable cross-platform design\n components;\n
    5. \n
  5. \n Some client projects, mainly presentations created with Readymag,\n needed additional polishing and actualization that involved both\n visual and UX updates;\n
    6. \n
  6. \n A huge backlog of old tasks and irrelevant designs stored\n chaotically — .psd and .sketch files, or rogue raster images.\n
    7. \n
\n \"Chronotope\n
\n
\n

The Platform

\n \"Chronotope\n

\n Speaking of our main asset: the Platform, we tried to achieve the\n transparency of urban data (collected either from open sources, like\n Swarm or Twitter, or from client custom-made datasets) for everyone\n — not only the urban experts. It included the interface updates\n making it more user-friendly, and the creation of a user knowledge\n base. One of the toughest problems here was to make the process of\n data upload and initial setup as easy as possible.\n

\n

The Platform was split into four main blocks:

\n
    \n
  1. \n Back-end and dashboard allowing the data upload and fine-tuning;\n
    2. \n
  2. \n Front-end part with a complex data visualization right in browser\n (this included the help and knowledge base interfaces);\n
    3. \n
  3. \n Customizable part allowing to build tailored instances of the\n Platform specifically for enterprise clients from “building”\n blocks;\n
    4. \n
  4. \n Platfrom landing page, allowing to subscribe to beta updates.\n
    5. \n
\n
\n
\n

Design library

\n

\n To facilitate the work of a cross-platform team we needed a totally\n new solution. I used Sketch and other designers relied mainly on\n Windows solutions such as Creative Cloud app stack. These apps were\n not up to the task of connecting two design worlds. I suggested using Figma as it was the best web-based solution at the time (still\n in beta, tho), and allowed us to work collaboratively on the same\n designs in real-time.\n

\n

\n So, one of the first teams in Russia we started using Figma for\n day-to-day design tasks. This included building a component library,\n splitting all the existing designs into categories, and importing\n Sketch-made designs to Figma. The design process had a defined set of\n steps: experimentation and discussion, creating different states for\n a component, implementing it into a library — each step with its own\n workspace to make quasi-versioning easier.\n

\n
\n
\n

UX research

\n

\n We've started doing regular user interviews data scientists working\n on our team, and later — with data scientists, architects, and\n managers working on our potential clients' teams. This included the\n whole thing from writing the script to sitting next to a user and\n 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
\n
\n

Client projects

\n

\n The main goal here was to create a visual style that can be reused for\n new client presentations. Older landing pages and interactive\n visualizations needed to be adapted for mobile platforms. Together\n with the front-end engineering team we optimized the performance and\n made all the animations in the interactive dataviz as smooth as\n possible.\n

\n \"Chronotope\n

\n The side-goal here was to build up a library of reusable components\n (plots, charts, media galleries, etc.) for our future landing pages\n and visualizations. Later on, most of them were added to our\n codebase. Also, we’ve experimented a lot with color schemes, font\n styling, and different controls to improve the usability on mobile\n platforms.\n

\n \"Chronotope\n

\n At some point, we’ve designed a special version of our platform with\n some additional widgets and tweaks to be used on-premise for one of\n our main clients. This lead to solving some challenging tasks:\n platform interfaces had to work nicely on multiple connected\n screens; some parts needed to be built from scratch or heavily\n adapted for mobile devices; all web interfaces also have to be\n optimized for real-time monitoring of huge datasets.\n

\n
\n
\n

Results

\n
    \n
  1. \n In less than a year we’ve updated the design of the Platform, so\n it was ready for a beta release;\n
    2. \n
  2. 20+ user interviews 🎙 were conducted;
    3. \n
  3. Onboarded first 5 enterprise clients;
    4. \n
  4. New design for Habidatum landing page was done;
    5. \n
  5. \n Design team created several mobile-optimized interactive data\n visualizations for clients;\n
    6. \n
  6. \n Tried out the new role of a design lead 🤯. Onboarded new\n designers;\n
    7. \n
  7. \n We’ve acquired the knowledge about the new tool — Figma — and\n built all our design processes around it;\n
    8. \n
  8. \n We gradually increased the “design awareness” among the teams of\n managers, analytics, and developers with a series of guest\n lectures and workshops about typography, building presentations,\n etc. 👩🏽‍🏫;\n
    9. \n
  9. \n Made a company booth at Smart City Expo in Dubai, and for\n Barcelona Expo.\n
    10. \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":""}