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.




Project Brief

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





Main Steps

01. Plan - Study Sketch Library
02. Plan - Study Existing Components
03. Audit - Symbolize Unified Components
04. Audit - Symbolize Un-unified Components
05. Land - Updated Master File
06. Land - Share Reflect & Implement





01. Study Sketch Library 

To measure the advantage of utilizing Sketch Library feature against the cost of time and labour. To measure the potential turbulence caused by this intervention.


02. Study Existing Components

To learn the current component library structure and how components are created, modified and documented.
03. Symbolize Simple Components

To apply nested symbol logic on components that have various status but single use case.
04. Symbolize Complex Components

To unify components in specific use cases into one reusable nested symbol.


05. Updated Master File

To symbolize components based on the logic discussed above and package them with icons and text styles.
06. Share Reflect & Implement

To share all progress with the design and development team, as well as others who may concern. 





01. Study Sketch Library


To measure the advantage of utilizing Sketch Library feature against the cost of time and labour. To measure the potential turbulence caused by this intervention.


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




02. Study Existing Components


To learn the current component library structure and how components are created, modified and documented.


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




03. Symbolize Simple Components


To apply nested symbol logic on components that have various status but single use case.


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




04. Symbolize Complex Components


To unify components in variations into one reusable nested symbol.


For example, conducting “List” study and consulting 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)







05. Updated Master File


To symbolize components based on the logic discussed above and package them with icons and text styles.


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 business constrains, I won’t be sharing the entire component library in this case study *




06. Share Reflect & Implement


To share all progress with the design and development team, as well as others who may concern.


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: