How to create a mini-application: VK Mini Apps knowledge base

Useful materials for every stage of the life cycle



We talk a lot about how to create gadgets and run them on the VK Mini Apps platform. And we see how many cool ideas the developers have - both experienced and beginners. I would like everyone to be able to realize their idea in a compact service that will easily enter the user's life.



So in this article we collect all the materials, recommendations and useful links. Let's group them according to the stages of the gadget's life cycle: from idea to release and monetization.



There is even more support for developers in our VK Fresh Code program : these are educational courses and a competition with a total prize fund of 15 million rubles. Join us!


image



Finding an idea



Look for the idea of ​​a convenient service - in your own and others' experience, in the problems of people, in any area of ​​life. Brainstorm with yourself, with family or friends - and capture every thought. These notes will help you plan your development so that you don't have to go back to the beginning and add a missing feature later.



β†’ What to read:





We design and prototype



When the idea is fully articulated, start designing. Here, creativity is replaced by routine, but very important processes - they will save you nerves and resources at the stage of implementation.



A good example of the cost of error at different stages of development:



image



Make sure the idea is viable. If you are planning to make money on your mini-app and you need traffic, do a research of the potential market. Collect data, communicate with the target audience, study their needs and pains. Write two or three user stories. Get into technical design: make a list of features you want to see in the MVP and in the final version.



After that, you can proceed to creating a prototype of your future application.



β†’ What to see:





β†’ What to read:





Have you finished the prototype? It's time to think about what your gadget will look like.



Customizing UX / UI



At this stage, you have to balance between β€œI do as I like”, β€œI do as I can” and β€œI do as it is convenient for users”.



Finding and maintaining this balance is difficult even for experienced designers and developers. So the customization stage is a field of endless experiments, A / B tests, and hypothesis testing. Those who create gadgets have a powerful help - VKUI. This is a set of React components that can be used to create interfaces that look indistinguishable from a VK application.



β†’ What is useful:



  • VKUI styleguide - all available interface components to make your widget look like a native client. Bonus: VKUI Assets for Figma - they are free on their own, but only available in the paid version of the program.
  • React tutorial - useful if you haven't worked with this framework yet. Then you can go back to the VKUI components.
  • VK Icons is a set of SVG icons presented as React components.
  • Happy Santa VK App UI Style Guide - useful material for the desktop implementation of mini-applications.


β†’ What to see:





β†’ What to read:





We develop



Finally, you can start implementing. We share all the links that will help you.



β†’ Must read before development:





β†’ Prepare for launch in advance:





β†’ VK API and documentation:





β†’ Deploy:





β†’ Educational materials and other useful things:





Testing should be the result of development. Is always.



We pass moderation and testing



When the last update went to production, you are more or less confident in the quality of the mini-application and are ready for testing - it's time to submit your project for moderation.



The moderators will check whether it complies with the rules for placing services on the VK Mini Apps platform and whether the placement criteria are taken into account . They can also point out where to improve the UX and UI. The moderators' comments will help improve the application, and during the final review - also eliminate vulnerabilities that threaten user data.



β†’ What to see:





The next step is beta testing in the Testpool system . Here the application is checked by the guys from VK Testers .



In order for the service to get to them on the next Thursday (relevant for every week), you need to write to the moderator that you are ready for testing on Monday before 18:00 Moscow time.



On average, beta testing takes about two full weeks. It makes sense to try to get into it as early as possible - especially if you are applying for a grant from VK Fresh Code. Contestants place the finished mini-application in the catalog before the announced date. For the current, fourth wave of the program, this is October 21, 2020.



Final moderation: go to the directory



All reports are closed and your mini-app came out of testing almost perfect. It's time to remind the moderator about yourself again - in the same ticket where you communicated earlier.



All that remains is to do the nice little things: upload icons and covers to be displayed in the catalog and on snippets. After that, your project will be published in the official catalog of the VK Mini Apps platform.



After release: promoting and monetizing



The active audience is growing, the number of ad impressions is increasing, the monetization system is working. What's next?



The main thing is not to be satisfied with what has already been achieved and to think over a high-quality advertising campaign for the mini-application.



Promotion



β†’ What to read:





β†’ What to see:





What we have done to profitably promote mini-applications:



  • there is a separate auction for advertising mini-apps, which means there is no competition with offers of earnings and signing up for nails. The cost of impressions and clicks is 2–3 times cheaper than that of regular ads;
  • developed many native promotion methods and tools for fine tuning the audience;
  • We regularly hold promotions for developers of gadgets - sometimes you don't have to spend money on advertising yourself.


Monetization



VK currently has two models for monetizing gadgets: in-app purchases and advertising. They can be used separately or together.



β†’ What to read:








VK Mini Apps β€” . VK Fresh Code: , . - 300 , β€” .



All Articles