NABPAC
Website and Portal Design
Problem
The NABPAC website is comprised of a public facing brand website (nabpac.com) and a private log in portal for registered users (nabpac.aristotle.com). The original problem presented was that the client wanted a redesign of the look and feel of both sites.
Research & Analyze
To understand the problem further, the first step was to gather user research by conducting a survey and collecting previous emails of frequently asked questions. After analyzing and researching both sites, some of the most commonly asked questions and pain points for users was trying to distinguish the portal from the website and being able to know where to find the information and resources they need since content lived on two separate sites with different url addresses (nabpac.com and nabpac.aristotle.com).
Using the card sorting method, I was able to lay out the sitemap of the previous two websites and created a new sitemap that categorized content into smaller buckets. The goal for this is to streamline content and create a simplified navigation system.
Ideation
By understanding that the biggest problem is that users are not able to distinguish the two websites, the goal was to create a different user experience between the two sites. For the public facing website (shown on the left), the first draft of the ideation was to create a basic website format with a navigation bar and a CTA button to the portal. For the portal (on the right side), I took out the original navigation bar since it was too similar to the public facing site and instead redesigned the entire website to create a dashboard experience with cards rather than making it seem like a desktop website. Both sites provide an easy access CTA button to jump back and forth between the two sites to create a seamless experience.
NABPAC public website wireframe
NABPAC portal wireframe
NABPAC public facing site homepage
NABPAC donor portal homepage after logging in
Documentation and Production
For the public facing website, I used Foundation Zurb as my front-end framework and built out the website using HTML, CSS and JS. This site lives in an internal server where I can develop and build out the site myself.
For the portal, since it is a PAC payment site, we have to take legal consideration since it involves financial contributions so my organization contracted a third party organization called Aristotle where I presented and documented my designs and handed it off to the developers at Aristotle.
unfortunately the Portal is only accessible by registered users only