Fanfair app design

Fanfair is a Music industry-focused social app for networking and gaining fans

Challenge

Our challenge was to take an app MVP project that had been abandoned and create a working product that delivered on the company's core value proposition and get it in the hands of users on a short timeline .

The Client

Fanfair is a startup driven to solve one of the major career challenges that music artists face: expanding their social media fanbases to attract labels and opportunities. Artists need to reach new listeners who will become active fans.

Fanfair’s solution is to connect similar artists to each other and help them reach each other’s social followers (which they call ‘fansharing’). This way both artists can grow their fanbases.

Discovery

The client brought a significant amount of assets and materials into the process from their previous iteration on this MVP. This meant we had a lot of our discovery questions answered quickly but also that we had a lot to assess.

On the Design side we received:

  • Existing user research and competitor analysis

  • A visual prototype with some of the key screens (and many gaps)

  • Some visual assets: logos, icons and photo treatments

The dev team received a code repo from a previous version of the app.

Extra Challenge:

Because we were working from where they had left off, we faced a double challenge of building a product while also sorting out what was already built and clearing the existing technical debt of an unfinished codebase, which matched an unfinished hi-fidelity prototype. It was clear early on that this meant we'd be inventing a process as we went. We needed to find ways to save time and not re-invent things that they brought to us in a good working state.

As I designer, I had to work out where I was creating new flows and screens and where there were working parts that I could refine. The reason for this was that parts of the existing prototype looked like good solutions at the start and were likely already coded in the front end and the client didn't want to start anew on them. They hoped that would save time and money in the end and our team put in the work to validate that hypothesis.

Problem to Value Prop to Feature Set

We launched a discovery phase with the Fanfair team to refine the product vision, define the MVP feature set and create a development timeline. During this phase we reviewed the existing assets and did a deep dive with them into their existing research, hypothoses and value proposition.

This meant reviewing their interview findings and market research summaries and also doing interviews with the team about their ongoing prototyping process.

Research:

They had analyzed competitors, conducted interviews of likely users and developed some basic user personas.

They had also recruited artists as app beta testers and had tested their value-proposition with in person events where they connected artists and had them shout each other out on social media to reach new followers.

Main Takeaways:

- Artists are excited to connect and willing to publicize each other. They understand that reaching active, engaged fans of their style of music is vital to furthering their careers.

- Artists are interested in a solution for this challenge even after they are fairly established in their career. Connecting with other artists and reaching new fans is a continuing effort and passion.

- Artists are excited about platforms that can help them with the business side of their careers.

- Fansharing works best when it is simultaneous: I post your content to my fans while you post my content to yours. Artists are interested in a streamlined process, not proposing/setting up each agreement and waiting for the favor to be returned.

Solution & Product Vision

During discovery we had identified main challenges and the unique value proposition and defined what success looks like by framing user needs and business goals.

We arrived at some user-centered focus areas that would guide the MVP:

  • Connections

  • Community/content

  • Fansharing

We also defined some business needs that would inform the approach to creating value in these areas:

  • Official Fanfair content/updates

  • Gathering key user data

  • Time on platform

  • Brand aesthetics

Defining the MVP

We built from the main focus areas in defining the feature set.

Connections:

  • Profile

  • Search

  • Connect/Accept

  • Chat

Community/Content:

  • Media gallery

  • Feed

  • Updates(from fanfair)

Fansharing:

  • Invitations

  • Content Selection/Pre-flight

  • post to external account (Instagram)

We also had to consider app store requirements such as content moderation at this stage.

Designs

Moving into the design phase, we identified key user stories and I created userflows, wireframes and high fidelity interactive prototypes, refining them with the client and the dev team at each stage. Staying aligned was vital as we were looking at a lot of functionality for this MVP and needed to actively balance the scope and development timeline with the main value proposition at this stage.

Solving Design Challenges

I designed the information architecture around a five icon bottom nav and a tab-style top-nav for related screens–such as notifications and chat.

I designed the profile and media manager to be simple and intuitive.

we created a social-style feed, a notifications screen and chat functionality.

We designed a fansharing experience with minimal steps and a focus on collaboration. It clearly visualizes the system state for both parties as the posts are proposed, updated, approved and posted to Instagram.Enter your text here...

Design Challenge Example

Our first focus area was the signin and setup stage and it presented some unique challenges.

This app needed to be linked to a facebook business account in order to post to instagram. This meant sign up would have an extra, unfamiliar step and require certain configurations to be completed outside the app.

We also needed to get users to add important profile information once signed in. This meant nudging them towards completing a setup process that would let them get the most from the app while limiting the amount of hurdles they had to clear before seeing and experiencing how the app could create value for them.

Ultimately we designed a process that: -presented simple, defined steps, conveyed forward movement ( through animated transitions), and used priming/persuading techniques with icons conveying the value proposition. -gathered basic profile information during setup

To manage the complexity of the facebook account setup we added a video introduction from the founder to explain and provide reassurance and we made sure that users could explore/experience the app without a fully linked instagram account.

Result and Takeaways

The app was completed, tested and approved on the app store on a tight timeline to fit with Fanfair’s rollout schedule and the development team did a great job to make that deadline. One of the most exciting things about this project was watching the first round of users onboarding as soon as the product went live. Having the app in the hands of users is an exciting time but due to the nature of our partnership we did hand this project over after the app went live.

Fanfair was able to use this product to move to the next phase of their rollout- validating their value proposition, fundraising and building partnerships in the music industry.

Some important lessons from this project:

  • Don’t underestimate how difficult it can be to get an app approved on a platform, even when it meets all the requirements.

  • Component libraries are almost always worth the upfront investment. And Figma has incredible features for them.

  • Legacy frontend code can present surprising challenges on the design side, especially for planning.

This app MVP has an extensive feature set including a social feed, chat functionality and a dashboard for managing ongoing fanshares as they are proposed, approved and posted. Designing and prototyping these flows presented interesting challenges and opportunities and I loved working through this challenge with a dedicated startup team as our client and the excellent professionals building software at Warecorp.

More by Paul Hiam

View profile