Case Study Doorway

Doorway has been one of the most interesting projects we have faced. It has been a road full of challenges and learning. When the co-founders shared their idea with us we were super excited: it was a type of MVP we had never seen before, a new social network that was meant to change the way influencers and their followers interacted. Although the project meant a new paradigm we respected our usual process: we started with the definition and concept of the brand, then we developed the design and created the layout. In the meanwhile, we designed the data strategy that Doorway was to follow.

In order to develop Doorway we relied on different tools throughout the process: Figma to carry out the design of the product, Webflow for its layout, Firebase and Firebase's Firestore as a CRM and for all the logic, Telegram for the communication between the users and Stripe for the transaction movements. We also used Google Analytics as well as Hotjar and GTM to carry out the measurement.

What is it?

Doorway is a platform that is responsible for being able to unite followers with influencers. They want to be the gateway to personalized, private micro-spaces where creators interact directly with their followers and make content available on a subscription and/or pay per view basis.

What it does?

Doorway is a platform that is responsible for being able to unite followers with influencers. They want to be the gateway to personalized and private micro-spaces where creators interact directly with their followers and make content available to them on a subscription and/or pay-per-view basis.

What was their main problem?

Doorway was a well defined idea that needed to be built in the digital environment (it needed a website). They also needed to validate that it interested people: they needed to validate their business idea.

Our Process

We firstly defined our ojetctives and developed a measurement plan. In the measurement plan we defined the objectives we wanted to focus on. Next we started with the design process, creating a personalised moodboard and a branding strategy with these insights and the key values Doorway shared with us. After that, we made wireframes and tailored the website new design. After this design was aproved by Doorway, we started working on the development of the proyect on Webflow, finally getting the doorway website. We also set a data strategy that would allow us to follow their evolution.

We will walk you now thorough the process we followed:

Establishing our goals

Once we finished with our brief research we designed a measurement plan in which we established the business main objectives. We wanted to create an strategy that would accompany us thorough the design process:

Main objetive

Validate the business idea which is to create a community around the product

Digital Asset objectives

Attraction

• Traffic growth (reaching 1000 users in one month)

Conversion

• Growth in subscriptions (reach at least 10 influencer subscriptions and at least 100 users for subscription in 1 month time)

Once we had the objectives cleared out, we focused on working on creating the design of the website.

Design

With the ideas gathered both in the research we conducted and in the insights the Doorway creators shared with us, we started the design process.

We used Figma, which is a good tool for collaboration in between departments. There, we created a style guide with different aspects:

• The first thing we did in the process, was to carry out a study and analysis of different websites that offered similar services, allowing us to have a better idea of what path to take when starting with the design.
• Once we had an idea of where to start, the first thing we did was to establish which colors would give life to the brand. Finally we chose yellow, black and beige. All this with the aim of providing the page with a power brand, making it look like something unique.

• Secondly we chose the type of typography, choosing three types, for the titles adieu light and for the body suisse regular and suisse semibold, both fonts fit with what the brand wanted to convey, giving it a touch of power and freshness.

• As for our UX proposal, we developed an architecture based on the simplicity of the brand. What we were looking for was to make it easy for users to navigate the website while they understood what the idea of the brand was about.

After all the design was created and developed in Figma, we made a last proposal to the client and with their approval we started it to built the design in Webflow.

Development

Once we had the design of the website ready, we started building it. Having clear that the main objectives were to help influencers and content creators to monetize their audience and be closer to their followers; and to offer their followers exclusive content, chat with them privately and create personalized content for them.

For this, the technology we used was:

• For all the visual part we did it completely with Webflow (Frontend).
• All functionalities and logic were done with Firebase functions (Backend).
• The data storage is mainly done in Firebase's Firestore (Database) but also some information (public profiles of the influencers) is stored in Webflow's CMS.
• In order to make communication between influencer and follower possible, this was done through Telegram, a platform through which payments could also be made.
• As for the subscriptions on the web, these would be paid through the Stripe tool.

Once we had all the tech stack set up, we were able to define the functionalities:

• If a person subscribes (upon payment) to one or more content influencers, they will be able to:
• View exclusive publications
• Chat privately and exclusively with them
• Ask them questions or request personalized content
• If an influencer subscribes to Doorway (free of charge), he/she will be able to:
• Have a platform where they can post texts, photos or videos in an exclusive way, where only their followers who pay the subscription will be able to see it.
• Have a closer contact with your followers by chatting privately with those who are subscribed.
• Send personalized content (photos, videos, audios, documents) to subscribed followers who request it, upon payment of an amount established by the influencer.
• Access to a control panel where they will be able to publish their content or see their income from subscriptions or sale of personalized content.

Data Assets

We created a personalized dashboard with different pages so that Doorway people would be able to track their site performance. In this dashboard we included five different pages: 1. Traffic and audience, 2. Content, 3.Campaigns and 4. Events.

The main peculiarity we faced with this project was that the first weeks we needed to test its feasability. That is why we needed to follow closely the interaction of the users with this product. We designed the tagging guide specially focusing on the two main interactions of the users with the website: the subscriptions from the influencers and the subscriptions from the followers.

In the "Events" page of the dashboard we created in Data Studio, we included some graphics showing the performance of each of the interactions. We also calculated the interest or conversion rate for each of the targets. That is how we will realize whether the product is having a good welcoming between people or not.

The result

With the final design launched, we now only have to wait to see if our objectives expectations are met!

We enjoyed collaborating with such an amazing client that is going to revolutionize the relationships between influencers and their followers and taking them to another stage. We learnt many things in our process to the final deliverable and were really happy to made a project that was adjusted to the requirements of the client!

We strongly recommend you to visit their beta site and hold on to the final one: https://www.doorway.club/

Do you have an idea for any social platform? We can help you building it! You can contact us thorough our contact form in our website!

Hope you enjoyed the case! Stay tuned for more!

‍