Team
Visual Designer: Anna Yoong
Lead UX Designer: Kenia Carlos
Background
Premium subscription at Smule provides all access to any songs, sing any time, customize your own profile and lots more. Smule offers new users 7 days to try out these premium features at no cost.
Problems
Users are unclear of all the benefits
New users have the chance to subscribed to a 7-day trial for all VIP access, however, most users do not fully understand the benefits that are included. Non-VIP users are confused .Intimidated to try out
Non-VIP must join with another party, which is intimidating. It discouraging to users to try out other functions of the app.Non-committal
Most new and current users find it hard to commit to 7 days, even when it’s free.
Goals
To build trust of our product offerings by granting VIP access with no pressure.
To increase users from ‘freemium’ to premium.
Initial Concepts
With the user research and testing done by our lead UX designer, Kenia, I developed the initial concepts of the look and feel. I brainstormed on fun and quirky styles that would fit within Smule’s brand but keep users engaged during the onboarding process. Kenia graciously worked on the user journeys to solve our current UX issues, while I created functioning prototypes with the given user flows.
Wireframes
My goal was to create a visual language that is designed in accordance to the design system. This was an opportunity to explore a fun and quirky way to showcase guest pass that could be iterated in the future. Inspired by our color palette, I created colored wireframes that evokes excitement and playfulness. I wanted the user to be delighted at the beginning, during, and end of the process.
Final Designs
Onboarding
After a few rounds of testing, users found it hard to understand where to go after onboarding. I iterated the visuals to help guide the users out of the flow and into the main page. To make the direction as clear we as can, I worked with a copywriter to flush out the language of the pass from “day” to “premium” pass. This is a great way to provide users with the necessary context without overwhelming them.
Once the user decides to use the pass now, an animation flips the lanyard over. Users were delighted and contempt! It was readable, concise and they understood the contents on the screens.
Profile
The profile page was limiting since there’s an existing cluster of features and functions. Designing with what space we had, we minimize the placement by creating a premium pass icon, which will be absorbed into a new feature in the future.
For future use cases, users could purchase a week pass or a monthly subscription. We used a simple swiping interaction to simplify the purchasing options in this space. This alleviates future confusion and difficulty to purchase VIP access.
Newsletter Announcement
During our process, we needed an email announcement to let users know about our new Premium Pass feature and how to keep users inform of any updates.
Reflection
In overall, we were able to accomplish the goals that we made. The positive feedback at the end was well worth the rounds of iteration and failed testings. Users were awed and delighted of the intuitive functions during onboarding and on profile. Although we did not solve all of the use cases and we will need to return to testing those, it was a great learning experience for me.