Go to isuk home

Isuk Studio X Neurabot

Neurabot is a biotechnology startup that focus on helping scientists, medics, or students to do their research on biotechnology field by using AI & Digital Image Processing.

We help them to refine & develop their UI and tele laboratory. Scroll to read Isuk Studio x Neurabot story.

isuk Studio x Neurabot Illustration

Type of work

When Neurabot approaching us, they already had a system which name is My Lab. Mostly what Isuk did was to refine My Lab and developed new features on the annotation tool -- the most important feature on My Lab.

Before :

My Lab Interface

My Lab UI was built on top of HTML using bootstrap classes with a lot of cards but somehow it looked bloated. Like too much information on small cards and a lot of unworking menus :(

We needed to reduce the displayed information for users and removed a lot of things that didn’t work.

  • Neurabot Lab UI
  • Neurabot Project UI
  • Neurabot Slide UI
  • Neurabot Useless Menu
  • Neurabot Useless Page
Browser Background

Annotation Tool

Neurabot has a great tool to bridge the scientists, medics, and even civilians. They call it Annotation Tool.

By using this tool, people don’t have to meet up, they just need to be online, open the same microscope image (which taken before -- also using neurabot feature) and they can annotate on a spot that they think it needs explanation. Cool, isn’t it?

  • Neurabot Annotation UI
  • Neurabot Counter Annotation UI
  • Neurabot Slide Navigation UI
Browser Background

Todo :

We have 3 priorities to do immediately, of course before Neurabot launching

1.

We needed to improve the UI first, without design. Just to make it feel clean and neat without a lot of effort, like changing backend API, removed some unuseful menus, information, and flows.

{ } ui development

2.

Neurabot is a great app. It needs a long term solution. So we created a new UI that is easily to use with better experience for their tool. Also we added more pages like payment flow.

# ui design

3.

The annotation tool looked so old-fashioned. Looked like there was no CSS to style the tool.

After the design, we had to execute the tools to have same UI to align the design style - the design that we did before on step two.

{ } ui development

After :

My Lab Interface

We removed a lot of borders, added more white space, and cut unnecessary flows.

Previously if users wanted to access annotation tool, the users had to access Lab > Project > Slide. It gives advantages on the project management, but on the real case, users hardly navigate when they dive into deep and want to change project on another lab.

When users mostly would only have 1 Lab, we removed Lab, so user only has Project and Slide.

  • Neurabot New Project UI Empty
  • Neurabot New Slide UI Empty
  • Neurabot New Project UI
  • Neurabot New Slide UI
Browser Background

New My Lab Interface

We build a simple UI kit to make Neurabot UI more consistent so user can use Neurabot Platform easier

We also add some pages & features based on Neurabot's User need to improve their collaboration

  • Neurabot Component Illustration
  • Neurabot New Dashboard UI
  • Neurabot Notification UI
  • Neurabot New Annotation UI
  • Neurabot Payment Page
Browser Background

Annotation Tool

We fixed a lot of bugs on annotation tool like retina display support & false counting number.

We also added some features like select tool, leave comment, and list of annotations.

We also improved the saving flow, so we could integrate the real time communication better.

And last but not least, we totally revamped the annotation tool into the new UI that we had designed.

  • Neurabot New Annotation UI
  • Neurabot New Counter Annotation UI
  • Neurabot New Comment UI
  • Neurabot Export Feature
Browser Background

Isuk studio is more than design studio, they are friends and like good friends they give you great advices about UI or Code.

Picture of Indarto - Neurabot Founder

Indarto

Neurabot Founder

isuk Studio x Neurabot Illustration

Challenge & Learning :

We meet a lot of challenge and learning from the Neurabot case

1.

Refinement without design could be stressfull because you don’t have any idea how the final looks.

The solution is, Quickly search any UI kit or Implemented UI from similar layout and make it as reference

2.

Neurabot annotation tool has a complex feature especially when we talk about comments. Combining canvas operation and DOM manipulation always need extra effort when talking about object coordinate.

3.

We met django for the first time also. We are always getting trouble when we read their documentation until now :)

Fortunately, Neurabot has Django guru that will answer our questions no matter what.

Of course there were huge challenges and we could learn a lot, but we can’t write it all. Thanks to Neurabot for collaboration and learning.

Have an idea and want to make it real?

Contact us with the brief of your idea and let’s see which magic that matches to your awesome case.

Contact Us
Illustration of isuk Collaboration