JV

Jodith Valerie

Works

About me

Resume

Exploration

Contact

JV

Jodith Valerie

Works

About me

Resume

Exploration

Contact

JV

Tuntun Watchlist

Tuntun Watchlist

Tuntun Watchlist

Product

Product

Product

Finance Technology

Finance Technology

Finance Technology

Release Date

21 March 2025

Release Date

December 2023

Release Date

21 March 2025

Role

Senior Product Designer

Role

Product Designer

Role

Senior Product Designer

Background

Background

Background

Watchlist is a necessary function for investors, to help investors monitor market movement, We also believe that users who use multiple watchlist features are likely more engaged, leading to increased online time monitoring asset performance, and potentially higher revenue.

Watchlist is a necessary function for investors, to help investors monitor market movement, We also believe that users who use multiple watchlist features are likely more engaged, leading to increased online time monitoring asset performance, and potentially higher revenue.

Objective

Objective

Objective

  • Provide watchlist for stock & mutual fund

  • User can create, rename, and delete up to 10 watchlist group.

  • Users can add, delete, reorder up to 50 stocks in watchlist.

📚 My Design Process

📚 My Design Process

📚 My Design Process

Big Question For Us

Big Question For Us

Big Question For Us

From Survey

From Survey

From Survey

I interviewed 5 people and summarize the key points and overlay experience through making journey mapping.

I interviewed 5 people and summarize the key points and overlay experience through making journey mapping.

I interviewed 5 people and summarize the key points and overlay experience through making journey mapping.

  1. Users said that watchlist feature is a very helpful feature for them to track and monitor market movement.

  2. Users need a recommendation for the first time user experience to add stock & fund that they liked

  3. Users need a seamless, intuitive and user friendly UI & UX in this feature to help them easily add and edit it

Benchmarking Process

Benchmarking Process

Benchmarking Process

How do we refine the solution?

How do we refine the solution?

How do we refine the solution?

We shared the proposal design with stakeholders to align how our designs are going to impact the business. These are the key designs that we presented to them.

We shared the proposal design with stakeholders to align how our designs are going to impact the business. These are the key designs that we presented to them.

We shared the proposal design with stakeholders to align how our designs are going to impact the business. These are the key designs that we presented to them.

FTUE (First Time User Experience) is designed to guide new users on their journey toward achieving their goals. In this Watchlist feature, we automatically select the most popular stocks and funds, allowing users to easily add them to their watchlist with just one click. Users can also unselect any stock or fund they don’t want to include.

FTUE (First Time User Experience) is designed to guide new users on their journey toward achieving their goals. In this Watchlist feature, we automatically select the most popular stocks and funds, allowing users to easily add them to their watchlist with just one click. Users can also unselect any stock or fund they don’t want to include.

FTUE (First Time User Experience) is designed to guide new users on their journey toward achieving their goals. In this Watchlist feature, we automatically select the most popular stocks and funds, allowing users to easily add them to their watchlist with just one click. Users can also unselect any stock or fund they don’t want to include.

After users select watchlist for the first time experience, they can see their watchlist as a list in the table component design, and we also limit the column for only show 3, for stock code, price and change % only to make the UI more clear and balance, and we add small arrow icon in the right change% to let users know they can swipe to the right and see all of the data there. and in the design we also add the shadow to give the depth when users swipe the table.

After users select watchlist for the first time experience, they can see their watchlist as a list in the table component design, and we also limit the column for only show 3, for stock code, price and change % only to make the UI more clear and balance, and we add small arrow icon in the right change% to let users know they can swipe to the right and see all of the data there. and in the design we also add the shadow to give the depth when users swipe the table.

After users select watchlist for the first time experience, they can see their watchlist as a list in the table component design, and we also limit the column for only show 3, for stock code, price and change % only to make the UI more clear and balance, and we add small arrow icon in the right change% to let users know they can swipe to the right and see all of the data there. and in the design we also add the shadow to give the depth when users swipe the table.

Users also can select watchlist group by clicking the hamburger menu icon, to let users manage the tab, edit, and also add new watchlist group tab here.

Users also can select watchlist group by clicking the hamburger menu icon, to let users manage the tab, edit, and also add new watchlist group tab here.

Users also can select watchlist group by clicking the hamburger menu icon, to let users manage the tab, edit, and also add new watchlist group tab here.

The flash of price changes will only be active if the price increases (shown in green) or decreases (shown in red). We use this type of notification/feedback to inform users that the stocks they have added to their watchlist have already changed in price.

The flash of price changes will only be active if the price increases (shown in green) or decreases (shown in red). We use this type of notification/feedback to inform users that the stocks they have added to their watchlist have already changed in price.

The flash of price changes will only be active if the price increases (shown in green) or decreases (shown in red). We use this type of notification/feedback to inform users that the stocks they have added to their watchlist have already changed in price.

Below is the page where users can edit the tab of the watchlist group users want to sort, delete, or add to another watchlist group.

Below is the page where users can edit the tab of the watchlist group users want to sort, delete, or add to another watchlist group.

Below is the page where users can edit the tab of the watchlist group users want to sort, delete, or add to another watchlist group.

This is the screen if users change their phone display from vertical to horizontal, in horizontal mode they can see all of the data more detail because in horizontal we can provide more column to show to users

This is the screen if users change their phone display from vertical to horizontal, in horizontal mode they can see all of the data more detail because in horizontal we can provide more column to show to users

This is the screen if users change their phone display from vertical to horizontal, in horizontal mode they can see all of the data more detail because in horizontal we can provide more column to show to users

In the figma file as a designer we always manage it with section to tidy the UI screen, make the flow with arrow to let engineer understand all of the interaction and we also provide the label name in every case and scenario.

In the figma file as a designer we always manage it with section to tidy the UI screen, make the flow with arrow to let engineer understand all of the interaction and we also provide the label name in every case and scenario.

In the figma file as a designer we always manage it with section to tidy the UI screen, make the flow with arrow to let engineer understand all of the interaction and we also provide the label name in every case and scenario.

⚒⚙️ Usability Testing Insight

⚒⚙️ Usability Testing Insight

⚒⚙️ Usability Testing Insight

https://www.figma.com/proto/IoQ8YUkKJblKlmUMCFrT5Z/UT-Watchlist?page-id=498%3A327&node-id=498-1372&p=f&viewport=1094%2C499%2C0.02&t=N0IxxBeOMezJzECt-1&scaling=contain&content-scaling=fixed

https://www.figma.com/proto/IoQ8YUkKJblKlmUMCFrT5Z/UT-Watchlist?page-id=498%3A327&node-id=498-1372&p=f&viewport=1094%2C499%2C0.02&t=N0IxxBeOMezJzECt-1&scaling=contain&content-scaling=fixed

https://www.figma.com/proto/IoQ8YUkKJblKlmUMCFrT5Z/UT-Watchlist?page-id=498%3A327&node-id=498-1372&p=f&viewport=1094%2C499%2C0.02&t=N0IxxBeOMezJzECt-1&scaling=contain&content-scaling=fixed

🏆 Design Improvement

🏆 Design Improvement

🏆 Design Improvement

✨Change the Watchlist News Icon

✨Change the Watchlist News Icon

✨Change the Watchlist News Icon

After gather the feedback stakeholders decide to proceed this improvement which is the watchlist news icon to make it more direct and noticeable for users

After gather the feedback stakeholders decide to proceed this improvement which is the watchlist news icon to make it more direct and noticeable for users

After gather the feedback stakeholders decide to proceed this improvement which is the watchlist news icon to make it more direct and noticeable for users

📈 The Results

📈 The Results

📈 The Results

  • Successfully launched the Watchlist feature in our newly introduced finance technology app, enabling users to efficiently track and manage their preferred stocks and mutual funds.

  • Improved user retention by providing a seamless way to monitor investment opportunities, leading to higher app interaction.

  • Positive feedback from users, highlighting the intuitive design and ease of use in managing watchlists.

  • Reduced friction in the investment process by integrating clear categorization, real-time updates, and a streamlined UX.

🔑 Key Takeaways

🔑 Key Takeaways

🔑 Key Takeaways

  • User behavior insights: Early adoption showed that users prefer customizable watchlists with detailed filtering options.

  • Iterative improvements: Post-launch data suggested enhancements in onboarding flow and notification settings for better engagement.

  • Scalability considerations: The feature was designed with future expansion in mind, allowing for additional asset classes and deeper integrations.

  • Collaboration & alignment: Close coordination with product, engineering, and research teams ensured a well-balanced feature between usability and technical feasibility.

  • Continuous optimization: Ongoing tracking of user feedback and analytics to refine the experience based on real-world usage patterns.