Get Updates
SlideRoom Website Redesign
After 2 years with our previous marketing website, we decided it was time to re-examine the overall effectiveness of our message. Many things have changed in the last few years as we have grown and our product has evolved. So, we began to question whether our website was still presenting content as effectively as it could be?
The previous site had many good qualities that we wanted to preserve and grow. For instance, being open about pricing and showing a clear tour needed to be preserved. Many enterprise products hide all of this information in order to promote a sales call, but we believe it is more helpful to make that information accessible. So, we decided the new design should be an evolution and realignment, not a total redesign.
Here were our broad goals:
1) Clarify the message. While SlideRoom has become well known for “online portfolio reviews,” we wanted to expand how our applicant management system is understood. This includes custom application forms, letters of reference, tools for evaluation and more.
2) Clarify the audience. While we sell a product to institutions, the “SlideRoom” name has become so well known that applicants and reviewers were coming to our marketing site to log-in. Of course, they were very confused. While we did not want to convert the site into a general log-in for everyone, we needed to clarify who the site was for (administrators) and give some direction to people feeling lost.
3) Highlight the core benefits. The old site showed many screenshots, but did not really explain the benefits of using SlideRoom. We wanted to explain how the system really saves people time and streamlines complex processes into simple tasks.
4) Improve the site structure as well as the “look-and-feel.” We wanted the site to meet modern standards, look great on today’s larger monitors and have more contrast to create a more lively presence. A few details included:
- Use a grid system to keep a consistent visual structure throughout.
- Be aware of web accessibility.
- The fonts should be larger and easier to read.
- There should be less to read and more pictures that are more helpful.
- Use color and contrast throughout the site to bring out the key elements.
- Use more white space to make the site feel airy and not so confined and small.
Phase One: Planning and Structure
We started with the site’s navigational architecture. The previous site had 1) too much focus on us with prominent “blog” and “about” sections 2) an overly complicated tour and 3) no clear way to find our customers. Knowing that we basically get three clicks from visitors, we wanted to simplify all of this.
So I started with some basic wireframes to show the new menu with a new focus on the system and our customers. It became clear right away that all of the text would have to be rewritten as well. Chris decided that speaking directly to Administrators would be most clear, rather than trying to address applicants and reviewers as well. All of the new text speaks to this single point of view.
After many wire-frame ideas on paper (above), the design process began with exploring several layouts with an underlying 12 column grid to help align various elements across the many parts of the site. Below shows a finished comp with this grid showing through.
Phase Two: Custom Graphics
Next, I created custom graphics for most of the site. Rather than relying on actual screenshots (which are often too much or don’t translate the features well), I created original vector art based on the actual interface to help explain individual features. This allowed me to remove unnecessary noise from the UI and allowed me to re size without losing image quality. This process started by drawing simple sketches on printouts and then later making the final vector graphics.
Phase Three: Editing
After a few days of work, the site was looking pretty good. The new structure was basically in place and the first pass at visual assets was complete. I continued a process of editing many visual and textual details. When text and images were finally combined on the actual website, I found many opportunities to improve both to some degree. Some of the notations below also include early thoughts about CSS styling and how to divide up the divs.
One big problem I kept running into was with the white header. Since the site was mostly white, and visual assets mostly white, everything I tried to place in the banner area made the site feel crowded and the message lost (see below). The white areas above and below the banner started to look like teeth biting down on any content placed in that mouth. Below is an example of the white header problem, not as effective as it is drawing too much attention away from our message:
When I changed the header to a darker transparent band, it solved all these design problems. Less contrast around the header allowed for greater focus on the banner text and a more spacious feeling overall (see below).
Phase Four: Home Page Banner
I saved the home page banner area for last. While SlideRoom is well known for “online portfolio reviews,” we wanted to convey the broader message that SlideRoom is a complete applicant management system. No single screenshot was capable of showing this and every one I tried made the page look cluttered. So, I decided to employ an illustrative look in the main banner area to convey an introductory message.
This process started by writing dozens of tag lines and about fifty sketches like the one below. Chris and I were both using whiteboards, sketchpads and the iPad app “Penultimate” to quickly draw out ideas. The image below shows one of the winning concepts:
Rather than trying to explain how the system works with a single screenshot, we decided to highlight the problem. This helps provide a general introduction to the concept, the audience and the general benefits of the system. I am developing multiple banners for the home screen and will be tracking which ones are the most effective in terms of click-through. Other concepts will include a symbolic representation of forms, media and references all being organized online.
Phase Five: Construction
The technology used for the website is HTML, CSS, and Javascript. We tried to limit the amount of images used to generate the overall UI through out the website by utilizing CSS3 techniques for round corners, shadows, etc. Find out more about some of the cool CSS3 features here.
After building the front end code for the new website we knew we wanted a content management system that would allow us not only to edit our existing pages but also run a company blog. We did not want a framework that was geared mostly towards blogging or something that was mostly for large scale content heavy sites, we wanted something just right and Expression Engine fit that description, and having used it in the past we felt comfortable with it as the CMS of choice.
Below is a summary of all the tools used for the planning and production:
Google Docs - Collaborative writing for all the text on the site.
Penultimate - Sketching concepts on iPad.
Keynote & Omnigraffle - Wireframing
Photoshop - Creating final designs
Coda - Writing the HTML/CSS
Expression Engine - The content management system for updating the site and blogging.
