This image annotation software, known internally as just “V2” and externally as imageannotation.ai, is the tool that B2B clients are shown by the company during the sales pitch, in an effort to demonstrate the depth and quality of the image annotation data.
However, in order to grow the company, we had to change our approach. Instead of only having an internal tool, we wanted to externalize the tool so that many clients can use it on their own. The tool would have various points at which they can purchase services, like new photos and annotation services. This way, we would be able to create a steady profit stream and growth from this service.
If you are a client of ours, how would you use this? Well the thing is, this interface was designed to be used internally. So all the controls visible to every department are visible to everyone at all times. In fact here is an incomplete list of user types who would need to use this interface: Administrator, Annotator, ML Model Maker, QA, Client.
So far, my client has been using their internal tool to annotate images for the customer and then show them the results in their tool over calls. At this stage, we must constrain and define our focus.
Who it’s for: AI/ tech startup entrepreneurs, Machine Learning scientists.
What problem it solves: Someone who wants to make an image recognition model has to use multiple platforms. Dataset Studio allows a team of people to make a model from beginning to end without leaving the platform.
First, I describe the problem as one of hierarchy. I sketched out how this hierarchy might be described visually. There are 2 main trees. The colon “:” will be used to show a child of the former element.
Tree 1: Project: Dataset (Images): Classes: Attributes
Tree 2: ML Models
I show this hierarchy in the visual design by placing a project switcher at the top, followed by the dataset tree below it, and the ML model feature last. This is also a hierarchy, because picking a Project will change the pieces below it. All the elements above are parents of those below.
Here I chose some elements of iOS and MacOS design, and combined that with a Material Design library. I also used Material Design standards of web usability when it comes to basic things like sidebar navigation and search. The accordion concept however, is mostly a novel information architecture idea I came up with, but I’m sure you could find other examples of it out there since it is a pretty simple idea.
Previously, all buttons were always shown. Now, the user proceeds through the system hierarchy, datasets, classes, and so on. And, at each stage they have only the controls that are relevant to that piece. So, for images they are shown image filters, and filters for things like annotation type.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
An image annotater has a vastly different role than that of an administrator, or a model maker, and so on. Here, I show some workflows for different user types. That of an image annotater, a project owner (perhaps a company owner as well), and a manager.
Here an admin or manager user can create brand new classes and subclasses. They go through a user flow where each step they can choose attributes to assign to the classes, as well as colors. The user flow is step-wise and never shows more than is needed.
Here, an image annotator type user can annotate images by creating a bounding box, followed by searching and selecting classes and attributes to assign to the image. We were also planning several annotation features such as a magic wand that would highlight objects automatically.
There were a few instances of using a color picker in Dataset Studio. One was while creating classes, another was while annotating, pictured here. This way, when viewing annotations, the viewer could see the difference by color.
We wanted to make our service self-serve, by allowing users to check out and purchase tasks such as image annotation, or photo collection. This way, they'd submit an order through our system and then the company would receive it and begin fulfilling their request. Currently, their orders are taken manually.
We wanted to capture two concepts in this logo: bounding boxes, and a multitude of products. General Blockchain being a creator of several sub-companies, the logo captures this multiplicity, as well as easily lending itself to different companies by changing the color.
Samsung Milk Video
Product Design
Milk Video: Short Form Video Entertainment for Samsung DevicesView Case StudyLead UX/UI Design
Google One: Designing a Premium Cloud Experience for 500M+ PeopleView Case StudyView app in play storeInterested? Send me an email telling me about your project and your company and I will be in touch with you shortly.
Contact Me