Posted 19th February 2013

Inside the Studio: Fi’s New Website

Don’t you love the makings of a well-received idea? We recently opened up dialogue to widen our design and work process starting with our own website for the entire community to be a part of and follow along. The big idea was to exclusively feature the making of our newly designed site on our Facebook page. It’s a project 5 years overdue! We first soft sounded the idea on Facebook and the response was greatly positive.

Facebook responses to Inside the Studio

Based off of the community’s enthusiasm, we are introducing Inside the Studio, the start of what we hope to be a recurring social series where we invite our Facebook fans into the fold of an entire project lifecycle. Our own website is the first guinea pig project featured.

We are taking no time in diving right into the work. The team already had our kick off meeting last week over Google Hangout to review the latest wireframe deck.

But first, meet the team behind Fi’s redesigned website. You’ll be hearing more from us on Facebook so get familiar with our mugs. In the large Hangout image below, from left, are Sarah Boehler, Associate Director of Production; and Stephen Carpi, COO. In the smaller images, from left, are Anton Repponen, Global CD; David Martin, CEO & Founder; Irene Pereyra, Global Director of UX & Strategy; and Stephanie Yang, Director of PR & Communications.

The Fi redesigned website team on G+ HangoutIrene led the meeting by first setting up an overview of what the new site map would look like. We’re going for a simpler, cleaner design with flat architecture compared to our current version

New UX designs convey a simpler, cleaner designThe site’s global framework will have a sticky navigation component at the bottom. And similar to our newly launched blog, the new Fi site will be fully responsive as well. The contextual menu at the bottom of the below image will house all of our case studies filtered by various categories. We’ll be testing out whether clicks or mouseovers will work best when we prototype the site although Irene is a fan of clicks given that we’re designing this with a tablet experience in mind. (Look at David really channeling the new site’s look and feel.)

The contextual menu will house all Fi case studies filtered by categories for easy-viewing.Perhaps one of Irene’s most favorite, subtle UX is when users click on our Fi logo to contact us, it will display a drop-down menu with different user intentions. If a visitor clicks on one of our four global offices, a list of interesting statistics will appear to better familiarize users with our office culture. Always curious to know how many languages and nationalities make up our NYC office? These fun facts will tell all.

Office statistics will display fun facts from each global location. The homepage will be a big, beautiful marquee image that will be responsive dedicated to one project we’ll choose to highlight. The information panel on the left will be an easy-to-read snapshot of the most important work details including who the client is, the name of the work, a short description and perhaps links to the case study, a blog entry with more details, and the live site. Added information may include any awards we may have won for this work and what platform the work exists on. Visitors can close that left panel to view just the rich marquee image and will be able to auto-cycle through six different featured items.

Homepage will feature big marquee imageTo view the entire kick-off video meeting on Google Hangout, be sure to check out Part I and Part II on our Facebook page.

This is just a taste of what’s to come. We’ll continue to post all new assets exclusively on our Facebook page in the spirit of full transparency. We’re going to show you our passion, debates, decisions, failures and wins. In the end, we hope that our experiment plays a small source of inspiration in your daily creative life. So be sure to follow us on Facebook for exclusive content and witness the design and build of Fi’s new website.