![]() Start to teach the team how to use ProtoPie I now had a we thought out and tested set of design assets that I could bring to life. Once the ‘static’ design library had been completed I moved on to designing a fully interactive library in ProtoPie. It was a central place where designer could copy and based from that was structured in the exact same way as the library so new designers could come on board and learn the design system just be using the stickersheet. The All 4 Stickersheetįrom the sticker-sheet both components and templates could be copied and pasted into designs maintaining links to the library file itself as well as enabling rapid prototyping. This gave rise to the second Sketch artefact. I added auto-layout on relevant componentsĭuring the designer interviews as and sessions I also found a lot were copying a pasting components from other files as it was easier to find them visually rather than remembering what they were called and were they could be found. I implemented layout constraints in components so they could be used in multiple form factors I turned off a number of overrides to simplify but also to enforce the design guidelines I removed unnecessary modulation and designed the components to be used for rapid prototyping I removed as many nested symbols as I could and used layer and text styles where I could. The nomenclature was either ambiguous or hard to understand which hindered finding components and the lack of a familiar and defined structure caused organic fragmentation that is, components were duplicated because they were hard to find.īecause I was primarily concerned with Android I adopted a similar structure to material.io for component nomenclature knowing that any new designer with experience of Android would be familiar with this structure. There were also hacks driven by various bugs in Sketch (which still exist today) which added to that inflexibility and the fact that the library was designed to be a locked down source of truth for handoff and not for rapid prototyping. The current library had an overuse of nested symbols that made a lot of the components hard to use. T is used in many places in the app artwork Make the library as self documenting as possibleįinally we agreed some library principles, An item should be in the library if: Take advantage of new Sketch component features I set about refactoring the library with the following goals in mind: I wanted to teach everyone how to use ProtoPie and get them adopting a prototype first design method but thats a longer process and that process wold need careful thinking of how we would start that journey. Sketch files were used to build screens for prototyping new ideas to be prototyped in InVision. Sketch files were used as a way of handing off design to engineering After some group and one to one sessions we agreed that the Sketch files should serve the following needs All the teams were doing things differently. One of the first things I did was to understand how we were all designing and what all these files were for. Sketch libraries and design files would continue to play the main role for design and engineering handoff but I wanted to show All 4 another way to design interactively so I lead an initiative to evaluate how we could design better, faster and more holistically. I strongly believe that designers should be designing for interaction first and that’s something that Sketch isn’t designed for or particularly good at. I on the other hand prefer working in an interactive environment. ![]() When I joined, the design teams were using Sketch to design UI and tools such as InVision to prototype. The challenge with any established product is to give designers the freedom to design whilst enforcing design and brand consistency. Operating within an agile team delivering roadmap features.Īll 4 use Sketch together with Abstract to enable the sharing of design files across the design teams and make heavy use of design libraries to maintain the design system’s implementation consistently. Working with Product and business stakeholders. I joined All 4’s Android team as lead product designer servicing the usual design needs. ![]() All 4 is a free service paid for by ads with a optional subscription based ad-free service called All4 +. All 4 provides Catchup, Live Streaming of Channel 4’s terrestrial channels as well as a huge back catalog of on demand content for its users. The All 4 digital streaming serviceĪll 4 is available on multiple digital platforms and has multiple teams working on products for Android, iOS, a multitude of set top box platforms and the Web. My tool of choice is ProtoPie which I used to build an interaction library for All 4. Advanced interaction design tools are giving designers the ability to build usable interactive experiences holistically. Designing and building an interaction library for the All 4 The way we design had changed.
0 Comments
Leave a Reply. |