UX PATTERN LIBRARY

a collection of reusable design solutions

 

the brief

Seagate had variety of internal and external applications, but no common repository to enable consistent user experience. They asked me to advise on defining patterns that would help bring all products to the desired benchmark of consistency, along with the new brand language that was being designed.

Experience Map. Documenting interview points as user experience map helped illustrate the mental flow of their needs, wants, expectations and overall experience for their particular goals.

Experience Map. Documenting interview points as user experience map helped illustrate the mental flow of their needs, wants, expectations and overall experience for their particular goals.

what i did

I interviewed Developers, Designers (external agencies), QA, and Business Analysts - to derive a pattern of recurring challenges in terms of shareable assets and knowledge.

I also reviewed online Pattern Libraries like Yahoo, MailChimp to get a sense of consumable content and structure. I worked closely with Tangible (an agency specializing in UX) to generate content for complex UI patterns. In parallel, I generated early wireframes to consolidate the findings and conducted Usability tests with a dozen hand-picked users.

Finally, I created user interface designs and played an active role in developing the platform using Wordpress.

Personas. Building user personas using the sample data collected from actual users helped represent a larger audience with common goals, attributes, concerns and behavior. This established a dialogue in terms of who I was designing for.

Personas. Building user personas using the sample data collected from actual users helped represent a larger audience with common goals, attributes, concerns and behavior. This established a dialogue in terms of who I was designing for.

key process and deliverables

  • User Experience Maps
  • User Personas
  • Scenarios and Task Flows (Current State)
  • Storyboarding (Desired State)
  • Wireframes
  • Usability Testing (Moderated and Unmoderated)
  • Visual Design
  • Site build out
Final Site.

Final Site.

Usability Goals.

Usability Goals.

Storyboarding.  Visualizing the desired user journey based on the current scenarios using quick and dirty sketches, helped articulate the potential features and interactions that would go into the Pattern library.

Storyboarding.  Visualizing the desired user journey based on the current scenarios using quick and dirty sketches, helped articulate the potential features and interactions that would go into the Pattern library.

tools and frameworks

  • Paper Pencil
  • UXPin
  • UserZoom
  • Adobe Photoshop
  • Adobe Illustrator
  • HTML/CSS
  • Bootstrap
  • Wordpress
Red lines.

Red lines.

Rise in team efficiency. Applications started exhibiting common and predictable behavior. Development time reduced. Consistency factor grew across Enterprise Apps. External design agencies got access to Seagate visual language online. 9000 users onboarded within first three months of release.