PIP COLLECTIVE

TYPE

Website

ROLE

UI Designer
VISUAL DESIGN
PIP Hero

About This Project

Challenge

Pip Collective, a team specializing in transforming companies into inclusive spaces, has expanded from their initial vision of educating others about diversity, equity, and inclusion practices to become a leading voice in the DEI community. To better meet the needs of their growing clientele, Pip wanted to adjust their website to reflect their energized approach to creating thoughtful DEI training, learning experiences, and focused content.

Solution

Revamp the website to showcase Pip’s exceptional talent and strengths as a community leader in DEI spaces. Enhance existing design aesthetics by developing focused conceptual assets and detailed micro interactions. Expand on their current brand identity system to add depth and professional recognition. 

Style Guide Directions

Style Guide directions indicate the 3 categories based off of client desires + then the insight matched with the desire. A desire to feel fresh, lets add colors that inspire contemporary web design aesthetics.

• Art Direction
PIP Style guide

Updating the brand for the web

After landing on a mixture of the style guides, I proceeded to create small components, select colors, and incorporate images, thereby developing three distinct options for a single page. These resources were developed within Webflow, the application that the client would be hosting and maintaining the site on. This approach allowed the client to actively participate in the process while also enabling us to collaboratively pinpoint a specific direction.

• User Interface
PIP user interface

Final Designs & WebFlow Hand Off

After completing the design of all the screens and obtaining approval for them, I proceeded to utilize Webflow in order to construct the website. I shared links with the client and conducted meetings for each page during the development phase to ensure their comprehension of the overall progress. Subsequently, I integrated email functionality, content management system (CMS) capabilities, and implemented light localization for the numerous blog posts. To assist the client further, I provided them with access to Webflow University and prepared a concise training guide for their reference. Finally, I handed off the finalized product to the team along with their SEO freelancer.

• Final Designs
PIP desktop 2PIP image 1
PIP blogPIP desktop
PIP- blog
PIP image 2
PIP collage
Tech-desktop-darkTech-mobile-mobile