Patrick Ly — Portfolio

Hi, I'm Patrick Ly — a product designer focused on building thoughtful, human-centred digital experiences.

I've worked on camera and capture tools at Meta, and data management products at Visier. I care deeply about the intersection of design and engineering.

Currently open to new opportunities.

← back to home

Advanced capture tools on desktop editor (Meta)

A redesigned advanced capture tool for world creators to generate high quality promotional content for games they've built on Horizon Worlds (metaverse platform). The goal is to productionize the capture tool for all world creators and improve on the experience to professionally capture and promote their worlds.

Timeline: 3 months

Role: Lead Product Designer

Partners: Product Design, Product Management, Engineering, Content Design

Year: 2025

Problem

Before this project, our 3rd party world creators didn't have the same capture tool set as our in-house creators, making it difficult to professionally capture and promote their worlds. The user experience of the internal capture tool also had pain points that needed to be addressed before opening it up to 3rd party world creators.

Design process

Understanding core actions

I gathered insights from our internal users on the core actions they took when using the advanced capture tool. There were 3 core actions: controlling the camera, recording footage, and adjusting the camera speed.

Understanding pain points

To improve on the existing experience, I spoke with our internal users on their existing pain points with the capture tool. There were 2 key pain points: it was difficult to access the tool since it was buried in internal settings, and it was reliant on external capture software since there wasn't an integrated recording function.

Solution

Improved entry point access

Before, the tool was buried in internal settings, making it tedious to access and begin using the tool.

After, the tool can be accessed in world desktop editor, where world creators can naturally transition from building their worlds to capturing promotional content for their worlds.

Restructured IA + updated UI

To align with the core actions and to address the lack of an integrated recording function, the IA was restructured so that the main actions that users normally took would take priority over less used advanced settings. The UI was also updated to align with the look and feel of the world desktop editor.

Results

Within a short time frame, the advanced capture tool was implemented and shipped to public; available for all world creators to use.

next project: drone camera 📷 (Meta) →

Drone camera in Super Rumble on Horizon Worlds

Drone camera (Meta)

Horizon Worlds has an in-world camera that allows users to capture selfies with others; this mainly accounts for our social use cases with the camera. The goal is to expand Horizon Worlds camera with drone mode, enabling users to capture unique gameplay angles and footage.

Timeline: 4 months

Role: Lead Product Designer

Partners: Product Management, Engineering, Content Design, Product Design Prototyper, Data Science, Research

Year: 2023

Problem

The current in-world camera is great at capturing selfies and staging shots, but can be cumbersome and difficult when capturing gameplay moments.

Design process

Understanding user needs

Our UX researcher conducted a survey with Horizon Worlds users on preferred camera point of views, and a majority of users (40%) reported being interested in a drone-style camera to capture gameplay. This solidified the need for a new camera mode.

Preferred Camera PoV Type survey results

Competitive auditing

I did a competitive audit of drone related features, taking inspiration from both the physical and digital world (VR).

VRchat has a VR drone camera mode that enables advanced manual camera movement, but doesn't make it easier to capture user gameplay (a current pain point of the Horizon Worlds camera).

Pixy (Snapchat's drone camera) has a simplified approach to camera movement, where there are pre-defined flight paths that make it easy for users to capture content hands-free. This approach aligned more closely to some of the user pain points around capturing user gameplay with our Horizon Worlds camera.

Solution

Entry point + education

I added an indicator on the primary camera entry point to help educate users about the new drone mode. After the user clicks on the camera entry point, by default it would open up the selfie camera, and a secondary indicator will show where to access the new drone feature.

Minimize gameplay disruption

Since the main focus of this feature is to capture gameplay in the drone angle, it's important that the camera is not disrupting the user's gameplay. I decided to place the camera at the top right corner of the user's peripheral vision with a smaller preview, so that they can see what is being previewed without disrupting users from playing the game.

Drone camera minimize gameplay disruption - drone view

Clear bystander awareness

It's important that we account for other users in the same instance of the world, and ensure that they are aware of recording happening near them for privacy and integrity reasons. I decided to integrate a recording icon on the user's nametag (along with the other status icons) for bystander awareness. I also worked with a design prototyper to integrate a 3D model of the drone object, providing awareness of where the recording is happening spatially.

Bystander awareness - nametag without recording icon

Bystander awareness - nametag with recording icon

Playtesting + iterating

After working with engineering to implement the designs to specification, our team went through multiple rounds of playtesting and iterating to improve the overall experience. One thing we noticed during playtesting was that during recording, the drone camera UI was still distracting during gameplay, even though it was placed in their peripheral vision.

I decided to tweak the experience so that the entire UI (asides from the stop record button) faded out while recording was happening, and reappeared on hover of the UI area. This helped the user focus entirely on playing the game.

Results

After running a 2 week experiment, the drone camera increased 24.6% of overall video captures and 6.5% of overall time spent. As a result, we decided to launch the feature publicly.

next project: analyses file management system 📂 (Visier) →

Analyses file management system (Visier)

A redesigned file management system for user created documents (analyses) in Visier's primary application: Visier People. The goal is to improve on the existing file management experience to better help HR analysts effectively manage and delegate analyses to the right people.

Timeline: 2 months

Role: Product Designer

Year: 2018

Problem

Before this project, the user experience for file management was difficult to navigate and lacked the core functionality of common file management systems such as Google Drive and Dropbox. The experience of creating, reading, updating, and deleting documents was inconsistent, difficult to access, and tedious to scan.

Design process

Research + audit

Before diving into user experience and interaction design, I analyzed the commonalities between existing file management systems and email clients. Examples I've looked at include: Google Drive, Gmail, Dropbox, and Jira by Atlassian. I identified common user interface and interaction patterns between each application to see how it might fit within our current design system, and made sure I understood the design decisions made.

Explorations

After auditing existing file management systems, I created multiple iterations on Sketch to explore different visual and interaction options and prepared them for design feedback sessions.

Peer feedback

An important aspect of this project was getting feedback from other designers when there wasn't a clear-cut choice for a particular iteration. An example was when I had to choose between two approaches for a multi selection pattern: an adapted version of Dropbox's pattern versus Google Drive's pattern. Dropbox uses a checkbox layout for multi selection, while Google Drive uses the standard desktop file manager metaphor for multi selection ('shift' key multi-select).

After our feedback session weighing out the pros and cons of each approach, I came to a conclusion that Dropbox's pattern better aligned with our application, since Google Drive's pattern is heavily dependent on a custom right click menu that allows the desktop file manager metaphor to work effectively. Our application currently doesn't support a custom right-click menu, so Dropbox's pattern better aligned within the scope of the project.

Solution

Optimizing navigation

A common pattern that was leveraged from other file management systems was the use of different tabs or sub-sections to allow users to easily navigate and access documents based on ownership type (user created documents vs shared documents). I decided to use tabs instead of a dropdown menu since there weren't a lot of options we needed to surface; in other words, we didn't have to hide the options because we had the screen space to display it all at once.

Revealing meaningful information

What was missing in the previous experience was the ability to easily scan and identify documents based on key metadata. Aside from what was already existing in the previous experience (user generated document titles), I decided to display other key metadata (user generated subtitles, date modified, and document owner) based on what's commonly displayed on Google Drive and Dropbox.

Surfacing file management functionality

In the previous experience, a number of key actions that are available when entering an individual document are not available in the list of overall documents (analyses room). Since we want these actions to be consistently accessible across different surfaces, I decided to leverage these actions in the analyses room as inline actions for each individually-listed document.

$File management functionality$

Results

The updated design layout for file management was adapted and scaled across various surfaces of the product.

next project: ui library 📖 (Visier) →

UI library (Visier)

A Sketch UI library to help fix inconsistencies in the visual design and interaction states of Visier's UI components. The goal is to increase overall productivity within our design team and to standardize component specifications for developers.

Timeline: 4 months

Role: Product Designer

Year: 2018

Problem

Visier's design team lacked a set of consistent components to share and use. Our team was progressively migrating from using Illustrator to Sketch as our primary design software, and a consistent set of UI components was needed for Sketch. As Visier grows as a company, a UI component library was crucial to ensure designers work with the latest iteration of components.

Design process

Research + exploration

When I was first involved with this ongoing project, it was at an early stage where it was relatively new to everyone on the team. This gave me the opportunity to start from ground up, meaning it was important to look into existing design systems and UI libraries established by other companies (such as Shopify Polaris, IBM's Carbon Design System, and Google's Material Design) and to see how their components are structured; in particular the Sketch UI components. Apart from researching other companies' UI libraries, I looked into the best practices for using Sketch and making a UI library.

Structure of components

It was important to have a baseline structure for our UI components before executing the details; this ensures that the designers on our team can easily locate the components and that they are consistently and logically grouped together. One of the biggest challenges I had to overcome is not being fully aware of all of the complex UI components that exist in our product. Apart from being assigned certain components to be built in Sketch, I actively explored the current build of our product to make sure I have a relatively better understanding of all the components that exists, how they relate to each other, and how I can group them together.

Execution

When I executed each individual UI component, I thought of how to make it easy for designers to use each one. It was a challenge to find the right balance between modular and preset components; if a component was too flexible, users would have trouble figuring out whether or not a component can be used in a certain section of our product. If a component was too fixed into a preset state, users would find it limiting when it comes to configuring a component to their needs.

Peer feedback + user testing

What helped me progress through my work was the feedback I received from my supervisor and peers as well as the informal user testing sessions from various individuals on my design team. The feedback I received either helped relieve doubts I had on design decisions I made or helped provide insight as to how to approach building out a specific component. For example, when I wasn't sure whether or not the hover states of two different components should be the same, I brought up the question to my supervisor. We had a discussion about it, and resolved that they should follow the same pattern.

Solution

Building templates

To make the UI library easier to use for the designers on our team, I made a Sketch file specifically for templates. Ideally, this would give our team a one-stop-shop to pull any layout they need to communicate their user workflows or concepts. This means designers do not have to spend time worrying about the layout and the spacing between each component.

Maintaining + editing components

Apart from making the Sketch UI library easy to use for our design team, it was important to make sure it was easy to make changes and edits to the components. The approach was simple: build each component from ground up; this way, the base components could be easily edited and reflected into the combined component.

For example, a search bar is made up of several base components: a container with several states (default, hover, and focused), text (placeholder and input), two icons (search and close), and a blinking cursor. The components were made into symbols then combined into a new symbol (the search bar), meaning all edits would be made through the base components. This is useful when considering the different variations of the search bar; if the search icon needed to be updated, only the base component for the icon would need to be edited in order for it to reflect into the different variations.

Maintaining and editing UI components in Sketch

Results

The UI library was fully integrated into our design team's workflows to execute design work more efficiently.

next project: advanced capture tools on desktop editor 🎥 (Meta) →