Jodie Zhang
Jodie’s work at Fidelity Investments centers on bringing sophisticated investment tools to users with clarity and speed. Her work on the flagship mobile app includes: a redesigned
In-person experiences can also provide rich context for design, whether the response is digital or physical in form.
About
2020–, Principal UX Designer, Fidelity Investments, New York, NY
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
Product Design
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 existing flow, users proceed through a series of screens to 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.
Product Design
Summary
Equity trading is at the heart of the flagship app. With ever-increasing demand for trading on the go, the goal is to deliver a unified trade experience that serves all of our customer segments, and delivers on key business KPIs.
Equity trading is at the heart of the flagship app. With ever-increasing demand for trading on the go, the goal is to deliver a unified trade experience that serves all of our customer segments, and delivers on key business KPIs.
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. 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. The new design makes it easier for customers to complete complex trade types without negatively impacting the efficiency of placing basic/ more common trades.
(Slides 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.
(Slides 1-6) The diagrams below highlight 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.
With the implementation of Modernized Trade, we’ve not only standardized customer-facing pages, but also reduced maintenance and future development effort on the back end. A single equity trade page, along with a common preview and confirm for all trade types, creates a more streamlined trade experience for users, while also minimizing tech debt.
Product Design
Investing on 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. It also provides a common hub from which to track all forms of recurring activity, bifurcating investments from cash transfers for easier management. Users can add multiple symbols (up to 10) in a single recurring trade.
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. Customer response has been very positive, with metrics that attest to its product fit spanning novice to advanced traders.
Product Design
Quote information is an important aspect of trading and portfolio monitoring. Yet, there lacked a cohesive approach to this data, which appears in many contexts across the app. In response, we created a component that is supported by business logic, allowing it to cover a variety of feature views with a single base component, while addressing an app-wide need for consistency and reusability.
Before we created a reusable quote component, there were many ways of displaying quote information across the app, without a consistent approach or visual identity. This approach prevented learned patterns and resulted in repeated development work.
Launching the reusable Brokerage Quote component played a key role in reshaping trade on the app. The new component offers a cohesive approach to the way stock quotes are displayed across the app, while reducing backend complexity.
Product Design
Summary
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.
Problem
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?
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?
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.
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.
Product Design
Image courtesy of 500folsom.com
Transbay Block 9 is a 600,000 sq ft development in downtown San Francisco. Block 9 is part of the the larger Transbay program, whose goal is to transform the area into a transit-friendly, high-density mixed-use neighborhood.
Model courtesy of SOM
Site
Transbay Block 9 is a 600,000 sq ft multi-use development in downtown San Francisco. Fougeron Architecture was commissioned to design the podium (levels 1-8), and SOM took on the tower (levels 1-24). The site model below shows the building’s location next to the highway offramp into downtown SF, and marks its place amongst other Transbay development projects.
Transbay Block 9 is a 600,000 sq ft multi-use development in downtown San Francisco. Fougeron Architecture was commissioned to design the podium (levels 1-8), and SOM took on the tower (levels 1-24). The site model below shows the building’s location next to the highway offramp into downtown SF, and marks its place amongst other Transbay development projects.
Revit allows cross-functional partners to collaborate in a single builing model. This workflow was an important aspect of our day to day work on Transbay Block 9 because architects from Fougeron Architects and SOM, as well as civil, structural, and MEP engineers, could all access the latest building information from a single source.
Responsibilities
(Slides 1-3) My part in the process was to help bring designs from 50% DD to 100% CD. My main responsibilities included plans, RCPs, interior elevations, and iterative studies of HVAC design in units. Work samples below from Fougeron Architecture in collaboration with SOM for Transbay Block 9.
Architecture
Summary
The Experimental Art Institute is a sensory experience. A discreet tribute to its surrounding environment, the building’s raw facade blends into the site landscape in Greenpoint, NY, where industrial buildings dominate the neighborhood. Once inside, the experience is completely original. Organically-shaped columns hold up rectangular volumes to create the effect of levity. The program progresses through a sequence of spaces completely unique to the process and materials by which the architecture is made.
The Experimental Art Institute is a sensory experience. A discreet tribute to its surrounding environment, the building’s raw facade blends into the site landscape in Greenpoint, NY, where industrial buildings dominate the neighborhood. Once inside, the experience is completely original. Organically-shaped columns hold up rectangular volumes to create the effect of levity. The program progresses through a sequence of spaces completely unique to the process and materials by which the architecture is made.
The site is located in an industrial area of Greenpoint in Brooklyn, NY- one block from the waterfront and mostly surrounded by warehouses. Signs of gentrification are starting to appear, notably with the newly retrofitted condos at the old Pencil Factory. The Art Insitute, nestled between functional swaths of waterfront, warehouses, and new condo complexes, should fit into the neighborhood physically and programatically.
Visual Identity
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.
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
Creating a set of visual assets of my collection
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.
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.
Ads with QR code in waiting spaces linking to website
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.
In-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.
Motion Graphics
Summary
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
Illustrator, After Effects
Depict, 2018
Illustrator, After Effects
Depict, 2018
Depict is a startup that curates and broadcasts artwork onto its 4k quality frame. These loading animations are concepts created for the native app, to be displayed as the app loads its content, and as users connect to wifi.
City scene
2016
Rhino, Illustrator, After Effects
The scene below is a part of a larger cityscape animation created using combined 2D, 3D, and motion graphics techniques.
Rhino, Illustrator, After Effects
2016The animation below is a class project inspired by the 2016 Rio Summer Olympics. The assignment is to create an ad spot for the local TV station, IDTV. The swimmers are found footage from a swimming website. The rest of the animation is created through combined 2D, 3D, and motion graphic techniques.