Task Details
Identify the areas in the current MoWeb experience that can be improved to have better visual parity with the live WW App. We believe retention will be better for new users if the MoWeb experience doesn’t feel so dated.
Problem Discovery
In order to find problems within the UI, the product team came together in a word document to look over screenshots of the product. Developers jumped in to help determine the scope and possibility of each suggestion.
Role:
Associate UI designer on the Product Team at WorldWinner.
Tools:
Figma
Deliverables:
Wireframes for phone and tablet
Constraints:
Website code is VERY OLD
Live in 3 weeks
Senior players are very reactive to change
MowEeb Refresh
Game Lobby Refresh: By replacing “Menu” with a hamburger icon, I had more room to add both reward points and cash amounts. Furthermore, I updated the WW logo, brought in the game tiles and changed background color to match the app’s UI.
Lobby Screen on App
Lobby Screen on MoWebSuggested MockupNavigation Refresh: I pitched that adding new icons will not only connect more to the mobile app’s UI, but also help players understand what each section means. Due to the time constraints, the developers were only able to remove the “Games” section.
Navigation on MoWebSuggested Mock UpTournaments, Results, and Leaderboard: I addressed other problem areas by added subtle changes to the shape of the boxes, colors, and layout.
Tournament Screen on AppTournament Screen on MoWebSuggested Mock Up
Result Screen on Moweb
Suggested Mockup
LeaderBoard Screen on Moweb
Suggested MockupConclusion
As this is the first iteration, I would consider doing A/B testing to see if the new designs are successful. Testing will help the team determine if there is any retention. Other dependencies the team considered:
Speak with marketing.
To bring the banner carousel back to Moweb, I collaborated with the lead graphic designer to make a new template.
A fragile system.
Reworking the animation, layout of items, and updating the colors will take extra time.
Moving into phase 2
Further revisions to the look and feel were paused so the team could focus on the new rebrand.