Cosmic Rewards is a loyalty reward Android app with over a 4-Star rating on the Google Play Store. Users can discover new apps to play/interact with and redeem Stardust (in-game currency) for gift cards.
Product Design: Design System | Dark Mode UI
Team: Product Design Partner & Director
Branding: Logo | Illustration Library
Problem:
There were a couple problems the team wanted to address. The overall app needed a fresh new look that involved rebranding and an illustration library. All in all, the previous app lacked consistency and uniqueness. The client was looking for a more modern feel that could enhance the product and built trust with the user.
Solution:
In this particular role, I wore many hats. I was tasked to rebrand, create a illustration library, as well as redesign several screens for the product. This entire app was worked on with my design partner and Creative Director. We built an entirely new Design System as a group. The app now, has a consistent and more modern feel.
Our Research
Our director guided us through user research, which included interviews, surveys, and reviewing Google Play Store feedback.
With this research, we were able to start affinity maps, journey maps, and more. This provided a solid foundation for revamping the entire product. As we progressed and relaunched, we continued our user research to ensure ongoing improvements.
1: Design System & Illustration Library
Revamping: Design System
Revamping our design system was a collaborative process. We saw several issues with the previous design system such as missing components, illustrations, and more. I focused specifically on developing the illustration library, the colors for the dark ui and branding. The goal for the logo was to ensure it was scalable, fitting seamlessly across various platforms such as email, social media, and our website.
My design partner, director and I worked together to explore a range of colors that represent our cosmic theme. We researched best practices from other leading earning apps to ensure functionality and user experience, while also adding our unique space theme to set ourselves apart.
How has the Design System impacted the product?
The Design System streamlined our overall hand-off process to developers, allowing us work efficiently.
Our product became more scalable and consistent.
The Design System allowed us to explore Dark UI (An accessibility option for our Users)
Illustration library: Creating Captain Cosmo
Creating Cosmo, the mascot for Cosmic Rewards, was a process that required time and several iterations. My primary goal was to design a memorable character while utilizing our Primary Purple & Gradient theme. This allows users to both enjoy and easily recognize across the app and social media platforms.
To ensure consistency in Cosmo's appearance, I established a set of guidelines. Cosmo’s color scheme must remain uniform throughout the product, with the exception of social media contexts. Additionally, Cosmo should not appear in app avatars, and facial expressions are only permitted when the image focuses solely on Cosmo's face.
Cosmo’s Evolution
My goal was to elevate the mascot as much as possible.
How it started
How it ended!
Illustration library Cont.: Spot Illustrations
Creating spot illustrations for the product and social media was a smooth and cohesive process. I expanded the Product design system colors to develop a vibrant theme, ensuring the use of consistent gradients throughout the graphics. This approach unified the visuals, making them feel like they all belong to the same cohesive universe within the app.
Illustrations Throughout The Product
How has art impacted the product?
During User Interviews and Surveys, User's have complimented the overall visuals and theme of Cosmic Rewards.
Interactions with full-screen pop-ups in the App increased, leading to more Game Downloads.
Increased Social Media Following (interactions) by 200+%
2: Redesigning Product Screens
Relaunch: Profile Screen
Resdesigning the entire product was a team effort. We all collaborated on each screen, and set up feedback sessions in order to keep the process moving. My design partner and I took lead on specific screens and flows. In order to improve the user experience, I was tasked to redesign the profile screens with an entirely new style, colors, type, etc. The overall goal was to provide an engaging and personalized page for the viewer. By combining their profile information and their recent activity, the viewer is able to see their entire progress.
Previous Screen
Current Screen
How do we improve this experience?
The previous profile design lacked uniqueness and did not feature avatars that matched our new design system style. Additionally, images of the games were missing in the earnings activity, and user earnings were buried in a separate, less accessible part of the hamburger menu.
Through research and wireframing, I found that displaying user records directly on the profile screen is standard practice. To enhance usability and align with our new design system, I consolidated all user achievements and information onto a single screen. I also included game images in the earnings activity for quicker reference, making it easier for users to track their performance.
1) Previous Profile Screen + Earnings Activity
2) Research Examples
3) Wireframing Example: Combining Screens
Final Profile Screens & Avatars
2. Redesigning Product Screens
Relaunch: Onboarding
I was tasked to redesign the Cosmic Rewards sign-up flow and the entire Onboarding process. As the months went by, we slowly started to become more than just a play to earn app. We wanted to revamp our first time user experience/onboarding to reflect that. Our goal was to provide information on the apps that we provide as well as our gift cards, and overall make our onboarding experience seamless and fun. We decided as a team, to really lean into our Dark Mode UI to keep that cosmic theme alive.
Welcome Screen: Evolution
Previous Screen
2 months post relaunch
4 months post relaunch
What did our Users think?
The onboarding process had several issues we as a team needed to address. Our Users didn’t understand the overall premise of the app and what type of gift cards we provide.
Due to the onboarding flow being too long, as well as the lack of clarity on the grant permission screens, this lead to frustration and sudden drop-offs.
On top of all that, there were several accessibility and retention issues. The buttons made navigation difficult, and there was no welcome bonus to encourage users to continue their journey with Cosmic Rewards
From our Users:
Too long of a sign up process!
Why do you need this much information?
What gift cards do you have?
What even is this app?
How do we improve this experience?
While researching our competitors, the team and I noticed that majority display a welcome/information screen before allowing the user to sign up. This allows the user to get a sneak peak on what the app is about and how they could potentially earn rewards.
Their onboarding flow after signing up is short and sweet, something that we were missing on our flow. All in all the comments we received on our testimonials and surveys, is that our users feel as though the process is too long and confusing.
1) Previous Onboarding
2) Research
3) Wifeframing the experience
Final Sign Up & Onboarding
The onboarding flow is now quicker and more efficient by merging demographics with the Avatar screen and consolidating permissions into a single step. A progress bar at the top sets clear expectations for the onboarding length, while engaging illustrations reinforce our brand. A reminder about the Welcome Bonus is also included to boost retention.
Results
4 Months After Relaunch
300%+ MoM install growth in last 3 months
160% Increase in Revenue
4+ Stars on Google Play Store
Increase Game Selection
Testimonials
Google Play Store
Ok... I saw you on fb, sounded convincing, but I can sell you the Brooklyn bridge for the right price too! I played around, I like the interface and how it's structured... *Update* the card came in and went through, so I added the final star and will continue to use and refer people to you guys. Thanks and keep up the good work!
User Interview
I like the avatar and space theme, I picked the lion because i’m a leo.
Google Play Store
Took me time to reach the $10 dollar mark, but I wanted to see if it worked. I redeemed for a $10.00 target gift card takes 1-3 business days. I cannot believe I just saved $10.00 on my grocery bill. It legitly does reward you! Definitely recommend you try this app out!
Google Play Store
So far so good! Easy interface. Great apps. This app has been a very good experience so far. I think it's worthy of my time and other people's as well. Good job.
User Interview
The Google reviews seem trustworthy and I like how fast you can earn and how much you can earn.
User Interview
It’s not too flashy but it’s still cute. It’s easy to cash out, it’s easy to update your profile. I love it, I can’t wait to earn more money.