leanne bathurst

Fire TV Design Guide Website

Due to a Non-Disclosure Agreement, I am unable to share images or specific details about this project.

Background
I was hired in August 2016 to help design and build UX style guide websites for Amazon’s digital product eco-system. The first in this series was the Fire TV Design Guide. The goal was to provide an internal resource for visual designers and developers, and to bring continuity to the Fire TV UI. At the time, a website prototype had already been created, the Plan of Record and site architecture had been defined, and the website content was in process of being developed. The team needed help with visual design, creating UX specs/patterns, and building the website in HTML/CSS.

Process
My role in this project was UX Designer, in a small team of four. My contributions were as follows.

Website Audit: I conducted a thorough audit of the prototype HTML/CSS, and provided recommendations to eliminate code errors.

Wireframes: I designed wireframes in Sketch and presented six different UX models for the website layout and interactions.

UX Patterns/Specs: I designed layouts for the UX patterns/specifications and website content.

Responsive Design & Prototyping: I gave a presentation to the team advocating for responsive design. I recommended that we use a responsive framework to build the site, and I demoed a responsive prototype that I built with Bootstrap. The team was onboard.

Design Grid: I helped the other designers on the team set up their Sketch files to align with the Bootstrap grid. This included a 12-column grid layout with a 30px fixed gutter width. Applying these specifications to Sketch allowed the designers to design page layouts that would accurately translate to the responsive grid in HTML.

Web Development: I implemented the final design comps by hand-coding the HTML & CSS. I applied the pre-defined Bootstrap classes to create layouts that were fully responsive for mobile, tablet, laptop and desktop screens. I also utilized JavaScript to design interactions for a collapsable left-nav, and a full-screen hamburger menu in the top-nav. I created some additional animations with CSS.

Outcome
The Fire TV Style Guide was successfully launched in December 2016 to an internal audience of 10,000+ at Amazon. The feedback was overwhelmingly positive. The team plans to roll out additional style guides for Alexa and other digital devices in 2017.