weekly quests
ux/ui design
Fish of Fortune - Whalo
For Whalo's Fish of Fortune mobile game, I was asked to design the new Weekly Quests feature - 3-5 missions everyday, for 7 days, and then repeat! Complete quests, and earn tokens to to progress further on the progress bar. Complete them all, and win the grand prize.
UX Exploration and Wireframes
First, the main layout needed a solution. The initial requirement from the product team was to make our Weekly Quests feature feel different from other games' simillar feature, but still demonstrate the classic stacked layout, and compare what works.
Required Elements: Title, Progress Bar that can accommodate up to 7 prizes, quest (background, icon, action text, progress bar, CLAIM text, lock, checkmark, collecter token and reward) 7 day tabs, timer.
The classic stacked bars layout, on a popup background.
This is the layout that was ultimately chosen - as it is familiar, readable and chronological.
This is the layout that was ultimately chosen - as it is familiar, readable and chronological.
A twist on the classic layout, still on a popup background, but with tiles instead of bars.
The Login quest is always a bar shaped quest at the top to make feel a little different than the rest.
The Login quest is always a bar shaped quest at the top to make feel a little different than the rest.
Another tiled layout, this time with all tiles the same dimensions, making it so they keep a uniform look, but take up less screen real estate when there are only 3 quests.
I also checked formats where the feature was on a "drawer", buttons instead of tabs at the bottom of a popup, and a full page layout.
UI Design
The initial design for the feature's rollout needed to be FOF generic - underwater themed, but not overly. Soft blues, corals and turquoise were chosen.
The background and quest backgrounds were design to be dynamic and accommodate new themes down the road. The pattern and colors can easily be changed out.
The background and quest backgrounds were design to be dynamic and accommodate new themes down the road. The pattern and colors can easily be changed out.
After the design was complete, I also create the feature's intro tooltip, and its hud icon for the lobby - which shows which day the player is currently on in this week's Weekly Quests, and a timer showing how much time is left to complete the week.
Animations
Entry, idle, exit animation
Idle progress + claim overlay animations
Claim
Idle Progress