Stack Developer Product Designer

Xian Li

Senior Software Engineer Frontend Engineer Front End Developer Full-Stack Engineer

Frontend React Developer UI/UX Designer UX Researcher UI Engineer React Developer Product Designer

Manchester, England, UK *******@*****.*** LinkedIn Github Portfolio +44-788*******

Professional Summary

Experienced JavaScript/Nodejs full-stack developer with over seven years of expertise in problem solving and adapting to changing environments, building high-performance web applications. Creative vision with a wealth of knowledge in technology development, skilled in AWS Lambda, EC2, TypeScript, and cloud-based architectures, with a strong foundation in developing maintainable, accessible user interfaces using ReactJS, Remix, Next.js, and Tailwind CSS. Proven experience in Agile Development methodologies and capable of collaborating with cross-functional collaborative work teams to integrate cutting edge technologies efficiently. Visionary in product design, eager to contribute to large-scale applications with fast release cycles and responsibility for championing user-centric solutions across platforms, including emerging technologies. Eligible to work in the UK without sponsorship (Dependent of a Skilled Worker Visa).

Skills & Technologies

UX & UI Design: Wireframing, Information Architecture, Interaction Design, Accessibility, Usability Testing, High-Fidelity Mockups, User Journey Mapping, Design Thinking, Wire- framing, Quantitative Analysis, Qualitative Analysis, Focus Group, Workshop, Rapid Prototyping, Design Systems, User Insight, Visual Design, Responsive Design, Interaction Design, Typography

Design Tools: Figma, Adobe XD, Framer Motion, GSAP, Adobe Creative Suite, Adobe Illustrator, Illustrations, Vectors, Axure, Adobe Creative Suite Frontend Development: HTML, CSS3, vanilla JavaScript, TypeScript(Ts), ReactJS, Next.js, Remix, Tailwind CSS, React Router, ES6, Git, Version Control, Webpack, Babel, React Rouer V7 Backend & APIs: Nodejs, Express, GraphQL, Third-party APIs / RESTful APIs, Shopify API, SanityIO, Firebase, MongoDB, API Integration

State Management: Redux, Hooks, Context API, React Query Performance & Accessibility: Web Performance Optimization, WCAG Compliance, Mobile- First Design, Cross-Browser Compatibility

Agile Methodologies: Teams Collaboration, Trello, ClickUP, Agile Monitoring, Collaboration Tooling: Slack, Zoom, Team, Dropbox, Research & Testing: A/B Testing, User Research, User Interviews, Surveys, Usability Testing, Heatmaps, UX Analytics, Technical Knowledge, contextual inquiry, Data Analysis, Dashboarding, Data Analysis

Cloud & DevOps: AWS (Lambda, S3, CloudFront), Vercel, Netlify, Cloudflare Workers, AWS EC2, Ubuntu, SSH, Ci/CD Pipeline, Github Action

Data Visualization: Mermaid.JS,

eCommerce & CMS: Shopify Hydrogen, Klaviyo, SanityIO, Lucky Orange(heatmaps) Testing: React Testing Library, Jest

Experience

Product Designer & Founder (solo project) Apr 2025 – Present https://yttomermaid.xyz/

• Designed and launched a SaaS tool that transforms YouTube videos into structured mind map diagrams - ideal for quick summarisation, SEO keyword extraction, and visual brainstorming.

• Built full-stack using React Router v7 (framework mode), Tailwind CSS, nodejs, Express.js, and a custom Node server entry point.

• Integrated Gemini AI API for transcript analysis and Supabase to store user data and generated diagrams.

• Implemented user authentication, subscription payments (Stripe), and secure data handling, similar to financial-grade applications requiring reliability and compliance.

• Configured CI/CD pipelines via GitHub Actions and deployed to an Ubuntu-based AWS EC2 instance, using SSH and nano for real-time hotfixes and server maintenance.

• Developed an intuitive CRM dashboard with Shadcn/UI—prioritising clarity, exportability, and reduced user friction through thoughtful layout and UX design.

• Launched with 200+ newsletter subscribers and grew to 40+ authenticated daily users, validating early product–market fit and sparking developer community engagement.

• Architected for scalability, with future support markdown export, diagram download, and automated regression testing.

UI/UX Designer & Frontend Developer (remote work with a team of around 10 members) HireDev Agency Jul 2022 - Mar 2025

• Led UI/UX design and frontend development for multiple high-traffic projects, ensuring responsive, performant interfaces aligned with client and stakeholder business goals.

• Engineered responsive, high-performance web applications using Remix Framework, ReactJS, React Router v7, and GSAP - delivering immersive motion effects that enhanced engagement on social commerce platforms.

• Developed and integrated RESTful APIs using Node.js and Express, enabling secure data exchange between client-facing applications, CMS platforms, and third-party services.

• Developed high-fidelity designs, UI component library and clickable prototypes in Figma during the design phase, ensuring a seamless user experience and facilitating communication with clients using Trello.

• Partnered with content teams and external agencies to ensure CMS structures (e.g., SanityIo, custom headless setups) supported scalable publishing workflows while optimizing for SEO, localization, and user engagement.

• Maintained consistent styling, branding, and tone across all published content, applying best practices in layout, accessibility (WCAG), and formatting for a polished and inclusive user experience.

• Implemented automated testing practices with Jest and React Testing Library, and contributed to Cypress E2E validation to strengthen release confidence.

• Applied CI/CD pipelines, Git-based workflows, and agile ceremonies to streamline delivery, reduce regressions, and accelerate deployment cycles.

• Conducted web analysis using tools like Lighthouse and PageSpeed Insights to identify and fix performance bottlenecks, improving page speed, interactivity, and mobile usability.

• Used web traffic analysis tools such as GA4, HotJar, and facebook pixel tools to monitor traffic behavior and deliver actionable insights that informed UX refinements and stakeholder reporting.

UI Designer & Frontend Developer (Freelance) January 2017 – April 2022

• Designed custom illustrations, logos, and full website layouts using Photoshop, Illustrator, and Figma—ensuring visual consistency, strong brand identity, and emotionally engaging storytelling across digital platforms.

• Developed responsive, accessible UI components optimised for all screen sizes, with a focus on visual hierarchy, spacing, and intuitive interactions that improved engagement across client projects.

• Led frequent conversations with clients to gather requirements, clarify scope, and translate business goals into technical solutions, ensuring alignment between design vision and project delivery.

• Acted as both designer and developer, bridging the gap between stakeholder expectations and technical feasibility by explaining trade-offs and offering alternative solutions.

• Delivered full project lifecycles—from wireframes and prototypes to live deployment—while maintaining branding consistency, technical quality, and accessibility standards (WCAG).

• Provided post-launch support and iteration loops, incorporating stakeholder feedback into continuous improvements for usability and long-term client satisfaction. Digital Content & UX Coordinator Downtown Lawrence (NGO) July 2016 - Dec 2016

• Managed and structured weekly email newsletters via Mailchimp for a 20,000-subscriber base, ensuring content was visually engaging, accessible, and aligned with community initiatives to boost open rates and reader engagement.

• Designed posters, event promotions, and digital assets using Adobe tools to support local campaigns—enhancing outreach efforts and reinforcing brand consistency across print and digital channels.

• Maintained and updated website content through WordPress, reorganizing key navigation paths and improving content hierarchy to create a more user-friendly and accessible browsing experience.

• Analyzed user engagement data across email campaigns and web platforms, identifying content performance trends and making informed adjustments to layout, tone, and strategy for stronger audience connection.

• Collaborated with internal teams and local businesses to align digital communication with community objectives, helping the organization foster a more connected and informed downtown audience.

Digital Content & UX Designer Lawrence Public Library June 2014 - Dec 2015

• Designed visually engaging posters using Photoshop for integration into the library’s weekly newsletter, enhancing communication and engagement.

• Structured and formatted the newsletter content to improve readability and accessibility.

• Adapted Google Analytics research to analyze user behavior, identifying key trends and insights on how visitors interacted with the library website.

• Discovered significant user experience (UX) issues related to information architecture (IA), particularly in navigation and content discoverability.

• Provided recommendations to improve site structure and usability, making it easier for users to locate specific resources.

Intern World Health Organization (WHO) Jun 2013 - Sep 2013 Geneva Switzerland

• Adapted qualitative and quantitative analysis to examine how media coverage frames public health crises (HIV, diarrhea, pneumonia) in different countries.

• Analyzed media framing patterns using content analysis to assess sentiment, keyword frequency, and narrative trends in newspaper coverage.

• Identified how different narratives influence awareness, response, and public perception of marginalized communities in the report.

• Independently managed a research project under the guidance of a supervisor, refining data collection methods and iterating on findings to ensure accuracy and depth.

•

Selected Work Projects

https://www.ridesnmotion.com/

• Revamped the client’s eCommerce platform using Shopify Hydrogen, ensuring scalability, transaction reliability, and smooth product browsing across hundreds of SKUs.

• Integrated SanityIO as the CMS, enabling business stakeholders to efficiently manage large product catalogs, content, and promotions without developer support.

• Refactored complex frontend components by applying optimized data structures and rendering strategies, reducing load times and improving performance for data-heavy pages.

• Utilized Tailwind CSS, RemixJS, and Hydrogen to enhance responsiveness, modern aesthetics, and conversion-focused functionality.

• Mapped navigation pathways and purchasing flows to streamline usability, improve product discoverability, and increase customer engagement.

• Collaborated with Shopify for product management and structured Sanity as the authoritative content source, eliminating duplication errors and improving data integrity.

• Delivered measurable results: improved page load speed, reduced user friction in product browsing, and enhanced operational efficiency for business and financial stakeholders.

https://client.megaplanit.com/

• Reskinned and rebuilt the entire frontend UI based on Figma designs, serving as the solo frontend developer responsible for end-to-end implementation.

• Architected a CRM dashboard from the ground up using React and Chakra UI, providing a scalable, maintainable foundation for managing client operations.

• Implemented modular UI components, reusable patterns, and consistent theming, ensuring design fidelity and ease of long-term maintenance.

• Optimised rendering performance and responsiveness across desktop and mobile, enhancing usability for business stakeholders.

• Collaborated with designers and backend engineers to align frontend workflows with data structures and API endpoints, ensuring smooth integration with the CRM system.

• Delivered a production-ready dashboard that improved internal efficiency, streamlined stakeholder workflows, and reinforced consistency across the application.

https://new.hiredevs.com/ Beta

• Developed the entire frontend from scratch using Remix Framework, later migrating to React Router v7 for improved routing and performance while implementing SEO and performance enhancements, achieving improved load times and organic visibility.

• Engineered advanced GSAP animations, implementing complex motion effects to enhance user experience and engagement.

• Integrated Klaviyo API for marketing automation.

https://ownbosssupplyco.com/pages/past-winners

• Help the client add a new feature to the current production website. The hotspot map, when the user hover the hotspot, it would show the related winner. Selected Personal Projects

Naix Jewelry

• Designed and developed a custom Shopify store using RemixJS, Hydrogen, and Tailwind CSS.

• Grew brand awareness, reaching 150K monthly views on Pinterest and 5K Instagram followers.

• Implemented lazy loading, code-splitting, and caching for performance optimization.

• Integrated Google Analytics and Facebook Pixel to track user interactions, conversions, and ad campaign performance.

• Implement react error boundaries to catch and log UI errors, improving debugging and application stability for better user experience.

Zara 2.0

• Inspired by Zara, implement with Remix and GSAP for seamless, fluid animations. This innovative carousel features a horizontal main slider with nested vertical sliders, this design offers a unique, dynamic way to showcase content.

• Developed using Sanity CMS, it ensures a smooth user experience while maintaining flexibility and customizability.

Experimental E-Commerce Demo

• Developed a headless e-commerce SaaS prototype leveraging advanced GSAP animations for a highly interactive and immersive user experience.

• Implemented fluid transitions, motion design, and innovative UI interactions to push traditional e-commerce aesthetics.

Education

University of Sheffield – MA Global Journalism Sep 2012 - Sep 2013 Award Erasmus scholarship recipient

Technical Writings & Publication

• Authored technical articles on Substack covering web development best practices, including throttling, debouncing, functional programming, accessibility, frontend performance optimization, hydration, server side rending. Their accessibility-focused topics explore keyboard navigation (using the Tab key), screen reader compatibility, and form usability with native HTML elements, eg, <dialog> and <modal>.

• Dissertation: How Media Reportage Frames the Disclosure of HIV, Pneumonia, and Diarrhea in Public Health Narratives.

Contact this candidate