Jan Harold Diaz

interaction designer

contact me!

+63 916 387 4982


follow me!

Hello, I'm Jan! I'm a multifaceted designer passionately inclined to interaction and product design with an entrepreneur mindset.

I'm also a drop-out practicing autodidacticism, a gamer, a drummer, a proud Christian and sometimes — just lying down pretending to be a potato (they call it sleeping). I'm that weird, peculiar guy who loves sketching, doodling, hand lettering or just hanging out with my failures to learn from them.

[ site status ] — Doing something new. Please bear with me, but if you prefer, a rabbit then go ahead. Rabbit with me.

skillset, experience and design process

Some people might classify me as a jack-of-all-trades but I think I'm more of a designer with a few more skills and mindsets that go hand-in-hand with it. I've been designing for more or less than 10 years, with a 7-year experience on interaction design for web and mobile but mostly on web.

Design Thinking

  • Ideation

    This is probably where the most fun part of my design process is. I can go crazy and let my creative juices flow without limitation.

  • Planning

    This is the funnel and filter of the ideation process. Organizing information and sections where they should fit.

    • Information Architecture
    • Rough Sketching
    • Wireframing
  • Interaction Design

    After planning and organizing content, I'll continue doing UI wireframes while considering UX in mind. I usually go for function over form.

    • User Interface (UI)
    • User Experience (UX)
  • Low-fidelity Prototyping

    I don't usually do this when working on a project but I have tested that doing this part can definitely save time if I want to know if an idea will work specifically on touch devices.

Design Implementation

  • Graphic Design

    I can pretty much say that I have a solid background when it comes to graphic design.

    • Typography
    • Layout / Visual Hierarchy
    • Color Theory
    • Branding / Visual Identity
    • Motion Graphics
  • Front-end Development

    After creating wireframes / mock-ups, I will then proceed to coding and implement the UI. Sometimes, I skipped doing mock-ups on Photoshop and go straigth from wireframe to coding.

    • Semantic Coding
    • Code Optimization
    • HTML5
    • CSS / SASS
    • Javascript
    • Adaptive Design
    • Responsive Design
  • Iteration

    Refining details, removing unnecessary features or elements. Sometimes going back to the drawing board. That kind of stuff.

Other Surprises (I really hope so.)

  • Back-end Oriented

    Basically, this just mean that I know a few things about the capabilities and limitations of what back-end can do. This helps me a lot in terms of implementing user-interfaces. (Plus, I'm currently trying to learn Ruby / on Rails)

    I believe and have proven that being oriented how the backend can work wonders and will expand your imagination when working on user interfaces.

  • Entrepreneurial Mindset

    I love generating ideas! Most of the time to solve a certain problem or address a certain need.

    To be honest, this is probably one of the reasons I wanted to learn as much as I can, practicing autodidacticism so that I can easily implement my ideas and test it myself without too much delay. Hopefully to be able to have my own startup.

    Also, by having this kind of mindset, I usually assess if something is really worth doing.


As a honest proof of my capabilities as a multifacated designer, I curated some of my best works that I've done for the last few years.

Web Design, UI/UX and Front-end Development Projects

Live Website

Employer: Rumarocket

Position: Interaction Designer

Login Form Rumarocket Dashboard for Talent Managers Assessment Results Page for Talent Managers Talent Profile Page Partial UI: Assessment Builder - Creating Questions Partial UI: Assessment Builder - Importing Templates Thank You Page 404 Page
Live HTML Demo
Radio Republic

Employer: Brewed Concepts

Position: Senior Web Designer

Homepage Design Study Partial UI: Navigation Drop-down

Product Design Idea

Homepage Design Study Partial UI: Anatomy of a JiffyQuery post Partial UI: Post Question Form Partial UI: Notification Partial UI: Sign-up / Login Form
Smaller Projects

A collection of sites that I was able to work on.

Homepage Partial UI: Slide-out Login/Sign-up Panel
Homepage Design Study Registration Form
Homepage Subpage: Benefits and Features Subpage: Sign-up Form
Prima Server Solutions
Homepage Partial UI: Build-your-own Server
Holicow - Holistic Coalition
Zero Detect
Design Study [1] Design Study [2] Design Study [3]