A fully native profile editor for performers to add headshots, reels, and details to make their job applications stand above the rest.
My Role: design lead ux interaction design user flows data analysis visual design illustration
Profiles are an important part of the onboarding experience and of users' talent applications, as well as a selling point for first-time subscribers. Backstage saw a drop in subscription conversions due to users having a serviceable, but cumbersome experience editing their profiles in their web-embedded view on iOS. Users would resort to desktop to edit, which also resulted in them not applying to jobs immediately.
Before: Web embedded view in the ‘Me’ tab
Since Backstage features a Talent Profile editor on site, the most imminent challenge involved translating the web functionality seamlessly to an iOS experience. It provided the opportunity to re-evaluate current messaging and feature terminology. The web app restricted the team from completely re-designing Talent Profiles, yet it provided a chance to simplify editing and resolve current pain points the users were experiencing.
With the MVP of the Backstage iOS app launched, we were able to collect months worth of data, app store reviews, and user interaction recordings. We primarily used Amplitude, notes from initial user interviews, targeted audience surveys, and feedback from beta testers. Our actors were loving the new app, but with that being said, we still had improvements to make.
For the user's 'Me' tab the decision to embed Backstage's mobile web view was undertaken, which was not ideal. The team, having a constraint of only 2 designers and 1 Xcode developer, had to put an in-app experience on the back burner. Based on the data we collected, it was obvious that an in-app profile editor was necessary for our users. Their behavior was telling us that they would cancel out of the app completely after attempting to fill out their profile within the web view.
Questions I Asked:
Research Insights:
Having a native in-app profile will prove to have higher conversions. Actors will be able to edit their profiles whether they are waiting to audition or on the train, confidently and smoothly.
Easily Update Profile
Our performers need to be able to update their profile quickly and easily. The new profiles should include all of the functionality the web app offers.
Trust
Performers were worried that their content wasn't being saved in the mobile view. Therefore the new profiles need to provide a frictionless experience that instills confidence and trust in users.
Organized Content
Credentials, characteristics, skills, and media need to be intuitively organized in order for users to seamlessly edit and rearrange their profile information.
When performers sign up for Backstage on the website, they are prompted to complete their profile and accept the Children's Online Privacy Protection Act. They need a complete profile in order to apply to roles as it is included in their job applications. Since this experience exists on web, we needed to add a profile creation wizard into our existing iOS onboarding flows.
The Profile Wizard includes primary information and a main headshot image for the performer to fill out. Once completed, they have the option to add more to their profile or jump right into searching for casting calls.
*Our product team has an established iOS brand system, so I was able to plug in our UI elements after sketching the screens with pen + paper. Additional visuals and illustrations were then added later.
We then had to map out every edge case of the user flows that prompted onboarding and profile creation. The success screens differ based on the user's circumstance to provide a seamless experience from where they left off. Below are a few instances (click to see all).
The Profile Wizard was launched in June 2018 and the profile editor is currently in development.
A performer's Talent Profile is their personal web page and is included in job applications. They market themselves by completing their profile, and count on Backstage to upload unlimited photo, video and other media. Slick headshots, reels, and a complete resume are key to getting noticed and being taken seriously by casting agents, so a Backstage member's profile is of high importance. Having the profile editor in the app will offer a valuable experience for performers to pursue their dreams.
We did a deep dive into our current terminology and descriptions for our current profiles. How did 'headshot photo' differ from the rest of your 'profile photos'? Are they featured? We have an internal 'Media Locker' that stores our performers' media and not all of these items are in their profile. How do we make these concepts more clear in iOS? We went through several iterations and whiteboard sessions to come up with simple solutions while using Backstage's voice and tone throughout these user interactions.
Users needed to be able to reorder credits and production types, as well as to add and delete credits. The empty states provided a fun opportunity to bring a friendly voice and a splash of color to encourage users to 'add a credit.'
I worked closely with the developers to determine if the functionality in the iOS app could be also used in the web app. Certain interactions are native to an iOS app, but I wanted to see if movements like 'drag and drop' could be added later down the road for our web app users. After consultation with the engineering team it was determined that 'drag and drop' would be a viable tool to use in such interfaces as 'Credits' and all of the media screens.
'Drag and drop' proved to be the most simple, yet robust solution for a user to organize their media. By dragging a photo to the first position, it would automatically become their primary headshot photo and would then be denoted by a star.
To unify the Backstage brand, I illustrated custom characters, performer-centric objects and interfaces. These illustrations proved to have a wide use-case and can be found throughout our iOS app, landing pages, and marketing materials.
