{ Fire TV Design Guide }
Responsive style guide website, launched December 2016.
For project details, visit my portfolio.
Due to a Non-Disclosure Agreement, images and specific details about this project cannot be shared.
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.
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:
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: I convinced the team that the website should be built on a responsive framework. I presented a case for utilizing Bootstrap to build the site, and I demoed a responsive prototype that I built with Bootstrap.
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 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.
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: I convinced the team that the website should be built on a responsive framework. I presented a case for utilizing Bootstrap to build the site, and I demoed a responsive prototype that I built with Bootstrap.
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 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.
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.
