Realizing a vision: creating a production house website that is both a content aggregator and a creative network
Beyond the portfolio model, Mixer’s website was imagined to facilitate a community of creatives and to act as a recruiting tool. My design vision played an integral role in bringing this to fruition while signaling the beginning of my career as an interaction designer.
My roles: Interaction Designer, Project Manager, Content creator
Mixer is a production house based in Sao Paulo which has earned accolades for its advertising films, feature films and TV series. When I came on board, Mixer was looking to position themselves as an innovative production house in the field of audiovisual, and to forge connections with other creatives. My job was to help the company pursue new ways of establishing an online presence suitable to their vision.
The product of my design and management activities was a new institutional website that showcased not only Mixer’s own reel and directors but also introduced a community platform for non-staff members to share their portfolios.
By allowing users to create their profiles under Mixer’s purview, the new website sparked connections and conversations among professionals in the creative industries. The site also worked as an aggregator of conversations happening on social media, which allowed recruiters to spot talent as well as connecting content creators with their audiences.
After conversing with Mixer’s stakeholders, including the artistic and sales directors, I identified the changes that needed to be made:
Once they gave me the green light on this pitch, I began designing the information architecture and wireframes.
A Frankenstein wireframe: examples of hierarchy models and mockups made out of pieces from different websites I used as reference
This was the first project I worked on in which I had sole responsibility for interaction design. As this was in 2010, there were not as many effective tools available as there are today to articulate hierarchies, screens, and flows. I presented my ideas in a Powerpoint presentation, including simple schematics for the Information Architecture and screens composed of sources prints from various websites.
Frankenstein's wireframe. Components sourced from other websites used as place holders to create hierarchy models and mockups.
The resulting document admittedly bore some resemblance to Frankenstein’s monster. However, it was sufficient to explain the structure to the stakeholders and the third parties hired to work on the visual design and coding and to inspire enthusiasm for the next phase.
The Homepage: Mixed Content and Proto-channel
In the final product, Mixer’s homepage is a mosaic of content links. It highlights trailers, promos, and posts from the official blogs of current productions, as well as the profile pages of both staff members and the broader community, podcasts, and reactions from Twitter.
Playing on the company’s brand, and taking advantage of the variety of formats produced by Mixer, we thought that the Mosaic would offer an innovative and more granular way to explore these contents. Later on, we added filters that allowed the user to control what was displayed on the mosaic, which could also be being a prototype of what could become later some closer to a channel.
A snapshot of Mixer website home page
The Profile page: a Community of Creatives
Our page model for portfolios was designed to showcase images, audio and video pulled from Flickr, Soundcloud, YouTube and Vimeo. The process was streamlined and user-friendly, as all the account owners needed to do was authorize Mixer’s API to access those social networks.
The same page model used to showcase the portfolio of Mixer’s famous film director was also available to makeup artists, set designers, and other creatives professionals involved in the audiovisual production. Even non-staff members could showcase their portfolios — all they needed to do was to create an account.
Example of profile page showcasing the portfolio of one of Mixer's film directors.
Screen recording used in a presentation for the website launch
Studio Hardcuore and the software house Plimx were the final appointed partners to help me execute the vision. With a solid idea of the user experience, I used the wireframes and clickable prototypes to guide visual design and facilitated the hand-off to the development team. I had to make sure the specifications were very clear as we were working on a limited budget, while also learning to collaborate and compromise.
The takeaway: a Self-started Design Career
Visioning and executing Mixer’s institutional website was an opportunity to take creative risks while dealing with pragmatic commercial expectations. Looking back I can spot both some naif and ingenious decisions. It showed me my ability to convince others towards a shared vision, and also my passion for crafting innovative experiences. Coming from a journalism college degree background, Mixer's project is what made me confident to start calling myself a Designer.
w3DSMaking a Design System more effective through co-creation & a revamped value propostion
Lua 2.0Fostering Entrepreneurship Through a Humanized Shopping Experience and Increased Efficiency of Social Commerce
Lua 4.0Helping Independent Sellers to Start and Boost Their Online Business
WePulseImproving Health and Wellbeing Through Multidisciplinary Professional Collaboration
CrosswordsFlooding a Room with Words to Celebrate Portuguese Language
MixgogoHelping Music Lovers to Discover New Sounds and Attend Events, based on Location and Date.
Times Square Eletronic GardenInstallation | Graduate School Project
Breaking InShort movie | Graduate School Project
Don't Call This UsMusic video | Client: Aaron Pfeiffer
Solar Power ManPerformance | Graduate School Project
Communion360º video | Graduate School Project
DiscontrolInstallation | Graduate School Project
VogameInstallation | Graduate school project
EtcWeb app | Client: Mixer Produtora
WeeshhWeb app | Self-funded venture
Flickr NightsContent & Community
Sneakers - Stepping into the urban cultureDocumentary | Self-funded Project
Blue Man BrasileiroContent & Community
#VaiGrandeRioContent & Community