The final moments, the countdown, and the launch

As midnight approached, we prepared all the final details, then pressed the Big Red Button. Well, really it was just the enter key on my keyboard. But close enough. At the stroke of midnight, in the first seconds of August 30, 2006, Gradefix.com was officially launched.

Then at 12:01, we uploaded the change that made the real home page show up instead of the "Hype" page that was there prior to the launch. And at 12:02, we did a little dance. And after we sleep, the next phase begins...

Feedback is welcome at support@gradefix.com.

Users don't read.

Anyone involved in any way, shape, or form, in building a web site ought to read this post.

Users don't read.

It doesn't matter how short, concise, funny, pretty, or witty you make it. They just won't read it. You can make it bold, italicized, bold italics, or the ugliest purple you've ever seen, but they still won't read it.

So what do you do?

You have to assume they won't read it, and design an interface that doesn't require any reading. Yeah, it sounds absurd, and it is, kind of, but that's what you have to shoot for. That's one of the reasons why we had to redo Gradefix so many times. You've got to simplify, and go to extreme pains to make sure your interface is as intuitive as possible for as big of an audience as you can target. And the rest, well, they'll either have to read, or find something else. Their loss... ;)

A Sleek User Interface

We knew that to make Gradefix a success we'd have to have a sleek user interface.

We started with nothing more than a list of the tasks in the beginning and it was obvious very quickly that wasn’t going to work. Next we thought that a calendar-like view should be the way this is made. We started with a sketch like this:


Then we spiffed up this look by adding color:


We thought it would be nice to be able to click on a class and that would light up those tasks. At this point we had made a major step on our think by considering the idea that a task could be added right there on the same page. So I broke up each task into four categories Reading, quiz, assignment, and exam.


There are some downfalls to having such complicated entries for each of these types of tasks, mainly that it would slow inputing tasks too much. However, we thought maybe they could be combined and worked through.

We decided we could save a little space by using color to show which class was related to which task. Then we thought maybe it be sorted even more by combining the task type and the color of the class. So we made these tags.


Combining the tags and and the previous scheduling idea we got this. We thought with the coding that the gray background look was going to be the way to make it clearest, and this was the birth of what I like to call the Windows 3.0 shell.


However, we ran into major problems put in the descriptions in such a sort spaces.

But, we did discover what we started calling the Task Manager, a concise tool for adding tasks. We thought maybe if you click on a class, then the task type, choose a date and put a little note of what to do and we’d have it. The problem was that there wasn’t a space for a little note. So we thought maybe we could have a box open up and it would show the note, something like this.


Well, this was going to be too much work. Come on you don’t want to have to click every task to see the description, that was not realistic. So then we had a major "aha" and thought what if we made a three day view. There were little things we decided to look at like the due tag to save space.


We also added due tags as another space saver.


We started sitting on the three day view. It took care of our task decription problem. In the mean time I started devising the update mode, a place to update the tasks you've done.


With time I started to get bugged by a thought of the three day view, it just didn't feel quite right to me yet. One day it came to me, this is kind of like my email. So I decided I better just lay it out for the heck of it to just see what that would look like (figuring it would suck).


I loved it, but had to let go of the old one, which was hard. It helped that everyone I showed the new email type version to liked it better that turned the tide. The email layout had a major upside of more data in a smaller space, and none of those hidden notes. There was still the question as to how to enter the tasks. So our "Task Manager" idea was revisited, but not without our typical trial and error. The first one here is called the squatty one.


Nope, that wasn’t right. So we made these variations of it.


Our main goal for the task manager was rapid task entry, so we ruled out the drop down bars because they would be too slow. We finally decided on the task bar to the right. Adding the schedule and the task manager yielded:


For sure we thought we had finally found the version we’d be happy with we still tinkered with it to work out the kinks. We decided though it was a nice feature to have the classes up on the top it seemed repetitive so we cut it out.


Update mode would be easier and less confusing if we just used what was there.


Well we decided it was time to go back into production on creating a real version of our windows 3.0 version. So we made it live to see and start testing it out again.



Well after all this work of making this work… I still had one more idea. I woke up on the Fourth of July about 5 am thinking of my windows 3.0 version and I thought "I hate it, I want it to look hip, not old school Windows". The gray bothered me as well as the too many colors problem. I decided maybe the task type could take color then we’d only have to use four colors.


Next I thought maybe we need no color-coding at all and I made this one.


Mac and I liked this one, but Taylor was still a fan of the color-coding. I started to ask around and there was a fan base for the color coded tabs, so I thought maybe we could shorten them down a lot to just the color and one letter as to what type of task it was. So here is the latest and greatest.


This has been our favorite one, so we went back to the drawing board with the programming, and remade it to look like this. In the mean time, we decided that making the background yellow on due dates would save a little more space. Another thing we changed and liked was that all the time was aligned in the same column. When we made this design live, the light blue didn’t look right so we made it dark to match the logo. That brings us to the present version which we feel is getting pretty sleek.

(If you don't have a Gradefix account to log in and see the current one, you can create one or check out some screen shots on the Gradefix home page.)

The Evolution of "My Account"

We used to call Gradefix "Scholar". These first pictures are Scholar mock-ups that Taylor did to see how many pages we’d need and how they’d hook together. Initially, we thought a person would need to add all their information up front to make it work.




In the mean time, we’d been through trial of finding a designer, getting our logo, and getting a basic layout.

Mac took our designer's look and feel and created this version of Gradefix, around December 2005 and January 2006.



We found there were some problems in this approach, mainly in that we still had no idea how all of this information would fit into the scheduler cleanly. On the input side we also faced one our biggest problems of having tons of inputs. We first thought that the user would need to enter their entire syllabi and this was going to be ridiculous.

On the profile and class pages we started by asking ourselves what was all the info we wanted, instead of what was only the essential inputs we needed.

Because our budget was so small Taylor and I took it upon us to redesign the pages using some of designers best ideas.

When our betas tried the above shown version, they didn’t understand what they were doing or where to click (as much as we thought AJAX was cool, it was hard for people to use at least for our app). My first thought was maybe I should show them a step-by-step bar to let them know where they were at in the process of signing up, so I made this one.


We made sort our own profile and class layout as seen here:



Then we combine these to show where you were to help the user understand the process.



I started to think, I bet we could get this all one page. Here is how it looked.


I was happy about the one page idea, but still didn’t like it yet. It dawned me even after some reduction that we were still asking for too much stuff. We ended up with something like this.


We finally got gutsy and decided to take out even more so we decided to try throw out the class, the section, the department, and the instructor out. Viola!


Now we had a very concise sign up. However, we realized when watching the betas that the horizontal layout wasn’t right. Our betas were much more inclined to work down than horizontally, so we made the form vertical.


When we got to this one and we finally really started feeling right about the look. The side text really helped prompt the user. Our comments from our betas were things such as “simple”, “easy on the eyes”, “not too much information”. Finally, after all that we were happy… well we hope so anyway.