SiteSimon Redesign
Where the site began in April 2011 before the redesign.
Original homepage from December 2011.
 
The redesign began when I interviewed the four founders of this start-up. The above Minimal Viable Product had been worked on for almost a year at this point and the founders had a proven concept, refreshing idea and a clear vision for their Google Chrome extension. I interviewed them in person and sent them questions via email. I then used their answers in a brand workshop. After the brand workshop we held usability tests and developed personas based on stakeholder and users' feedback.
My first deliverable was a series of wire frames, four in total focused on the most important page, the dashboard where users feature their browsing history as their clickstream. Above is the wire frame that was chosen.

This wire frame was laid out in Illustrator so I could begin building the design in Photoshop using the same assets once the functionality was finalized.
Having a sense of the functionality for the main dashboard page I began to put some thinking into the general mood for the site. I wanted users to be comforted but also to feel that they had a useful utility at their disposal. I also added some logo trials based on our branding needs.

 
 I like to combine any logo attempts with some thought to a site's texture and possible color palette. SiteSimon wanted to be playful and also represent its browser add-on in the forefront of the design, so this was my first attempt. The "smiley face mowhawk man" was my thought for their browserGoogle Chrome extension icon which I wanted to incorporate directly into the logo.
 
I wanted to then see the logo in context of all the other elements on the dashboard page so I designed the dashboard page and stepped back from the overall design as a whole. It was nice but it didn't fully work.  
It was too playful and didn't seem to convey the seriousness of a very handy utility. So I went for a bike ride and cleared my mind.
As I was biking, I remembered what a professor had advised a class 10 years earlier at Pratt Institute "Cheltenham is such a gorgeous and underused typeface. If you're ever stuck, give that a try." So I did, I thought about the logo, decided to ditch the smiley face for the moment, and just focus on the letter form.
 
I was really pleased.
 
After the type was set I clipped the mowhawk off the old smiley face and used that as a crown in place of a dot for the "i"  for SiteSimon. "Content is king!" a team member later declared, and our logo was found.
Once the new logo was in place I began to "sand down" some of the heavy textures seen above. Some of the elements seemed to battle each other for attention, the page wasn't yet a a single flowing visual experice.
SiteSimon's wanted to be quiet as a brand, a utility working in the background to help users, so I felt confident recessing the logo. I still questioned the texture of the page but felt that people would feel comforted by it in general. We all agreed this was a good starting place for the dashboard convinced that it would evolve.
Now that we were comfortable with the direction of the interior page aesthetic I could come up with the homepage; which is essentially an introduction, and appetizer to the service and the rest of the site. (Be aware the copy and features are place holder in this comp)
The activity page was essentially where a user could view their clickstream as well as critical system information such as account information, number of followers and leader board points.
When thinking about the SiteSimon add-on icon that is suppose to be displayed in the browser frame itself I decided to focus on the "S" in the logo. I did a total of 4 studies using varied color and textures. In the end the simple flat color with subtle inner stroke won out.
The Google Chrome extension is a page sharing tool which I approached as just a small website, almost thinking of it as what a potential mobile site might be like. The old add-on was functionally laid out rather well, so I designed no wire frames, I simply focused on the new color and type treatments and based on ituition and feedback from users, tried to make it slightly easier to use.
In thinking about the 404 we all wanted to have a little bit of fun and chose to take a dig at the hipster community. This was a quick sketch I did.
Here is the final. With excellent copy from the CTO, Justin to bring it home.
 
Once the foundation of the product had been established. We decided to begin thinking about our social interactions and user acquisition. So this shot is a collection of wire frames that I executed in OmniGraffle detailing the Invite Friends flow.
After speaking with users about the usefulness and relevancy of what we had built, we found that an overwhelming majority did not want to share their browser clickstream, even with the ability to have a private profile and to block certain sites. So we made a small "pivot" towards only showing content we recommend on their dashboard. 
After the wire frame I wanted to explore the organization of color. The new dashboard had many fewer features and so I didn't believe the previous dashboard texture, palette and type, as is,  was completely appropriate. I had to see how these individual design pieces would occupy the space. So I made this quick Color WireFrame.
The final version of the dashboard that went live for a short time looked something like this. I believe we had needed to implement larger images and filter potentially, but this is very close to the finished vision.
In attempts to have "no sacred cows" we did a lot of talking with users and reassessed our goals even further and decided we needed something even easier and  more relevant for people to use as a tool for content discovery and recommendations. We reaffirmed our belief that last thing they seemed to need was yet another site to visit. We decided to take our share tool's technology and craft it into a sidebar where our recommendations would popup per website that the user would visit; a personal assistant for the online browsing. Shown above is the visual design draft.
We wanted the new sidebar and our own website to share a similar aesthetic, keeping in mind that the homepage had to be unique, the side bar had to be neutral but strong in brand and easy to notice so I began to design the homepage and sidebar together. 
After some quick thinking and user feedback (thank you everyone at Projective Space LES) we decided on a sidebar design we felt was safe, clear, yet interesting. Nearly every user interviewed liked the sidebar design, felt it was easy to read and interesting as an advanced proof of concept.
Here is the homepage with a JavaScript slideshow of the sidebar in action, with some well customized content and potential user profiles. I did many design attempts at this homepage, many times we spoke to various users. Our main desire was to portray ourselves as clean and unobtrusive, much like this new sidebar.