Project Overview

Snap is a digital library consisting of three parts: a Design Guide, UI Framework and common, reusable Angular Components. Snap’s goal is to standardize application design and development while delivering products quicker to market.

My Role & Responsibilities

When I started at Arrow, there were no digital guidelines to follow, thus creating inconsistent user experiences in each application that was produced. I began documenting design standards by first taking the Arrow branding guidelines and applying it to the digital world to create a Style Guide. Next, I created a Design Pattern Library by defining common patterns, applying a standard look and feel, and documenting how they should behave. Snap now houses over 40 design patterns for use in a wide range of applications.

A design library doesn’t hold much value, however, if it is up to each unique developer to produce applications that follow the guidelines; inconsistencies still happen. To try and limit these disparities, I personally developed a generic UI Framework that transforms the guidelines into HTML and CSS code. It uses Bootstrap’s Grid as the base for page structure, but every pattern and component was hand-coded for Arrow’s specific use case. This framework has eliminated the need for Photoshop UI design work; wireframes can now move seamlessly into HTML prototypes which then can be directly adopted by the technical team.

I took the notion of developing patterns even further, by managing development efforts to combine the documented expected behavior and the HTML & CSS in the UI Framework into reusable Angular components. There are over 20 Angular components available to the technical team to simply drop into their applications and use.

Snap now drives the styling, layout, and Angular components in over 15 applications, on both desktop and mobile devices. I won the Arrow ECS Five Years Out Innovation award for concept and production of this library.

Skills Used

• Product Owner
• Project Manager (Managed workload in Trello)
• Creation of Style Guides
• Creation of Pattern Libraries
• Documenting Design Standards
• UX & UI Design (Adobe Photoshop, Sketch)
• HTML & CSS