Blog: Company
All
December 14, 2010
by Toby Sterrett

Behind the Scenes of Our Site Refresh

simple guilloche

We recently refreshed the BankSimple.com website with a couple goals in mind - to better tell the story of what we’re working to accomplish, and to give that story a more enjoyable and compelling user experience. This was the first project that we as the newly formed front-end team (Toby, Ian and Bill) have worked on together to shipped completion, and aside from a better sense of camaraderie, we feel like we accomplished a lot of our original goals while learning quite a bit along the way. I’d like to go over some of the highlights in this post to give you a bit of a behind the scenes look at how we work on user facing projects such as this.

Getting Everything On The Same Page One of the very first decisions we made when we first started brainstorming on the site was to make the meat of the site a single scrollable page. The previous site was more traditionally structured, consisting of a home page with a headline and a few screenshots, and dedicated pages for the main sections like “About Us” and “Team.” It was a simple and attractive site, but a lot had happened since that version went live and we noticed more and more people asking just what the heck it was we were working on. We felt telling our story on a single page that a person could just scroll through to get the basic gist, while still enabling them to dig in a bit deeper at any section if they were so inclined, would be the easiest way for our visitors to learn more about us.

Toby and Ian talk about Simple redsign

The first day working on the new site was before we had a San Francisco office, and we all met at Brian’s place for the day. Aside from being an all around awesome place to work, he has these killer chalkboards made out of giant ikea tabletops. They were set up in portrait orientation, so we started in on the whole single page concept, sketching out the general flow of how the distinct sections could be arranged. Overall it fit a pretty standard hierarchy just like any other site - main navigation, masthead, product overview and vision, feature details, blog and press, about us, footer - but instead of pages they were just stacked on one longish page. The idea was for each section to have an appropriate layout for the information that it was housing, such as a tabbed/carousel approach for the vision section, a screenshot viewer for the features, headlines for the blog and press, and a group shot for the about us section; with the use of a grid and consistent design and typography it could all flow together nicely. The final product ended up being remarkably true to that initial vision.

Having everything on one page, however, is a bit out of the ordinary. While the overall intent was for folks to scroll through the site and interact with sections further at their leisure, we also knew most people are used to having the ability to click directly to any section they want. It’s nice to scroll and see the overall vision and some screenshots, but if you really just want to check out the latest press, then you should be able to get right to it. With that in mind, we worked on developing a sort of intra-page navigation system.

The general solution was to provide a comfortable main navigation bar like most sites have, and have it automatically scroll the user to the section rather than have it take them to a new page. This is, of course, nothing really new; anchor tags have existed in html for ages. Instead of relying on that native behavior, however, we implemented Javascript-powered smooth scrolling. The native anchor navigation takes you to the requested section of the page instantaneously, which, while being extremely fast, is somewhat jarring. We really wanted to drive home the fact that the main content of the site is really all available on the one page, and smoothly scrolling a person to each section makes that apparent. In general it feels akin to a tour guide transporting you to your requested destination and showing you around rather than a cab dropping you off at the curb and screeching away.

One situation that arose from this model was that there was no real navigation readily available once you were beyond the top of the page. If you scrolled to (or were scrolled to) a section deep down the page, the only way get to the other sections would be to scroll around manually or to return to the top with the home key on your keyboard and start over from there. To alleviate this, we made the main navigation bar fixed to the top of the page and always available. In order to help indicate which section of the site you’re on, there’s also a subtle section arrow below the active navigation button that shows up if you click a button or scroll through the site. The result is an omnipresent means of getting around and pinpointing where you are throughout the entire site.

KEYBOARD NAVIGATION

Speaking of navigation, keyboard shortcuts are something I truly love. There’s just something elegant and effective about being able to manipulate a site or app without having to use a mouse, and I try to build keyboard shortcuts into every webapp I make. I know, this is a one page promotional site and not an app… but I’d invite you to try it out if you haven’t already. The j key or spacebar will take you to the next section, k or shift+space the previous, l or right arrow will take you to the next tab when you’re on the vision or product sections, and lots more. It may seem like a bit much for a promo site, but it really feels natural as it ushers you from section to section. I can’t wait to explore more of this in the actual banking app itself, where it will be able to make navigating, annotating, and categorizing transactions and tons of other things super fast and effortless.

WHAT ABOUT THE BACK BUTTON?

One of the side effects of having a single page site is that there’s not really any usage of the back and forwards buttons. This was a conscious decision on our part because navigating the main page is just scrolling, and clicking the main nav buttons is just assisting with that scrolling. There are no “pages” per se, just sections within an overall flow. However, some folks have asked why we went that route and suggested that we should have included the ability for the back button to navigate between the scrolled sections after you click one of the navigation buttons. In particular, an interesting discussion was started on Quora asking about this behavior, with some great points raised by both viewpoints. I look forward to having more of these discussions and receiving such thoughtful feedback from users.

Optimizations, Effects, and Other Interesting Stuff

THE GUILLOCHE

One of the design comps I did introduced a guilloche pattern to the main header area. I liked the feel of it and the connection it had with the artistic side of money. Everyone loved the idea of it, but when it came time to start putting the site together it became apparent that a huge, ultra-detailed image was going to be too big to download. Luckily Ian is capable of solving pretty much any problem with Javascript, and this was a perfect fit. Around 40 lines and 1.5k of js later, we had dynamically generated canvas guilloche patterns spanning the whole header. Much better than a 200k png file.

CSS ILLUSTRATIONS

Other areas we tried to slim down were the main masthead illustration and the type illustrations in the vision section. We experimented with some wonderful commissioned illustrations for the masthead, but nothing seemed to click, and they would have been pretty big downloads. So we decided to strip it down to just a BankSimple card with a “coming soon” type wrapper to really hammer home the fact that we’re still working on things. That illustration is actually all CSS3 - besides the logo and the pattern in the band, it’s all straight up HTML and CSS. The vision section illustrations are also all CSS3 and the TypeKit fonts used throughout the site. If you’re using a browser that doesn’t support the fancier aspects of the CSS, such as drop shadows or rotation (or even rounded corners), everything still appears in an acceptable format. We’re believers in the idea that websites don’t need to look the same on every browser, as long as things are still functional.

DISAPPEARING HEADER

One aspect of the site that’s a bit out of the ordinary is the “disappearing header,” where the main content area and navigation bar appear to swallow the header area when the page is scrolled. It’s a relatively simple effect - the header and masthead are fixed and the body content is absolutely positioned with a higher z-index than the masthead and lower than the navigation - but it has a neat feel to it, and conveys the sense that the meat of the page has a bit more importance than the flashier header.

SIGNUP FORM

The signup form has received a bit of attention due to its simple “paper-like” layout. We just wanted to keep it as simple as possible with just the necessary name and email address fields, and felt like giving it a bit of an old school personal banking feel so the normally sterile beta signup process would be a little more personal, like writing us a little note without actually having to get the typewriter out. And after you send us that note, we respond with a letter of our own, letting you know if your spot is saved or if we already had you on file.

GOOD OL’ STATIC HTML

A somewhat geeky aspect of the way the site was put together is the “content management system” it was built on top of. The previous version of our site was built on top of Django, which is definitely a great system. It powered the site as well as the blog, and provided a simple admin area for updating and adding new content. However, it uses a database, requires caching for when traffic gets high, and is in general a lot of moving parts for a relatively simple site. So for this iteration we went with a purely static html site generated by jekyll. Jekyll basically does the same thing a normal CMS does, but uses plain text and html files instead of a database, and spits out the entire site ready to roll instead of rendering it on the fly every time a page is requested. It lets us do things like automatically integrate the latest blog and press items on the home page, split the main page up into easily maintainable pieces, and collaborate with Git, while giving us the peace of mind that it’s just some html files that our web servers will be able to dish up easily no matter how much traffic we get. The only portion that needs to be dynamic is comment system on the blog, and that is handled beautifully by disqus.

Just The Beginning

Hopefully these tidbits gave you a glimpse into how we arrived at the design decisions we made. Building this site was a really fun way to get a project under our belts, get some of our internal systems in place, and bring everyone up to speed with where we are and where we are planning to go with the product. Most of all, though, we’re excited to be taking things much farther with the building of the app itself. We’re going to be launching our developer blog soon, where we’ll be going into much more technical detail about the things we’re working on, developing, and releasing to the public like Ian’s recent MooTools libraries that were made for this site. So if you like to read about the inner workings of what we’re building be sure to keep a look out for that. And as always, we’d love to hear from you all with questions, feedback and ideas.