Mistplay is a mobile gaming platform that offers users the opportunity to discover and play a variety of mobile games in exchange for rewards. Users can earn points or credits by playing games through the Mistplay app, and these points can be redeemed for various gift cards or other rewards.
Time frame: Full-time employee (1 year)
My role: Lead Product Designer
My role: Lead Product Designer
Key Goals and Objectives:
1. Provide Mistplay's gaming experience to iOS users despite Apple's restrictions on library apps, offering a seamless and engaging gaming experience.
2. Ensure consistency in user experience across platforms (iOS, Android, web) while adapting to the limitations of PWAs on iOS.
3. Design and implement UX/UI elements that align with Mistplay's brand and existing user expectations.
Challenges:
Progressive Web Apps (PWAs) on iOS do have certain limitations compared to native apps on both iOS and Android platforms.
Limited Push Notifications: On iOS, PWAs have limitations in their ability to send push notifications compared to native apps. While push notifications are supported, they may not be as feature-rich or reliable as those in native iOS apps.
Safari’s Limitations: PWAs on iOS essentially run in Safari's web view, and users are limited to the features and performance characteristics of Safari. This can result in differences in performance compared to the same PWA on other browsers.
User Adoption: Unlike Android, iOS does not prompt users to add a PWA to their home screen. Users need to manually navigate through Safari's options to add the PWA to their home screen, which may reduce user adoption.
Probabilistic Attribution: Tracking and attributing game installations to to properly reward users is not straightforward in the context of PWAs, that means that, when installing a game there’s a chance attribution might fail and users will not be rewarded for their playtime properly.
Discovery
Initially I ran a competitive analysis of similar progressive web apps and iOS applications. This analysis evaluates the pros and cons of different interface designs, highlighting their strengths and weaknesses.
User flow
The next step was to map all screens and interactions. Mistplay for Android didn’t previously have a user flow chart, so I worked from scratch based on the android application and iOS limitations to come up with what I believed would be the main user flow for the PWA release.
In this phase we knew the key desired functionalities we needed to design:
- Ask users to pin the PWA to their home-screen to guarantee user retention.
- Educate users on game attribution and tracking permissions.
- Guarantee consistency in user experience across platforms.
- Educate users on game attribution and tracking permissions.
- Guarantee consistency in user experience across platforms.
Sneak peak of the user flow (spoiler alert: its huuuge)
Visual Design
The design system (fonts, colors, icons and buttons) was inherited from the Android application, my job was to adapt and create new elements when needed. I also had the opportunity to create some new illustrations to enrich the user experience within rewards moments and interactions.
Usability Testing
During my time working on the project we ran one internal test led by the UX Research team. The goal was to provide insights towards the reward system and game attribution. Based on the feedback I could map key opportunities for improvement:
- Users expect the app to function the same way as android: How to properly communicate game attribution status to users and how to teach them how the mechanics of probabilistic attribution works in a user-friendly way?
- Users app first contact: How to create a seamless onboarding experience?
Based on this I studied the best practices on onboarding tutorials and tools tips, and suggested the implementation of progressive disclosure tools tips to avoid user frustration and provide visual feedback.
Conclusion
There’s a lot of work to be done, these are my conclusions and recommendations:
- Conduct user testing and interviews for the game attribution status at the game details pages;
- Study and implement alternatives for push-notifications;
- Create a distinct brand and design system to avoid user frustrations based on its expectation;
- Implement onboarding progressive disclosure tool tips and study its impacts on user retention.
- Study and implement alternatives for push-notifications;
- Create a distinct brand and design system to avoid user frustrations based on its expectation;
- Implement onboarding progressive disclosure tool tips and study its impacts on user retention.