Our partner implemented a technology for interactive interaction with video content. The algorithm enables you to select and recognize various products, such as clothing, shoes, or accessories, in ‌photos, videos, or TV broadcasts. Then it can find these or similar products in the online stores of partners. Now, it's easier than ever to model your image to the latest fashion, find the gadgets or any other product that you have seen. Developing a user-friendly and visually appealing interface for iOS and Android mobile apps in Russian and English.

Auditing UX/UI

We started by auditing UX/UI of the existing earlier solution. We found a few flaws in the UI that could pose problems for users, such as:

• Low screen contrast;
• Inconsistent approach to text layout;
• Redundant elements on the screen.

In terms of UX, we found some bottlenecks that made it harder to learn how to use the app.

These issues caused the algorithm to be non-transparent, which could discourage users from adopting it. When designing the new interface solution, we considered all the flaws of the previous version and, together with the customer, identified the necessary changes.

Developing UI

To make this mobile app more user-friendly and intuitive, we redesigned its key sections.

• Home Screen. Main features: downloading photos to recognize products; navigating the sections (video, news, favorites); returning to the menu with the personal account, technical support, and other settings.
• Video. In this section, the user can watch live partner TV channels and stories already released on video platforms. For some videos, there are prepared sets of images.
• News. This is where you can find various articles with image selections and relevant news items. Later, the section will include such categories, as TV, Movies/Serials, Social Media.
• Favorites. This section displays Products and Images saved by the user. The yellow button is available at any time, which allows you to find the desired image.

How does it work?

Let's assume you want to identify a clothing item or accessory worn by the main character in a movie or TV show. To do this, click the yellow button at the bottom of the app screen. This will display the images of products found in online stores.

You can click the card, go to the product catalog, and set up search filters, such as, by brand or product type. The app also prompts you to assess whether the product matches your request.

Product-centric approach to software development

After preparing layouts, we tested the new UI and made additional adjustments. For example, we increased the contrast level of inactive menu items, so that ‌users can immediately realize where there are.

Finally, we implemented an introductory welcome screen introductions for onboarding. This is where ‌users can learn how the app works and what its purpose is.

Additional tools

Developing the UI for the app is one of the many stages of our collaboration with the customer. We created a landing page about ViewEvo technology, which is used in the app and can become a framework for new IT products. The main modules of the website are described in two languages:

• audio content recognition,
• search for similar products,
• software for manual markup of content, and the ViewEvo app.

We implemented an interface for embedding the widget into media players. It will be available during TV broadcasts to enable viewers to select an image while watching the show.

‍