Bridge the Gap Nlb Services at Buffalo Soldiers
Link to the Website: https://www.nlbservices.com/bridge-the-gap/#
NLB Services is one of the fastest-growing transformational workforce solution providers, headquartered in Atlanta with a presence in 15 global locations. Backed by a team of 8,000+ and cutting-edge digital capabilities, NLB Services empowers global enterprises to thrive in the digital age by leveraging a robust talent supplementation engine.
This project was a high-stakes, time-sensitive initiative aimed at addressing workplace diversity and inclusion gaps. With only 3 days for the design phase and another day for development, the challenge was to create a dynamic, visually appealing website with integrated motion graphics that effectively conveyed the company’s mission.
🙋🏻♀️ MY ROLE:
As the UX/UI Designer, I was responsible for designing the webpage layout, user flow, and overall user experience. Additionally, I took on the role of Motion Graphics Designer, creating all animations and exporting them in Lottie and JSON formats for seamless integration into the web development process.
Key Challenges:
- Time Crunch: Faced with a tight 3-day design window and just 1 day for development, I had to make fast, informed design decisions while collaborating efficiently with developers.
- Consistent Motion Graphics: I created high-quality, visually engaging motion graphics while optimizing them for web performance—ensuring smooth playback without compromising page load speed.
- Clear Messaging: I crafted a design that effectively communicated the company’s values of workplace diversity and inclusion in a concise, engaging, and visually appealing way.
Research & Conceptualisation, Inital first draft:
- Understanding the Client’s Vision: Gathered requirements in meetings with stakeholders to ensure the design aligned with the company’s mission of promoting a fair and inclusive workplace.
- Target Audience: Focused on the key message of diversity and inclusion, targeting HR professionals, enterprise clients, and the global workforce.
Wireframes & Prototyping :
- Rapid Wireframes: Created low-fidelity wireframes to outline the structure and flow of the website, keeping the user journey simple and straightforward.
- High-Fidelity Prototypes: Designed a clean, modern interface that reflected NLB Services’ digital-forward approach while highlighting key messages through bold visuals and engaging copy.
Motion Graphics Design :
- Animations: Since i initally just designed the motions in figma, once approved i had to create them in illustartor to transfer the vectors to after effects and add motions to the vectors.
- Lottie & JSON Integration: Created smooth animations and converted them to Lottie and JSON files for seamless integration into the website, ensuring lightweight files that didn’t impact load times.
These are just a couple of examples of how they looked once ready to integrate into the website code.
Development & Launch:
Developer Collaboration: Worked closely with the development team to ensure the website was fully functional, with all motion graphics implemented correctly.Testing & Optimisation: Conducted quick usability tests to ensure that the animations were smooth and the website functioned seamlessly across devices.
- Efficiency in Design: The project emphasised the importance of working efficiently under tight deadlines while maintaining high design standards.
- Collaboration: Close communication with the development team ensured the successful integration of motion graphics, balancing aesthetics and performance.