🟡 Sketch File
Building for Adoption
The majority of the Shopee team was new to using the sketch library, therefore ensuring adoption was key. Introducing a new step in their workflow required not just higher management buy-in but team buy-in! They need to be sold on the benefits of the product.
Build a Getting started KIT within the Sketch Library itself
Increase findability and reduce steps needed to learn another step to learn all the how-to's
What was largely amiss was an understanding between developers' and designers' workflow and why each stakeholder designs/codes the way they do. Leading to a lot of inefficiencies during the design review and focus on minute UI flaws.
Moving from Adopters to Champions of the Design System
Therefore, embedding education elements within the UI KIT was important.
There exists a pertinent need to expose both sides to each stakeholder's workflow and thought process.
Therefore, through discussions with the development team, we built a small learning corner on the sketch file which will be updated whenever new information is being presented.
Loads of back and forth between designers and developers on components and app/web interactions that were specific to the code they were using and these were technical requirements that cannot be changed.
If the designers and developers knew about these constraints, a lot of time can be saved going back and forth.
Aside from just teaching the foundational knowledge of different operating systems, we tried to teach designers what developers looked at whilst designer / referencing from our designs in sketch.
UI KIT and Design Tokens
Shopee had many different digital products belonging to different industries and across regions. It was important to keep a very simple foundational base whilst informing the usability of components throughout UI KIT. That was how I approached the design system at Shopee. Therefore, including design tokens was one of the starting points and the easiest starting point to building a developer and designer common language.
However, during my time at Shopee we were not able to implement anything over at the developer's end yet. However, when life gives you 🍋, you make 🧃 We wanted to be able to build a practice within the design team in referencing design tokens. (As I said, the focus was really from an adoption point of view)
The idea was to have the entire document be a living usability chart. No matter where you landed on the sheet, you will still be able to execute meaningfully without having to question how to use the components.
Therefore, there was a focus on how to build very clear usability guidelines throughout the sketch as well as our shopee design site (which is only for private viewing).
Last updated
Was this helpful?