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
Activities
Design Systems, Interaction Design, Prototypes, Site Architecture, UI Design, User Research, Wireframes, Workshops
Engineering
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.
Timeframe
3 months. One two week sprint for the component library.
Contributions
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.
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.
Timeframe
4 months
Contributions
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.
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.
Timeframe
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.
Parent Component
The parent would hold eventually hold the data fro the API call, but until this function sits here updating via an interval.
See the Pen POC - Google Map Marker Animation Simulation - Parent Component by Phong Tran (@phonghtran) on CodePen.
Google Map Component
Updating via props, it updates the position of the custom marker.
See the Pen POC - Google Map Marker Animation Simulation - Child Component by Phong Tran (@phonghtran) on CodePen.
SVG
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.
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.
Timeframe
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.
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.
