Experience Design Engineer

UX Design, WireFrames, Prototypes, HTML, CSS, jQuery, Design Patterns

Experience Designer Engineer in San Diego

I am always evolving as a designer, and every day I explore new thoughts and ideas. I embrace these experiences as opportunities to expand my creativity..

Experience Design: What can be better than making a project that you love interactive? Sketch, prototype, test, observe, experience, and then repeat.

Visual Design: I enjoy being inspired and then creating my own work in every aspect of design from typography - color theory, to code development, and user testing and more.

What I know - Code

I obtain mastery through practice with a long history of experience in using web technologies. It’s been said that 10,000 hours of practice leads to mastery and that’s the goal I aim for in each skill.

This portfolio site was created with HTML5, CSS3, Bootstrap 3, Beg Level JS, JS Plugins (ex. animate.js), and jQuery. In the past 2 years, I have focused on expanding my expertise in software prototype development. In 2013, I learned to organize code from Spaghetti JS Code to Object-Oriented JS Code. I progress with better code writing with a knowledge of inheritance, scope, and templating to keep code organize and easier to read. With the understanding of templating, I began learning Ruby-On-Rails : Models, Views, Routing, and Controllers. With this new knowledge of Ruby-On-Rails, I am able to create a working database to make close to reality prototypes.

For more details review Resume.

8000 hrs - b. 2010 - prev. HTML4 knowledge since 98
8000 hrs - b. 2010 - prev. CSS2 knowledge since 05
6000 hrs - Focus Logic 2011 - prev. Dabble since 08
6000 hrs - Focus Logic 2011 - prev. Dabble since 05
4000 hrs - b.2012 - Used Solo & Bootstrap2-3
700 hrs - b.2013 - Templating for Modularity
1000 hrs - b.2012 - MVW framework
1000 hrs - b.2012 - D3JS - Data Visualization

What I know - Design & UX

I appreciate every job and project experience I had over the years. I have worked with some incredibly smart people and great leaders. As of 2014, I am dedicated to work on a UX team and focus bring the team ideas to life developing prototypes with web technologies. Prototypes that can be immediately user test for confirmation of workflow, taskflows and feature enhancements for existing products and new products. This year, I have the beautiful chance to get in front of the project before dev and production development starts. ( Allowing the freedom to get prototypes in front of the user. ) With a UX team, there is time for Competitive Analysis, Usability Heuristics, User Testing, and more more research and development using prototypes. The things I love and why I am in this industry.

For more details review: Recent Works.

8000 hrs - b. 2010 - Usability Heuristics
8000 hrs - b.2010 - Paper & Digital Prototyping
3000 hrs - b. 2011 - Competitive Analysis
2000 hrs - b.2012 - Mobile Design Patterns


( click titles to view details )

Education & Credentials

  • Master of Fine Arts, Web Design and New Media
  • Academy of the Arts University, San Francisco, CA – May 2011
  • Bachelor of Fine Arts, Multimedia and Communication Design
  • University of the Arts, Philadelphia, PA – May 2001

Interaction Design Experience


  • Cross-Browser coordination, testing, and improvement for early warning plans/procedures.
  • A/B Multivariate Testing for user conversion using Google Website Optimizer and service.
  • Created wireframes and prototypes for websites and followed through planning for deployment completion. Prototypes are created through HTML,CSS, Javascript, and JQuery.
  • Studied use cases, user scenarios, target audience research to maintain the focused plan of web design products, such as email newsletters, banner ads, and landing pages.
  • Javascript and JQuery - research frameworks and libraries that would simplify the usability of the website for the end user, as well as redefined the code to match the usage of the web product.

Graphic Design Experience

  • Graphic Design & related skills (10+ years)

  • Exceed at visual design implementation and studies. Proficient in Adobe CS6 Software: Photoshop, Illustrator, InDesign, Flash, After Effects, and Premiere.
  • Understand and practice typography, grid layout, color theory, hierarchy and maintain corporate branding identity standards.
  • Practice standards for Typography for Web and Mobile.
  • Familiar with Kinetic Typography for Motion Graphics.

Employment History

March ‘14 – Present Experience Design Engineer Room5, Inc..
March ‘14 – Present Sr. Experience Design Engineer UCSD VirBELA.
San Diego,CA
April ‘13 – March '14 User Interface Engineer Leadfusion, Inc..
San Diego,CA
Feb ‘13 – Present Volunteer User Interface Engineer Ignittion, LLC. - NonProfit.
San Diego,CA
April ‘12 – March '13 Sr. User Interface Designer LPL Financial Services.
San Diego,CA
Sept ‘11 – April'12 Freelance Interactive Designer
(Clients: XEROX, TIBCO, Metaswitch Systems)
RexiMedia, LLC.
San Francisco,CA
Nov ‘10 – Nov ‘11 Senior Freelance Web Designer
(Clients: ReMax, Keller Williams Realty, Jupiter Lighthouse Realty)
KimajinStudios, LLC.
San Diego, CA
May ‘08 – Aug ‘08 Freelance Graphic/Web Designer
San Francisco, CA
Aug ‘07- Aug ‘10 Graphic Designer & Web Ad Developer PsPrint, LLC.
San Francisco, CA
Sept ‘05- Sept ‘06 Lead Graphic Designer & Web Developer Potreromedia, LLC.
San Francisco, CA

Technical Proficiency

  • Adobe CS6 ( Photoshop, Illustrator, InDesign, Flash, Dreamweaver, After Effects, and Premiere )
  • Adobe Edge ( Inspect, Reflow, PhoneGap )
  • Languages: CSS3, HTML5, (Mid-Level) Javascript
  • JS Libraries: (Mid-Level) jQuery, (Mid-Level) jQuery Mobile, (Mid-level) D3JS, (Beginner) UnderscoreJS for Templating, (Beginner)AngularJS
  • Wireframes- Balsamiq Mockups for Desktop, Axure RP Pro
  • Object Literal Pattern JavaScript


  • UX Speakeasy Meetup Group - San Diego
  • Javascript San Diego Meetup Member - San Diego
  • Toastmasters Career Builder Member – San Diego
  • DashingD3js - Student
  • FabLab member - San Diego


  • 2011 Motion Graphics Finalist Nominee - Academy of the Arts University - San Francisco, CA
  • 1997 - 2001 Promising Artist Award - University of the Arts - Philadelphia, PA
  • 1997 Co-Mural Artist Award Delmarva DuPont Power - Newark, DE
  • MFA Thesis - Academy of the Arts, University

    MFA Thesis |

    A project that brings all my knowledge and talent together in one piece.

    FREESTYLE DANCING: As its name implies, in freestyle, the dancer is free to make it up as he or she goes. Freestyle can apply to numerous dance genres and can be defined as a process where the moves are not choreographed ahead of time. In a sense, it is literally thinking on your feet. Most freestyle dancers combine their learned skills from a myriad of dancing styles and techniques such as modern, jazz, hip-hop, break dancing, house dancing, you name it. This site gives you the front seat to watch dancers move to great music and through video control functions such as pause and slow-mo, you can learn these moves!

    My master’s thesis is a representative work of a range of my competencies. From planning, to creation and implementation, this project integrated my skills in film, directing, graphic design, web programing, coding, and prototyping. I doing this work, I used technologies such as Adobe Illustrator, Photoshop, Action Script, After Effects, and Premiere. My effort was awarded a recognition of excellence by the school and is now a display sample of alumni work.

  • lpl rebalancing software low fidelity

    LPL Financial | Rebalancing Software

    Prototype: Information Architecture and Low Fidelity Wireframes

    Horizon Rebalancing: This program allows advisors to perform according to the market through proposing trades, viewing drift analyses, and modeling management . This is advantageous because as time goes on, a portfolio's current asset allocation will drift away from an investor's original target asset allocation. The Horizon Rebalancing tool will help the advisor keep track of their customers’ financial goals and send proposed trades to Horizon Trading for execution.

    On my own initiative, I created 130 Balsamiq click-through screens to mimic the software's user flow behavior for a variety of use cases. This prototype was used as a communication tool between stakeholders, 3rd party vendors, front and back-end engineers, ux researchers, and ui developers.

  • LPL Financial

    UCD - User Center Design | Client Management for Advisors

    High Fidelity Prototype: HTML, CSS, jQuery, 2-Way Binding with KnockoutJS, D3JS for Data Visualization, ImpressJS for Tablet Presentation

    This software idea was created to help the advisor manage her/his clients in real time by functioning like a personal assistant. The sole purpose of this project was to convey user centered design to stakeholders. This prototype aimed to show that it can accommodate multitasking for the advisor who needs to quickly obtain a multitude of client data. We built this project based on the idea of how a browser will work with tab accessibility, search implementation, custom dashboard, notifications, an appointment setter, wealth management, trade and rebalancing, resource center for help/assistance through a chat feature, and creating an appointment presentation that can be distributed to multiple form factors such as the tablet, phone, and DVD.

    The prototype story consist of 2 parts.

    Part 1 - Advisor multitasking: If an advisor gets a call while s/he is working on a client file, s/he can open a new tab or search for another client on the phone and bring up the data in a new tab without losing place with the first client. The user center design of this project is to help the advisors setup, confirm, and alert appointments, send documents to clients, receive notifications when a client completes a document, notify when a check clears or is sent to the advisors, show a snapshot of the clients trade account, alert the advisor whether a client needs rebalancing to stay on track of the wealth management goal and much more.

    Part 2 - Advisor delivers wealth management presentation to a client:Once a meeting is confirmed with a client, the advisor can build a custom presentation package to send to the user. This interactive package would have an agenda and sections that explain their wealth management goal, or whatever information that the advisor finds important to discuss in the meeting. The software prototype was created for desktop and tablet usage.

    Design Deliverables:

    • HTML, CSS, jQuery, jQuery UI, Knockout.JS for data-binding prototype of the wealth management product for advisors
    • Iconography for Dashboard design
    • Data Visualization implementation
    • Guide 3rd party company to use modern technology such as Impress.JS for presentation display
    • Work with Subject Specialist to create relevant dashboard content that works with the 3 user scenarios.
  • UCSD - VirBELA

    Rady School of Management

    VirBELA is an educational design organization that provides innovative learning technologies to en hance global educational experiences that empower individuals, teams, and organizations. Our model allows for a level of engagement and participation that can typically only be achieved with face-to-face instruction. Our proprietary immersive 3D campus, which supports blended learning and big data assessment, is highly customizable to meet the branding and educational needs of our clients. Our mission is to transform learning for everyone, everywhere.

    Design Deliverables:

    • Prototype login functionality
    • Chat/Voice data visualization container
    • video player ui
    • sales mini form
    • Design the ui in VirBELA virtual world
    • Website recreation: Create an adaptive website
  • Micron Automata Processor

    I partnered with the project manager, the Ruby-on-Rails developer, the back-end engineers, and front-end engineers to create an adaptive website that supports Micron’s Automata Processor. This processor addresses challenges with graph analysis, pattern matching, and data analytics. As a experience designer, I had to coordinate with the team to ensure that the message about their product is understood throughout the website.

    Design Deliverables:
    • Optimize website for IE8
    • Help create an adaptive website using Bootstrap3
    • Use Ruby-on-Rails as the webframe work
    • Adjust database for Micron Admin needs and created additional functionality to the database for better user experience.
    • Used JavaScript to create random link rendering for the Automata Processor demo software for usage in Google Analytics.
    Assist Developers in troubleshooting errors:
    • Error handling
    • Software Instructional Pages
    • Documentation White Label
    • WebServices API implementation for user profile
    • Profile Snapshot
    • Beginner UNIX training for server deployment through unix
    • Downloadable CSV Text Reports for Administrators
    • Manage a 3rd party resource for Ruby-on-Rails implementation of 3rd party software such as Nalperion and MK Data Services
  • Custom UI Elements

    Personal Project

    My goal is to create a library of custom ui elements with only css and html. Click on a few to see the interaction of the element behavior. This personal project was inspired by Thibaut Courouble.

    Custom Flat UI Color Palette #1

    Custom Flat UI Elements #1 - In progress

Arduino: Code to the Physical World...My New Hobby.

Traffic Light Simulation

I have to code for the media screens for variety of screen sizes. Well, I wanted to try something different and code for the physical world. I took a class at Fablab in San Diego. Using Arduino Uno circuit board, bread board, wires, leds, and an IF Else Statement...I created a traffic light simulation.

Mobile Device Station: If you build it, They will come.

Custom-made Mobile Device Station

I dreamed of a design studio with a mobile device station. With so many, different mobile devices I wanted to create a station that would allow for flexibility and rotation. Took out my sketch pad and thinking it through. I need it to rotate so that simultaneously the devices can rotate either horizontal or vertical. Using technologies such as Adobe Edge Inspect or Ghostlab with LiveReload utility allow for debugging on the devices and seeing immediate results across all devices. If you build it, they will come.

Say Hello

Thanks for visiting. I hope you enjoyed your stay!

Name must not be empty
Please provide a valid email
Message should not be empty