Backstage Profile Editor in iOS

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


The Problem: Why a native in-app profile editor?

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


Web to iOS: Turning challenge into opportunity

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. 


Research Synthesis: Putting findings together


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:

  • How many users are clicking on the profile completion number?
  • Do users know the difference between their primary profile headshot and their featured application photo?
  • How often are users changing their main profile headshot?
  • How often are users reordering their photos? How about deleting? Adding?
  • How many users are uploading media from their ‘Media Locker’ vs ‘Google Drive’/’Photo Library’/’iCloud/’Dropbox’
  • Research Insights:

  • Users were able to create an account through the app, but not a profile. In order to apply to jobs you need a talent profile, so new users were forced to go to to create their profile.
  • Our current terminology caused confusion.
  • Users exited the app upon entering the web-embedded view in the 'Me' tab.
  • Users had access to in the app, which distracted from profile editing.
  • Users resorted to desktop to upload photos.
  • The web view proved to be a clumsy experience within the app.

    Hypothesis: Initial Ideation & Goals

    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.

    Artboard 2.png

    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.

    Artboard 2 Copy.png


    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.

    Artboard 2 Copy 2.png

    Organized Content

    Credentials, characteristics, skills, and media need to be intuitively organized in order for users to seamlessly edit and rearrange their profile information.

    Phase 1: The Profile Wizard

    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.


    User onboarding scenarios

    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.

    Phase 2: Talent Profile Editor

    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.


    Terminology & Product Copy

    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.


    Final Design: Manage your profile effortlessly

    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.'

    Screen Shot 2018-07-18 at 12.21.12 AM.png

    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.

    Screen Shot 2018-07-18 at 12.52.56 AM.png

    Adding Backstage's charm to profiles


    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.