Operation Sunshine Re-skin

My team and I determined that the best user experience for our app was one that had more accessible color palettes, modern design, and narrative theming to increase engagement.

Operation Sunshine Re-skin

It takes a great deal of cross-team collaboration, research & planning, and constant communication to reskin a massive app like this one.

Original visual design, created in 2016

So this is what the app looked like when I first started my job at GSN Games. I could see immediately that we had some brand and accessibility issues. My Art Manager and I created a concept deck to pitch to our studio about why it's important for us to devote resources to this project, which was very well received.

Before the re-skin: Overall darker color schemes with primarily single color palettes. Buttons and UI were based on the "glass" visual design style that now looks dated in the world of flatter design.

Scope & Mapping

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.

Here was a job for Miro, a whiteboarding app that could be used to create user flows and wireframes. We had multiple Miro boards for the breakdown of individual features as we worked on them, but I used the Sunshine Brainstorming board as my main scratch-sheet.

We used Miro for:

Creating the diagram of our current app architecture.
Aggregating research from Sparcade, messaging & positioning, theming, & characters.
Creating possible content re-organization with the addition of the combined Deposits & Store in the SHOP tab.
Exploring the content organization possibilities for a more dashboard-like home screen.
- Version with more profile-based content
- Version with results-based content
Diagramming our core game loop to discover improvement opportunities.
Exploring more opportunities to include animations to confirm player interaction.
Designing content for usability tests for both new and tenured players.
Establishing our final set of work after summing up all of our desired improvements and then culling them down to MVP.

We used Miro for:

Creating the diagram of our current app architecture.
Aggregating research from Sparcade, messaging & positioning, theming, & characters.
Creating possible content re-organization with the addition of the combined Deposits & Store in the SHOP tab.
Exploring the content organization possibilities for a more dashboard-like home screen.
- Version with more profile-based content
- Version with results-based content
Diagramming our core game loop to discover improvement opportunities.
Exploring more opportunities to include animations to confirm player interaction.
Designing content for usability tests for both new and tenured players.
Establishing our final set of work after summing up all of our desired improvements and then culling them down to MVP.

Usability Testing

The best way to find out what users are struggling with is to ask them! We ran tests with both tenured and new players to measure their current experience with our brand pillars: Fun, Trustworthiness, and Mastery. Here you can see how we built the script of the tests for both demographics.

Visual Design

I was responsible for creating a style and component library in Sketch that could be linked to any of our individual feature files. It was important to maintain this to reduce the amount of reiteration, keep the number of delivered assets to a minimum, and produce a unified final design across the entire product. 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.

Work I contributed to the design system:

Designing general components including buttons, forms, modals and other containers.
Created a shadow-size system to reinforce a physical material model.
Drawing icons for menus, goals and achievements, Premier Club tier logos, page header treatments, and other embellishments.
Illustrations including updated WorldWinner logo, laurel wreath, Tourney of the Week badge, celebration popper, and more.

To keep the design in brand parity with others in the casual gaming space, our art direction was to keep things very 3D and tactile. We also had requirements not to dramatically change layout, and to try to simply replace sprites whenever possible, in order to minimize production time.

The Big Reveal

We stuck with the blue, but now we are much, much brighter! Text size has been increased with better contrast. Colors are now more deliberate to attract attention to the right places. The app looks fresh and full of personality. It had a fantastic player reception and the team was very, very proud.