Tokopedia

Building a Solution for Labeling and Identifying Images

Improve the accuracy and efficiency of image recognition technology. By creating our own tools, we can customize the annotation process to fit the specific needs and requirements, rather than relying on third-party tools.

Annotation

Role

Responsible for research, design, user testing and delivery of key modules and feature areas.

Duration

Q3 2020

Team

1 Product Designer, 1 UX Writer, 2 Front End Developer, 1 Product Manager

Overview

Why did the project exist?

The goals of the Tokopedia Enterprise is to support activities that can increase the productivity of the internal team.

On this occasion, the Marketplace has a need to labeling images on the products published by sellers with the aim of enhancing features that will make it easier for sellers in the future.

The accuracy of an artificial intelligence algorithm is influenced by the quality and quantity of the training data provided to it. The more attributes that are associated with the data, the more comprehensive and valuable the dataset becomes.

This solution requires the assistance of a data labeling service in order to be effective.

Annotation design before & after
Opportunity

Why do we need to build it?

Developing these tools in-house allows Tokopedia to have more control over the process and ensure that their image annotation is consistent and reliable.

Ultimately, the aim is to improve the user experience by accurately identifying and categorizing images, which can help with search functionality and provide more relevant product recommendations to customers.

#1
To have control over the annotation process. By building your own annotation tool, you can customize it according to your needs and control the quality of the annotations.
#2
To reduce reliance on third-party tools. Building your own annotation tool allows you to be self-sufficient and not depend on third-party tools which may have their own limitations and restrictions.
#3
To ensure privacy and security. By using your own annotation tool, you can ensure that your data remains secure and is not shared with any external parties.
#4
To save cost. Using third-party annotation tools can be costly, especially if you have a large dataset. Building your own tool can save you these costs.
Solutions

Key features

Annotation
Projects

A project list of image annotation is a collection of images that have been labeled or annotated with relevant information. This information may include identifying objects or features within the image, describing the overall scene or context, or providing additional details about the content or purpose of the image.

Create New Project

Creating a new project for image annotation involves identifying a set of images that need to be labeled or annotated with specific information or data. This process typically involves selecting a specific software or tool to use for the annotation, and then uploading the images to the program.

Annotation
Annotation
Project Overview

Project overview image annotation is the process of labeling or annotating images within a project with relevant information or metadata. This could include labeling objects within the image, adding descriptions or captions, or attaching tags or keywords to help with searchability and organization.

Design Process

Start to understand

Value Proposition Canvas

By conducting a co-design with Value Proposition Canvas, in the initial process, me as designer get a place to drive this process by design from the scratch.

In this case, the problem might be the need to build an image annotation tool that is efficient and user-friendly. The goals of the workshop should also be clearly defined, such as improving the current image annotation process or identifying new features to add to the tool.

Value Proposition Canvas The Value Proposition Canvas is a tool that helps teams to understand and design the value proposition of a product or service. It consists of two main sections: customer segments and value proposition. The customer segments section helps to identify the different groups of people that the product or service is targeting, while the value proposition section helps to understand the unique benefits and value that the product or service is offering to these customers.

Annotation
Value Proposition Canvas

After creating customer profiles and value proposition, the next step is to prioritize the insights in order to build product features. This can be done through identifying the key pain points and needs of the target customers and prioritizing them based on their importance and potential impact on the business.

To prioritize the insights, it is important to consider factors such as the level of customer demand, the potential value of the feature to the customer, and the complexity and cost of implementing the feature.

Once the insights have been prioritized, the next step is to start building the product features that address the most pressing needs of the target customers. This will involve creating a roadmap for product development, setting timelines and milestones, and working with a cross-functional team to bring the product to life.

Minimum Viable Product

Balancing Risk to Gain Reward

Building MVP (minimum viable product) features first allows us to focus on the core functionality of the image annotation tool and ensure that it meets the needs of our users.

By prioritizing the features of projects, members, and datasets, we can ensure that users have the necessary tools to organize and collaborate on their image annotation projects, invite team members to work on these projects, and access the necessary datasets for annotation.

Annotation

Prioritizing these features also allows us to test the usability and effectiveness of the tool with a smaller, targeted group of users, gather feedback, and make necessary adjustments before adding additional features. This helps us to minimize development time and resources while still delivering a valuable product to our users.

Projects
One problem that may arise when building image annotation projects is the need to organize and manage multiple annotation tasks and associated data. This can become particularly challenging when working with large datasets and multiple team members.
Members
Another problem that may arise when building image annotation projects is the need to coordinate and collaborate with multiple team members. This may involve tasks such as assigning annotation tasks, managing team communication, and tracking progress.
Datasets
A third problem that may arise when building image annotation projects is the need to manage and organize large datasets. This may involve tasks such as importing and exporting data, labeling and organizing data, and ensuring data quality and consistency.
Mind Map

Identifying the features to be built

Mind map allows for a clear overview of the project and can help to identify potential dependencies or overlap between different features.

It can also aid in identifying potential gaps or areas that may have been overlooked. Overall, a mind map can help to ensure that all necessary features are included and that the development process is efficient and effective.

Annotation
User Flow

The path that a user takes

By mapping out the steps that a user will take when using the product, it is easier to identify any potential roadblocks or areas that may be confusing for the user.

This can help to improve the overall user experience and increase the chances of the product being adopted by the target audience. Additionally, building a user flow can help to identify any additional features or functionality that may be necessary to enhance the product and meet the needs of the user.

Overall, building a user flow is an important step in the development process that helps to ensure that the product is designed with the user in mind.

AnnotationAnnotationAnnotationAnnotationAnnotation
Wireframe

Communicate ideas and get feedback early

It is a simplified version of the final product that is used to plan and communicate the structure and functionality of the user interface. Also help designers and stakeholders understand how the user will interact with the interface and what content will be included on each page.

Annotation
Final Design

Final Design

I worked on the visuals for Image Annotation by following the Tokopedia Design System and adding new UI components to the proposed designs after completing numerous iterations of wireframes.

aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
Epilog

Result & Impact

After releasing this feature to sellers, some of the good points of this revamp impact are the addition of ## unique sellers created Diskon Toko. In addition, the error rate on Diskon Toko is down to XX %.

Key Takeaway & Learning

Diskon Toko is quite challenging for me because this feature relates to many teams, so I have to align with the needs of other teams. Besides the most important thing is to solve the problem of the seller, communication with the internal team is also important in product development. Especially if the product has many stakeholders involved.

This product still undergoes a lot of improvement which hopefully we can eventually perfect the formula of a self-serve campaign platform that can help seller grow their business even more.

Thanks for reading this project

Let's build something together.

LinkedInInstagramGithub