A master file empowered by cloud service that hosts basic components and font styles with the ability to affect working components in various individual design projects.





Overview:



During my 4 months in Mobile Banking, I contributed to the release of Mobile 2.0 through new component library’s development and management, screen productions for new projects, defining UI specs for development team and creating mock-up screens for user tutorials.


This case study explains my work around new component library.
 





Knowledge Field:


Sketch Nested Symbols
Global Symbol Library
Reusable Components




Key Challenge:



RBC Mobile banking is an award winning financial app with over 5 visual designers working on various projects simultaneously.

We wanted to develop a new library system that safeguard our visual standards and streamline the workflow for both in-house productions and external cooperations.





Major Goals:



As this project is situated to be running in the background when new components are continually being added into the previous library, we want to minimize the its affect on current projects and maximize its adaptivity for future projects.




Main Steps:






Sketch Library feature is relatively new since it is only released in Sep, 2017.




Use cloud service to host master file can help implementing changes even more effectively.






Local files that are under progress will only be affected by the global file once the individual designer decided to accept the changes









Different font styles, components’ status and use cases are carefully documented in current component sheet.









Practice nested symbol logic by working with components that have various status but single use case.







Conduct “List” study and consult with development team to align basic converging methods for components that have different use cases. 



Eventually define different “Lists”  as line items based on it’s height, for example:



Old components: components in different use cases that are not systematically symbolized.




New components: reusable components (defined by development & design) that are systematically symbolized (defined by Sketch)


















icons and text styles are imported and organized with newly introduced naming convention. (so when a icon change then all components using this icon will get changed)

icons/more menu/NOMI
icons/more menu/Contact Us
icons/more menu/Tools & Calculator
icons/more menu/NOMI Find & Save
icons/more menu/Help
icons/more menu/What’s New?
icons/more menu/Open Account
icons/more menu/Alerts
icons/more menu/About RBC Mobile
icons/more menu/Find Us
icons/more menu/eStatement
icons/more menu/Manage Credit Cards
icons/more menu/Linked Accounts

*Due to professional reasons, I won’t be able to share the whole component library here. * 









As my time in RBC is limited, I was not able to symbolize everything before I leave. The library is 80% finished with functional symbols for AppBar, TabBar, Tabs, Buttons, Header, Lists. (Errors and Expanders are not finished). In addition, all symbols are embedded with global icons and text styles.








Acknowledgement: 


Thanks to Jason Mills for bringing me onboard, Ali and Rida for your continuous support and trust. Thanks  to Greg, Brian and Michael for your valuable advice and encouragement. Thanks to Mobile Banking design and development team for your collaborations and understanding.




Related: