Sean Filiatrault
Interaction Designer
Good User Experience is intuitive. It's convenient. It's effortless. It's usable, accessible, and invisible.
Great User Experiences make user interactions instinctual.
The Best User Experiences make the world a better place.
I am an Interaction Designer and this is what I do.
About Me
I'm Sean Filiatrault, a digital hobo from Vancouver, British Columbia. Over the past few years I've had the opportunity to dabble in many different interactive fields (both in design and in development). I've enjoyed both sides of the interactive coin immensely, but was having a hard time finding a niche for myself. Thankfully I found a happy middle ground between them in usability and user experience design, where my eye for detail and perfectionist tendencies are put to good use.
As an Interaction Designer, I help to make visitor experiences efficient, effective, and (most importantly) effortless. Through intensive user research, thorough competitive analyses, and my own experiences, I help to craft interactions that are intuitive for users and cause them as little frustration as possible.
My Tweets
Follow me @SeanIxD
My Process:
Research
Research is the backbone the user experience industry. We often use interviews and questionnaires for research purposes, however fact-finding online is invaluable, especially during the initial stages of a project.
We use extensive online research and analysis to locate usability issues on websites and apps, find best practices that competitors use, and discover the reasons behind user frustrations.
Interviews
Stakeholder interviews are one of the most important parts when starting a project. These interviews help to make sure that everyone is on the same page when it comes to project scope and responsibility.
User interviews are also extremely important. They help designers understand what users like and hate about a current website or what they'd like to see out of a future one.
Personas
Personas are representations of the project's intended users described as real people. These documents help to keep the design and development teams in check by being a constant reminder of who website's target users really are.
Flow Charts
These documents visualize processes and functionality. They're invaluable to development teams as they show how a user gets from point A, to point B, and so on. Flow charts help project teams align their points of view on how a user performs a process.
Silverback
User testing doesn\'t have to take place in an expensive lab now that Silverback has made the process portable. This application gives me to ability to administer user tests within the participant\'s natural environment, which will helps put the participant at easy. This process also yields far more accurate final results.
The example video is for a Flash-based presentation software called Prezi.
My Work
Work at Play Website Redesign
Overview
Work at Play is a digital agency based out of Vancouver, B.C. It also happens to be where I work. We provide user experience, visual design, digital strategy and development for a wide range of clients in many industries. Because of the services we offer, we have to keep our site up-to-date using new and innovative techniques and technologies. To further that goal, we set out to create a portfolio site that was functionally different from all of our competitors.
This project proved quite difficult. If you’ve ever worked on your own site, you know exactly what I mean: your biggest critic is yourself. That being said, we’re all really pleased with how things worked out.
Role: Interaction & Front-end Designer
Initially my role on the project was to experiment with new ways to move through a portfolio of images that was more exciting than the traditional lightbox (similar to the one you’re using to view my portfolio…). Our chief goal was to improve how site visitors experienced our work by making it more of a presentation platform than a serier of screenshots.
After that core functionality was decided upon, we had to move through design and development. Since the user experience of the site was so different form the norm, we had to work much harder to create a seamless experience across browsers, tablets, and mobile. We also had to keep everything (code, visuals, API calls) as light as possible to make the entire experience seem as fluid as possible to visitors.
Lastly, we wanted each case study to have that hand built, custom feel. The only way to do that is of course to make every case study by hand. This proved to be quite a challenge, especially with our site needing to work seamlessly with the Drupal-backend.
Result
In the end, the clients (us) were very happy with the finished product. The website is content driven, but if visitors wants to just sit back and take in the Work at Play experience, they can easily do that at the touch of a tab. I’d say we accomplished what we set out to do.
We've received some really great feedback from all over the web on the user experience behind the portfolio. The site's obviously done its job as we're busier than ever!
NFS The Run Facebook Autolog App
Overview
Electronic Arts' Need for Speed is one of the world’s most successful racing game franchises today. With an enthusiastic, socially-connect, content-hungry fan base of over six million, we were overjoyed to work with EA on this project.
The Run Autolog Facebook App was designed to further extend the connection between in-game and web into the social realm. Bringing the most popular parts of Autolog (photo galleries and in-game recommendations) into Facebook, we hoped to further engage fans and keep them coming back to the game on a regular basis.
Role: Interaction, Visual & Front-end Designer
My roles once again spanned the entire project: from inception & functionality scoping, to initial prototypes & visual design, and finally to implementation & themeing of the final product. This project gave me the opportunity to work the way I like: directly with the product developers through every stage of the project.
This project proved to be an interesting challenge, especially with its integration with in-game content and functionality that needed to be translated to Facebook and then back to the user's EA account. Another challenge associated with this is that there were a variety of photo sizes and resolutions, different user and car information, and logo & icon integration that had to be accounted and designed for.
Result
The client was very happy with the results and our ability to create a seamless on-brand (both for Need for Speed and The Run) between in-game design, the game website, and the Facebook app.
The fans are also happy; there are more than 156,000 active monthly users and increasing rapidly (more than 300% growth between January and February 2012).
Previous Project
The Vancouver Canucks Three-Stars App
Overview
The Canucks were very happy with the design and development of last year’s Desktop Playoff App, so they once again approached us to further their fan engagement.
This time we took a different tact and pitched the Canucks Three-Star app. The idea was simple: during a game fans would be able to vote for the player that they think deserve to be the first star of the game.
Role: Interaction Designer & Visual Designer
Since I was the person who designed the user experience and visuals for the Desktop Playoff application, I was the best choice to move forward with this app to ensure that company branding and interactions were maintained.
I spent time with the developer working on the UX behind the app. How users would interact with it, different states of the app (during a game versus between games), and how the app would function differently between web to iOS app. This app had some different design challenges from the Playoff application. For one, it had to be configurable from the backend, whereas the Playoff application was completely statistics driven. Another challenge was creating an app that could exist on the website, but could also be ported into the Canucks’ iOS app.
Result
Once again the Canucks were quite happy with the results. The app has been successfully running since the start of the ‘11-’12 season and is being advertised around the province.
You can see the app in action if you go to the website during a Canucks game. If it’s in between games, you will be able to see the previous three stars.
Motion Soup
Overview
Motion Soup is a small motion graphics studio based in Vancouver, B.C. They specialize in many areas including motion design, post production, and visual effects for companies like Adobe, Mozilla, and the BBC.
Their website needed a refresh, as well as a way to increase traffic and reach a boarder audience. We suggested something that hadn’t been done before, which was to develop a fully customized template and to use Tumblr as platform to increase engagement. This would help them reach their audience where they were, on the most popular blogging platform on the web.
Role: Interaction, Visual & Front-end Designer
I had an overarching set of roles on this project, starting with the initial functionality and visual design and moving forward with front-end design and implementation. This gave me far more control than usual over how the design evolved through implementation, but also made it more difficult because of how immature the Tumblr platform was at the time.
One of the more difficult challenges that came up was the effort to make the entire experience seem seamless across platforms. To mold a responsive design into such a rigid and immature platform proved difficult, but well worth the effort.
Result
Designing a site for other designers can be difficult, but in the end they were extremely happy with the results:
- Their site worked beautifully across multiple platforms and at different resolutions.
- Users were able to follow Motion Soup, not just on standard social networks, but also on Tumblr where a good portion of their audience already spends their time.
- Integrating Tumblr’s rich tagging structure into the primary navigation gave users a powerful and different way to navigate this portfolio site.
Knowledge Network: ArtShuffle
Overview
ArtShuffle is an online space for artists of all types to showcase their work. Creators upload their short films, which are made available for fans to view online. Unlike other video sharing sites, ArtShuffle's content is curated to ensure that only quality films are shown.
Aside from online video, ArtShuffle offers artists the chance to connect with their fans. There is also an area for them to promote their gallery openings, concerts, and other events.
Check out the live website.
Role: Interaction Designer
My role on this project was to come up with a natural flow for new users of the website to encourage them to fill out a profile, upload videos, and promote events. This included the creation of user flowcharts as well as numerous wireframes.
I was also tasked with ensuring that the user's needs were observed during the design process, something that often falls by the wayside in the midst of a project.
Result
User centered design is a cornerstone of my design process. It's a value that I championed to my team and was carried over into the final website. An example of this can be found during account creation. It has very few barriers to entry and includes letting users opt to login with Facebook instead of forcing them to remember a new username and password. Once a new user logs in, there is a very clear direction as to what to do next: create a profile, upload their first video, or promote an event.
ArtShuffle has been a big success for Knowledge Network. Since the site's launch in December 2010, it has garnered over 6500 new visitors from 54 different countries. Knowledge has an accompanying weekly show planned around the artists and films from ArtShuffle and the more than 125 videos that users have already uploaded will help to make that a great success as well.
The Wedding
Overview
The goal of this personal project was to create a website to service many different aspects of my wedding. Unlike other wedding websites, this site will expose visitors to aspects of the wedding that they would normally not be privy to. It also allows users to communicate with the married couple and to contribute to the overall experience of other attendees through the use of an online forum and galleries. It will also feature a personalized registry and RSVP system.
You should take a look at the live website *
* Please note that features like the registry and forum are behind a login and will not be accessible.
Role: Information Architect & Interaction Designer
The information architecture for this project included coming up with a hierarchy for the different sections of the website. I then created a sitemap based on that hierarchy and extrapolated a system for navigation that made sense for the end user keeping the most important items (to the user) prominent.
As the interaction designer, I defined user flows and wireframes for the site to demonstrate how visitors will typically move through the site. The RSVP form in particular was much easier to create once it had been described through the flowchart.
In addition to my other duties, I also took on the roles of designer and frontend/backend developer.
Result
We received a lot comments on the website from our visitors. They were not only delighted by the design of the site, but also of how user friendly it was. Information was clearly laid out and easy to find and very few people had issues using any of its features.
Visitors were also thrilled that they were able to connect with other attendees months before the wedding. They were also very excited that they could contribute to everyone's experience by uploading their own photos and participating in the online forum.
Canucks Playoff Desktop App
Overview
The Vancouver Canucks Playoff Desktop App was created for the 2011 Canucks playoff run. Users that download this Adobe Air application can view everything that's happening in the playoff in one convenient location.
At a glance, users will be able to see how each series is progressing, view current or recently finished games, join in on the Canucks conversation, and see current stats on teams and players. Fans will be able to interact with other fans directly within the app because it utilizes Work at Play's DEQQ application to aggregated all of the Canucks' social media streams. For the hardcore or hockey pool fans, there's the ability to track favourite players through the "My Team" section of the app.
Role: Interaction Designer & Interface Designer
As the interaction designer on this project, I was tasked with creating user stories for our two largest audiences (general Canucks fans and Hockey Pool fans). Because of the rapid turn around time on this app (three weeks), the next step was to create a rapid prototype in the space of five hours. This prototype was used to work out any usability issues early on and to help our team engage with the project as quickly as possible.
Once the prototype had been approved, my next action was to design the app as rapidly as possible as there were ten screens that needed to be designed and approved before the developers could move forward with finishing the application. While designing, I had to keep in mind that this app was also going to be marketed to other potential playoff teams. This was a large design consideration because the app needed to seem as if the team branding had been baked right into the interface as opposed to being painted overtop of it.
The app went live on April 28th, just in time for round two of the Canucks' Playoff run.
Result
My Blog
Tumblr
Lessons from Interaction12
Interaction12 was a four-day conference in Dublin, Ireland at the start of February. The conference brought together over 800 Interaction Designers from all over the world to talk, listen, connect, and learn from one another and the over eighty speakers who made the confab possible. I was fortunate enough to attend this fifth rendition of the conference and I’d like to pass on some of the learnings and resources that I was able to glean from my favorite workshops, keynotes, and presentations …read more on Tumblr.
Breadth of Expertise
As an Interaction Designer I've found that the more I know about other areas of expertise, the better I can do my job and communicate with team members. For that reason I keep my other skill sets up-to-date.
Dribbble is where I put snippets of my visual design work before it's made public.
I created a small documentary while in school that I keep on Vimeo.
I'm a big photographer in my spare time and I upload my photos to Flickr.
I've created several presentations that I access through Slideshare.