{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/content/posts/tnds-challenge-week","webpackCompilationHash":"0fb77888eafce0e19778","result":{"data":{"markdownRemark":{"frontmatter":{"title":"TNDS Challenge Week"},"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7f71f1ac6d6d771766d0f5560f5b0f5a/b4133/working_dev.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66.3888888888889%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQACA//EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFDJXOViNh//8QAHRAAAgIBBQAAAAAAAAAAAAAAAQIAAwQRExQhIv/aAAgBAQABBQLsTfXTk1wXMUb2wx1n/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BiP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAIABwAAAAAAAAAAAAAAAAABAhESMVJh4f/aAAgBAQAGPwKdRA8jgxbLs//EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQVFhcf/aAAgBAQABPyHG7Q2qh1y9U9T2J9Uv7gSiUWm4mjyT/9oADAMBAAIAAwAAABDoD//EABcRAQEBAQAAAAAAAAAAAAAAAAEAEVH/2gAIAQMBAT8QcOQuX//EABcRAAMBAAAAAAAAAAAAAAAAAAABEVH/2gAIAQIBAT8QtHNP/8QAGxABAAMBAQEBAAAAAAAAAAAAAQARIUExUWH/2gAIAQEAAT8Q1Cu1WhyIQKpoD7LfyyoqDu5a9rkYGYByLDR7bDfkqWzRican/9k='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"developer_designer\"\n        title=\"Working\"\n        src=\"/static/7f71f1ac6d6d771766d0f5560f5b0f5a/c739e/working_dev.jpg\"\n        srcset=\"/static/7f71f1ac6d6d771766d0f5560f5b0f5a/8ee9c/working_dev.jpg 148w,\n/static/7f71f1ac6d6d771766d0f5560f5b0f5a/ebbe7/working_dev.jpg 295w,\n/static/7f71f1ac6d6d771766d0f5560f5b0f5a/c739e/working_dev.jpg 590w,\n/static/7f71f1ac6d6d771766d0f5560f5b0f5a/5413e/working_dev.jpg 885w,\n/static/7f71f1ac6d6d771766d0f5560f5b0f5a/b4133/working_dev.jpg 1080w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </a>\n    </span></p>\n<p>This project started during the masterclass with Javier ‘Simón’ Cuello at The\nNew Digital School. Javier is a UX designer specializing in mobile, currently\nliving in Barcelona, who has worked on app design projects for companies like\nZara, Telefónica, and Yahoo and is also the co-author of Designing Mobile Apps.</p>\n<h2>The challenge</h2>\n<p>As students at a school as alternative as The New Digital School (TNDS), it’s\nimportant for us to track our progress and set goals to define each one’s right\npath. For that purpose, we have Polygon, a platform for planning and assessing\nof our learning process at the school. Me and Imran Rahim decided to work on\nPolygon because it didn’t have a mobile version at the time. We also wanted to\nmake some improvements on the way it worked. We also felt it was important to\nwork on a real problem while developing our design and development skills.\nWorking on this project could have an immediate impact for all students.</p>\n<h2>Process</h2>\n<p>Between the masterclass and the challenge week, we came across more dilemmas.\nAlready considering starting a design system, we needed to decide how we would\nsplit tasks so that it would be easy to work remotely. Globally we identified\nthree distinct stages:</p>\n<ul>\n<li>Design the mobile app version (Android) for the Polygon (part of the initial\nmasterclass challenge);</li>\n<li>Flow changes to have a better user experience;</li>\n<li>Readapt the mobile app design that emerged from the masterclass to the current\nweb version and all its constraints;</li>\n<li>Start a Pattern Library;</li>\n</ul>\n<p>We sketched our app in paper wireframes and with the help of Marvel app we were\nable to test the prototype in order to find potential challenges.</p>\n<p>That allowed us to start increasing fidelity of wireframes based on Material\ndesign. Material design was what we use a starting point. With the goal of\nkeeping consistency, we also learned that is very important for sticking with\npattern interactions that users are used to. This avoids confusion and keeps the\nsame user experience between operating systems.</p>\n<p>We went through some versions until reach a better user experience.</p>\n<p>With Polygon actually being a web platform, we had to start looking at it as a\nweb app and adjust the design accordingly. The good thing about Material design\nis the fact that it’s universal when it comes to the environment of the app and\ncan also be used for the web.</p>\n<p>As TNDS grows and creates more web projects, it needs a place where it’s visual\npatterns are documented and accessible by designers and developers (including\nstudents). With this in mind, we decided it was worth it to explore the idea of\ncreating a Pattern Library.</p>\n<h2>The Pattern Library</h2>\n<p>A pattern library consists of a collection of reusable Interface elements\norganized in a way that allows developers to see their visual look, behavior,\nand code.</p>\n<p>For TNDS, this collection of elements has the purpose of keep consistency\nallowing the creation of elements that appear multiple times making it easier to\nreuse them in future projects.</p>\n<p>We started by identifying some patterns such as Typography, buttons, cards,\nnavbar, forms, and labels.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/73322cc2c99c357aab3e5fdbc398770d/5d21f/buttons.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 64.15094339622641%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsSAAALEgHS3X78AAABRElEQVQoz6WRT0sCURTF/XJ9gIg2tQwiIqgkEaMgosCKMHV0ERVRU4xjYf8oTKKgSAOthaK4sSwigwK1sUXjPbd5TrvMJjoceHDh994599lkWVYUZScSuU6lmBlCbFG2arWqaVqlUqnV3g3MOingOonj6JLbBgzDKdHMGvXPkt1LQwtk91Gvm3whNEJ9g6kBJ9I04tWdkr60q6sxzG9ACkPaEp6TEYo1z2Mz7yu9Ip6mZJauMsgUUHhE7o6zt8L5IpsPtIrdNYY+N3qmMOiBw49OFzqcaHegexzlN24e2xw9PLOkwq8iEBaZT5Ni+KGzXhf+cWEmfF9io55PRXAb06uIJsSQftv8F1x84olFsZvRIKLxBkkWvsqEX8ocOcP+OcInuMk3b9gKXj/E5jGW95DM/RE2OrsCmFzBsAcHF5Zj8z/0CQ2z0SAqCwQSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Buttons\"\n        title=\"Buttons\"\n        src=\"/static/73322cc2c99c357aab3e5fdbc398770d/b9e4f/buttons.png\"\n        srcset=\"/static/73322cc2c99c357aab3e5fdbc398770d/cf440/buttons.png 148w,\n/static/73322cc2c99c357aab3e5fdbc398770d/d2d38/buttons.png 295w,\n/static/73322cc2c99c357aab3e5fdbc398770d/b9e4f/buttons.png 590w,\n/static/73322cc2c99c357aab3e5fdbc398770d/5d21f/buttons.png 689w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </a>\n    </span></p>\n<p>Fig 1. Buttons from interface inventory</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fc2222893d4d1f33bad3a79af1b1abe7/57186/cards_1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75.14450867052024%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAIAAABr+ngCAAAACXBIWXMAAAsSAAALEgHS3X78AAADYklEQVQoz0VSa0ySURj+aqvmrWaKhCQWQqVUtgjS1prpksqVlpXd5o/+aGXNov60sq2Lcy5+VJtWti4LXd5QQYHUFrYiM5Z+8HmZOrMgUGMKWkLf951zOtBaz96dnXc7z3mf930fwu5wUBTV39/vw/DDGY9/xkPP/YQAgoYmQ8WjF1VPX1Y8Uk9MTri9yGylLYOMmWQ/DwEWQMLlcvX29pJWCiHf7du/kjcNxwkqT592IwRl27K5cdI1krRovsza16N9h2IUcxuOz6866E8vYhgWESgIlg2cSuWkUOgMW6o8cbIPp9szjvJWpa5LzozkyW2kRd+NVucym/KhMBcqimGADCEEADAMwK+vXRndlvo9JORK1p7qADktOyZ2fRQ3aeESAdnbrfuAhHl0agGIzwE7CsD/ygBAfD6s+HqmcCw3p+PyBRNOFUfLhfJL4lQlR1JE9Q+3f0LSU3TGeXZzPputBFgswWDxQdFskM9iDQCnWAuq0zGPXzJqDaqqQd8ciIVoahq5PYGY9mLFiJhwTVG2QaNWa6MGRsddAzaqU69xOsa9Mygz5Ys41rg2vjaZ/8PQhL9m5+Z+Yfh9PtwrRJCwWKz3VHdL8nY/r6yoaWhrqKm+V6ok+3pmZ9Eu+U8RjxLFt4u5E21NeCjz9q9j3+1j024nloZLExqN5tqly8VZ20uulpTdKS+/efVC4Yk3r1s9HpgmGxHFfkwUdq2OIQ0tjHeeVutmjGaf7q0f7xnvkrh14/qu9J0HFOkHD+TuVMiO5aUd2Z9haG30+1DKFqOAZ1ifYBFEm161+PBEuq3gAwU7eyA5HCSbTF1qdXVtbV1Dff2DyqqzRRfPnyt+/OTFezOpUnWU3moqK9WVqcg2E7SOwqFxOO+H6B8Cq5qccttsQ1M/pkdGx7kCOSdOFrpcEh4lWRYjjhIdjuRvXbn1fsIhxN9LczJB+8cAmWaCZNy33eG02ga/2Z195AB3pTQuIYXD37xCIA+LFHOkzyJFhdEbVZLjSJpPC3PAGwsM+uJfZbxn/28aX4ZHviyKEIdHJS2OWLMoQrQwRLggNJFYzItIvC/IQfH7GE4mbjho57/kgEVYbA0GS/DOzjY2GxubDZpmYyBajBptu6ZZr+0Y0ZuR/j3d+o5xubFZWJphMfEPKVdf+0vaPRMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Ui Cards\"\n        title=\"UI Cards\"\n        src=\"/static/fc2222893d4d1f33bad3a79af1b1abe7/b9e4f/cards_1.png\"\n        srcset=\"/static/fc2222893d4d1f33bad3a79af1b1abe7/cf440/cards_1.png 148w,\n/static/fc2222893d4d1f33bad3a79af1b1abe7/d2d38/cards_1.png 295w,\n/static/fc2222893d4d1f33bad3a79af1b1abe7/b9e4f/cards_1.png 590w,\n/static/fc2222893d4d1f33bad3a79af1b1abe7/57186/cards_1.png 865w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </a>\n    </span></p>\n<p>Fig 2. UI card components collected from the website and mobile app prototype</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7b3faf20dfef5815567511b70d4beea3/4f3bc/cards.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 79.94186046511628%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAAACXBIWXMAAAsSAAALEgHS3X78AAACJElEQVQoz4VTy27TQBTNgv9gy1+A+IMK8SVdsUQIseYHEEjdIMQaCRGR7kpoI9du4sT1O37HTvyY8fgxnnAdJ24LFM5iPB75zDn3nuvBaDQaj8fD4TAIgqZpEMLrmARRZlm25wWO69mOa9nOcmnnOWGMUUq3Bww4juN5fjKZrNdRsC4kI9Yc5PixomiKaujGUtVMw7D8YIXzHAggcEPe3kJOiqIgcYJSVFRVVZYVHBACSwkAGijfIbMD4IWQXDfdnJRhFP08585+XHD81LZd07RVzQDb9yoDvaGVHdIYNyhLwa0fhNF6EyfpZpPA43+2czy5FHNSZVkmy5phWppuQtmyopumRekftg+yrW3fc54eHcsWznE2nUni/HohKeJcnomSpi+TNPuXMgCaBPborjcdmkNHWtGG1RROtqwnZwhBpKswclwfIbS9H4zd2bTkIAins4WsaLwgGsayq6KPoEOz20o2ff7KffEBF9WBrKjOKooxziDUvgXNDj2Z7rbPXqPBo0+DJ/HJKduTfX91KcyEq9lCkucLGZqk66YgiJpq3iK3Xx+/I4OHLx88/j4UWomWDKWCYaBBt6qqhmGCqWqbs2W/Vet57pu3J+8/fq2rYq8MMxnDKKQp5FzXdUeRvqnSqdLXv5sCcjHhpYXE88K1rO3JoJMkCQxGt5ZFCYfc5yv+i9CPQLeBCOuadmnDa0sGr3ArAGPc/QB/C+nmin3sjP0CDFuC/rs1N2UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Cards\"\n        title=\"Cards\"\n        src=\"/static/7b3faf20dfef5815567511b70d4beea3/b9e4f/cards.png\"\n        srcset=\"/static/7b3faf20dfef5815567511b70d4beea3/cf440/cards.png 148w,\n/static/7b3faf20dfef5815567511b70d4beea3/d2d38/cards.png 295w,\n/static/7b3faf20dfef5815567511b70d4beea3/b9e4f/cards.png 590w,\n/static/7b3faf20dfef5815567511b70d4beea3/4f3bc/cards.png 688w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </a>\n    </span></p>\n<p>Fig 3.UI card components collected from the website and mobile app prototype</p>\n<p>I knew there were tools to help you avoid building a pattern library from\nscratch and I found a few like Atomic and Astrum and proceeded to test both.\nAstrum was the chosen one because it’s lightweight, easy to include in projects\nand because it offers a command-line to manage components and groups. Astrum is\nalso responsive and I loved how easy it was to customize the theme.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b0714e2e66dddb6912729656c3ba2f72/2f950/pattern-library-overwiew.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.4375%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsSAAALEgHS3X78AAABMUlEQVQoz5WRS0/DMAzH+/2PHEBIlYCBBNIuoB25TQjEZ2BlrCvdutE2fSRuXg5es5c4IM36K3Kc/BzHDrKsYFXlnKuq+mMSkYqipK21Npp8zmax21maLqNo6o4s0FohInkAwBirm0Yp5WFWlrTurza7owNMjNaaPDropKTbPhetQkDvbq2D7jjXBs7WTAAQQcU3rejf3IgwAim+12ZrkXSAhZAUNtYK0SrVulMsECCMoWQYRXh9Y+8f7HBobwf2aWTCl/h8PL16iy/GX+HrfDB6P7t8DO+epdT9v1zQttzDLcfk2y4WuFximmK2wqSEOOfznMeFID9dVXGyTha5Mb4zGBhjfHsAOKI5rWwppR9AXvGfsi4LDuB8VftWe/+P/Jy1H4AytpO66yiAvqv/i/hfMQNA7Z2WSCIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Library overview\"\n        title=\"Library overview\"\n        src=\"/static/b0714e2e66dddb6912729656c3ba2f72/b9e4f/pattern-library-overwiew.png\"\n        srcset=\"/static/b0714e2e66dddb6912729656c3ba2f72/cf440/pattern-library-overwiew.png 148w,\n/static/b0714e2e66dddb6912729656c3ba2f72/d2d38/pattern-library-overwiew.png 295w,\n/static/b0714e2e66dddb6912729656c3ba2f72/b9e4f/pattern-library-overwiew.png 590w,\n/static/b0714e2e66dddb6912729656c3ba2f72/f9b6a/pattern-library-overwiew.png 885w,\n/static/b0714e2e66dddb6912729656c3ba2f72/2d849/pattern-library-overwiew.png 1180w,\n/static/b0714e2e66dddb6912729656c3ba2f72/2f950/pattern-library-overwiew.png 1600w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </a>\n    </span></p>\n<p>Fig 4. Pattern library overview</p>\n<p>With style sheets getting larger and harder to maintain, CSS preprocessors like\nSass help by keeping style sheets concise and allowing to modularize the code\nwhile offering a set of features not yet available in regular CSS.</p>\n<p>Learning a new tool takes time and finding the time to do so is sometimes very\nhard. This project was an opportunity for me to practice my Sass skills. While\nworking with Astrum I realized the number of concepts I would be able to learn\nand try. By doing that I covered methodologies like Atomic Design, Block Element\nModifier (BEM) and, implemented preprocessors like Sass and technologies like\nCSS grid.</p>\n<h2>Takeaways</h2>\n<h3>Plan before doing</h3>\n<p>We spent a considerable amount of time planning ahead. This helped to avoid\nfrustration at the end of the project.</p>\n<p>Another good thing about having planned enough before starting was that I had\nthe chance to develop other skills like decision making, collaboration,\ncommunication. Communication and Collaboration are essential</p>\n<p>The best way to collaborate as a team is to always involve each other in the\ntasks and testing/adjusting things as we go.</p>\n<p>We knew upfront that we set a lot of expectations for ONE week and finding the\nright tools and methodologies was key for efficiency, collaboration, and\nmotivation. So to make everything work smoothly, communication between us was\nessential, particularly considering we were working remotely. Atomic Design,\ncomplex but powerful</p>\n<p>I understood the value and the potential of having a design system and a pattern\nlibrary. Above all, I learned a lot not only by being involved with these two\nconcepts but especially with technologies and methodologies we used during this\nprocess. Full experience -> UX, UI, Development</p>\n<p>We started this project in the context of a UI Masterclass but we ended up doing\nmuch more.</p>\n<ul>\n<li>I developed my UX Design skills by researching and trying to empathize with\nusers.</li>\n<li>User testing was very important to refine the app, validate our assumptions\nand improve the user flow. Marvel App was a valuable tool that allowed us to\ntest our low fidelity prototypes.</li>\n<li>With Javier I learned about the importance of designing with interface\ncomponents in mind, and how Figma and Sketch can be powerful allies in\ndifferent scenarios.</li>\n<li>Finally, the Pattern Library allowed me to evolve as a Frontend developer\nwhile allowing me to review and apply important methodologies and\ntechnologies, such as BEM, Sass, CSS Grid.</li>\n</ul>\n<h2>Resources</h2>\n<p>→ <a href=\"http://getbem.com/\">BEM</a></p>\n<p>→ <a href=\"http://bradfrost.com/blog/post/atomic-web-design/\">Atomic Design</a></p>\n<p>→\n<a href=\"https://www.smashingmagazine.com/taking-pattern-libraries-next-level/\">Smashing Magazine “Taking The Pattern Library To The Next Level“ by Vitaly Friedman</a></p>\n<p>→ <a href=\"https://twitter.com/FMMRicardo\">fmmricardo-Twitter</a></p>\n<p>→ <a href=\"https://github.com/fmmricardo\">fmmRicardo-Github</a></p>\n<p>→ <a href=\"https://twitter.com/imran_rahim_pt\">Imran</a></p>"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"pathSlug":"/content/posts/tnds-challenge-week","previous":{"frontmatter":{"path":"/content/posts/vim-is-not-a-monster"}},"next":null}}}