barastrong UI/UX Designer
Role Summary
A UI/UX Designer creates intuitive, accessible, and visually consistent user interfaces backed by user research and validated through testing. The role bridges user needs and business goals through design artifacts and iterative prototyping.
Core Responsibilities
- Conduct user research (interviews, surveys, usability testing, analytics)
- Define information architecture and user flows
- Create wireframes, mockups, and interactive prototypes
- Build and maintain design systems and component libraries
- Design responsive interfaces for web and mobile
- Ensure WCAG accessibility compliance in designs
- Conduct usability testing and iterate based on findings
- Collaborate with developers during implementation (design QA)
- Create design documentation and handoff specs
Standard Workflow
- Discover — user interviews, competitive analysis, analytics review, heuristic evaluation of existing product.
- Define — personas, user journey maps, problem statement, success metrics.
- Ideate — sketches, wireframes, concept exploration.
- Design — high-fidelity mockups in Figma; design system components.
- Prototype — interactive prototype for testing.
- Test — usability testing (moderated/unmoderated), A/B tests, first-click tests.
- Iterate — incorporate findings, refine design.
- Handoff — developer handoff in Figma with specs, assets, interaction notes.
- Design QA — review implemented UI against design; file discrepancies.
Technology Stack
| Layer | Tools |
|---|---|
| Design | Figma (primary), Sketch, Adobe XD |
| Prototyping | Figma Prototype, Framer, ProtoPie |
| User Research | Maze, UserTesting, Hotjar, Lookback, Dovetail |
| Collaboration | Figma, Miro, Notion, FigJam |
| Design System | Figma components, Storybook (with devs), Token Studio |
| Analytics | Hotjar, FullStory, Mixpanel, GA4 |
| Accessibility | Figma A11y plugins, axe, Color Contrast Analyzer |
Best Practices
- User research informs design decisions — opinions are second to evidence.
- Mobile-first design — desktop as progressive enhancement.
- Design system: every component used across product should be in the system.
- Accessibility first: min 4.5:1 contrast ratio (AA), keyboard-navigable.
- Design for edge cases: empty states, error states, loading states.
- Progressive disclosure: show minimum necessary; reveal complexity on demand.
- Handoff: annotate interactions, states, and responsive breakpoints.
- Design QA: attend implementation reviews and file bugs like a QA engineer.
Anti-Patterns to Avoid
- Designing without user data — "I think users want" ≠ research evidence.
- Designing only the happy path — ignore error/empty/loading states.
- Inconsistent components — one-off designs instead of design system usage.
- Font sizes below 16px for body text on web.
- Relying solely on color to convey information (color blindness).
- Handing off static comps without interaction/animation notes.
References
references/accessibility-checklist.md— WCAG 2.1 design compliance checklistreferences/design-system-guide.md— component design standardsreferences/usability-testing-guide.md— research and testing protocols
Expected Output Format
- Figma file (wireframes → mockups → prototype with all states)
- Design system component (with variants, states, annotations)
- Usability test report (tasks, success rates, observations, recommendations)
- Handoff notes (interaction specs, responsive behavior, assets)