CHALLENGE
The original visual design of the WorldWinner mobile app used a dark color palette and glassy surface effects. The app felt out-of-date, dark, and was designed for a more masculine audience. Since our key users were women between the ages of 25-65, we wanted to shift the visual feel more towards them. We wanted to create a brighter, happier and more immersive experience for our players, while working within a very tight timeline. Another challenge was that our players struggle with change, so we needed to make sure that our players would still feel safe and comfortable with the new changes.
As a team, we also wanted to measure what effect our visual changes had on player interaction and retention. In order to get clear data on the impact of the new visual design, we decided to move forward with a “re-skin” of the UI and not make any drastic changes to the user experience flows.
APPROACH
When I started at GSN Games, the research phase had already been completed for this project. The team had conducted some competitive research and created a few moodboards of different design styles, to have our insights team survey our players. The lighter and brighter color palettes had the most positive results. The keywords pulled from the surveys were fun, bright, happy and playful. One of my first assignments was to collaborate with the UX Lead and the Art Director to create a theme. We decided that the Olympics would be great for inspiration and symbolism. The sense of competition and fun!
Used Pinterest for sourcing Olympics inspiration and ideas for icons
GAME TILES, APP ICONS, & OTHER COMPONENTS
To move away from the glassy effect used in the old WorldWinner app, we decided to make the new icons & buttons look like they could be from the physical world. They would have some dimension and feel plastic and tactile…something you would want to tap. We even took this idea further by using sound. When you tap on a button, it sounds like you are typing on an old keyboard. I started by sketching out some ideas for possible icons, before moving into designing hi-fidelity mockups.
I enjoy brainstorming with pencil and paper, before building designs digitally
MOVING FROM DARK TO BRIGHT
To align our product better with our player base (women ages 25-65), we started designing brighter screens. Many of our players use WorldWinner as a way to unwind, pass time between daily tasks and to relax at the end of the day. We wanted to make sure that the new designs helped make their experience more enjoyable and fun. This redesign was also happening at the height of Covid. This could be another way we could bring a little sunshine and delight to their days.
Below is a gallery of before & after for various screens.
UI KITS
In order to hand-off the new components smoothly, I built a set of UI kits, with corresponding mockups, in Sketch and then uploaded to Zeplin. During sprint planning, we would walk the Unity client team through the kit and mocks, to make sure that understood the designs and answer any questions. Using Slack, we would work very collaboratively with the developers, field questions while they were building the new app, and quickly modify mocks and components when changes were needed.
Here is a collection of the various UI kits I handed off for the Operation Sunshine Project