Timeless

Drops cards redesign

Company

Timeless Investments

My Role

UI/UX Designer

Team

Noor Dar
Ioannis Geogalas
Marie Claire Finger

Background

As a UI/UX designer and working student at Timeless Investments, I had the opportunity to contribute to the redesign of the drops page cards. The project was structured into four sprints, with the team addressing one ticket per sprint. Collaboratively, we engaged in research and brainstorming sessions. Following this, I was responsible for creating the wireframes and finalising the designs, all under the expert guidance of Noor Dar. Additionally, I prepared the developer handoff documentation, ensuring a smooth transition from design to development.

Problem Statement

How might we “curate” the drops page, so that Users can find the “relevant” assets with “ease”?

Business Goals

Find a setup where we can deliver our assets to our users in a way that can have a positive impact on the CVR(Conversion rates) and CAC(Customer Acquisition Cost):CLV(Customer Lifetime Value)

UX Pain points

Missing a clear area for “Upcoming Drops”, “Coming Soon” and “Trading Now”

No way to identify which asset is a better investment (ones that are dropping)

Missing investment rationale on the first look

Previous Designs

These were the cards that we had to redesign. The main UI pain points were that All the secondary information looks the same, wether it is ‘coming soon’, CTA like ‘buy fractions’ or ‘trade now’ or sold out date info, Card size too big and Image heavy ( emotion based) which were missing Investment insight

Team Brainstorming Session

The design team engaged in an intensive brainstorming session, where we embraced the traditional approach of pen and paper to sketch out our ideas concerning the Problem Space. We conducted a time-constrained brainstorming exercise, allotting each team member a specific duration to generate their sketches. Following this, we collectively discussed our concepts in detail. This session was highly exploratory, allowing us to delve deep into creative solutions and innovative approaches.

Wireframes

Following the brainstorming session, I received a comprehensive brief outlining the objectives for this iteration. Consequently, I concentrated on redesigning the cards, experimenting with various approaches to effectively display the details surrounding each asset. This was aimed at providing users with the necessary information to make well-informed investment decisions.

High Fidelity Wireframes

Following the wire-framing phase, I selected the most logical designs and transformed them into high-fidelity prototypes. My goal was to evaluate their integration within the app’s design system and overall environment. To refine these designs further, I organised an internal review session, inviting feedback from my colleagues. This collaborative approach enabled us to identify any potential suggestions or gaps effectively.

Card Categories

Within the Timeless App, various categories of an Asset exist, such as Exited Asset, Trading Asset, Coming Soon Asset, Collector’s Club Asset, etc. The final design of the card needed to be adaptable across all these categories. Once we finalised the core design, I proceeded to create variations for each specific category, ensuring that the design was versatile and cohesive for all different types of assets.

Card Standardisation

In the final phase of this project, the developer handoff, I was tasked with establishing the color and size logic for the card designs. Considering the platform hosts over 500 different assets, manually selecting colors for each was impractical. Therefore, we opted to automate the color selection process, adhering to a logic that is accessibility-compliant. I adopted the HSB (Hue, Saturation, Brightness) color palette strategy, where the background color for the text is designed to have 10% greater saturation than the background color of the image, ensuring both aesthetic coherence and accessibility standards.

My learnings

This project was a rich learning experience for me. The brainstorming sessions with the team were particularly enjoyable, as exchanging ideas greatly influenced the development of my designs. I gained valuable insight into effective developer handoffs, ensuring that our collaborative vision was perfectly translated into the final product. Working with the design system and creating comprehensive documentation for the components I designed was enlightening. While I had previously only studied accessibility testing theoretically, this project provided me with the practical opportunity to apply it. Additionally, the experience taught me that real-world projects are dynamic; scopes evolve based on ongoing findings, adapting to the project’s needs and ensuring its success.