View all jobs
UI/UX Designer
Lagos, LagosJob Title: UI/UX Designer
Reports to: Product Owner
Location: Magodo Phase 1, Lagos
Job Type: Full-time/Hybrid
Experience Level: 4 - 6 Years
Position Summary
We are seeking an experienced UI/UX Designer to lead the design documentation efforts for the MarketEdge CRM platform. This role is critical to bridging the gap between product vision and development execution. The ideal candidate excels at creating comprehensive wireframes, detailed design specifications, and interaction documentation that enable developers to build pixel-perfect interfaces without ambiguity.
You will be responsible for designing all user-facing screens of our B2C CRM platform, creating a robust design system based on Ant Design, and producing documentation that serves as the single source of truth for the development team. Your wireframes and specifications will directly guide the Frontend and Full Stack developers in implementing the Customer 360 views, Campaign Management, Segment Builder, and other core CRM modules.
Project Context
MarketEdge CRM is a dual-mode (B2B/B2C) customer relationship management platform built on the IDURAR open-source framework. The platform serves QSR chains, hospitality businesses, and retail clients across West and East Africa, with a particular focus on the Nigerian market. Key features include customer profile management, loyalty program integration (Edge Card with Wema Bank), marketing automation, and omnichannel communication.
The design system must accommodate users ranging from cashiers at quick-service restaurants to marketing managers running enterprise campaigns, requiring careful attention to role-based interfaces and progressive disclosure of complexity.
Key Responsibilities
1. Wireframe Development
Create comprehensive wireframes that serve as the blueprint for all CRM interfaces:
Low-Fidelity Wireframes
•Develop rapid concept sketches for stakeholder alignment during discovery phases
•Create user flow diagrams mapping complete journeys through the CRM
•Produce information architecture documentation showing screen hierarchy and navigation
•Design content wireframes establishing layout structure before visual design
High-Fidelity Wireframes
•Build detailed, annotated wireframes for every screen in the CRM application
•Specify exact component placement, spacing, and alignment using the design grid
•Document responsive breakpoints showing mobile, tablet, and desktop variations
•Create interactive prototypes demonstrating user flows and micro-interactions
•Design all screen states: empty, loading, populated, error, success, and edge cases
Key Screens Requiring Wireframes
•Authentication: Login, password reset, SSO integration, MFA flows
•Dashboard: Role-based dashboards for B2B and B2C modes with KPI cards and visualizations
•Customer Management: Customer list with advanced filters, Customer 360 profile with tabbed sections
•Loyalty Module: Points balance display, tier visualization, redemption history
•Campaign Management: Multi-step campaign wizard, channel selection, content editor, scheduling
•Segment Builder: Visual query constructor with rule groups, operators, and live preview
•Support Ticketing: Ticket list, conversation view, agent assignment, SLA indicators
•Analytics: Interactive dashboards, report builder, data export interfaces
•Settings: User management, role permissions, integration configuration, tenant settings
•Global Components: Navigation, search modal, notification center, user profile menu
2. Design Documentation
Produce thorough documentation that eliminates ambiguity for the development team:
Functional Design Documents (FDDs)
•Write detailed screen-by-screen specifications describing functionality and behavior
•Document all user interactions: clicks, hovers, drags, keyboard shortcuts
•Specify form validation rules, error messages, and success confirmations
•Define data display rules: formatting, truncation, sorting defaults, empty states
•Create decision trees for conditional UI logic based on user roles or data states
Visual Specifications
•Provide exact measurements: margins, padding, component dimensions in pixels
•Specify typography: font family, size, weight, line height, letter spacing
•Document color usage: hex codes, usage contexts, accessibility contrast ratios
•Detail iconography: icon names, sizes, stroke weights, color variations
•Define shadow, border, and radius values for all component variants
Interaction Specifications
•Document animation parameters: duration, easing functions, trigger conditions
•Specify transition behaviors between screens and states
•Define loading patterns: skeleton screens, spinners, progress indicators
•Detail feedback mechanisms: toasts, modals, inline messages
•Create micro-interaction specifications for buttons, toggles, and form elements
Developer Handoff Documentation
•Prepare Figma files with proper layer naming, component organization, and auto-layout
•Generate design tokens exportable to CSS/SCSS variables
•Write implementation notes for complex components and edge cases
•Create component API documentation specifying props and variants
•Maintain a living changelog tracking design updates and their rationale
3. Design System Development
Build and maintain a comprehensive design system based on Ant Design:
Component Library
•Customize Ant Design components to match MarketEdge brand identity
•Design custom components not available in Ant Design: segment builder, journey canvas, loyalty widgets
•Create component variants for all states: default, hover, active, disabled, focused, error
•Document component usage guidelines with do’s and don’ts
•Build a Figma component library mirroring the React implementation
Design Tokens
•Define color palette: primary (#1E3A5F navy), secondary (#0D9488 teal), semantic colors
•Establish typography scale: headings, body text, labels, captions
•Create spacing system: consistent margin and padding increments
•Document elevation system: shadow definitions for layered UI
•Define border radius tokens for consistent roundedness
Pattern Library
•Design reusable patterns: data tables, filter bars, card layouts, form sections
•Create page templates: list view, detail view, wizard, dashboard
•Document navigation patterns: sidebar, breadcrumbs, tabs, pagination
•Establish feedback patterns: success/error handling, confirmation dialogs
•Define empty state patterns with helpful messaging and CTAs
4. User Experience Research
Inform design decisions with research and validation:
•Conduct stakeholder interviews to understand business requirements and constraints
•Create user personas representing key CRM user types: marketing manager, support agent, admin
•Map user journeys identifying pain points and opportunities
•Perform competitive analysis of CRM platforms: Zoho, HubSpot, Freshworks
•Conduct usability testing on prototypes with representative users
•Gather and synthesize feedback from development team on design feasibility
•Iterate designs based on user feedback and technical constraints
5. Collaboration and Communication
Work effectively with cross-functional team members:
•Participate in sprint planning providing design estimates and dependencies
•Present designs in stakeholder reviews explaining rationale and trade-offs
•Conduct design handoff sessions walking developers through specifications
•Respond promptly to developer questions during implementation
•Review implemented designs for accuracy and provide feedback
•Maintain design backlog and prioritize work aligned with development sprints
•Document design decisions in a decision log for future reference
Required Skills and Qualifications
Design Skills (Required)
•4+ years of experience in UI/UX design for web applications, preferably SaaS or enterprise software
•Expert proficiency in Figma including components, auto-layout, variants, and prototyping
•Strong wireframing skills with ability to rapidly produce low and high-fidelity wireframes
•Experience creating and maintaining design systems at scale
•Deep understanding of responsive design principles and mobile-first methodology
•Proficiency in creating interactive prototypes for user testing and stakeholder review
•Strong visual design skills: typography, color theory, layout, iconography
•Experience with data-heavy interfaces: tables, charts, dashboards, forms
Documentation Skills (Required)
•Excellent written communication for clear, unambiguous design specifications
•Experience writing functional design documents (FDDs) or similar technical documentation
•Ability to create detailed annotations explaining interaction behaviors
•Proficiency in documenting design tokens and component APIs
•Experience with design-to-development handoff workflows
•Strong organizational skills for maintaining large design file structures
Technical Understanding (Required)
•Familiarity with React component architecture and how designs translate to code
•Understanding of Ant Design (or similar component libraries) capabilities and constraints
•Knowledge of CSS concepts: flexbox, grid, responsive breakpoints
•Understanding of frontend performance implications of design decisions
•Familiarity with accessibility standards (WCAG 2.1) and inclusive design
•Basic understanding of REST APIs and how data flows between frontend and backend
Domain Knowledge (Preferred)
•Experience designing CRM, ERP, or enterprise SaaS applications
•Understanding of B2C customer lifecycle: acquisition, engagement, retention
•Familiarity with marketing automation workflows and campaign management
•Knowledge of loyalty program mechanics: points, tiers, rewards
•Experience with multi-tenant application design
•Understanding of Nigerian/African business context and user expectations
Tools Proficiency
•Primary: Figma (required – advanced proficiency)
•Prototyping: Figma prototyping, Principle, or ProtoPie
•User flows: FigJam, Miro, or Lucidchart
•Documentation: Notion, Confluence, or Google Docs
•Version control: Familiarity with Git workflows for design file management
•Communication: Slack, Zoom for remote collaboration
Soft Skills
•Exceptional attention to detail in both visual design and documentation
•Strong communication skills for presenting designs and receiving feedback
•Ability to work independently and manage multiple design workstreams
•Collaborative mindset with patience for iterative feedback cycles
•Problem-solving approach balancing user needs with technical constraints
•Comfortable working in a fast-paced, agile environment
•Proactive communication about blockers, dependencies, and timeline risks
Reports to: Product Owner
Location: Magodo Phase 1, Lagos
Job Type: Full-time/Hybrid
Experience Level: 4 - 6 Years
Position Summary
We are seeking an experienced UI/UX Designer to lead the design documentation efforts for the MarketEdge CRM platform. This role is critical to bridging the gap between product vision and development execution. The ideal candidate excels at creating comprehensive wireframes, detailed design specifications, and interaction documentation that enable developers to build pixel-perfect interfaces without ambiguity.
You will be responsible for designing all user-facing screens of our B2C CRM platform, creating a robust design system based on Ant Design, and producing documentation that serves as the single source of truth for the development team. Your wireframes and specifications will directly guide the Frontend and Full Stack developers in implementing the Customer 360 views, Campaign Management, Segment Builder, and other core CRM modules.
Project Context
MarketEdge CRM is a dual-mode (B2B/B2C) customer relationship management platform built on the IDURAR open-source framework. The platform serves QSR chains, hospitality businesses, and retail clients across West and East Africa, with a particular focus on the Nigerian market. Key features include customer profile management, loyalty program integration (Edge Card with Wema Bank), marketing automation, and omnichannel communication.
The design system must accommodate users ranging from cashiers at quick-service restaurants to marketing managers running enterprise campaigns, requiring careful attention to role-based interfaces and progressive disclosure of complexity.
Key Responsibilities
1. Wireframe Development
Create comprehensive wireframes that serve as the blueprint for all CRM interfaces:
Low-Fidelity Wireframes
•Develop rapid concept sketches for stakeholder alignment during discovery phases
•Create user flow diagrams mapping complete journeys through the CRM
•Produce information architecture documentation showing screen hierarchy and navigation
•Design content wireframes establishing layout structure before visual design
High-Fidelity Wireframes
•Build detailed, annotated wireframes for every screen in the CRM application
•Specify exact component placement, spacing, and alignment using the design grid
•Document responsive breakpoints showing mobile, tablet, and desktop variations
•Create interactive prototypes demonstrating user flows and micro-interactions
•Design all screen states: empty, loading, populated, error, success, and edge cases
Key Screens Requiring Wireframes
•Authentication: Login, password reset, SSO integration, MFA flows
•Dashboard: Role-based dashboards for B2B and B2C modes with KPI cards and visualizations
•Customer Management: Customer list with advanced filters, Customer 360 profile with tabbed sections
•Loyalty Module: Points balance display, tier visualization, redemption history
•Campaign Management: Multi-step campaign wizard, channel selection, content editor, scheduling
•Segment Builder: Visual query constructor with rule groups, operators, and live preview
•Support Ticketing: Ticket list, conversation view, agent assignment, SLA indicators
•Analytics: Interactive dashboards, report builder, data export interfaces
•Settings: User management, role permissions, integration configuration, tenant settings
•Global Components: Navigation, search modal, notification center, user profile menu
2. Design Documentation
Produce thorough documentation that eliminates ambiguity for the development team:
Functional Design Documents (FDDs)
•Write detailed screen-by-screen specifications describing functionality and behavior
•Document all user interactions: clicks, hovers, drags, keyboard shortcuts
•Specify form validation rules, error messages, and success confirmations
•Define data display rules: formatting, truncation, sorting defaults, empty states
•Create decision trees for conditional UI logic based on user roles or data states
Visual Specifications
•Provide exact measurements: margins, padding, component dimensions in pixels
•Specify typography: font family, size, weight, line height, letter spacing
•Document color usage: hex codes, usage contexts, accessibility contrast ratios
•Detail iconography: icon names, sizes, stroke weights, color variations
•Define shadow, border, and radius values for all component variants
Interaction Specifications
•Document animation parameters: duration, easing functions, trigger conditions
•Specify transition behaviors between screens and states
•Define loading patterns: skeleton screens, spinners, progress indicators
•Detail feedback mechanisms: toasts, modals, inline messages
•Create micro-interaction specifications for buttons, toggles, and form elements
Developer Handoff Documentation
•Prepare Figma files with proper layer naming, component organization, and auto-layout
•Generate design tokens exportable to CSS/SCSS variables
•Write implementation notes for complex components and edge cases
•Create component API documentation specifying props and variants
•Maintain a living changelog tracking design updates and their rationale
3. Design System Development
Build and maintain a comprehensive design system based on Ant Design:
Component Library
•Customize Ant Design components to match MarketEdge brand identity
•Design custom components not available in Ant Design: segment builder, journey canvas, loyalty widgets
•Create component variants for all states: default, hover, active, disabled, focused, error
•Document component usage guidelines with do’s and don’ts
•Build a Figma component library mirroring the React implementation
Design Tokens
•Define color palette: primary (#1E3A5F navy), secondary (#0D9488 teal), semantic colors
•Establish typography scale: headings, body text, labels, captions
•Create spacing system: consistent margin and padding increments
•Document elevation system: shadow definitions for layered UI
•Define border radius tokens for consistent roundedness
Pattern Library
•Design reusable patterns: data tables, filter bars, card layouts, form sections
•Create page templates: list view, detail view, wizard, dashboard
•Document navigation patterns: sidebar, breadcrumbs, tabs, pagination
•Establish feedback patterns: success/error handling, confirmation dialogs
•Define empty state patterns with helpful messaging and CTAs
4. User Experience Research
Inform design decisions with research and validation:
•Conduct stakeholder interviews to understand business requirements and constraints
•Create user personas representing key CRM user types: marketing manager, support agent, admin
•Map user journeys identifying pain points and opportunities
•Perform competitive analysis of CRM platforms: Zoho, HubSpot, Freshworks
•Conduct usability testing on prototypes with representative users
•Gather and synthesize feedback from development team on design feasibility
•Iterate designs based on user feedback and technical constraints
5. Collaboration and Communication
Work effectively with cross-functional team members:
•Participate in sprint planning providing design estimates and dependencies
•Present designs in stakeholder reviews explaining rationale and trade-offs
•Conduct design handoff sessions walking developers through specifications
•Respond promptly to developer questions during implementation
•Review implemented designs for accuracy and provide feedback
•Maintain design backlog and prioritize work aligned with development sprints
•Document design decisions in a decision log for future reference
Required Skills and Qualifications
Design Skills (Required)
•4+ years of experience in UI/UX design for web applications, preferably SaaS or enterprise software
•Expert proficiency in Figma including components, auto-layout, variants, and prototyping
•Strong wireframing skills with ability to rapidly produce low and high-fidelity wireframes
•Experience creating and maintaining design systems at scale
•Deep understanding of responsive design principles and mobile-first methodology
•Proficiency in creating interactive prototypes for user testing and stakeholder review
•Strong visual design skills: typography, color theory, layout, iconography
•Experience with data-heavy interfaces: tables, charts, dashboards, forms
Documentation Skills (Required)
•Excellent written communication for clear, unambiguous design specifications
•Experience writing functional design documents (FDDs) or similar technical documentation
•Ability to create detailed annotations explaining interaction behaviors
•Proficiency in documenting design tokens and component APIs
•Experience with design-to-development handoff workflows
•Strong organizational skills for maintaining large design file structures
Technical Understanding (Required)
•Familiarity with React component architecture and how designs translate to code
•Understanding of Ant Design (or similar component libraries) capabilities and constraints
•Knowledge of CSS concepts: flexbox, grid, responsive breakpoints
•Understanding of frontend performance implications of design decisions
•Familiarity with accessibility standards (WCAG 2.1) and inclusive design
•Basic understanding of REST APIs and how data flows between frontend and backend
Domain Knowledge (Preferred)
•Experience designing CRM, ERP, or enterprise SaaS applications
•Understanding of B2C customer lifecycle: acquisition, engagement, retention
•Familiarity with marketing automation workflows and campaign management
•Knowledge of loyalty program mechanics: points, tiers, rewards
•Experience with multi-tenant application design
•Understanding of Nigerian/African business context and user expectations
Tools Proficiency
•Primary: Figma (required – advanced proficiency)
•Prototyping: Figma prototyping, Principle, or ProtoPie
•User flows: FigJam, Miro, or Lucidchart
•Documentation: Notion, Confluence, or Google Docs
•Version control: Familiarity with Git workflows for design file management
•Communication: Slack, Zoom for remote collaboration
Soft Skills
•Exceptional attention to detail in both visual design and documentation
•Strong communication skills for presenting designs and receiving feedback
•Ability to work independently and manage multiple design workstreams
•Collaborative mindset with patience for iterative feedback cycles
•Problem-solving approach balancing user needs with technical constraints
•Comfortable working in a fast-paced, agile environment
•Proactive communication about blockers, dependencies, and timeline risks