Lexus - L/Studio
A gaggle of wireframes I created for this responsive redesign

L/Studio

Redesigning a content platform created by lexus

My Role

  • UX Designer
  • Interaction Design
  • Animation
  • Ideation

Employer

Team One Logo

Client

Lexus Logo
A layout of all the breakpoints of L/Studio.com. LArge desktop, laptop, tablet in both orientations, phones and watch.

Project Overview

L/Studio is a collection of unique perspectives meant to inspire viewers. In 2008, Lexus created their own form of online branded content, before branded content was cool. These short form shows and documentaries featured some of Hollywoods most popular and charismatic celebrities which helped to add flair and life to the Lexus brand.

Sadly, the site that housed this engaging content was just as old as the creation of the platform. When we were tasked with the redesign, we had to asses the current landscape of online media consumption, since it had changed dramatically since the platforms inception. After months of work throughout the discovery phase, we decide it was best to move L/Studio to Tumblr which was a more dynamic platform where users were already consuming media on a day to day basis and also offered us freedom in the dev environment along with hefty CMS APIs to leverage.

Wireframe of application Visual Design of application


Design Process

Starting with site mapping and doing a bit of content strategy with changing hierarchy of content as well as category names better prepared the content for search ability on the Tumblr platform and kept made the site feel a little newer and fresh with the millennial viewers.



A paperprototype we made for the client review

Starting the design process without a designer, I had to make a lot of functionality and design decisions, being the lead experience designer on the project. I explored 3-4 different ways of responsive navigation and also started a tagging structure that was later polished by the account and tech team. The tags allowed us to navigate content in the backend with machine tags that were not seen by the user and also with viewable tags that the user could use as an alternate form of navigation. This user behavior has been widely adopted by the Tumblr audience.


A paperprototype we made for the client review

Throughout the first few rounds of wireframes, we showed Tumblr tech team and reps where we were heading and they said they had not seen an elegant solution for navigating next and previous content as we had suggested. We felt really admittedly that our approach was the most user friendly and we had to work closely with the dev team to find a solution through machine tags to make this functionality possible through the Tumblr CMS.


A paperprototype we made for the client review

A designer came onto the project after the first couple client meetings where we presented wires. From this point forward, I worked closely with the designer to refine functionality and bring my wireframes to visual and functional life.

Prototyping iXD

Before we handed off final visual design to the dev team, we wanted to add a bit of polish and refinement to the interaction design that was all wrapped around the connecting of the moving going experience with a touch of elegance. In After Effects, I created a system in where there were opacity, scale, x, y, and z position rules set for all interactions and specific easing curves chosen that went along with the Lexus brand guidelines I was trying to set forth in other Lexus digital projects.

A paperprototype we made for the client review



Matt Reamer © 2016 - All Rights Reserved    OTHER PROJECTS