A product designer that advocates for inclusive design and champion advocate for the user experiences.
Smule.png

Smule

Frame 2.png

VIP Day Pass

Led and executed the interaction, UI and visual designs for Smule’s new exclusive day pass for both android and iOS.

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.

 
 
Screen Shot 2019-07-04 at 10.31.14 AM.png
 
 
2.png
 

 

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.

 
4.png
8.png
 

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

3.png
 

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.

 
7.png

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.