Professional Diversity Network works with employers to pair with PDN members who are serious in building a diverse work environment. PDN has 7 unique affinities; Pro Able, Outpro, iHispano, Black Career Network, Women's Career Channel, Asian Career Network, and Military 2 Career. Employers who are recruiting post jobs on the PDN site for members of any affinity to apply for.

My role was to design the entire homepage with no other designers. My main partners were the digital marketer, project manager, and the developing team.

  • ART DIRECTION
  • MARKETING
  • VISUAL IDENTITY
  • UX
  • UI DESIGN
  • WIREFRAMING
  • RAPID PROTOTYPING
 
desktop&Mobile.jpg

CASE STUDY

 

problem

PDN has 7 affinities under its belt. Users were confused on how to navigate through all affinities. All websites had a bad tone of color that did not make it distinct from the other. Next, the homepage did not have a lot of information for its clients (Employers) and job seekers.  And finally, making a responsive website for desktop and mobile platforms.

 

Solution

Part of the solution was to rebrand all the affinities with unique colors that will separate them from one another, while having the same tone across all affinities. Improving the typography throughout website and mobile. Having a second navigation in the homepage with rich information for both employers and job seekers. And making a friendly website for both desktop and mobile. 

 

Original Website

 

Examples of Original Affinity Pages

Here are two examples of how the Pro Able and iHispano websites looked. Most of them were inconsistent; pages range from size, headers were different size, small images, large colored backgrounds. 

example.jpg
 

Initial Thoughts for Original Website

currentwebcomments.jpg
 

Sketches and Ideation

During the ideation phase, I started by sketching ideas of the content and wireframing the website. At this time, I collaborated closely with the digital marketer to receive the content of the website. Since it was still early from designing anything, the digital marketer would provide me with information of necessary content that needs to be in the page, while still understanding that many changes will come in the future. The sketches below were used for the content and layout of the website. When sketching out the page, I was thinking in blocks to make sure the content would also fit in a mobile website.  

 

Working With A New Color Palette

Most of the colors of the old website did not fit the new modern style of the redesign homepage. The project manager asked me to come up with new colors that have a more "creamy" look.  I wanted to include colors that have similar tones through out all networks. Some of the problems before were that some colors were too bright and some colors were too dark. I also wanted Outpro and Women's Career Network to have a different version blue, whereas before, they looked alike. Similarly, I changed the similar colors with Asian Career Network and Military 2 Career. 

 

High fidelity prototype

The chief marketer wanted to see a working prototype of the website before I started working with any developers. I decided to work with InVision App to produce a prototype for the presentation and use the prototype  to show the developers further down the road. 

 

Final Designs

 

Animations