BloggerMall

BloggerMall

Ukraine's first platform for working with bloggers

Array
(
    [0] => WP_Post Object
        (
            [ID] => 11155
            [post_author] => 10
            [post_date] => 2022-05-18 17:22:26
            [post_date_gmt] => 2022-05-18 14:22:26
            [post_content] => 

The objective

ВloggerMall is the first Ukrainian platform aimed at making it easy for advertisers and Instagram bloggers to find each other and establish effective and safe collaborations.
After a successful experience of cooperation in the development of the site, BloggerMall turned to us again, only this time for the superpower of an iOS developer who is ready to create a convenient modern application for users of apple gadgets.

See also:

BloggerMall.com.ua blogger exchange Banner

The desire of our client to make the service for regular customers even more convenient and enjoyable turned into a task: to develop a stylish and understandable application that duplicates the capabilities of the site and is in no way inferior to it in terms of its functions:

  • registration and authorization of users;
  • blogger profile with a description and detailed analytics of the target audience;
  • blogger's advertising account;
  • payment system through the UAPAY service;
  • messenger.

This is what we actually did.

The design department received the task to design layouts for the mobile application. And for our iOS developer, with 5 years of experience, one large-scale task “Develop an application” immediately broke into several specific steps:

  1. Create pixel perfect based on design layouts;
  2. Develop application screens, navigation between them, transitions and animations;
  3. Build a functional part based on API calls to the server part;
  4. Create application components and set up a library that will match the functionality and design of the layouts.

Read more about how we implemented the project in our case study.

Technological solutions

When developing complex applications for iPhone and iPad, our specialists use Swift, the native language of the iOS mobile platform: reliable, intuitive and fast not only in development, but also in work on Apple devices.

Implementation of design and animations

At the time when BloggerMall came to us with a new project, the company already had a successful site made by Webnauts with a ready-made logo, bright corporate colors and a ready-made UI kit. Previously, our designers took part in the development of website design. Now the task is to design a mobile application for iOS devices.

Banner Banner

Despite the fact that our first project assumed an adaptive design of the platform for any type of device, the design of the mobile application has its own characteristics. If the mobile version of the site looks almost the same as the site in a regular browser, then the design of the application must meet the requirements of the OS manufacturer for the user interface (in our case, the requirements of iOS). So the mobile application for apple devices will look “native”, and thanks to integration with the platform, it will work faster.

Based on the layouts developed in the Figma graphics program, our developer implemented and “revived” the pixel design of the application using the following technologies:

  • Modal ViewController - bottom sheet modal view controller. This is a useful feature with a great UI/UX design that helps present a quick preview with minimal content.
  • UINavigationControlleris a specialized view controller that manages navigation through hierarchical content. It is a navigational interface that allows you to effectively visualize data and make it easier for the user to navigate through this content. Simply put, the UINavigationController helps the application user remember where they are at the moment (name of the navigation bar) and how they can return to the previous screen (the built-in back button).

Animation plays an important role in mobile app design. It is designed not only to distinguish an IT product from competitors, but also to increase the usability of the application. Animation "reacts" to the user's actions and helps them quickly get used to it, making the process dynamic and interesting.

In the BloggerMall application, we animated interface elements such as a hamburger menu, buttons, registration fields, radio buttons and a bottom navigation (tab bar) with 3 main sections of the application (My Ads, Posts, Profile).

Animation of visual elements is implemented using the following technologies:

  • Core Animation is a program developed by Apple for rendering, compositing, and animating images. It allowed us to deliver high frame rates and smooth animations without consuming the CPU or slowing down the application.
  • Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time. Using animation with it is as easy as using static images.

Functional part of the iOS application

User registration and authorization

Registration and access to the application is possible both by entering an email and password, and by logging in through Facebook and Google.

The blogger registration process includes 6 steps, during which you must specify personal data and a password, information and blog topics, rates and a method of payment for advertising services.

01

/ 06

If you enter an incorrect password, the system offers the usual way to recover it via e-mail:

Registering an advertiser is easier and takes just 2 steps. To do this, you must fill out the form and accept the user agreement.

Blogger Profile

It contains several sections: Personal data, My Instagram account, Prices for my services, My payment card.

01

/ 08

Blogger's advertising account

Contains all information about advertising cooperation and includes 3 main sections: All advertising, In progress and Waiting. It allows you to control not only the status, terms and payment of advertising requests, but also quickly go to the chat with the advertiser to agree on the terms and details of the transaction.

Banner

Payment system

The principle of payment for advertising services on the exchange is as follows: after mutual confirmation of the order, the advertiser pays for the service from a previously linked bank card, and the funds are “frozen” on the platform (90% - payment to the blogger and 10% - exchange commission). After the advertiser has confirmed the successful completion of the order, the blogger receives his money on his bank card. In case of non-fulfillment of the order, the money is returned to the advertiser's account in full. Like on the site, all mobile payments are made using the UAPAY National Payment Service.

All of the above functionality of the BloggerMall application is implemented on the basis of API calls to the server side using technologies:

  • UI Kit is a structured library of native components based on Apple guidelines. Thanks to interface elements grouped into categories (buttons, pop-ups, navigation bars, icons) and implemented in accordance with the apple design specification (typography, style, colors), UI Kit allows you to significantly speed up the creation of an application for iPhone and iPad.
  • Alamofire is a Swift-based HTTP networking library for iOS and Mac OS X. It provides an elegant interface on top of the Apple Foundation networking stack that simplifies common networking tasks. Its features include chain methods of request and response, encoding and decoding responses, and data authentication.

Socket.IO technology was used to receive and send data between users of the BloggerMall application. It is a JavaScript library for real-time data exchange. It provides bidirectional, event-based communication between client and server with minimal data transfer delay.

Development of a messenger for an iOS application

Chat between users of the BloggerMall application was implemented using MessageKit technology, an open source Swift library for sending and rendering messages between users of iOS devices.

Perhaps the implementation of the chat was the trickiest task of the project. The server part of the messenger had previously been written for the BloggerMall website, and it should have been “transferred” to the iOS platform so that the principle of the chat was the same on the site and in the application.

But, as you know, it is easier (though longer) to write programs from scratch than to unravel someone else's code. And the use of third-party libraries can not always be clearly customized to the client's request.

Here the MessageKit technology helped, although not immediately, since our developer encountered it for the first time. At first, it was not entirely clear how to send, receive and compare data: not only text, but also large photo and video files. There were some difficulties with the design, namely with setting up the library and displaying the interface that the client requested. However, having gradually mastered the technology and figured out how the backend with the frontend works on the site, our iOS developer began to implement the messenger. As a result, we got both a convenient chat and an even more advanced specialist.

01

/ 04

The results

It took 2 months to create an iOS application, as a result of which BloggerMall received not only another source of income, but also the most thoughtful, understandable and reliable tool for effective cooperation between its clients: bloggers and advertisers. Analytics, advertising account, transaction history and internal chat - now everything is at hand for comfortable and safe cooperation. More satisfied customers means more successful transactions, and hence the growth of the company's income.

During this difficult project, we not only successfully implemented the product, but also replenished our technology stack. We love challenges, because they allow us to develop and make really cool things.

[post_title] => Mobile iOS Application for Bloggers' Platform [post_excerpt] => [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => mobile-ios-application-for-blogger-exchange [to_ping] => [pinged] => [post_modified] => 2022-12-01 22:49:25 [post_modified_gmt] => 2022-12-01 19:49:25 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=11155 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 15202 [post_author] => 10 [post_date] => 2022-06-13 16:43:20 [post_date_gmt] => 2022-06-13 13:43:20 [post_content] =>

About the project

BloggerMall is the first blogger exchange in Ukraine. With the help of the service, advertisers can find opinion leaders with access to the right audience, conveniently and safely order advertising integrations on Instagram from them.

Registration and use of the platform is free. The service earns on commissions from successful transactions between bloggers and advertisers.

https://wnauts.com/wp-content/uploads/2022/06/bloggermall-video.mp4

Design and navigation

The website of the service is made in bright colors and slightly catchy style, which reflects the platform's youth orientation. The colors used constantly alternate, changing their role from primary to accent. This technique helps to colorfully highlight the semantic blocks on the pages and the information contained in them.

Appropriate landing pages have been developed for each category of visitors. They contain a description of the benefits of the service, instructions for working with the platform, and answers to frequently asked questions.

The design of the platform is fully responsive and retains its appeal on any type of device: from laptops to tablets and smartphones. Content elements are automatically resized to fit the user's screen size and resolution to provide the best possible display of content at the time.

But for such resources, the visual part is not so important as the impeccable functionality. The service provides a wide range of opportunities for each of the parties.

Banner

Search for a suitable performer

First of all, the advertiser needs to find a performer that matches the task. To do this, we have developed a page with an advanced search for bloggers based on filtering and sorting by key parameters.

01

/ 06

Using convenient filters, you can select bloggers with the necessary budget, number of subscribers and engagement rate. The platform also allows you to set filters for the required target audience by interests, age, gender and geolocation. By setting up each filter, the customer will be able to find the perfect candidate for their advertising campaign.

Banner Banner

Blogger profile and dynamic analytics

By going to the page of a particular blogger, the advertiser can get acquainted with their indicators and detailed audience analytics. Analytics are dynamic and updated in real time. The service provides real data on the number of subscribers, their geolocation, gender, age, audience engagement rate, as well as the number of likes and comments under publications.

01

/ 03

To get this amount of up-to-date data, we have developed a special application for integration with Facebook Business Manager. Information about the blogger's page is passed to the service via the API: thanks to this, we can display data that cannot be obtained by simply parsing the page. This approach makes the analytics more accurate and deep.

For the analytics to work correctly and display the latest posts, the bloggers links their Instagram accounts to the profiles in their personal accounts.

Non-standard integration with UApay

On the blogger's page, you can also get acquainted with their pricing policy and order the necessary service. The platform acts as a guarantor of the security of the transaction: it reserves and holds the agreed sum of money until the performer places the advertisement.

Banner

To implement this functionality, we implemented a non-standard integration with UApay:

  1. Upon receipt of money, the payment is split into two parts: the blogger's funds (90%) and the exchange's funds (10%).
  2. The funds are not immediately transferred to the recipients, but are held for the period of the task.
  3. If the blogger does the work and the customer accepts it, the funds go to the corresponding accounts of the blogger and the exchange.
  4. If the task is not completed or the work is not accepted, the funds are returned to the payer's account.

The payment process is fully automated and requires no intervention. The exception is when the application is referred to arbitration.

Blogger's personal account

After the advertiser has made a preliminary payment, the order is displayed in the blogger's personal account. Here, the blogger can contact the advertiser through the messenger built into the platform: this is the main way to communicate with the customer, the space for agreeing on the terms of reference and discussing all the details of the transaction. For each order, a separate chat is created, in which you can track the chronology of work, request an additional payment, or confirm the completion of work.

Banner

A list of all advertising campaigns is displayed in the personal account (as well as in the advertiser's account). Convenient filtering at the top of the list helps to separate current orders from completed or awaiting confirmation.

Banner

After agreeing on all the details and placing the advertising integration, the blogger confirms the completion of the task. If the customer mutually confirmed the completion, then the money goes to the blogger’s account, from where they can be withdrawn to any bank card.

Switching from Wordpress to Laravel

Banner

The Bloggermall project was originally launched on the WordPress platform. This was done in order to quickly enter the market and test the business idea. The new project turned out to be attractive and the site went up. However, along with this, technical difficulties began to arise:

  • the growth of visitors had a negative impact on the performance of the site;
  • there was a need for new elements, the implementation of which is limited by the Wordpress platform.

With a significant increase in the number of users, the loading of the page with the list of bloggers moved into the red zone according to Google PageSpeed. After the analysis, it was revealed that the reason is the inefficient architecture of the database. As a result, it was decided to switch to the Laravel framework. Its use allows you to create a more efficient database structure, and also removes restrictions in the development of the project to add new modules. It was also decided to switch to a more progressive DBMS — PostgreSQL.

The implementation of the changes we planned looked like this:

  1. The frontend part of the application has been radically changed. Now the personal account is written on the VueJs framework. This allowed us to fully apply the Websockets technology. For this, a separate module was developed on the server, which included NodeJs and Redis — the link between Laravel and NodeJs. As a result, the chat has become more functional online.
  2. All integrations with other services were re-written — Facebook, Instagram, Instagram story parser, sms mailing service, email mailing service, telegram bot notifications, E-sputnik, Google Sheets, payment aggregator.
  3. A scheme with a task queue was implemented, which assumes the exact execution of a task at a given moment and the distribution of load flows without involving additional server resources.
  4. As an addition to the functionality, integration with the neural network service was added. This makes it possible to analyze the blogger's audience and an additional section of the site — the blog.

As a result of all our actions, we received:

  • green zone for the speed of loading all pages of the site that are in search engines;
  • the search for bloggers has become more convenient due to the high speed of server response;
  • site managers have a great opportunity to create all kinds of tasks for writing new modules.

Summary

BloggerMall is an example of a convenient and secure service that connects the artist and the customer. It stands out not only for its bright design, but also for its wide functionality for searching for suitable contractors, discussing technical specifications and making secure transactions.

Banner [post_title] => Development of the Platform for Instagram Bloggers and Influencers [post_excerpt] => [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => exchange-of-bloggers-in-instagram [to_ping] => [pinged] => [post_modified] => 2022-06-21 08:10:44 [post_modified_gmt] => 2022-06-21 05:10:44 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15202 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )