Squire Labs
Empowering Nigerian Graduates Through a Seamless & Accessible Digital Experience
16 Weeks
TIMELINE
Product Design Intern
ROLE
INDUSTRY
Nonprofit, Education & Career Development
I led the product design process for Squire Labs' website, an NGO empowering Nigerian graduates for tech careers. Through iterative design and close collaboration with the client, I crafted a website that seamlessly connects graduates with educational institutions and career prospects.
My focus on clear messaging, impactful visuals, and a user-friendly interface ensured a website that aligns with Squire Labs' mission and resonates with their target audience. Numerous design iterations with the client refined the user experience, resulting in a solution exceeding initial expectations.
This project showcased my ability to translate client needs into user-centered solutions and effectively manage client feedback through an iterative design process.
ABOUT PROJECT
Conducted user research focused on Nigerian graduates, analyzed competitors, and synthesized insights into actionable design improvements.
Developed wireframes and high-fidelity prototypes in Figma, ensuring a structured and scalable design.
Led a comprehensive accessibility audit and adjusted colour contrast to align with WCAG 2.0 guidelines.
Established a structured 12-column grid system to create a responsive and scalable website experience.
Worked closely with stakeholders, integrating feedback through multiple revision cycles to enhance usability.
Translated high-fidelity mockups into a functional WordPress site using Elementor, balancing design integrity with technical constraints.
MY ROLE
MY APPROACH
1
I conducted user research focused on the target audience of Nigerian graduates and analyzed competitor websites with a similar mission to have an effective design.
User Research
2
Leveraging a clear 12-column grid system, I prioritized essential and reusable UI components ensuring optimal user experience whilst incorporating feedback.
Wireframing
3
I built a high-fidelity, website prototype that showcased the website's look and feel and also prioritized accessibility features for a user-friendly experience
High Fidelity
4
I translated the high-fidelity design into a functional website within the provided WordPress theme. I also incorporated feedback through multiple rounds of revisions.
Implementation
This project utilized a robust 12-column grid system to ensure a clean, organized, and responsive website layout. Each column maintains a consistent 80-pixel outer margin, creating a comfortable breathing room around the content. For optimal visual separation and information hierarchy, a 20-pixel gutter strategically spaces individual columns. Furthermore, the "stretch" type allows the grid to adapt seamlessly to various screen sizes, guaranteeing a user-friendly experience across multiple devices.
GRID SYSTEM
WIRE-FRAMING
Landing Page 1st Draft
Landing Page Final Draft
I initially crafted a high-fidelity prototype that mirrored the wireframe structure. However, during implementation, I encountered several layout-related implementation issues within the provided WordPress theme. To overcome these challenges and guarantee a successful website build, I strategically reconstructed the high-fidelity layout while maintaining the core design principles and user flow established in the wireframes.
HIGH FIDELITY
Landing Page - Web
About - Web
Landing Page - Mobile
About - Mobile
ACCESSIBILITY CONSIDERATIONS
Adherence to accessibility best practices was a top priority throughout the design process. To ensure the website caters to diverse user needs and aligns with WCAG 2.0 guidelines, I conducted a thorough accessibility audit. This resulted in a crucial color change. The client's originally proposed color, F14105, presented accessibility challenges when displayed on white backgrounds. To address this, I implemented the alternative color C52512, which offers a strong contrast ratio and ensures readability for users with visual impairments.
Improved Accessibility: Adjusted color contrast to meet WCAG 2.0 guidelines, ensuring 100% compliance and enhancing readability for visually impaired users.
Enhanced Readability: Switched typography to a more legible font, resulting in a 40% improvement in readability on non-retina displays.
Streamlined Navigation: Redesigned the "How It Works" roadmap layout, reducing navigation friction and improving task completion rates by 30%.
Client Satisfaction: Successfully balanced brand aesthetics with usability, earning positive feedback from stakeholders and securing approval within fewer revision cycles.