Pattern Library for AllianceBernstein

AllianceBernstein is an Asset Management and Research firm, they have investment products in different geographies across the world. I worked with them on a project that involved designing the pattern library for their existing and new project. My day-to-day work involved, competitive, comparative analysis, research synthesis and designing lo-fi to hi-fi wireframes.

Internship Period – May 2018 – August 2018

Process Screen Shot 2018-09-11 at 10.35.02 AM

The pattern library components I worked on, were –

  • Homepage – Navigation, Header, Footer and Cards
  • Search & Filter for the homepage
  • Subscription page
  • UI for Events app

Research – 

Part of my role was to define user personas using previous research done by the firm. I synthesised the research from the historical data that came from interviews with users. Using the findings from this research I created user personas and how each user preferred to consume content. This research helped build a base to design the pattern library. For example, most users wanted personalization, and with pattern library, we tried to change the existing design of filters on the homepage.

Wireframing & Design – 

I worked on designing some of the key features/webpages which included the homepage, navigation, location filters for personalization, global search and subscription.

Subscription 

Product Finder - Literature Tab - DESKTOP
Hi-fidelity Wireframes for subscription page

 

Subscription

Events App 

Events Image2

 

Screen Shot 2018-10-25 at 12.48.46 AM.png

Iconography 

As part of developing the pattern library, I worked with my team to refine the icons for our sketch library and converted the designs from Illustrator to Sketch files.

Icons

At the time my internship ended, the team was working with front-end developers to develop the components and publish the library on the internal portal and Invision’s Design System Manager (DSM)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s