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.
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.
Irene 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
The 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.)
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.
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.
To 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.
Nothing cooler than seeing a real behind-the-scenes look at one of the best firms/agencies/studios in the world.
Looking forward to much more in this series, hopefully David will smile next time
lol
Very interesting!
P.S. Old obsolete Twitter icon here in blog.
This is awesome, thanks for sharing the process
Very glad to see from the best how you guys tackle projects. Always been interested to see this. Keep them coming!
Looks really cool
What program/tool do you guys use for wireframes?
This will be epic. Very excited to see your process
Thank you guys for sharing this experience!
Awesome!
Its really nice that you give us a peek into ‘behind the scenes’. An organisation feels so much more personable as you show the process to the fans.
Go Fi!
Loving it…. Cant wait to see the next video, I REALLY REALLY Hope you do this on more projects….yes I know you cant do it on all “secret” projects….
This is great! Is there a specific tool that you use for wireframes/sitemap?
thanks Fi for sharing your process throughout your build of the new site, I’ve never seen an approach like this where you share everything and I think its amazing, normally its kept a secret until its released but you are showing it all and getting feedback along the way. keep it going, this is exciting!
“…our experiment plays a small source of inspiration in your daily creative life.”
No! A HUGE source of inspiration!!!
10x!
Great UX work, it’s nice to see the level of details also applies to the wireframing process. Thanks for sharing
Thanks for finally talking about > Fi Blog | Inside the Studio: Fi
This is incredible Fi, thank you for for sharing so much information “behind the scenes”!!
Hi,
Where do you guys make those awesome page architecture with?
[...] on the bottom line, we have the freedom and flexibility to do whatever we choose, creatively. We experiment, explore, stretch and push every boundary, constantly searching for the next big innovation or [...]