Rolling Offers
ux/ui design
Fish of Fortune - Whalo
For Whalo's Fish of Fortune mobile game, I was asked to design 2 new rolling offer formats - an RO formatted for 5 offers that is designed similarly to our 3 and 6 offer formats, and a brand new type of RO in the game - 1+X (1+16, 1+12, 1+9).
I started off with the biggest format for this offer - 1+16. This RO format was specified with a timer, title, tagline, main offer (1), and X smaller rewards that come bundled with the main one when purchased.
I offered 2 different formatting options, asking what makes more sense - that the main offer be at the top and the smaller rewards at the bottom, and if so, where would the price button be? Maybe the main offer should be at the bottom with the purchase button?
What design solution will solve the problem of readability and usability?
The 2 different options try to give solutions to these questions - and in the end, we decided the option with the main offer at the top, X rewards in the middle, and purchase CTA button at the bottom gave maximum readability and usabilty.
Next was formatting the smaller reward. Elements included a background square, a lock, "FREE" badge, a reward and amount, perhaps a CTA instead of a badge so the player could choose when to collect their prizes. All options were checked.
After the final UX decisions were made, I went ahead with its UI design. It was decided to stylize it in a 4th of July theme, so as to have this RO ready to roll out for the holiday after its development.
After designing the 1+16 offer, I completed the 1+12 and 1+9 offers, opting to organize the prizes in 3x3 and 4x3 rows to keep it as much alike the 1+16 as can be.
All the exported elements are dynamic - as in easily redesigned for the next themes in the scope. The title and main offer background became one element to save storage space and protect against bloat in the game, and the small reward background is simple and redesignable - see the Underwater theme reskin I designed after the original 4th of July.
Entry and purchase + exit animations.
5 Offers RO
