× My Work   User Experience   Interface / Web   Visual Resume About Me Contact




CLIENT: Pentagon Federal Credit Union
BRIEF

    PenFed, is a United States federal credit union headquartered in McLean, Virginia, chartered and regulated under the authority of the National Credit Union Administration (NCUA). PenFed is the nation's third largest federal credit union, with assets of $23 billion and more than 1.6 million members as of July 2017.

TOOLS

    Sketch, Illustrator, Invision, HTML/CSS and Adobe Experience Manager.

MY ROLE

    User Experience, User Interface, Visual Designer, and Web Producer.




RESEARCH & DISCOVERY
Which Components to use for this Site Relaunch?

    During this website overhaul, which involve the migration to a new CMS. I had alot of different roles from creating visual infographics, user interface, to a web producer. One of my first tasks was to redesign content pages, using familar UI elements. There were a number components being used and ofcourse a style had to be maintained.

Affinity Partner Content Pages:
    PenFed has relationships with numerous associations; United States Army Warrant Officers Association, United States Coast Guard Auxiliary (USCGAux), National War College Alumni Association, etc. I was tasked with reorganizing the content for these pages. I had to use certain components that showed a same pattern and theme throught designs.

Web Responsive Dropdown Icon Menu
    Creating a new site navagation. We wanted to try visual elements to distingish each 2nd teir catagory items. For example, savings would indicate piggy bank symbol. I looked a competitor sites to see how iconography was treated. Chase used icons from a dropdown menu, while Wells Fargo used icons in there hero image sections. Both used flat outline icons. So proceed to create with a similar pattern.

Competitors websites

FIXED vs ARM infographics
    How to visually show the different between ARM vs FIXED. I first had to research the different between Adjustable-rate mortgages (ARM) and a Fixed-rate mortgages (FIXED). Then create a graph that showed the difference between the rates.

Visual Design Infographic




MOCKUPS & IDEATIONS
Comps

    One of the AFFINITY PARTNERS pages. There were a series of card components used, to make the site more responsive.

Before
After



PROTOTYPING
adding more submenus

    After validing on icons I created, I did my first round of prototyping, using sketch and invision. Then another teir of information was added on after the icons, making more complex...





OUTCOME

    We ended up using a megamenu for the dropdown menus just because it made more sense to have all the information show hovering over each section as oppse having have to hover over a section and an icon to uncover more information.




My Work


Say Hello

Want to get in touch?