Who I Am

Get to know me better.

I am a Senior UI/UX Designer and Engineer with a decade of experiences in creating user-centric web applications. Proficient in modern design applications like Sketch, Adobe XD, and Figma for conceptualization, prototyping, wireframing, user interface, and user experience (UI/UX) design. Have vast experience with modern web technologies such as HTML5, CSS3, JavaScript, NodeJs, ReactJs, VueJs, AngularJs, NextJs, NuxtJs, ElectronJs, and TypeScript. I specialize in conducting user research to gather insights into user behaviors, leveraging meticulous A/B testing to improve conversion rates, project performance enhancements, and optimization. My passion is pushing the boundaries of design and development to create innovative, user-focused solutions with readable, maintainable, and scalable code.

Experiences

List of awesome wokplaces

SAM Media
Senior UI/UX Designer and EngineerSAM MediaManitoba, CanadaNov 2021 – Present

Liable for providing concept design, user story, wireframing, and prototyping landing pages for the organization services utilizing design applications such as Figma and Adobe Creative Cloud Apps such as Photoshop, Illustrator, Premiere, and After Effects.

Responsible for converting the design into a working application using ReactJs or NextJs with ReduxToolkit or Zustand, VueJs or NuxtJs with Vuex or Pinia, and testing each reusable component in isolation with Storybook.

Propose and implement persuasive design elements on every landing page achieving a 15% boost in conversion rates. Conducting meticulous A/B testing bi-weekly to validate ideas or hypotheses, and refining user experiences (UX) resulting in a significant 16% growth in customer engagement and retention.

Independently design and build the needed banner library application for the organization with NextJs and Firebase, where the design team can upload and share approved Google Ad banners with the company's partners and affiliates.

Working closely with DevOps for continues integration and continues deployment (CI/CD) of the company's applications utilizing GitLab, Docker, Kubernetes, and Jenkins for automating build, test, and deployment to any cloud services like Amazon Web Services (AWS), Microsoft Azure, Vercel, and DigitalOcean.

Managing, guiding, and mentoring a team of six, providing and receiving feedback, promoting a culture of collaboration with Agile methodology, and encouraging personal development, resulting in an impressive 24% increase in team productivity.

Introduce linting with the use of ESLint and StyleLint to encourage a simple, clean, reusable, easy-to-maintain, and scalable code base. Responsible for reviewing project merge and pull requests, reducing code defects by 16%, and improving overall code quality.

Responsible for identifying, diagnosing, and solving production design and engineering issues, maintaining the visual and functional integrity of the application, and providing valid estimates and deadlines for feature developments.

Worked with talented engineers to design and integrate cutting-edge machine learning (ML) and artificial intelligence (AI) capabilities into the organization's internal applications, enhancing reports, analytics, and other business aspect of the application.

Integrate best practices and principles for user interfaces, and user experiences (UI/UX) to enhance the accessibility and usability of the application, implement design systems and guidelines to accelerate the design and development process, and ensure design supports the organization's strategic goals and business objectives through collaboration with product, marketing, and operation teams.

Digital and Code DMCC
Senior Front-End EngineerDigital and Code DMCCDubai, United Arab EmiratesJul 2020 – Sep 2021

Utilizing Sketch and Figma to produce concepts, wireframes, and prototypes. Crafting design assets with Adobe Photoshop or Illustrator, and animation through Premiere or After Effects to provide a visual and possible user experience to the clients before the project development.

Accountable for converting the approved project design into a functional application by leveraging modern web frameworks such as ReactJs, VueJs, and AngularJs, focusing on creating readable, maintainable, and scalable solutions for clients.

Has direct contact with clients to understand business goals, clarify the project requirements, receive direct feedback, and manage expectations. Additionally, to communicate project timelines, address any concerns or issues promptly, and ensure alignment of the project design solutions and the client's vision.

Introduce and implement development best practices and coding standards, including modularization, code reusability, and performance optimization to ensure efficient and maintainable codebases. Achievable by taking advantage of Git hooks with Husky, reducing bug occurrences by 16% on the projects.

Present the use of BrowserStack and LambdaTest to the organization, resulting in an 80% improvement in visual design consistency across all browsers and devices. By conducting thorough testing and troubleshooting to address browser-specific issues and edge cases.

Collaborating with DevOps to implement continued integration and development (CI/CD) for the client's applications utilizing GitHub Actions, Docker, and Jenkins for the build, test, and deployment automation.

Accountable for optimizing and enhancing application performance, attaining at least 90% on Core Web Vital (CWV) scores, using Lighthouse, GTMetrix, and ByteCheck. Responsible for ensuring the mobile-first approach on every project, prioritizing accessibility, page loading times, SEO rankings, and ease of use.

Learned how to strategically organize project feature development, conducting extensive project unit and API testing through automation with Jest, Mocha, and Jasmine, and efficiently supervising merge and pull requests.

Leading a team of four and conducting regular discussions to identify automation opportunities that can enhance team productivity. Ensure alignment with team goals, provide support, advise, and foster an environment that encourages personal and professional growth. Promoting continuous collaboration and improvement to each member to reach their full potential while driving the overall team's overall success.

Responsible for managing and generating documentation for the client's project utilizing Atlassian and Jira. This involved creating a roadmap for future development and ensuring seamless project maintenance.

Al Tayer Insignia
Front-End EngineerAl Tayer InsigniaDubai, United Arab EmiratesOct 2017 – Jun 2020

Responsible for designing the user interface and experience (UI/UX) for e-commerce applications of renowned brands such as Gap, Mamas and Papas, Nisnass, and Ounass. Taking advantage of the Sketch features like team collaboration, component management, artboards, plugins, and extensions.

Transforming design into a working application, utilizing modern development technologies such as NodeJs, ReactJs, VueJs, and AngularJs. Leveraging server-side rendering (SSR) to improve search engine rankings (SEO) and website visibility, achieving a 16% increase in organic traffic and user acquisition.

Working closely with Magento, back-end, and full-stack engineers to plan and discuss API implementation and improvements. Providing recommendations on request parameters and response structure for the application.

Introduce and integrate Contentful to all organization e-commerce applications. Harnessing the headless content management system (CMS) for content modeling, used by the marketing team for customizing the application landing pages, based on digital merchandising requirements.

Proposed and implemented a progressive web application (PWA) to improve performance and take advantage of the caching capabilities of the technology, improving page loading time and user satisfaction by 24%.

Learn to use BrowserStack to conduct thorough testing and troubleshooting to address browser-specific issues and edge cases, resulting in an 80% improvement in interface and experience consistency across all browsers and devices, and reducing QA-reported issues by 40%.

Assisting in constructing and maintaining development documentation for efficient collaboration, reducing the learning curves for new developers, and guiding future enhancements, feature additions, and scalability improvements.

Collaborating with cross-functional team to discuss the project's continued improvements in development processes and workflows, ensure that the applications comply with accessibility standards (WCAG), and deliver strategic solutions to align with the business objectives.

Design compelling digital marketing materials for the marketing team, including visually appealing graphics for social media, user-friendly designs for newsletters, and engaging assets for online advertisements. Collaborating closely with digital marketers to ensure alignment with campaign objectives and brand guidelines.

Learned security best practices to protect against common vulnerabilities by conducting security audits and writing secure code to prevent attacks like Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and SQL injection. This ensures the application remains robust, secure, and trustworthy for users.

First Screen FZ LLC
Product Designer and DeveloperFirst Screen FZ LLCDubai, United Arab EmiratesJun 2013 – Sep 2017

Accountable for designing eye-catching landing pages using Sketch, creating graphics and media materials with Photoshop or Illustrator, and applying persuasive design elements, achieving a 24% uplift in conversion rate and a reasonable effective cost per action (eCPA).

Worked with back-end engineers to create a system for converting approved landing page designs into HTML and CSS. The system was built using modern technologies like NodeJs, ExpressJs, GulpJs, and MongoDB. The application has built-in analytics and enables the marketing team to easily promote landing pages to their campaigns.

Ensuring all landing pages are fully responsive, providing a seamless experience across various devices and screen sizes. Utilizing frameworks like Bootstrap, Bulma, Foundation, and Tailwind to maintain visual and functional consistency.

Supporting the digital marketing team by providing materials and assets required for their campaign. This includes assets for engaging content for newsletters, eye-catching visuals for social media posts, and effective graphics for online advertisements.

Ensuring organization service websites comply with Web Content Accessibility Guidelines (WCAG) by implementing accessibility best practices. This not only enhances usability for all users but also improves search engine optimization (SEO) scores, leading to enhanced visibility and a broader audience reach.

Responsible for designing the organization's service identity by utilizing Adobe Illustrator to sketch, conceptualize, and create distinctive and visually appealing representations. Ensuring that every design aligns with the brand's essence, values, and overall visual strategy.

Continuously sharing knowledge, giving and receiving feedback from the team, and holding regular discussions to determine automation opportunities that can improve team productivity and enhance efficiency.

Analyzing and improving the landing page funnel to boost conversion rates by using data-driven insights and A/B testing to enhance the user experience and ensure a seamless and engaging journey from initial entry to successful conversion.

Enhancing organization applications by integrating third-party APIs such as Google Analytics for tracking user behavior, MailChimp for managing email marketing campaigns, and social media APIs for embedding social content and enabling social sharing.

Actively researching and staying updated on the latest trends, technologies, and best practices in design and development. Incorporating new tools, frameworks, and techniques to enhance the performance, usability, and aesthetics of landing pages.

First Mobile Wallet FZ LLC
Product Designer and DeveloperFirst Mobile Wallet FZ LLCDubai, United Arab EmiratesOct 2012 – May 2013

Working with product managers and engineers to design and develop the company's product website and services by using Sketch and Adobe Photoshop to construct ideas, wireframes, and prototypes a design, and employing web technologies like HTML5, CSS3, JavaScript, and jQuery for development.

Responsible for leading the development of comprehensive design systems, which involves creating design components and establishing detailed design guidelines for the entire design team to follow.

Creating detailed project documentation tailored for front-end engineers making use of Atlassian Confluence, which provides an excellent platform for sharing and collaborating on project documentation.

Collaborating with back-end engineers to seamlessly integrate the organization service with back-end systems, ensuring secure data flow and interoperability across the application. This involves developing robust APIs and communication protocols to facilitate efficient data exchange.

Learned and implemented responsive design principles to ensure optimal user experiences across various devices and screen sizes. This includes using flexible layouts and media queries to adapt the layout and content presentation dynamically based on the device viewport.

Performing thorough testing and troubleshooting across different browsers and devices to address user interface and experience (UI/UX) issues. This involves performing cross-browser testing, debugging JavaScript and HTML code, and ensuring consistent interface, experience, and functionality across platforms.

Learned how to optimize the application through various techniques such as code optimization, image compression, and server-side caching. These are identifying and resolving performance bottlenecks, reducing page load times, and improving overall site speed.

Studying application metrics and user feedback to identify areas for improvement and enhancements to the user experience. This includes conducting A/B testing and making data-driven decisions to optimize website performance.

Staying updated on emerging design and development technologies, tools, and best practices to maintain a competitive edge and drive innovation in creativity and engineering.

Working with an amazing team of four, conducting regular discussions for opportunities that can enhance team productivity, and ensuring that our team is alignment with the organizational goals.

For more experiences and a comprehensive list of projects, please visit my LinkedIn profile  linkedin.com/in/genesisobtera

Expertise

The skills I learned
and mastered.

Web Design
Embark on a transformative web design journey with me. With over eight years of experience, I specialize in crafting visually stunning, user-centric websites tailored precisely to your unique needs. My web design service ensures your vision materializes with unmatched style and substance, delivering digital experiences that captivate and resonate with your audience.
Brand Identity
Discover the essence of your brand with my brand identity service. With years of expertise, I create cohesive brand experiences that define your unique identity. From logo design to comprehensive brand guidelines, I’ll ensure your brand’s story is told consistently and compellingly, leaving a lasting impression on your audience.
Presentation
Elevate your message with my presentation service. With a keen eye for design and an understanding of effective communication, I’ll transform your ideas into engaging visual narratives. Whether it’s for a pitch, a keynote, or a report, I craft presentations that captivate and convey your message with clarity and impact.
Prints
Enhance your brand’s physical presence with my print service. From business cards to brochures, I combine design expertise and attention to detail to create stunning print materials that leave a lasting impression. Elevate your brand’s identity and stand out in the tangible world.