FISHGRAM (CAPTAIN FRESH)
Play & Win campaign
Gamification, Player Experience, Visual design, Product thinking
Captain Fresh is a major seafood distributor and exporter in India. When it comes to exporting seafood, two things are super important: the Price and the Quality. You see, for exporting, Captain Fresh needs to procure the best fish at the right price.
One of their products is Fishgram which is a B2B Sea Food trading platform. The users here consists of Fishermen, boat owners, resellers, exporters and retailers. Fishgram users have knowledge about the price trend of the material (Fish/Species) in their location. But they are unaware of the prices that the material can fetch in a global market.
Problem statement
To collect market price trends in various locations across the coast, the team wants to build a gamification feature on the Fishgram app through which they’ll capture the prices of the fish in the harbor (coast location). In return, the uses will be rewarded coins on Fishgram for their correct answers.
BUSINESS GOAL
To have the market information of fish prices across the coast
PRODUCT GOAL
-
To gather fish price information from the users in a seamless way
-
To engage the users on the platform
USER GOAL
To get more benefits on the platform
Designing the User Experience
To achieve this, I needed to design a user-friendly quiz-style game. As the sole designer, I had to come up with a plan for this game.
Research
I started with some market research to understand the user flow for games, especially quiz-based games. This was my first time building a gamification feature, so I needed to understand how the reward system works. I explored up some common gaming platforms like Dream 11, Trivia, Poki, Zomato Prediction League and understood the user flow and interactions.
Brainstorming and Ideation
After conducting thorough research, I began crafting the user flow. In order to ensure a seamless and user-friendly experience, I made several critical decisions to enhance usability and accessibility. These decisions were aimed at simplifying navigation, optimizing feature accessibility, and ultimately improving the overall user journey.
DECISION 1 : RESTRICTING PLAYER'S LOCATION
Managing multiple species with their various SKUs (Product/weight/type) across multiple locations posed a challenge. Since it's a game and rewards need to be given, we can’t let users randomly enter prices for any location, as it was technically complex. So we (me & PM) decided to fix the location of the user for playing the game. Once a user chooses his location, he can’t edit it.
DECISION 2 : OPTIMIZING FISH PRICE DATA
Now, the problem was asking about fish prices of multiple fishes with their various SKUs. Also, we wanted to handle the database of answers in such a way that there should not be too many almost similar prices for the same fishes.
For instance, if the current Seer fish price in Mumbai is 420, users might submit slightly different prices such as 421, 422, 419, 418, and so forth. This could strain the system and put users at a disadvantage, especially if they miss by just 1 or 2 points. To tackle this, we introduced an input field along with three pre-selected options during the quiz. Users can input their own price while also seeing the three most commonly submitted prices for that location up to that time on that day. This approach enhances user visibility and lightens the system load.
DECISION 3 : CAROUSEL INTERFACE FOR SKU'S
To handle multiple SKUs for a specific species, I settled on a carousel card layout. Users select a species from the game homescreen, and all its SKUs appear as carousel cards, horizontally scrollable. After submitting the price for one SKU, users can scroll left or right to input prices for the other SKUs. This eliminates the need for repeated exits and entries, enabling users to provide answers for multiple SKUs at once. This flow significantly reduces the number of clicks by 2.
Following several discussions with the team, we settled on the fundamental game flows.
Since the seafood industry is close-knit, and people at the harbor often know each other well. To boost user pride and engagement, we introduced a leaderboard showing max top 10 winners from each location. Everyone can see this leaderboard, making it a fun way to engage users.
Wireframes
I then began creating screen-wise flow to address all potential scenarios and exceptions within the feature.
I drafted low-fi wireframes and shared them with PMs and engineers to freeze the scope and to know if there are any technical constraints from the lead engineer.
Visual Design
Once the team was aligned, I started with the visual design. As this was a gamification feature, the design needed to be flashy and colourful, which was contrary to our current theme. The plan was to create a flashy theme for this game feature which complimented current app theme. I decided to stick with blue tones as it looks rich and also compliments the sky blue colour of Fishgram.
Once the color theme was set, I began creating the final designs. I experimented with several variations, and after multiple tries, the design below was chosen as the final one.
.png)
UI Testing
After completing the design successfully, it was time for the tech team to start building it. I collaborated closely with the developers throughout the sprint. Additionally, I conducted manual UI testing for this feature.
Observations
The campaign ran for 2 weeks where the users submitted price for 8 fish species garnering 1200+ responses.
The rewards campaign saw response from 100+ users.
The fish prices trends for these 8 species was collected from 50 harbours across west coast.
Post-campaign user feedback:
I spoke with 10 procurement individuals since they're closely connected with harbor users to gather the feedback on this game feature, and here's what I learned:
-
Users were enthusiastic about returning to the platform, mainly for the rewards.
-
The procurement team mentioned that users found it easy to use and earned a lot of coins.