Client
Parship Meet Group
Project type
UI feature and interactivity enhancements
Discipline
Animation
Product Technical Development
Interactivity
QA Tester
Role
Senior Motion Designer
Overview
Throughout my time with Parship Meet Group, I was asked to make many enhancements to their library of apps by implementing motion design into existing product interfaces, new features, and the creation of micro animations.
This required extensive planning and development with UI designers and developers to ensure that the motion within the applications felt in line with brand identity and worked cohesively across mobile and web platforms. All of this was done without compromising the user experience (by keeping load times as low as possible and ensuring motion was never overly intrusive).
Research
The Parship Meet Group's library of applications shared some common features, including:
• Match making (known as Swipe)
• Video live streaming
• Chat
I delved into each of our competitors within the dating, streaming, and chat spaces, including Tinder, Hinge, Bumble, Twitch, YouTube Live, and Line, to name a few.
From there, I was able to recognize not only what was being done to create more positive interactions, but also what could potentially increase DAU (Daily Active Users) and spending.
Challenges
• Adding motion to features within the apps needed to be communicated in a way that developers could easily understand
• Creating "one-size-fits-all" micro animations that could easily be adapted to other branding
• Creating guidelines for future motion application to ensure a cohesive experience across the apps
Goals
• Add motion and micro animations across the entire library of apps
• Complete the first task in a way that works with each application's branding and never feels obtrusive
• Create delight and an overall positive experience using the apps
My Solution
Working closely with product designers, project managers, and developers, I was able to combine the findings from my own research with the UX research done on our app to create animations, develop motion guidelines, and produce product prototypes.
This resulted in better usability, increased engagement and spending, and a positive overall experience for our users, while factoring in accessibility and the ability to scale across all platforms.
Battles
Within the video streaming aspect of The Parship Meet Group's library of apps, there is a feature where streamers compete against each other, with the winner being determined by who receives the most "Gifts" within a time limit. This feature is called Battles, and to showcase certain achievements, micro animations were needed, with some requiring advancements in Lottie animation capabilities.
Results:
• Overall increased vDAU (viewer Daily Active Users), as top streamers scheduled events to have Battles against other top streamers
• Improved animation capabilities that were later applied to other micro animations across all the apps
Challenges
For this project, I was tasked with taking the recently designed Challenges list and collaborating with Senior Product Designer Kristina Bezouglova to add motion elements that would capture users' attention and highlight potential rewards that could be unlocked.
Results:
• Increased spending on gifts by 3.2% across all apps
• 5% increase in revenue overall
Individual Challenge achievement toast
Challenges list view
Challenges onboarding experience
Metal Mystery Boxes
Vault Mystery Boxes
Generic Mystery Boxes
Matching within MeetMe app before redesign
Mystery Boxes
I was asked to create a series of animations demonstrating the value per type purchased, with a percentage-based chance of receiving larger prizes than the money spent.
Original project details called for multiple JSON files per mystery box type, for each configuration of prizes. I led the project to use the Lottie JSON file ability to utilize markers and other features to create a much leaner product, resulting in an earlier launch date.
Results:
• The image database collection implementation via JSON allowed for one animation to hold any combination of prizes, reducing client-side loading.
• A 4.50% increase in the purchase of mystery boxes on MeetMe, with an ~8% conversion rate on Tagged.
Misc Micro Animations
Motion and animation need to be utilized in a way that never feels obtrusive or annoying to the user. My goal for all my work was to enhance the positive reception and adoption of products and features in a way that communicated critical pieces of information and was more likely to increase revenue through interaction.
Results:
• An overall more delightful and engaging experience for users
The Result?
Better experiences (and faster implementation!)
Motion and animation need to be utilized in a way that never feels obtrusive or annoying to the user. My goal for all my work was to enhance the positive reception and adaptation of products and features, communicating critical information in a way that was more likely to increase revenue and DAU/vDAU.
Implementation:
• Collaborated with UI designers, UX researchers, and engineers to create motion that was easy to implement but also resulted in advancements in other products across the app library
• Developed guidelines and motion specifications that reduced development times by clearly conveying what UI designers were looking to see but couldn't always communicate due to technical knowledge limitations
Results:
• Motion implementation that was not only performant, increasing DAU/vDAU, but also built with care and backed by research