What It Took to Build the New OrgSync.com
April 19, 2012
By now you’ve seen the new OrgSync.com and we are still pretty excited about it so we wanted to give you a little insight to what it took to get this new website out the door, from beginning to end.
First off, it’s been a long time coming, and most of that time was spent discussing a few of our design challenges such as how to encompass the breadth of what OrgSync does while keeping it simple, as well as balancing the need to inform students and current users while also marketing our services to prospective clients.
It all starts on the whiteboard…
We wrote on whiteboards, scratch paper, even the windows in the office… at some point in the process most every member of the OrgSync team drew out a page or an idea. Lots of ideas got thrown away, some got kept, some got pulled out of the recycle bin and came back to life months later.
Let’s just say the way to lay out the site navigation was something that people were passionate about — many a coffee, red bull and late night fajita was consumed discussing that issue.
After the whiteboarding step we went straight to a rapid prototype, which means we started writing code, putting it together from scratch and then letting people play with it. As pieces of the site were agreed upon that prototype slowly got fleshed out with more concrete details and was built up piece by piece to be the site you see before you.
Here are a few of the iterations of the mockups:
When the design was pretty much agreed upon we brought in the big gun developers to help develop this site from the ground up. We needed a new server, a new code base and a new way to let our marketing team update content on the website without knowing any code. So we let them go at it, building a content management system to power the new OrgSync.com as well as making all our little pages connect to each other and work together.
New Technologies
We built this front-end website with the same technology we use in our backend in order to speed development and maintain consistency. However, because this site is less mission-critical than our application we were able to use a cutting-edge version of ruby-on-rails which would be unstable and untested on the backend. We also got real excited about some of the nerdier aspects of the process such as making sure the code was as clean as can be, which will let us iterate the site quickly. The lessons we learned when building OrgSync.com are now getting rolled into the main application and you may not see them immediately but improvements are being made behind the scenes that are going to let us move even faster in the future.
We’ve gone responsive.
One of those new things we tried out is responsive design – one of the buzzwords thats taken over the web design community in the last couple of months. Responsive Design is a design that isn’t built for one device specifically but built to expand and contract based on what a user is using to access the site. So go open OrgSync.com in a new window, grab the corner of your browser and shrink the site down. Go on, we’ll wait while you do it.
See how the site shifts and changes as you shrink/expand it? That’s responsive. The real power comes from mobile web access. In today’s market there’s an infinite number of screen sizes. If we built a mobile website with the old way of doing things we would probably build for iPhone (because that’s where the majority of web browsing goes on) — but now we just built for every version of the iPhone, every android device, every tablet out there — basically you can get OrgSync.com on anything. Soon you’ll see these techniques in certain parts of the application as well, such as all the emails we send from the application which will look better on all devices.
We’ve still got more coming, it’s in the pipeline that will be evolving the site, so stay tuned.
