This is a signup page asking scientists to become beta testers of an app I was working on.
Ultimately, I built the page using HTML, a responsive CSS grid, and Mailchimp.
S2Hub | Branding, User Engagement, and App UI
The Business and its Goals
S2Hub is a startup that helps life scientists find and visualize relationships between published experiments. In 2013 and 2014 I acted as their creative director to get them up and running.
Just a few weeks after I signed on with S2Hub, the owner and CEO Darin Nee would be presenting a poster at Society for Neuroscience. He wanted to use that opportunity to collect email addresses of scientists interested in becoming “beta testers” of the app.
During that time, we also started hashing out what the S2Hub interface would actually look like.
Tasks at Hand
Since Society for Neuroscience would be held in just a few weeks, the first order of business was to create a funnel for attendees to give us their email addresses. I created a logo (something that we hoped would lend credibility to the business), an email signup page, and a promotional postcard that was handed out at the 2013 Society for Neuroscience meeting in San Diego, CA. Scientists could sign up to be a beta tester on a laptop that was set up in front of Darin’s poster, or they could take a postcard and sign up later.
Shortly after Society for Neuroscience, I designed and implemented a welcome page for the scientists who did sign up.
I’ve come to like a lot of feedback as I design – frequently checking in and asking questions. I don’t typically like designing in a bubble and coming back with a finished product. But in this case the stakeholders were bogged down coding the app and preparing a poster for Society for Neuroscience, so I took a different approach to the design process.
It mattered less that we had designs that we could use for the rest of the product’s lifetime, and more that we had something that worked as soon as possible. So, I created 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.
S2Hub had no logo.
After a few days of sketching and Photoshoping, none of my logo ideas were really working. Network related imagery (ie connected nodes or arrows) 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 was creating, and what scientists would use them for. The network diagrams themselves reminded me of dancing diagrams which further reminded me of the dances honey bees use to communicate. Ultimately, that lead me to the idea of using bee imagery to communicate the idea of socially driven science – science not done in isolation but as a community.
I later learned that Sir Francis Bacon had a metaphor relating scientists to bees. He said scientists should be like bees, who gather materials from their surroundings and transform them into something useful for society.
The idea of a friendly, helpful, hard working, social honey bee seemed appropriate and appealing, so I ran with a few ideas.
Out of these three, 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, and drum up interest in the app. 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 show the logo and explain S2Hub’s goals with three concise bullet points. The reverse side would ask the reader to sign up to try out the app as a “beta tester”.
I wrote lots of versions of the copy and posted them in Basecamp for the team to review and chose from. 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, plugging in the copy we chose.
The Signup Page
The signup page was just that: a signup page. There was very little extra information on the 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 to the page 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 kept it simple.
A full screen background image of scientists in a lab set the tone. We asked for name, email, and area of specialization.
In retrospect I would have only asked for an email address in this form. Then I could ask the user to fill out the remaining information in a profile section. A the time though, we didn’t have the developers or time to build out something like that. I also would have included a link to learn more about S2Hub for those who had the card but didn’t catch the poster presentation.
I designed the page in Photoshop, and implemented it with a simple HTML/CSS grid and a customized MailChimp form.
The Welcome Page
I’m not particularly fond of a one-size-fits-all message for landing pages. Instead, I prefer targeted messages for actual users who will see that 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, or 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 (ie we want to make the world a better place), 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 original prototype of the app had involved long forms for data entry. This method of data entry became so tedious so quickly it was clear that we needed to think outside of the box and create something new.
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 performed. This needed to be done in a systematized and uniform way so that developers could programmatically comb through the data and find connections between experiments.
This was a huge challenge. Scientists don’t always use the same words to describe the same things, particularly across disciplines. A biologist may describe a cell as the basic building block of biological organisms, whereas a physicist might describe a cell as a device that stores chemical energy. It became clear that using graphical notation – a way to visualize the parts of experiments – would be much more clear than having scientists describe the experiment in prose. We needed them to draw their experimental models.