Get Updates
More Media Types and Sizes
We are proud to announce two new enhancements in regard to collecting media from applicants. These were prompted by requests for the system to handle longer videos and print quality images on occasion. This required accepting more media types and larger file sizes:
File Types
Images
.jpg, .jpeg, .png, .gif, .tif, .tiff, .bmp, .tga
Videos
.m4v, .mov, .mp4, .wmv, .flv, .asf, .mpeg, .mpg, .mkv
Audio
.mp3, .wma, .ogg, .flac
More Sizes
SlideRoom's standard sizing is meant to accommodate web-sized media for fast upload and review. In specific cases where print quality images are needed, or longer video/audio demonstrations, the mode for larger file sizes can be turned on. This will double the size limit for each file type. To be clear, the limits below are for individual uploads (not the entire portfolio).
Documents
.jpg)
SlideRoom has just launched a new feature for applicants to upload documents. They no longer need to paste formatted text into forms nor rely on the media step. The image below shows an example how this feature is presented as its own step within the application process. Your request for documents can be posted as a question with an extended description if needed. Then applicants use the inline uploader to add their files. This is perfect for items like resumés or other formatted text.
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.
More Flexibility with References
We have just launched several improvements to the letters of reference feature. In the past, applicants could edit the contact information for any recommender until they completed their submission. However, we learned about some cases where the applicant provided the wrong contact info, or the recommender was unable to provide a reference for some reason. This left them with the need to edit recommender info after they completed submission. So here are a few new things:
1) Applicants can now edit recommenders, even for a completed submission.
2) Administrators can invite a new recommender on behalf of an applicant.
3) Admins can choose a “due date” to be displayed to recommenders.
All of these enhancements are meant to provide more flexibility for both applicants and administrators in regard to collecting letters from recommenders.
No Tag? No Problem
Tagging has always been useful for organizing applicants into sub-groupings, often for evaluation purposes. However, we were receiving feedback that Administrators would often tag a bunch of applicants “accepted,” or “reviewed,” (or something else like that) and later needed to see applicants that did NOT have these tags. So we have added a drop-down menu when displaying applicants by tag, which allows Administrators to choose from the following: “Any of, ” None of,” or “All of” the following tags chosen. This provides a quick way to find applicants missing tags or to use tags in more complex ways.
Four New Enhancements
We are happy to release a few new enhancements to help administrators. All of these were a direct response to requests that have come in over the last few months:
PENDING INFORMATION
In the past, the system did not expose the form answers of pending applicants. We felt that the applicant should be able to prepare their answers in private and expose their answers only when they were ready. This removed the worry about being prejudged. However, we have clearly heard that admins really need to see how much of the application is complete for a variety reasons. So, we have created the screen above that will expose exactly which questions are complete without exposing the content.
WAIVE FEE
Administrators often need to waive the submission fee for applicants with special circumstances. So now they can find the pending applicant and waive the fee just for them. This will allow a specific applicant to skip the payment screen. The system ledger will keep track of everything to settle accounting later.
BATCH PDF AND MEDIA DOWNLOAD
In the past, if an admin wanted to download a portfolio or generate a PDF, this had to be done one applicant at a time. Now, admins can select multiple applicants and download all their stuff in one step! This can include a PDF summary of the applicant’s submission or downloading the actual media.
ADDING NOTES
Many clients asked us to expand the limits in the comments section, where individual reviewers leave their opinions. However, we learned that actual comments aren’t always the content being added. Rather, admins need to post some large block of text regarding the applicant so reviewers can have easy access to these relevant materials. So, we have expanded the “Attachment” feature to accept typing/pasting large amounts of text we are calling a “note.”
Consistency and Data Management
While SlideRoom is mostly known for how it handles multi-media, application forms are also a large part of the application process. So I wanted to offer some tips on gathering data (that most data managers may already know).
Keep form sections separate: Breaking up long forms into easy sections will prevent applicants from “melting” away during the process. Further, each section is actually a separate form, meaning it can be reused for other programs. If you have a set of questions that are common to multiple programs, keep these separate from questions that are unique to a particular program. This has two management benefits.
On the front end, it becomes easier to reuse preexisting forms, rather than making a new form for each program. On the back end, the spreadsheets of data will be more organized across programs. Different programs with the same questions can now share columns of data. If you create a new form for each program, columns cannot be shared.
Make the title of each for semi-descriptive: If all your forms are named “Questions,” but they contain different questions, it becomes hard to stay organized over time. Which brings me to my third point, do you really need slightly different sets of questions?
Consolidate data needs across programs: This is the single biggest thing you can do to make administration easier. Often two different programs ask slightly different questions. See if you can get these to be the same. Not only will you generate benefits as mentioned above, but another huge benefit opens: moving applicants. We all know that applicants often apply to the wrong program, and so you need to move them into the correct program. This is no problem if they have the same form. But if the two programs have different requirements, problem.
Offer preselected answer options: When you give applicants a drop down, check box, etc … it not only makes it easier for them, but it gives your admins consistent data to work with. This data ends up in spreadsheets anyway, so why not have consistent data for sortable columns.
Don’t ask for data you don’t really need: This sounds obvious, but keeping things short can become difficult when there are many separate demands. For example, don’t ask for letters of reference from everyone, when only finalists need them. Perhaps you only need contact information? Another example, don’t ask applicants to answer questions that another system has already gathered for you. This is the wrong solution for your lack of database integration.
Hopefully these tips are helpful. As we give clients more control over form creation/management this year, we hope to promote good data practices.
Important Lesson
Long suffering administrators have a tendency to post too many instructions when announcing the application process. This results from desperately trying to answer all possible questions ahead of time. However, this strategy of just posting tons of information backfires. It results in confusion and applicants not reading any of the information. So what’s the solution?
We believe relevant instructions need be delivered at the pertinent moment, rather than all at once. SlideRoom was designed around this philosophy. While a brief overview of requirements is good to list on your main website announcing the process, you can leave the details for later. Here are some of the stages we have designed for:
- Welcome Page: Announce what your institution stands for and general instructions. Video Tutorial is also included.
- Program Choices: Announces program titles, deadlines and requirements. 2-3 sentence descriptions help applicants choose the correct program.
- Application Forms: Instructions for completing supplementary materials are displayed on that step (not before). This may include an application form, resume, etc.
- Add Media: Portfolio requirements are displayed when the applicant is actually choosing work to upload.
- Confirmation: Additional instructions can be displayed at the end of the process.
By timing the display of instructions for the appropiate moment, the need to display everything all at once has been replaced. This will make the whole process seem simpler to applicants and increase their likely hood of beginning the process. And having a beautifully designed structure will also be helpful in helping them complete the process without problems.
