Allebach was responsible for designing and building a new website for Univest. We were responsible for the front end development, leaving all the important banking parts to their internal team.

This was a great opportunity to work with a content-heavy website and was a excellent learning experience in creating content that could be shared across the site and managed from outside each page.

One of the requirements was to load a Facebook feed on the homepage. It required the Facebook page to change its permissions and for the developer account to have admin rights.

The feed is requested and parsed with Json.NET and displays the first message that isn’t empty.

Another requirement was to display a warning message on external links. The old website would direct visitors to a new page letting them know that they were leaving the website. The new website uses a JavaScript popup dialog box on links that don’t match the host.

Overall this was a great project that allowed me to get a lot of experience building a large website with unique content that gets displayed uniquely.

Branch Locator

The final piece to the website was a branch locator with Google Maps integration.

I made use of a Google Maps locator plugin that returned the latitude and longitude of a location and a custom form to process and return the results.

The Google Map required displaying customized information in the map popup and styling it with CSS.

I was able to customize each location with additional data including hours for various services which are displayed in a ColorBox modal window.

Retirement Ready Questionnaires (2013)

We needed to develop a new section of the website for Univest by creating questionnaires for people to gauge their retirement status.

We created a landing page that would allow visitors to view a video and provide a link to continue on to the questionnaire.

The questionnaires were just three-step-forms, managed by JavaScript. The first step of the questionnaire included the actual questions that visitors had to answer.

The questions were weighted and depending on the result a different video would playback.

The rest of the form was for collecting visitor data so they could be contacted about their retirement plans.

Form Output

Because the four forms followed the same format I decided to embrace laziness and create a helper that would automate the form output.

This would make it so that all four forms would be the same, markup wise and changes could be made in one place if needed.

I used tuples in a list to store the question text, answers and additional information, which was then passed to the helper and displayed as a form.

Gallery