top of page
Markets Hero Image.png

Vault Mobile - Markets


Markets is a product within Vault Mobile that allows users to easily create multiple watchlists and access commodity data on the go.


Agriculture tech company


I acted as the Design Lead for the Markets product and worked closely with the Design Director and another assisting Product Designer.

Skip ahead to the good stuff


Previously to being integrated into Vault Mobile, Markets was only accessible on desktop and limited users ability to obtain up-to-date data on the go.


Translate the current table and chart heavy desktop product into a mobile experience that doesn't jeopardize how data is accessed and interpreted.

The 2 month process
  • Led an audit of the existing desktop product and lo-fi explorations from the lead engineer from the clients team.


  • Collaborated with my Manager and a Product Designer.


  • Ran weekly check in meetings with the client to align on design decisions.


  • Handed off an annotated design file with a local component library and thorough prototype defining key interactions.


  • Supported engineers throughout the build process.


  • Contributed reusable components to the main design system.

Proccess Calendar.png
The kick off.png
The kick off

I led the kick off meeting with the client where I discussed my initial findings and questions from auditing the existing dashboard product.

I gained clarity on:

  • What users were looking to achieve


  • Areas of new opportunity


  • Clarification on commodity trading processes (Essentially a lot of my questions answered!)


Market users
Two sets of goals

01. Watchlists (new feature)

Currently, the product does not offer a defined watchlist feature. Users have expressed to the client that having the ability to generate editable watchlists is essential to their work flow and building a healthy business.

02. Legacy Features

The remaining desktop legacy features have proven successful amongst users. They are able to gain a high level overview of products as well as a more granular overview of Futures.

  • Product Overview Page

  • All Futures Page

  • Future Overview Page


Legacy Products.png

01. Watchlists

Design a new
watchlist feature

The desktop product currently offers an “Add Favorite Product” feature that allows users to select a product that then surfaces as a card on the All Products page.


The problem:

  • Users are limited to a set amount of product cards pinned to the top of the page.


  • Contents of a product card cannot be edited.


  • Users had to create a workaround flow to meet their changing needs.


Watchlist overview.png
Define the MVP

1. Multiple watchlists:

There is an increasing need for users to have the ability to watch different categories of products. Therefore, users require being able to generate as many watchlists as needed to meet their business goals.

2. Watchlist customization:

A driving force behind user frustration with the “Add Favorite Product” feature was the lack customization.

  • Edit a watchlist (Delete and re-order products)

  • Manage watchlists (Delete, re-order, and rename lists)

  • Global search that makes adding products quick and easy.

1. Multiple watchlists

Identifying how to surface one or more watchlists would set the tone of the feature. We had to consider how the layout would impact the overall customization of each watchlist.


  • Guiding principles:

  • Reduce redundancy

  • Prioritize a clean interface

  • Minimize scrolling


  • Give users control

Card_watchlist parent state-1.png
Card_watchlist parent state.png
Design explorations
Exploration 2.png
Exploration 1

Pro: All watchlists are readily available for users on one screen.

Con: Repetitive, cluttered, and can potentially take up a lot of vertical space that requires excess scrolling.

Exploration 1.png
Exploration 2

Pro: Cleaner interface

Con: Users have zero control over the order of watchlists.

Consideration: Keep the simplistic approach but re-work how users can switch between watchlists.

Multiple watchlist solution

We opted for a design that highlighted one watchlist at a time, but gave users the opportunity to switch between watchlists through a watchlist dropdown.

This design reduces the amount of potential tapping, swiping, and scrolling that the previous explorations offered.

Feature details:


  • Stand alone watchlist - Helps users focus on the data they need in the moment without the extra noise.


  • Dropdown - Users can easily switch between existing watchlists or add a new watchlist.


  • Global search - Allows users to easily add a product to the selected watchlist.

Watchlist solution.png
Multiple watchlist solution flow
Solution flow.png
2. Watchlist customization

Leaning into “States” that have specific functions allowed us to keep users on the same page while completing tasks.

Key states:


  • Default state

  • Edit state

  • Manage watchlist state

  • Empty state

  • Search state

Customization hero image.png
State solution screens

02. Legacy products

The problem

The legacy products consist of charts and tables with large data sets that are easy to display and consume on a desktop.

The challenge

Translate the three legacy products into a mobile product.

  1. Product Overview Page

  2. All Futures Page

  3. Future Overview Page


  • Give users the ability to add a product to a watchlist


  • All elements must be interactive (Tables and Charts)


  • Seamless navigation between screens

Identify patterns

Each of the three legacy products shared similar patterns. We made the below decisions for each element to establish consistency.

Card Structure: All Vault elements are built within a card structure to help separate sections.

Overview Cards: Overview of relevant information for a specific product or future.


  • Interactive and horizontally scrollable

  • Segmented button or dropdown to control views

  • A key that updates based on the trend line selected


  • Fixed first column

  • Horizontally scrollable

  • Filters where necessary

Product overview
Product Overview.png
All futures
Future overview
Future Overview.png
Cohesive Design
Re-designing with the design system allowed for consistency across all Vault products
Ability to build the product into other categories within Markets (Spot price)
Available at the Apple store
and Google Play
bottom of page