Collectable

Collectable is a fractional investing platform specialising in sporting collectibles. Their app allows users to buy and sell shares in iconic, blue-chip sports cards and memorabilia.

Collectable approached me to help them design a new feature for their app which would allow users to compare an assets (sports collectable) value against the S&P 500 stock market index across different time frames. With sports collectibles significantly outperforming the S&P 500 the aim of this new feature was to show this to users in a simple and intuitive way, and provide users an incentive to invest. They also wanted a way to compare the assets value against other similar assets.

UI Design

UX Design

1. The Approach

As this was my first introduction to Collectable I took time to learn about the company and get familiar with their platform. I installed the app, created an account and explored the user flow from viewing an asset to purchasing shares.

Observations/Key Findings

  • The asset screen was very content heavy, with the chance of important information being missed or overlooked
  • There was no clear categorisation or hierarchy of content

2. Competitor Research & Analysis

I spent time looking at competitors to see how they approached the asset screen and whether they had a comparison feature of their own. From my research the two main competitors were Rally Rd and Otis. I explored both platforms to see what they do well and what could be improved.

Rally Rd

Pros

  • Better access to content categories via a menu (Chat, Details, Gallery, Legal)

Cons

  • Content is convoluted
  • Navigation of the screen is slow (scrolling assist)
  • UI elements are not consistent

Otis

Pros

  • Clean graph interface
  • Clear categorisation
  • Consistent UI elements
  • Visually clean with elegant use of white space

Cons

  • Not obvious the graph is interactive

3. Ideation

The new comparison feature was going to play an important part in converting users into share holders so it required a clear call to action. Without categorisation of information it was difficult to see where this new feature would reside so it seemed logical to fix this issue first before wireframing a solution.

Taking inspiration from Rally Rd, which reinforced my own idea, I thought the addition of a menu to access various information on the asset seemed the best solution. Reviewing the existing information I categorised it into three sections, Financials, Learn and Compare. The new feature would be located under Compare.

The feature itself is in the form of an interactive graph where users can compare the assets value against the change in S&P 500 since the IPO (Initial Public Offering). The change in the S&P 500 is presented as a percentage. The user can tap and hold anywhere along the asset line to get the value at that particular date.

I introduced a sort/filter button revealing an action menu where the user can then change the comparison metrics.

Wireframes showing the new content categories (Financials, Learn and Compare) and comparison feature

4. Visual Designs

It was agreed the new feature should work within the current design system and framework as much as possible to speed up development and release time in order to start gathering test user feedback.

The visuals were created in Figma where we could prototype and get most accurate representation of the feature.

The design complemented the current design system and worked with their existing UI framework

Results

User testing so far has been positive, with Collectable already looking to make improvements from initial feedback.

I continue to work with Collectable helping with platform improvements and new features.