The most difficult part of this project was inventorying everything in the app that needed to be skinned. It is more than just the Main five tabs, a menu, a profile… It’s hundreds of different states for buttons, dialogue boxes, errors, forms, tutorials, and win/lose conditions. We also had to manage the scope of new features that would be included in this new design. Because we were looking at the user experience and design of the app through fresh eyes, there were a countless number of things that we felt could be improved. Our team went through expansion and then retraction exercises to discover all that we wanted to change but then pare down to what we wanted to include in this effort only.
After the re-skin: Using white tiles to increase contrast for readability. Updating UI elements to reflect a modern look.
It was important to maintain this to reduce the amount of re-iteration, keep the number of delivered assets to a minimum, and produce a unified final design across the entire product, so we maintained a component library in Sketch that could be linked to any of our individual feature files. Multiple visual designs were looked at before we landed on the one that best represented our brand, but with a linked library system we were able to keep all features up to date as new decisions were made.