The Rotationship

A year-long fellowship program in Silicon Valley.

I was approached by Alexey Komissarouk and Kevin Gao to design and develop an online presence for The Rotationship, a year-long fellowship at four different companies in Silicon Valley. The project was relatively urgent so it would have to be designed and coded within a week.

First Steps

Alexey and Kevin turned out to be ideal clients. They sent me a rough draft of the copy beforehand and, for the most part, knew what they wanted. I began by asking them to articulate the purpose of the site. Their top priorities were explaining the gist of the program, and getting interested visitors to sign up.

I then asked for a list of sites they liked that communicated the same feel they were going for, along with an explanation of what they liked about them.

Kevin Gao

sent via Email on 6/2/2014

Hi Joel,

Sites we like:

1. Hacker School - great use of whitespace and a white background, not loud, if we could add a little more color it might be the closest comparable
2. GA UX Immersive - a little too loud, but i like the level of professionalism and style
3. ycombinator.com is a little too plain but is good at “not shouting”
4. Hacker Reactor - it’s clean and well-balanced use of color (although the images help it stand out and we don’t have that, yet)
5. Startup Institute - balance of color, typography; we lack the product video and images

Overall thoughts: like the way the hackerschool.com website conveys nerdiness. As an engineer getting to this page, it should feel like it wasn’t written by a marketing person. More color than hacker school to feel welcoming (nerdiness might skew male a bit) — but not a lot.

Initial Directions

The examples they sent me had some common characteristics, but were different enough that I could take the site in a few different directions. This was a rush job, so that night I sent them an email with possible directions.

Joel Califa

sent via Email on 6/2/2014

3 directions attached. Keep in mind that these aren’t final designs. The typography/colors are subject to change. It’s the general style you should be taking away from each of these. Since you don’t have any imagery yet, and you seemed to be interested mainly in minimal designs, none of these designs incorporate imagery. I think good iconography / design language can make up for that.

Direction 1 is a louder, GA kind of thing. Bright colors, big typefaces. Very strong and solid. The idea here is that everything’s big and bold and proud. THE ROTATIONSHIP. WE’RE THE SHIT.

Direction 2 is light, delicate. Kind of a hipster artisanal vibe. I don’t think it works that well for tech, but figured I made it so I’d throw it in here in case you guys get any ideas from it. The shape isn’t really necessary and maybe without it the style can appeal to people.

Direction 3 is my fav (though it doesn’t have to be yours). Lots of white space, grayscale + one color for highlights. Gives a professional vibe and the choice of typeface can pull that to fun/quirky and give it some character while staying restrained.

I didn’t want it to be stereotypically techy with any of these so I chose colors that weren’t black/green/blue, but this is subject to change based on what you guys think.

Cheers,
Joel
Direction 1
Direction 1. Loud, bold, strong.
Direction 2
Direction 2. Hipster, “artisinal,” whatever that means.
Direction 3
Direction 3. Minimal, quiet, professional.

Kevin and Alexey agreed that the third direction was the best and we chose to continue on that path.

Designing the Site

Two days later I send them a mockup of the site’s structure as I envision it. The aesthetics are largely unchanged from the original direction I sent out. I incorporated diamonds where I could, the four points representing the 4 fellowships within the program. I kept the same typeface from the initial design—Crete, a slab-serif that was solid and professional but had enough quirks to give the site a friendly feeling. I paired it with Source Sans Pro, a lovely neutral typeface.

Version 1
First full wireframe

Once it was approved I began the visual design. Throughout the next day I sent them a few versions as I designed how each element would look. In each iteration I tweaked the typography, colors, icons, the weight of the sponsor logos on the page, and the order of the content.

Version 2
Version 3 of the post-wireframe mockups.
The mentor images ARE NOW DIAMONDS.

They hadn’t realized how much of the primary color would be on the site and asked to see it in another color. I tried a few and decided on a greenish hue of blue.

Blue version
A glimpse of the final blue design.

Coding

Once I started coding the front-end, I took a more reductionistic look at each element and began designing possible interesting interactions. The site was very minimal and some delightful transitions could give it more personality.

When I started the project, The Rotationship did not have a brand in place, and the small diamond elements became the start of one. I’d never intended for these to be static, so I gave them a :hover animation. When visitors hover their cursor over the logo, the diamond rotates a single time, representing the transition from one fellowship to another. I didn’t include a backwards transition for when you remove your cursor. This way it seems as though every time you hover, there is a new rotation.

Rotationship logo animation

I added the same hover effect to the mentors’ diamond masks.

Rotationship mentor animation

Finally, I created a hover effect for sponsor logos. I wanted to keep the logos greyscale to fit with the understated theme, but show colors on hover. One way to do this was simply create a css sprite with greyscale and color versions and simply switch between them, but this wouldn’t result in an especially delightful moment. One possible idea was to fade the color in, which might have been simple, but I opted for an interesting transition where logos would “fill up” with color as you hovered over them. When you removed the cursor, the color would drain from them.

Since the site was responsive, this proved to be more technically challenging than I had anticipated. I was adamant about using a single sprite per logo to keep load time down and so it would be easy for Kevin to maintain later on. This complicated things further. Since the logos were constantly growing and shrinking in size depending on the width of the browser, the proportions would break. After much trial and error, I had to insert a blank image with the correct proportions to maintain them. Not the most semantic code, but it got the job done.

<li class="company-name">
  <img class="sizing" src="logo.png">
  <div class="logo grey"></div>
  <div class="logo color"></div>
</li>
.sizing
  width: 100%
  max-width: 100%
  height: auto

I opted to use two divs and overlay one on top of the other. Other techniques proved problematic for my intended goal. I gave both the .logo class so I could set the background-image only a single time in the stylesheet. From this point on, it was rather easy. I simply set a transition on the height of the overlayed grey image to reveal the colored one under it.

.logo
  position: absolute
  width: 100%
  height: 100%
  background-size: 200% auto
  transition: all 0.3s ease

  &.color
    background-position: 0 0
    z-index: 1

  &.grey
    background-position: 100% 0
    z-index: 2

  &:hover, &:active
    .grey
      height: 0

The result was a sponsor logo that filled up with color on hover. A subtle effect, but I think it was worth it.

Rotationship mentor animation

I sent Kevin and Alexey a long, thorough guide explaining how to maintain each element on the site, and that was it.

Check it Out

The version I submitted to Alexey and Kevin is available here. All the aforementioned transitions can be experienced here.

After publishing the site, they gathered more input from visitors and friends and edited the site. The modified version of my work is up at therotationship.com.

Designated Compliment Box

It was a pleasure working with Joel; he was fast, responsive and considered not just our direct goals but brought in his design sensibility and product experience to ensure we worked on the right things. He’s also super creative and suggested nice touches and effects that really make a difference for the consumer experience. I’d work with him again!” —Kevin Gao