What is Phong?

A UX designer with home-brewed development skills.

What is he suited for?

Wireframes, prototypes, and overall architecture planning.

What makes him different from others?

Soft skills and collaboration. Translating needs from the client to business to design to code isn’t a linear process. No one is trying to mess things up, but working together requires an awareness of what is being communicated and an active approach to staying in sync. It’s how you get to move fast while maintaining quality in the solutions. Not to mention time and budget will always be factors at every step.

Where can I fit Phong into my process?

  • Early in sales and pitches. Articulating technical perspectives to the client and gut checking the feasibility of what’s being asked.
  • Kick-off activities. Experienced in workshops and research, Phong can add domain knowledge and translate thorny interviews.
  • Concepting. Phong can ground designs in either the reality of the scope or in technological possibilities.
  • Prototypes. This represents a range of things. It can be a simple demo to show the client more vividly than a sketch. Or the entire proof-of-concept to show the development team.
  • Design Systems. There’s an appetite for more than a Sketch file as a deliverable today. A living design system can help a company organize, govern, and scale its design and UI components.
  • Coding. If you don’t trust a development team to fully realize the solution, Phong can act as a bridge to maintaining quality to the UI and front end.

Skills & Proficiencies


Design Systems, Interaction Design, Prototypes, Site Architecture, UI Design, User Research, Wireframes, Workshops


Angular, Bootstrap, CSS, Firebase, HTML, Javascript, React, MySQL, NoSQL, PHP, Vue.js,

Working On

CD/CI, Serverless, Storybook, Tailwind, Unit tests

Design Tools

Adobe Creative Suite, Figma, Illustrator, Invision, Photoshop, Procreate, Sketch

Examples of Work

Project #1

The Ask

A new portal for developers.

The Need

The project was the culmination of realizing there were 4-6 preexisting portals, and none fully captured the needs of their current developer base.

How to Solve

A series of stakeholder and user interviews and multiple workshops to gather the needs and incoming trends of development and financial innovation. Those observations and learnings would feed into a reimagined experience that would scale with the client into the near future and allow them to consolidate their portals. The final deliverables would be a new site architecture, wireframes, extended style guide, and an Angular component library to feed into the development teams.


3 months. One two week sprint for the component library.


We were a small three-person team. I contributed to conducting research, co-facilitating workshops, synthesis. Shared the architecture and UX work while a visual specialist extended the design system. An additional deliverable was me coding Angular components for their development team.

screenshot of research synthesis screenshot of archetypes and personas screenshot of a sample wireframe screenshot of global CSS settings screenshot of specific code snippets

Project #2

The Ask

A streamlined experience to tie together several different processes for data ingestion and chart creation.

The Need

The client was looking to articulate an idea they had of a novel way of performing an internal process. They were technical-minded stakeholders but needed a user-centric experience.

How to Solve

The client was resistant to traditional design research and activities and was getting frustrated with the lack of tangible artifacts. So I shifted the project to more project requirements and stakeholder alignment activities. With rapid wireframe ideation and daily feedback sessions, we were able to get a fuller picture of what concepts they wanted to emphasize.

They were able to see their ideas expressed on a quick timeframe, and update their technical and feature needs as the UX as developed. We ended with a fully wired prototype, high fidelity key screens, and a promotional video for internal use.


4 months


I led the pivot in the project taking over halfway through the timeline. Facilitating the daily standups and meetings with the stakeholders presenting the Figma files and changes. My main artifacts were the wireframes and the resulting prototype. Also coordinating the efforts with the high fidelity screens and video production with the team.

screenshot of research synthesis screenshot of archetypes and personas screenshot of a sample wireframe

Project #3

The Need

A proof-of-concept that demonstrated multiple users involved with tracking a shared physical object being moved. Each user type has a different set of available actions and data associated with them.

How to Solve

A React framework with Bootstrap, Phosphor icons, ReCharts, Firebase, Google Maps, and OpenWeather.


3-4 weeks

Technical Highlights

Google Map Marker Animation

To show the client how the location tracker would look before the API calls were ready, I created a function to simulate the animation.

screenshot of custom google map
Parent Component

The parent would hold eventually hold the data fro the API call, but until this function sits here updating via an interval.

Google Map Component

Updating via props, it updates the position of the custom marker.


The client's branding has a mesh-like image that looks like nodes and lines. I created a component that creates a rendering that shows up dynamically and uniquely each time it loads.

See the Pen POC - Canvas - Vector Mesh Render by Phong Tran (@phonghtran) on CodePen.

screenshot of a vector mesh rendered on load

Project #4

The Ask

A way to improve the experience of people seeing their books digitally when traditionally in non-pandemic times they would see them physically and with others.

The Need

The problem was two-fold. One was the experience itself, but second was a sustainable production process that could enable those experiences.

How to Solve

Ultimately, the organization wasn’t ready to implement substantial changes to their internal teams and processes. So we packaged a set of documentation and web demos to show what could be possible given time to redo the internal processes.


4-6 weeks with a team of designers

Technical Highlights

The technical piece was not a new digital book platform or tool or app, but rather a set of demos and a “technical playbook.”

The first was a small set of demos that could show how internal processes could be improved by focused tools. Some ingested text directly from the published files to automatically generate tags. Others showed how a simple database of tags could quickly allow colleagues to find specific snippets of content by topic or keyword. These tools don’t directly affect the digital book experience, but enable the organization to be nimble enough to innovate on those experiences.

The second key delivery was the “technical playbook.” We had a one-time pro-bono engagement with them, but I wanted them to be technically literate enough to have meaningful conversations with future vendors. The playbook covered all the relevant topics in a non-technical language, but also captured the ideas and framings for other partners to quickly grasp their goals.

Proof-of-Concept Demos

A collection of small demos for the client to understand what's possible for them once they get set up to build their technology.

screenshot of demo that searches a database by tags screenshot of demo that adds data to a Airtable table screenshot of demo that extracts tags from Indesign files screenshot of demo using a library they liked

Technical Playbook

Knowing that we can't be there for future projects, I made a document for the client to learn about technical terms, goals they should be aiming for, and recommendations.

screenshot of presentation with tips on data storage screenshot of presentation  on our database recommendations screenshot of presentation  of advanced database concepts screenshot of presentation talking about dev partners

Contact & Links