Creating a more beautiful web, one application at a time.
Our website has always been more than just a sales tool for displaying our services. As a web development and design company our website is our brand; it embodies the essence of who we are: our values, our culture, and our discipline.
We don't take a redesign lightly; when we approach the task of a redesign we begin with long, thoughtful discussions about our company, our image, where we're going, and what we want to communicate about ourselves to the rest of the world. Our website has to exemplify our passion for elegant and functional design, quality code, collaborative work, and our obsession with emerging technologies.
For this redesign we sat down and had conversations with Intrideans where we asked questions like, "What is Intridea to you?" and "What do you love about this company?" and "What do you want to see more of on our website?". We reflected on their responses and went to the design team with pages of documentation including feedback on our culture, our path, and our history.
The new website was designed and developed with all of this in mind. They worked to ensure everything that we love about our company is reflected in the layout and design elements. We added some really great new features we're really excited about:
- You'll find a new Community Section that highlights all the events we're sponsoring, speaking, and training at, a collection of our open source projects, slides to all of our presentations, and links to our most frequently trafficked blog posts for quick and easy reference.
- We revamped our Portfolio Section with more in-depth case studies and illustrative examples of our work and added recent clients like Amazon, SocialCode, and Oracle.
- We used responsive design techniques to ensure our website looks good no matter what kind of device or screen size you're using to look at it.
- New About and team member pages that do a better job of showing you the kind of geniuses we have on the Intridea team.
For a more in-depth look at how we designed the new intridea.com I interviewed , the lead designer on the project and Andy Wang, the lead developer on the project.
Design
Renae: What did you draw inspiration from in the new intridea.com design?
Chris: Grid systems (960), traditional graphic design principles, modularity, timelessness, and simplicity. The new design had to maintain the Intridea image we've created over the last five years while redefining who we are and what we do to help us move forward.
Renae: What elements from the previous site did you want to preserve?
Chris: We held stakeholder interviews with our company founders and other Intrideans to get input on how they see Intridea as a company. The consensus was Intridea is an approachable, friendly, professional company that offers its employees an opportunity to do great things without feeling like they're in some sort of software grind-house. We sought to maintain that feeling and felt Intrideans, new clients, and visitors to the site should feel welcome and excited about us. We worked to make sure the new design helped evoke that kind of excitement.
Finding a way to incorporate the previous branding into a new aesthetic was a real challenge at first as I immediately wanted to scrap our previous designs and start fresh. Yet, after several initial comps I realized helping our brand to "grow up" didn't mean I needed to start from scratch.
So we scrubbed the site down and gave it a fresh coat of paint and detailed the hell out of it. I realized that our branding elements, the hills, people, etc, could be used to create delight in the design which is always fun. Take a look at our 5th anniversary image on the homepage for example - I created a person for everyone in the company. We preserved quite a bit of the site actually; the structure is pretty similar and elements of our original branding found their way in there without being the focal point.
Renae: How do you want people to feel when they see the site?
Chris: To feel they're experiencing something new and exciting. This is a totally different experience from what we've presented in that past. The content has been overhauled, there's a lot more focus on what we do and how we do it, our community image is strong and vibrant, and there's a focus on us - the people who work here, and that didn't really exist in the previous design. What we're really trying to communicate in the design is that we're a company of ridiculously talented and creative designers and developers who love working hard and solving problems.
The redesign gave us an opportunity to really show others that we're different from our competitors - we're not gimmicky, we're not trying to hide anything, we're just giving everyone a very clear picture of who we are. That's why I wanted the design to have a lightness to it; I think it gives a surprising sense of ease.
The recent trend is to use elements of minimalist, Swedish-inspired design but we wanted to show you can use interesting and playful design elements and still be serious and professional at the same time.
Renae: What were some of the challenges you encountered in the design process?
Chris: We do an incredible amount of things; yes, we make software but we also write, participate in conferences, teach others, make products, contribute to open source projects, support user groups, and help clients solve all sorts of interesting problems. I needed to find a way to make all of that information consumable.
In order to communicate everything we wanted through an elegant user experience we used a rigid grid system to control the abundance of information. We cover a lot of ground in small, modular bits. The hardest challenged though was in designing unique views for all the different breakpoints:
- Almost every section of the site has a unique view leading to 14 different layouts.
- We opted for 4 different breakpoints in our responsive design - 1280, 1024, 768, and 480.
- Each of the 14 layouts had to be adjusted to meet the needs of each breakpoint resulting in a total 56 templates.
I'm really psyched about the new website. Consistently, clients have said our “friendliness” is what made the difference when it came to choosing a new technology partner. I think we've struck a nice balance in maintaining our friendly image while at the same time showing how serious we are about our work.
Development
Renae: Talk about your decision to start with a new, fresh codebase.
Andy: The old codebase for the site still had elements from the original version in 2007. Although we had been adding features and updating the codebase over the years it was time to scrap the old code and start anew. I built it with Rails 3.2.3 and that made adding new features a lot easier throughout the development cycle. It also puts in a better position to scale and improve the site in the future.
Renae: What were some of the challenges you encountered?
Andy: I only encountered two challenges on this project. The first was adjusting responsive views and tweaking Javascript effects; those cost me some time. All the front-end improvements and enhancements were challenges to a pure Rails engineer like me. But on the upside I became a front-end skills lover from this project!
The second, larger challenge was transferring all the old data from S3, including thousands of blog posts, products, projects and all related images and assets. I decided to move the old S3 repos to new folders and wrote a script to migrate all useful data from the old database for my local environment and then push my local database to our staging environment on Heroku. After that everyone was able to share the REAL data.
Renae: Did you learn anything new as you worked on this project?
Andy: Sure, I learned the skills to build responsive views for multiple browsers/devices. It’s really cool to build a website which is responsive to many devices at the same time.
I also learned how to use Pjax with Rails. A good lesson from Pjax is that if you have some other Javascript in the Pjax content you want to make sure you run the regarding Javascript in Pjax callback.
Using rails_admin saved us a lot time in building the admin sections and features. I think it’s great to use rails_admin for a pure CMS. Sometimes rails_admin doesn’t work well for complex admin logic or complicated admin actions, but it’s good for classic CRUD actions.
I also added integration testing for the contact form to make sure the form is always working correctly with Javascript validations.
Renae: What aspect of the code/architecture are you most proud of?
Andy: I'm really proud of several things:
- On the Rails controller level I mapped all same categories of pages to a sample controller and this helps UX and UI designers to integrate their designs and markup quickly.
- I made it easy to read the website structure based on the code base.
- Abstracted business logic with simple models and just display whatever make sense to Content Manager from the backend.
- Customizing rails_admin for multiple photo management with associations.
- Adding Pjax and other Javascript effects, such as the blog pagination with two modes and contact form validations.
- Responsive views control and adjustments.
Renae: How do you feel this site represents Intridea?
Andy: From a developer's perspective the new site represents us really well. First, it's awesome! Second, the new site uses many technologies such a responsive views, HTML5, the latest Rails, Pjax, OmniAuth, and rails_admin - and Intrideans love using new technologies in their projects!
In Short
TLDR: we've got a shiny new website. It's made from the dust of unicorn bones and infused with the spirit of a thousand minotaurs. It's simplistic beauty and hardcore function all rolled into one; it's the new intridea.com. We hope you'll enjoy it as much as we do.
