Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.

So, without further ado, here are the mockups:

First view profile mockup

Second view profile mockup

Edit account mockup

Edit profile mockup

However, with this latest iteration, I think I’m finally done. I now have something I’d be comfortable launching with.

Same concept as before, the only difference being the fonts I used. The heart shape is, dare I say, perfect.

After a couple days the answer came to me. I’d read in in the Adsense Blog:

Tip #2: Use ads as potential exit paths, not interruptions.

Ads should complement your site, not distract from it. The most natural place for a user to evaluate an advertisement is after they’ve completed their goals on your site. Instead of interrupting your user’s main tasks, try to offer ads as potential exit path for users who were probably ready to leave anyway by placing them at the end of completed tasks.

Ads work on Google’s search results page because you’re at the end of your task by the time you have your search results. Your goal is to go to a different site. So ads, which by default take you to a different site, are not a distraction.

But in my case the search results aren’t the final destination. The goal is to find someone and contact them (or at the very least take a look at their profile). Thus, the best place for ads would be the “you’ve successfully sent a message” page.

This is a great tip for applying some logic to the placement your ads. If a user has accomplished what they wanted to on your site, show an ad. Otherwise, don’t.

First dashboard mockup

As a result of my first endeavor (and the lessons learned from it) I created my first real mockup of the search page:

First search page mockup

Both this and the last mockups are effectively replicas of okcupid.com with some minor modifications. That’s okay, the intent of these is really to learn about their design pattern — what works, what doesn’t work, what I’d like to do differently. Here’s a couple things I learned on this round:

• More options on fewer components is better than more components with fewer selections. I was thinking that by adding a couple checkboxes and removing a bunch of options from a select box that I would be doing users a favor. But in taking a look at it that’s not the case; it ends up being mentally more complex. It’s easier to read through a bunch of options in one select box than to read through a select box and two checkboxes.
• If you don’t have many users to start with, you can’t be very restrictive with your search criteria. You need to be fairly unrestrictive at first when you have fewer users and restrict it over time for new users as they’ll have more people to select from.

Here’s my second search page mockup:

Second search page mockup

More lessons learned:

• I had a bunch of wasted white space on the left side and in the top center. By moving the navigation into the top center and the search criteria into the left side I used up pretty much all of the white space. And I gained extra space on the right side that I could either use to extend content or place ads. Moving the search criteria also gave me a place to conceptually split up the concept of searching versus sorting.
• I read an article on producing great search results stating that there is basically no additional strain on a user to show 25 or 50 results as opposed to 10, and most users don’t look beyond the first page. If you want the user to see something you should show it on the first page of results. So we’ll show 25 results by default (instead of 10).
• In the US (and possibly elsewhere) there’s a common rule of thumb that you shouldn’t date anyone that is younger than half your age, plus 7. The inverse of n/2-7 is 2n-14, and those make handy results for the default age ranges.

And here’s what I had for my third search page mockup:

Third search page mockup

This mockup was pretty similar to the last mockup which led me to realize that I really liked the design and had found something I was comfortable with. And most of the improvements I had were fairly cosmetic. And after reading an article in TIME I came to realize that “Search” is a horrible name for these pages. You don’t seek/search for people (not on dating sites, anyway). You’re looking to meet people. So the language needs some revision, but that’s what my adorable fiancée-who’s-majoring-in-Communications is for. I build the site, she makes it read good [sic].

That isn’t to say I didn’t have ideas for content, I did. There are a lot of things I want to include on the site. From searching for users, to reading mail, to rating dates the user has been on. There’s no shortage of content for the dashboard. But I hadn’t thought through how any of it would work or correlate to other pages.

Let’s run with an example. I want to display other people on the user’s dashboard. After all, the intent of the site is for the user to meet people, go on dates, and fall in love. Okay, so the user needs to meet people. We need to display people for the user to meet. How do you display those people? What information do you include? How many people do you show? How does this area on the dashboard differ from the search page? If you haven’t developed a search page, or thought through how you display people to the user, then you’ll have no idea how to put together the dashboard.

In trying to put together mockups for the dashboard I realized that the dashboard is the very last page I should be creating. The dashboard is an amalgamation of bits and pieces from a lot of other pages. If you haven’t created those other pages, you can’t create your dashboard.

So below are the three mockups I created for the dashboard, but they may not bear any resemblance to the dashboard I’ll create in the future. As I was creating the mockups I also wrote my comments and thought process down in the margins (very useful, by the way, if you’re creating the mockups for yourself). My next step is to create a search and search results page. One of my mockups practically is a search page, and a part of another mockup could be used for search results, so I’m partway done. This next set of mockups should go a bit faster.

First dashboard mockup

Second dashboard mockup

Third dashboard mockup

After a while I realized that the upper curve of the S in Scotchel looks a lot like half of a heart. And that’s what started my iterations on the logo:

Iterations of the logo for Scotchel.com.

For anyone that’s even halfway familiar with Photoshop these weren’t hard to come up with. The basic style is just taking the S, flipping it horizontally, changing the color, and erasing the part of the S I didn’t want. And shazam! We have a heart.

As I worked through different iterations I realized that the serif fonts didn’t convey a sense of friendliness. They conveyed a sense of formalness. Not what I wanted. So I gradually started moving to more sans-serif fonts. When I got to about the fifth font I realized that I really liked the handwritten fonts a lot. I didn’t have many on my system though, so I hit up Urban Fonts and started browsing through their directory of fonts. It was actually quite hard to find a handwritten font that had an S with a curve that could be used for a symmetrical heart. But, after a bunch of tries, I landed on one I liked.

I finally tried a few different things with the heart on the S, though I only kept the filled in heart and the half-black/half-red heart. When I was satisfied that I had found a logo I liked I ran them past Rachel for her review. She really liked the first one and the second to last one. Personally I really liked the very last one because it was still easy to read the word but you could see the heart pretty clearly. Rachel agreed with my premise and we ended up going with the very last one, for now

Anyway, I wanted to start off creating mockups for the start/home page, as that sets the tone for the rest of the site. Given that, I created four different mockups that could be used for the home page:

First mockup of the login page.

Second mockup of the login page.

Third mockup of the login page.

Fourth mockup of the login page.

I ran all four past my fiancee Rachel to get her perspective on it. She liked the fourth one the best because it had questions to get you started right on the home page, plus she liked the conversational style (the chat balloon) and that it explained the name of the site immediately.

The fourth one happened to be my favorite as well, and interestingly it was the first one I worked on. So I’ll be using the fourth mockup as the base for my homepage, possibly pulling in some concepts from the other mockups.