Working on S2Hub, I learned about targeted funnels, and moving forward quickly. Very quickly.

NOTE: S2Hub is still under development. Out of respect for that project and its development, I’m limited in what I can show here, but I’ll try to tell a good story 🙂

The Business and its Goals

S2Hub is a startup that aims to help life scientists find and visualize relationships between published experiments. In 2013 and 2014 I acted as their creative director.

S2Hub was very much in its infancy, and its creator and CEO Darin Nee had the lofty goals of drumming up interest and creating the app at the same time.

Just a few weeks after I signed on with S2Hub Darin would be presenting a poster at the annual Society for Neuroscience meeting in San Diego, CA. He wanted to use the opportunity to collect email addresses of scientists interested in becoming “beta testers” of the app.

He also wanted to start exploring ideas for the UI of the data entry portion of the app. It needed to be something scientists would be willing to use instead of methods they were already using. It also had to result in standardized data that was machine readable so our app could extract the meaning of the notes and make appropriate connections.

My Role

I was already intimately familiar with the project because my husband, Tony Landreth, had worked extensively on the foundational ideas that lead to S2Hub’s creation.

I was the only “creative” at S2Hub at the time. I worked on designing the data entry portion of the app, as well as branding and visual design. Design and implementation was often my sole responsibility – from sketching out the rough ideas to implementing pages in HTML and CSS.

Tasks at Hand

The signup page built with HTML, a responsive CSS grid, and MailChimp
The live signup page built with HTML, a responsive CSS grid, and MailChimp

I only had a few weeks before Society for Neuroscience. The first order of business was to create a funnel for attendees to give us their email addresses. I created a logo (we hoped it would lend the business credibility), a web page with an signup form to collect email addresses, and a promotional postcard that would be handed out at the 2013 Society for Neuroscience meeting in San Diego, CA.

Scientists could sign up to be a beta tester at the page I created from a laptop that was set up in front of Darin’s poster, or they could take a postcard and sign up later.

The initial wire frame for the welcome page for S2hub testers
The initial wire frame for the welcome page for S2hub testers

Immediately after the meeting, I started designing a welcome page for the scientists who signed up to introduce them to the project and their roll as testers.

The Process

At the time I didn’t have any UX training. I had only read about it. If I were to take on this project today, I would approach it very differently – particularly the app’s UI design.

For promotional materials, we needed usable designs as soon as possible, and the stakeholders were bogged down with coding and preparing a poster for Society for Neuroscience.

My strategy was to create a few nearly finished options for each design element. That made the task of choosing a design easier for the already too-busy stakeholders, and it meant that we could move forward as quickly as possible.

In hindsight, I think this strategy was a mistake. Not having a tight communication cycle meant I was able to make too many assumptions, and when they were wrong our tight schedule meant I had to work overtime to correct course. If I had it to do again, I would have planned for at least a few minutes of daily communication with at least one longer meeting a week.

The Logo

After a few days of sketching and Photoshoping, none of my logo ideas were really working. Network related imagery made sense given the business’ mission, but it was all turning out very generic and forgettable.

So I started thinking about the network diagrams S2Hub would be creating, and what scientists would use them for.

Then I had a eureka! moment. That thought process looked something like this:

beethoughtprocess

Bee imagery seemed perfect to communicate the idea of socially driven science – science not done in isolation but as a community. Like scientists, a few brave bees set out to explore their surroundings, then report their findings through these funny wiggly dances so the whole community can benefit.

Most scientists don’t wiggle though. At least not to communicate their findings.

 

s2hub-logo-study
Three S2Hub logo options

Learning about Francis Bacon’s ant, spider, and bee metaphor was icing on the cake. It was perfect for S2Hub, and even if scientists weren’t aware of that particular metaphor, bee and hive imagery would still work to convey ideas of hard work, communication, meticulous creation, and even networks.

I tried several bee related ideas and we settled on the “Lab Bee” with the “hidden image” of a flask over a flame.

The Promo Card

Next up was the promotional card that would be handed out at Society for Neuroscience. The goal at this point was to recruit test participants. The cards that were handed out needed to remind people what S2Hub was, and encourage them to go to a website to sign up to become a “beta tester”.

We decided one side would explain S2Hub’s benefits with three concise bullet points. The reverse side would ask the reader to sign up to try out the app as a “beta tester” and would include the URL for the signup page. Later I had the idea to use the QR code in case people wanted to sign up at the conference, so I reworked the back to include it.

I wrote lots of versions of the copy and posted them in Basecamp for the team to review, inviting them to add their own ideas. I broke the copy down into sections of similar messages or purpose. Then we discussed the merits of each line or bullet point and chose the strongest combinations.

Once we had a better idea of the structure of the card and its content, I made a few different visual designs to choose from and we chose the winner you see above.

The Signup Page

Signup Page Mockup
Signup Page Mockup
Screen Shot 2015-07-29 at 2.27.32 PM (2)
The final signup page

Users coming to this page would either be directed there personally when they visited S2Hub’s poster at Society for Neuroscience, or they would be coming from the URL or QR code on their promo card. I didn’t want clutter the page with extra information and risk losing the signup so I tried to keep it simple.

While the mockup has a field for the user to tell us about their current note taking method, we ultimately asked for name, email, and area of specialization.

In retrospect I might have only asked for an email address and maybe name in this form. If we really needed that extra information, I could ask the user to fill out the remaining fields later by completing a profile. I also would have included a link to a page to learn more about S2Hub for those who had the card but didn’t catch the poster presentation. A the time though, we didn’t have the developers or time to build out either of those solutions.

I designed the page in Photoshop, and implemented it with a simple HTML/CSS grid and a customized MailChimp form.

The Welcome Page

The initial wire frame for the welcome page for S2hub testers
The initial wire frame for the welcome page for S2hub testers

I like targeted messages and features for actual users who will a web page. When possible, I also like to take into consideration when the user is seeing the page. A person who just signed up to become a beta tester will likely need different information than the same user who’s logging in for the tenth time.

We were asking these scientists to do us a favor by trying the app and giving us feedback, and eventually participating in UX testing. We needed to keep them engaged with the project, and ideally become cheerleaders for us.

I wanted to show new testers our faces, explain our goals in personable terms, and I wanted to let them know how important they were to our process. I hoped this would foster a personal attachment to the project and keep them engaged throughout the process.

Data Entry and a Visual Language for Representing Experimental Models

The core of the S2Hub user experience would be data entry. Scientists needed to be able to describe experiments they read about, and experiments they conducted. The data that was entered needed to be machine readable, which meant it needed to be standardized.

But, scientists don’t use a standardized language when they talk about experiments. They use prose, terms of art, and sometimes even poetical language.

I worked on some preliminary designs for a data entry UI that address these challenges. Unfortunately, because S2Hub is an ongoing project, I can’t post them here. I would love to chat about some of the thought process surrounding those ideas though. Click the Contact link at the top of the page to get in touch!

Final Thoughts

The scope of this project was (and still is) huge, particularly for a design team of one and a dev team of maybe two. I’m excited by everything I was able to produce from start to finish is such a short amount of time. But, if I had it to do again I would definitely approach this project differently.

Having a process in place and insisting on frequent contact would have prevented some problems associated with “designing in a black box”. Creating a calendar of goals and delegating responsibility could have helped manage the manic pace of design. Better documentation along the way would have made it easier to defend and discuss design ideas, and help me remember why I made certain choices.

I’m so grateful to have had this experience. I learned so much working on S2Hub, not only in terms of design but about scientific process and reasoning – things that I believe are essential to good UX design. In that way, even though this wasn’t a UX project, It absolutely helped me learn more about UX.