JG UX/UI Visual Designer

Component Framework

Centralized UI

Visual Design

UX/UI

Seamless User Flows

Prototyping

in UX/UI Design

Micro Animations

for UX/UI Design

Motion Graphic

Dynamic Lottie Animation

Collaboration

Development Resources

Tools

Let’s Collaborate

Contact

10+ YEARS OF EXPERIENCE

AS A UX/UI VISUAL DESIGNER

PROJECT OVERVIEW

ROLE: UX/UI Designer TEAM: Collaborated with product managers, developers, and content designers GOAL: Simplify user access to apps and settings with a streamlined, intuitive hub design

GOAL

Designers were spending excessive time recreating the same elements, such as CTA buttons, headers, and cards, for each project. This resulted in inconsistencies across products, slowing down the design process.

Using After Effects and the Bodymovin plugin, I created dynamic animations exported as Lottie files. I integrated JavaScript into the JSON files, allowing real-time updates to text and images based on user preferences and regional requirements.

Motion Design and 3D Graphics

SOLUTION

Dynamic Content for Global Users

I collaborated with developers to integrate dynamic updates into the JSON files, ensuring seamless text and image changes for regional content.

Immersive Concept – Thin Client

Creating Multi-Language Animation

DEVELOPMENT

CHALLENGE

The animation needed to support multiple languages and regions, requiring dynamic text and images to adapt based on the user’s location and preferences.

After applying for PayPal Credit, users were required to submit more information, such as confirming their name/DOB, home address, and taxpayer ID. The original process was unclear, causing confusion and resulting in users dropping out of the process.

“I wasn’t sure what to do next after applying. The instructions weren’t clear, and I found it confusing to submit the additional information. I almost gave up halfway through.”

My experience with JavaScript and database integration helps me bridge the gap between design and development, ensuring that my designs translate smoothly into code and align with technical requirements.

CUSTOMER QUOTE

I developed an Assembly Library featuring modular components + reusable frameworks.

My approach to design is all about collaboration, solving problems, and creating experiences that users love. Let’s work together to build something innovative, intuitive, and visually engaging.

DEVELOPMENT KNOWLEDGE

I redesigned the flow into clear, actionable steps that allowed users to confirm their details easily. The design included a document upload feature, progress tracking, and a review stage to allow users to edit their submissions before completing the process.

COLLABORATION

In collaboration with the developer team at PayPal, I created an intro animation for the app designed to dynamically adapt to different languages and regions. The goal was to provide a seamless and localized user experience by presenting personalized content based on the user’s location and language preferences.

FINAL SOLUTION

I’m always excited to connect with others who are passionate about creating seamless, user-friendly designs. Whether you’re looking for a UX/UI designer to bring your next project to life, or just want to chat about the latest trends in design and technology, feel free to reach out!

JESUS GONZALEZ

TEAM: Collaborated with product managers, developers, and content designers

YOU CAN CONNECT WITH ME THROUGH:

Let’s Make Something Great Together

For this project, I created a full UX/UI prototype to demonstrate the new design for the Dell Wyse Easy Setup 2.0 application. The prototype was crucial for showcasing the key benefits of the redesign, including improved navigation, user profile management, and streamlined admin controls.

GOAL: Streamline the process for collecting additional user information after a PayPal Credit application

Get in Touch

For ThinOS 9, we introduced microanimations during the OOBE, modernizing the onboarding process with smooth transitions. The goal was to keep the experience familiar for existing users while providing a refreshed, user-friendly flow for new users.

Faster updates: for localized content.Customized experiences: improving user engagement.Swift adaptability: meeting product managers’ content needs.Scalable solution: for dynamic, global content delivery.

Profile Management: Easily create, edit, or delete profiles.Simplified Alerts: Alerts guide admins and prevent errors.Enhanced Visual Feedback: Dynamic cues improve admin workflow.Default UI Settings: Default disabled options reduce confusion.

Users needed a way to manage multiple applications, system controls, and network connectivity without clutter or overwhelming complexity. The existing solution lacked organization and caused confusion, increasing the time users spent searching for essential tools.

Streamlining User Access

Understanding that not all users appreciate motion-heavy interfaces, we ensured that the microanimations complied with accessibility standards, providing a smooth yet gentle visual experience that avoids triggering motion sensitivity.

KEY BENEFITS

IMPACT

Templates combining core elements like CTA buttons, cards, carousels, footers, and headers. These modules adapt to different scenarios, reducing repetitive tasks.

Connect Manager Application

The final design created a central hub where users could efficiently navigate applications and manage network settings. By simplifying the workspace, reducing visual clutter, and positioning key elements for easy access, the Connect Manager improved workflow and user satisfaction.

ACCESSIBILITY FOCUS

Smooth Transitions for a Modern User Flow

Modular Components:

PORTFOLIO2024

linkedin.com/in/jrg56/

Provided stakeholders with a visual reference to review the new user flow.Guided developers on screen transitions, animations, and interactions for consistency.Used in user testing to gather feedback and refine the UX/UI before implementation.

ThinOS 9 – Microanimations for OOBE

As the UX/UI designer, I led the creation of all microanimations, ensuring smooth transitions and a seamless user experience. Working closely with my team, we implemented fade-in and fade-out transitions between screens and designed subtle animations for window transitions to enhance the flow. The team collaborated to review and refine each animation, ensuring consistency and alignment with usability and accessibility standards. These microanimations contributed to the following key improvements: Enhanced User Feedback.Guiding User Attention.Improved Flow.Delightful Interactions.Accessibility Considerations

Pending Application Flow

The primary challenge was creating a design that allowed admins to manage multiple users and profiles without overwhelming them with too much information. By integrating summaries, collapsible sections, and alerts, the prototype struck a balance between providing essential information and keeping the interface uncluttered.

jesus@jguxmedia.com

3D modeling and motion graphics showcased the product’s benefits in a visually compelling way.The video presentation effectively served as both a marketing tool and a system prototype demo, showing the complete Thin Client functionality.Subtle animations created a smooth and immersive experience for viewers.

MULTIPLE PURPOSES

GOAL: Simplify user access to apps and settings with a streamlined, intuitive hub design

“It took me too long to find the tools I used every day. I wanted everything in one place, without the clutter.”

Prototyping a Streamlined Admin Interface

Using the 3DCAD file provided by the product engineers, I applied textures and lighting in Cinema 4D, then created 3D renders for the animation.In After Effects, I animated the product rotation, allowing viewers to explore the Thin Client’s features interactively.I also designed and animated the UI screens, demonstrating the full system flow from boot-up to desktop usage.Subtle desktop background animations were added to create an immersive experience.The team collaborated to review and refine each animation, ensuring consistency and alignment with usability and accessibility standards.

We needed to modernize ThinOS without overwhelming existing users accustomed to the older version, while also offering an engaging experience for new users.

ROLE: UX/UI Designer

A ready-to-use app structure with headers, nav bars, carousels, CTAs, and keyboards, so designers can focus on their concepts without recreating foundational elements.

Dell Wyse Easy Setup 2.0

Reusable Framework:

Through prototyping, I visualized a seamless flow for profile management tasks, emphasizing clarity and ease of use. The animations between screen transitions and interactive elements, such as tabs and alerts, provided a smooth and intuitive user experience. This helped admins perform their tasks more efficiently while reducing the likelihood of errors.

The challenge was to develop a high-impact, visually engaging presentation that conveyed the features and strengths of the new Thin Client, while seamlessly integrating 3D motion graphics with clear, easy-to-follow system demonstrations.

From Graphic Design to UX/UI and Beyond

Dynamically update text for different languages based on user preferences.Swap images to reflect product requirements for each region.Create a scalable template that developers could easily update with minimal effort.

Tools Shaping My Design Journey

ACHIEVEMENTS

With over 10 years as a UX/UI Visual Designer and over 20 years in the design world, I bring a creative spark and technical know-how to every project. My background in graphic design sharpens my eye for detail, while my UX/UI skills focus on crafting smooth, user-friendly digital experiences. By tapping into a variety of tools, I create solutions that are both visually striking and easy to use, always with the user’s journey in mind.

• Figma: Collaborative design and prototyping. • Adobe XD: Interactive design tools. • Hype 4 Pro: Interactive web animations. • Whisk: Web development with HTML, CSS, and JavaScript.

UX/UI Centralized UI Prototyping Micro animations Motion Graphic Collaboration Tools Contact

VERSATILE DESIGN TOOLS

UX/UI & PROTOTYPING

• Adobe Photoshop: Advanced image editing and design. • Adobe Illustrator: Vector graphics and branding. • After Effects: Motion graphics and VFX. • Cinema 4D: 3D modeling and animation.

PayPal Credit

DESIGN & MOTION GRAPHICS

Assembly Library for PayPal

Content Box 4

Content Box 9

Streamlining Design with Reusable Components

At PayPal, I developed a comprehensive Assembly Library in Figma that empowers designers to efficiently create new projects by utilizing pre-built modules and components based on PayPal’s UI guidelines. The goal was to save time and ensure design consistency across all products.

To build a scalable design framework that simplifies the design process, enabling designers to focus on creativity while maintaining uniformity in structure, style, and component behavior.

For this project, our team developed an immersive video presentation to showcase the benefits of a new Thin Client concept. Using the 3DCAD file provided by the product engineers, I applied textures, lighting, and created 3D renders in Cinema 4D, which I used in After Effects to animate product rotations. I also animated screens to demonstrate the system’s flow from boot-up to usage, including subtle desktop background animations for an immersive experience.