Background

CAS wanted an app to use as a sales tool for an interactive chemical search engine. I helped design the UX around the app as we did a phased rollout of informational features as the product was being developed.

The Project

CAS Info App

The Chemical Abstracts Service wanted an informational tool for their services: SciFinder, Formulus, and NCL Global. They make a search engine that finds chemical formulations in patents, journals and other sources. The tool would initially focus on one of their solutions and expand to cover the other related solutions at a later date.

The tool would be an interactive app, a sales tool for use in showing potential clients how the search engine works. As it could be manned by a salesperson, the tool needs to organize content in a way that fits the marketing story’s chronological order.

My role

I was the UX designer on this project. I worked with developers at our agency, and advised a visual designer who was responsible for keeping the project on brand.

Challenges

The app needed to display scientific data within a marketing context, in simple easy-to-digest chunks.

Because the app initially focused on one of three solutions provided by the client, we kept the design open to further updates, knowing that we would be adding large sections later on. The opening screens of the app needed to make clear what would be demonstrated now, and what was coming at a later date.

Solutions

At first, we put together sitemaps for the most interactive of the three tools, marking the interactive content of the app to give the client clarity. Our priority with the sitemap was to show the hierarchy of the different “silos” of interactive content, specifically, with less focus on content that didn’t have interactive components.

For the first section that we developed, information delivery was key. Interactions were simple and focused on different ways to provide a flood of information to the user in simpler chunks. I used my user interface knowledge to help find unique ways to show testimonials, nested lists of information, and other stats.

All this, while making sure the animations made sense for the content.

Even though we didn’t end up using this animation in the end due to timeline constraints, I also planned and mocked up some background animations for use on some of the intro slides, using codepen to share internally and with the client.

See the Pen Hexagon particles.js Demo by Avenir Capito (@capitocapito) on CodePen.