A Web and iOS App to Unite Superfans with Their Superstars
FanCrater is an ambitious social platform aimed at audiences of nearly every age. The goal: bring together notable people and groups with their most loyal, and vocal fans. It’s nothing like a traditional fan club—it’s an entire ecosystem of features that facilitate one-on-one interactions. Read on to see how I helped.
FanCrater sought to carve out a place for recognizable people and groups (Notables, as FanCrater called them) with their most loyal supporters (Superfans.) Superfans paid a monthly subscription fee to gain access to a Notable’s content which included exclusive video, audio, and more.
I collaborated with FanCrater to help them put in place foundational design pieces such as a marketing website, and native/web app prototypes.
FanCrater successfully launched the platform but ultimately decided to sunset the project for reasons beyond design, marketing, development etc. Knowing this, the UX/UI work I helped the team create are valuable artifacts worth examining. Enjoy!
The sky’s the limit
FanCrater casted a wide net regarding who their ideal user was. It included notable people, groups, and brands, as well as Superfans of many ages and interests. FanCrater wasn’t a pre-teen or teens only platform.
On the Notable side
- Brand, person, or group (musicians to start)
- Have a following of some sort
- Interested in monetizing their fanbase
On the Superfan side
- Men and women aged 14+
- Varied interests (music to start)
- Seeking more or advance access to celebrities or personalities they admire
The marketing website was one of the first items I was asked to help with. We used this as primarily a means to inform Superfans about the benefits they could expect to enjoy, some of which being: advance access to superstar news, one-on-one communication via audio, video and so much more.
What it looked like
One of the core objectives was to show a diversity of people and industries to really communicate to users what they could expect when they signed up.
I started with large images of silhouetted figures that are easy to recognize based on their overall shape. It was important that each shape be dynamic and possess a sense of movement to give the design a more organic feel.
I creatively abstracted each image so that it was clear what industry or notable category that was being referred to, while not being specific to a particular person.
A fully-immersive experience
The What is FanCrater section was used to go into greater detail about how FanCrater works. I used varied images set within an irregular grid to immerse the viewer. Some sections allow the viewer to dive deeper with added interactivity and motion to enhance the viewing experience.
Making things mobile-friendly
Due to the reduced visual real estate when it came to mobile I wanted to make sure the message was communicated clearly, and that meant modifying the design a bit.
I decided to ditch the split screen layout and show full screen images that stack on top of one another—this gave each separate element the room it needed.
FanCrater as an ecosystem was being developed in phases with a diversity of talent working in tandem to fully realize the objective—unite Superfans and notable people. My role in helping accomplish that feat was a comprehensive app onboarding experience.
Original Superfan onboarding flow
Notables promoted their FanCrater page (where Superfans have access to all their audio, video clips etc.) via their social media channels. From there, Superfans followed a link where they arrived at a fullly branded page where they were asked to either Sign In or Create an Account.
Iterated onboarding wireframe
I regularly interfaced with the team’s lead developer to collect feedback and make sure I was evaluating the task from every suitable angle. One idea that was floated my way was that we could use dynamic form fields. We’d present a unified Sign In/ Account creation form where each subsequent field changed based on user input.
To this end, new and existing Superfans started by entering their email address. If the email address was recognized, the user was presented with a password field. If the email address wasn’t recognized, the user was asked for their full name and other basic account creation details. After these few fields were completed, an account was created straight away.
Onboarding+ (profile creation)
My objective was to enable users to create an account as fast and frictionless as possible, but once that was done there was a variety of information we still needed to collect… phone number, street address etc. I approached the challenge from the vantage point of how people are accustomed to interacting and communicating with one another everyday. The concept: allow prospective customers to progressively onboard and provide this additional information via a chat-inspired “form.” We’ll call it extended conversational onboarding.
Most everyone is familiar with the structure of a text message chat… a back and forth conversation where each party takes turns responding. Here, the intent was to increase the likelihood of users adding this information (as it is ultimately needed to make and complete a subscription to a Notable.)
Each user response is entered as simply as one would communicate in a text message chat, affording the user a more personalized experience that mimics the comfort of a real conversation. Users can scroll back through the conversation and click an edit icon next to a response if they wanted to change something.
Reducing friction while increasing peace of mind
The team raised an interesting question as this concept unfolded: is a conversational UI suitable for all the information we’d need to collect? I think not—they agreed.
A conversational UI is a great low-friction way to keep users engaged but when it comes to providing sensitive information like credit card details, formality is key. So, I decided to break form and inject a more typical method to collect this information from the user.
While the entire experience is secure, financial information is collected via a more common looking form:
Extended conversational onboarding concludes once the user enters their credit card details and confirms the Notable they’ve selected to subscribe to. From this point they’re immediately taken to their dashboard where they can view the Notable’s content (audio, video, etc.)
(Keep reading, there’s a link to the prototype in the UI section!)
Turning up the fidelity
Now that the UX was in place I turned my focus toward designing an ambient experience that would get the user excited about joining the platform. A few select screenshots are highlighted below but check out the prototype for the more expansive walkthrough.
Subscribing to Notables after onboarding
I designed an extension of the onboarding experience that would enable Superfans to search for and subscribe to people they were interested in following. This flow was meant to be accessible any time from within the account holders dashboard.
I built a partially interactive prototype that allowed me to explore styling of some of the interactive elements. Check that out at the jump.
As I mentioned earlier, FanCrater has been sunsetted as a platform but the opportunity to work with the team and the work I performed are still valuable experiences to have undergone. The conversational onboarding hadn’t reached a point of implementation but was well received by the FanCrater team.
Creating a comprehensive flow that catered to prospective customers who weren’t just US-based was challenging. I also learned that even a standard login form can make use of dynamic fields to simplify the Sign In/Create Account processes.
I take care not to reinvent the wheel and use design patterns that are tried and true, but am cognizant of the fact that it’s good to know when to push boundaries and try new things.
Freelance Product Designer
©2005-2019 Jonathan Patterson | Iteration V4