Biocompare Antibody Search App

A big part of Biocompare.com’s success is the website’s Antibody Search feature. The Biocompare team wanted to capitalize on the idea, so they decided that it would do well as a stand-alone product. Not too long ago, I was tasked to redesign the Biocompare.com website & its branding. This would also be a good opportunity for our foray into the mobile app world.

Collecting requirements

The Biocompare team’s research has found that mobile devices have infiltrated many labs, especially in the tablet realm (more specifically, iPads). The website’s antibody search tool works like this:

  1. User searches for an antibody by name
  2. Our search tool generates a list of related antibodies
  3. Using the search’s filters, the user refines the search
  4. User chooses the antibody, then requests more information

Our app will perform the same way. This only requires three main screens: the search box, the antibody list, and the details page.

This also required a bit of some learning — Apple has some very explicit Human Interface Guidelines that are required for the app to be approved for distribution. Unique to most mobile devices, we had to design in both portrait & landscape orientations.

Building wireframes

The team started with some sketch-quality wireframes to illustrate the flow for stakeholder approval. The simple steps made for a clear clickthrough path:

Again, both portrait & landscape layouts needed to be wireframed, as we found that the filter needed to be placed at the bottom in the portrait layout, & along the left in landscape.

Going into high-fidelity

Using the mockups, the patterns had to be designed from scratch. We had two routes: design using iOS default elements or create our own. We opted to create our own patterns, being particular in that all our created elements are displayed consistently.

A lot of information must be displayed, but we also had to be mindful that the click areas had ample click area for our app to perform well. We just made sure that we gave clickable areas enough clickable breathing room, as well as making the buttons as large as the space can allow.

Handing it off

Armed with both the wireframes & the high-fidelity Photoshop files, we handed our work files to our overseas contract development team in Sri Lanka. With our due diligence, we work closely with them in making sure that the interactions are true to our clickflows, and all our assets are converted properly.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.