Donec pulvinar, neque ac accumsan pulvin tc
Donec pulvinar, neque ce tc
About
2022, Freelance Designer, Cottage, San Francisco, CA
2019, UX Designer, Harvard Business Review, Boston, MA
2018, UX Design Intern, Depict, San Francisco, CA
2016, Designer, Fougeron Architecture, San Francisco, CA
2015, Designer, Swatt Miers Architects, Emeryville, CA
2013, Design Intern, Trace Architecture Office, Beijing, China
2012, Design Intern, Slab Architecture, Brooklyn, NY
2012, Staff, GSAPP Exhibitions, New York, NY
2011, Design Intern, Sou Fujimoto Architects, Tokyo, Japan
2010, Design Intern, Buro Ole Scheeren, Beijing, China
2010, Participant, GSAPP China Lab, Beijing, China
Columbia University GSAPP, Master of Architecture
Middlebury College, Bachelor of Arts
Contact
Fidelity Investments
2024
Options trading is the most complex experience in the flagship mobile app, as well as a top revenue generator, so it’s important to get it right. With this redesign, our goal is to provide a more intuitive native experience for our options traders of all levels, without sacrificing existing advanced features that our traders rely on.
The existing options experience is a one-way flow from Chain to Trade. Users have to go through the chain to get to the trade ticket. They start by selecting a row in the chain, then pick call or put, and then a quantity and action, before getting the rest of the options trade page.
The new options experience decouples the chain from trade, allowing more user flexibility. Users have the ability to toggle between the two views without losing input data. This design accommodates the range of use cases we’ve identified, which range from users who prefer to start their trade from the chain, those who want to enter trade inputs directly, or those who might want to toggle between the two views.
One of our main goals was the reduce clicks to complete a trade. In the current options flow, users click on a row from the options chain, and then select their call/ put, and then fill in the ticket. In the new experience, users can select a bid or ask from the chain that directly cedes into the ticket, which prefills Strategy, Action, Expiration, and Strike. Users then only have to fill in a quantity, and a bid/ mid/ ask (we default to limit/ day/ margin). In a few steps, the trade is ready for Preview.
Fidelity Investments
2025
Equity and ETF trading is at the heart of the flagship native app. Whether users want to trade on the go or just prefer the ease of trading on their phones, a trade experience that is legible and useable for all of our customer segments drives key business KPIs, and delivers on user needs. Our goal is to create a unified single-page trade experience that caters to novice and advanced users alike.
The existing trade experience on the app offers two ways to trade: “simplified” and “advanced”. Based on VOC feedback we know that complex trade types (stop loss, specific share, sell, etc..) are difficult to find in the current trade ticket. We believe that a new design will make it easier for customers to complete these complex trade types without negatively impacting the efficiency of placing basic/ more common trades. Can we present additional trade type options to customers (ie stop loss, specific share, sell all, etc.) without impacting the efficiency of basic order types?
The new trade flow features a redesign of every page in the trade flow. We also eliminate the quote page interstitial, which users told us was unncessary.
(Slide 1-4) A new data-rich search page shows more symbol information and entry points to popular destinations, such as recurring investments and open orders.The trade page combines the previous dual-ticket system into a single screen. Finally, the preview and confirm pages are also streamlined to create a unified experience, collating disparate preview and confirm screens from across the app.
The diagram below highlights key pain points we addressed in the redesign, including fractional shares, advanced order types, sell all, sell specific shares, extended hours trading, and cancel & replace.
Fidelity Investment
2024
With project partners:
Adalynn Geer & Mike Aiello
Investing at a recurring basis helps young customers dollar-cost average into savings over a long period of time, and allows experienced traders to customize trades they want to execute at a predictable pace. With customer needs top of mind, we launched a new cross-platform auto investing and transfers experience that met the diverse needs of our users.
Before we launched the new recurring investments experience in Nov 2023, there was no way to automatically invest stocks, etfs, or unowned mutual funds. How might we resolve structural issues within our existing offerings, and launch a net new product that benefits our users and business goals?
The new recurring investments experience includes new trade types: stocks/ etfs, mutual funds, and Fidfolios baskets. This new experience also provides a common hub from which to track all forms of recurring activity, but bifurcates the investments from cash transfers for easier management. Users can add multiple symbols (up to 10) into a single recurring trade. Customer response has been very positive, with metrics that attest to its product fit spanning novice to advanced traders.
The existing “Scheduled transfers & investments” experience offers automatic cash transfers into Fidelity investment accounts. However, there is no way to invest into stocks, etfs, or mutual funds on a recurring basis.
With the launch of Recurring Investments, customers can now automate stock, mutual fund, ETF, and basket trades. Users can also manage active all recurring plans - investments and cash transfers - in one place.
Case Study
2019
The San Francisco Museum of Modern Art (SFMOMA) draws over a million annual visitors with its collections in painting, sculpture, photography, design and media arts. Its cultural importance to the city is undeniable. Drawing on UX usability research and on-site analysis, this project proposes a new mobile strategy to help visitors navigate the museum’s offerings.
We visit museums to get away from our phones and screens, so why conflate the two? How might we create a digital experience that enhances the in-person museum experience, while also engaging users online before and after their visits?
Research
(Slides 1-3) The museum is a container for multiple experiences. In addition to the ticketed gallery experience, visitors have access to free public spaces, including a vast lobby, a restaurant, and the museum store. Beyond the public and gallery spaces, a third layer of experience, usually reserved for researchers and education purposes, can be accessed by appointment. The research process uses methods including user-centered practices and business-centered analysis. The following slides detail the process and results of four research methodologies: card sort, user research, business outline, and website tree test.
(Slides 1-3) The museum is a container for multiple experiences. In addition to the ticketed gallery experience, visitors have access to free public spaces, including a vast lobby, a restaurant, and the museum store. Beyond the public and gallery spaces, a third layer of experience, usually reserved for researchers and education purposes, can be accessed by appointment. The research process uses methods including user-centered practices and business-centered analysis. The following slides detail the process and results of four research methodologies: card sort, user research, business outline, and website tree test.
A user-friendly SFMOMA mobile site can help bridge the gap between visitors’ in-person and online experiences. Rather than creating a separate native app, the mobile site is a great way for users to explore the site before their visit, and offers a more fluid experience for the casual visitor.
Case Study
2018
We should spend lunch breaks enjoying a walk or chatting with friends, not queuing for bespoke salad. And although shop employees work at lightning speeds to fulfill orders, the inefficiencies of on-the-spot customization results in bottlenecking. This project explores the impact of digital solutions on the downtown salad bar.
It’s Wednesday 12:30pm. You’re in the mood for a healthy salad bowl from Greens & Things, but the long line you’re anticipating already puts you off the task. How might we shorten lines and make ordering salads easier? The Greens & Things app, website, and self ordering kiosks are able to meet a wider range of user needs. With their implementation, we can ease in-store congestion by opening up customer flow through the physical space.
With on-the-spot salad customization, a long line forms quickly during rush periods, at times even extending beyond shop doors. The ensuing bottleneck is shown here.
Making digital interventions
In a common scenario, three friends working in separate downtown offices arrange a lunch hour meetup. The Greens & Things mobile app and self ordering kiosks are able to meet a wider range of user needs. With their implementation, we can ease the congestion in-store by opening up the flow through the physical space. Let’s look at how that might work.
In a common scenario, three friends working in separate downtown offices arrange a lunch hour meetup. The Greens & Things mobile app and self ordering kiosks are able to meet a wider range of user needs. With their implementation, we can ease the congestion in-store by opening up the flow through the physical space. Let’s look at how that might work.
The brick & mortar becomes less dependent on a single-queue flow. By giving users different ordering, pickup, and delivery options through the app and website, Greens & Things customers can navigate the lunch rush with a bit more ease.
Final screens
The Greens & Things app imagines an easy way to order off the menu or make your salad just how you like it, and have it ready for pickup when you arrive.
The Greens & Things app imagines an easy way to order off the menu or make your salad just how you like it, and have it ready for pickup when you arrive.
Case Study
2017
This project begins with a fun challenge: choose an everyday object and start to gather unique versions of that item until you make an 80-piece collection. Next, craft a visual identity around your collection, and create a coherent visual language that brings these objects to life.
Design task
Imagine you are curating an exhibition at SFMOMA, which will center around an 80-piece collection of an artifact of your choosing. How might you create an identity system around this collection? Deliver the following assets:
- Typography system,
- Logo lockup,
- Stationery system,
- Promotional poster,
- Video asset
The object
A knob is a simple object. It is typically circular, though not always. It is kinetic - its range of motion is limited by the hand that turns it. It is an intuitive interface that hides webs of complexity. Sourced from vintage radios and TV sets, this collection, aptly named Knob Knob, showcases 80 of these commonplace, yet important, objects.
A knob is a simple object. It is typically circular, though not always. It is kinetic - its range of motion is limited by the hand that turns it. It is an intuitive interface that hides webs of complexity. Sourced from vintage radios and TV sets, this collection, aptly named Knob Knob, showcases 80 of these commonplace, yet important, objects.
My collection of 80 knobs, amassed from old radios, appliances, and Ebay
Playful, circular, intuitive, tactile, kinetic
Guided by five descriptors of the object’s key qualities, the following design assets use the knob as muse. The solution identifies and interprets the essence of the object, and creates an identity system around it in preparation for a gallery exhibition.
Guided by five descriptors of the object’s key qualities, the following design assets use the knob as muse. The solution identifies and interprets the essence of the object, and creates an identity system around it in preparation for a gallery exhibition.
Creating a set of visual assets of my collection
Typography design
The collection’s logo lockup uses a typeface I designed on the font-building tool Fontstruct. The full typeface, which I named Mazurka after the Polish folk dance, features both capital and lowercase characters. For Knob Knob, the whimsical look of the lowercase characters suit the project’s irreverent nature. Mazurka’s lowercase “o” is a perfect vessel to contain the 80 knob variations within its thin outline. Accents on letters such as the insect-like “k” creates visual impact, drawing viewers into the quirky world of knobs.
Stationery system
The stationery system uses a Bauhaus-inspired palette of black, white, and red - a tribute to the midcentury origins of the knobs collection. Line drawings are used to express the knobs themselves; thin lines detail the textured ridges of the artifacts. A circle cutout on the envelope creates a playful relationship between the envelope and its contents. The brochure is a set of staggered leaflets that highlight the personalities of individual knobs.
The stationery system uses a Bauhaus-inspired palette of black, white, and red - a tribute to the midcentury origins of the knobs collection. Line drawings are used to express the knobs themselves; thin lines detail the textured ridges of the artifacts. A circle cutout on the envelope creates a playful relationship between the envelope and its contents. The brochure is a set of staggered leaflets that highlight the personalities of individual knobs.
Creating brand awareness
An important part of branding is creating awareness through advertising the exhibition. Promotional posters at the bus stop piques the user’s interest. Intrigued, she checks out the website and buys a ticket. Another promotional opportunity happens inside the museum. Before entering the exhibtion, attendees take a moment to snap a photo for their social media.
An important part of branding is creating awareness through advertising the exhibition. Promotional posters at the bus stop piques the user’s interest. Intrigued, she checks out the website and buys a ticket. Another promotional opportunity happens inside the museum. Before entering the exhibtion, attendees take a moment to snap a photo for their social media.
Ads with QR code in waiting spaces
Ads with QR code in waiting spaces
The museum experience
The entrance/ exit to the exhibit presents visitors with photo opportunities, whether they came for Knob Knob, or are just passing through. Inside the exhibition, visitors stop to watch a mezmerizing video of looping knobs. Using key descriptors as inspiration (playful, circular, kinetic), the motion plays on the idea of the circle as an endless surface.
The entrance/ exit to the exhibit presents visitors with photo opportunities, whether they came for Knob Knob, or are just passing through. Inside the exhibition, visitors stop to watch a mezmerizing video of looping knobs. Using key descriptors as inspiration (playful, circular, kinetic), the motion plays on the idea of the circle as an endless surface.
Case Study
2018
With project partners:
Stacy Balter & Dulce Shultz
Cities rely on public transit networks to properly function. Although mobility may never achieve full equality, democratizing public transportation should be an ongoing effort as technology, demographics, and physical landscapes change. This project envisions a future of municiple transportation which leverages technology without exclusion.
Problem
Without a smartphone, wayfinding on San Francisco’s public transit system, Muni, can be difficult, which contributes to reliance on driving over public transit. How might we navigate the Muni system without the use of a smartphone? Can we further democratize public transport?
Without a smartphone, wayfinding on San Francisco’s public transit system, Muni, can be difficult, which contributes to reliance on driving over public transit. How might we navigate the Muni system without the use of a smartphone? Can we further democratize public transport?
Solution
The solution has to work at the scale of the city. This project proposes that with better mapping and feedback, we can help all riders achieve greater mobility. We can do this by scaling UX solutions across the city and technological contexts.
The solution has to work at the scale of the city. This project proposes that with better mapping and feedback, we can help all riders achieve greater mobility. We can do this by scaling UX solutions across the city and technological contexts.
User journeys
At the center of our story is Ro, an independent 71-year-old SF native, and Erik, a recent transplant in the throes of job searching. Ro lives with her husband in the Outer Richmond, and enjoys venturing out on the town for appointments and chores. Despite pleas from her kids, Ro chooses to live without a smartphone. Today, she starts out to make her weekly grocery run, which requires a bus trip to Japantown. Erik, our young professional, is heading downtown for a job interview.
The public bus network in SF begins and ends with the bus stop. These markers of mobility take on three main forms: the pole station, the flag station, and the shelter station. The in-field analysis below highlights the experience of waiting for the bus at a Muni bus shelter. The five key principles of interaction design are used to observe this experience. Then, wider research findings are applied to propose initial recommendations to address these pain points across Muni-related assets.
The easiest route from Ro’s front door is on the 38 bus, which shoots straight down Geary Blvd and stops in front of Japantown. Ro has the 38 timetable practically memorized. Her regular stop is a pole station.
Bus arrivals are displayed vertically on a digital pole. Today, Ro sees that the 38 bus is delayed, so she decides to walk to a different bus stop to take the 1 bus instead.
Ro walks two blocks to the nearby bus shelter where can can catch the 1 bus. She knows this bus heads down California St., but wonders how long the trip will take. She uses the station’s voice feature to find an answer. The digital interace on the shelter maps out her request and tracks where the bus is currently on its route.
On the side panel, another rider, Erik, checks out a digital display tracking all four buses. In this simplified view, the cards move up the display as buses near the stop, and reshuffle relative to one another. This display is designed for legibility so that users don’t have to crowd around the panel.
After a short wait, the 1 bus pulls up to the curb. Before boarding, riders can see the bus’s capacity and quickly judge whether it’s better to wait for the next one. Above the windows, riders see a prominent display of stops and the bus’s location en route. This display helps increase awareness as the bus travels the city. People on the street level can engage in passive learning of buses and routes they might not be aware of otherwise.
Aboard the bus, the transit ecosystem continues. There is a service alert from the main hub that roads to downtown are closed due to an accident. Ro’s trip is not impacted because she gets off soon. Erik, however, is rushing downtown for an interview and needs to figure out the most efficient transfer.
In this proposal, we recognize that the smartphone is a ubiquitous part of life. As smartphone technology grows ever smarter, it’s important for public transportation technology to keep pace, to our riders’ benefit. In the use case below, Erik walks up to the bus’s mapping system and uses his smartphone to quickly find the nearest alternative using AR technology.
What happens to the driver when vehicles become autonomous? What about the panes of glass drivers need to see out? In our case, what function does the bus driver serve when they no longer have to navigate the roads? This proposal maintains the importance of a human director aboard the bus, but whose main function changes from driving to serving as the human interface for the city. The bus driver can act as a city guide, surveil general conduct, and operate the vehicle from the middle of the bus instead of the front.
Our users arrive safely at their destinations. Ro arrives at her station as planned. Erik makes his way off the bus to make his transfer.
Animated Projects
2016-2018
Motion animation is a technique that I have enjoyed exploring across professional and personal projects. Whether it’s a short gif or a longer format video, motion design can communicate ideas that enrich the story in new ways.
In-app animations
Depict, 2018
Depict, a startup based out of San Francisco, CA, curates and broadcasts artwork onto its 4k quality frame. I created concepts for loading animations on the app. The custom artworks are drawn as vectors in Illustrator, and animated in After Effects.
Depict, 2018
Depict, a startup based out of San Francisco, CA, curates and broadcasts artwork onto its 4k quality frame. I created concepts for loading animations on the app. The custom artworks are drawn as vectors in Illustrator, and animated in After Effects.
City scene
Student project, 2016
The scene below is a part of a larger cityscape animation that I created in a motion graphics class. The street scene and cars were created in Rhino, touched up in Illustrator, and animated in After Effects.
Student project, 2016
The scene below is a part of a larger cityscape animation that I created in a motion graphics class. The street scene and cars were created in Rhino, touched up in Illustrator, and animated in After Effects.
The gif below is a student assignment to create a short advertising spot for a local TV station called IDTV. With the 2016 Rio Summer Olympics top of mind, the concept focuses on an ad spot for an upcoming swim meet. I used found footage of a swimmer, and situated these figures in an axon of a swimming pool, which I drew using Rhino and Illustrator. Finally, the pool illustration and swimming figures are combined in After Effects to create the animation below.