ScrabbleGO 2017

I hoped onto ScrabbleGo about 8 months after the project had been kicked off. It was in sore need of an art pass, so I quickly dug in. Unfortunately due to an expedited timeline, much of the UI/UX was subject to the constrains of the previous implementation. This iteration of the project invested heavily in it's meta progression and solo mode features. After initial numbers came back from its regional beta, the team decided to pivot. Please see ScrabbleGO 2018 for our most recent designs. 


Early Lobby Designs

We designed the early lobby with LiveOps scalability in mind; banners, alert spots, promo notifs were all incorporated. At this point we were asked to take a lot of cues from the brand guides, and appropriate colors were used in the header and footer (so they would follow the user through out the game.) This posed a challenges as all screens and UI needed to work with both the cool green, and warm red.

Animation done in After Effects

Animation done in After Effects


Later Lobby Designs

Though the basic structure needed to stay the same due to engineering constraints, we spent time iterating how could make this screen more dynamic and fun while still accommodating a large amount of information. Though we would surface content on this page to a user gradually after FTUE, it still felt cluttered and the ask to add animation worried me. The solution was that the main carousel elements would "unfold" initially, and only have subtle animations when the carousel was being engaged with. Ambient animations/pfx were to be reserved for CTAs.   


Meta Progression

As we continued development we needed to establish the metaphor we were using for our meta game. Initially the ask was for a progression based linear map, but later was expanded into a non-linear catalog style progression. After a lot of quick, messy iteration I hit upon the box concept. Instead of the user moving through the world, playing Scrabble in different places, the user would be collecting special edition style Scrabble boards.

Animation by Josue Mejia; 3D models by Elvis Arevalo; UI and Textures by Amber Okamura


Meta Progression v2

Though the boxes on shelf concept was fun, based on playlists we saw users had some difficulties parsing the information and options. Based on this feedback, I simplified the design to be a vertical list with tabs for easy navigation. Shown here are some of the user flows I proposed based on this re-design.


Solo Modes

Early goals for these modes were to serve as quick small mini games while a user waited for their opponent to take a turn. The ask was to make them feel like a distinct section of the game used primarily for "brain training," and to be visually fun but not compete with the main core gameplay. 


UI Art

I had the fun opportunity to design and illustrate almost all the visuals presented here (exceptions are the thumbnails on the prize wheel above).