Designing a Mobile App for ViewEvo

According to a study prepared by TAdviser, the market for computer vision (CV) in Russia will expand almost 5-fold in 2018-2023. This growth will be largely driven by ‌widespread use of CV in retail.

Product

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.

Objective

Developing a user-friendly and visually appealing interface for iOS and Android mobile apps in Russian and English.

Outcomes

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.

This is what the Frame Recognition section looked like before the changes. When the users pressed the middle button on the bottom, they were taken to the screen shown on the left. It was not clear what was going on until the screen would display a search error message (on the right).

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.

Delivering deliverables

• Complete set of layouts and states (more than 280 screens) developed for the app;
• Design system based on UI Kit created for fast and streamlined communication between designers and the development team;
• Layouts created for the AppStore and Google Play, which the users can see before downloading the mobile app;
• Landing page created for the product;
• Widget interface developed for media players;
• Lightweight UI developed for web version of the app, including the desktop version.

New UI helps to navigate the app and makes it more user-friendly. All products of the customer have a common unique style to associate them with each other.

Technologies

Figma, Photoshop, After Effect