PROJECT BACKGROUND

This work is the result of Dribbble's 3-week assignment in their UI Design Class.

The Brief

Design an NFT Marketplace app based on the wireframes provided.

My Role

Product Designer

My Team

My world-class cohort of 10 design fellows and 1 amazing Mentor: Ana Santos

Time Spent

Outside of Group Sessions: 60-55 hours

DEFINITION OF DONE

Design 5 key screens and a UI Library.

THE PROCESS

WEEK 01

Early Research & Visual Design Exploration

Activities

Kick-off

Market Research

User Research

Visual Exploration & Moodboards

Design Directions

Design Critique

Kick-off

Design Research & Moodboard Session

As a class, we shared our collective visual design research with each other in a 45-minute Figjam session.

Initial Takeaways

Glass surfaces, abstract liquid forms, blur-effects, soft mesh gradients, and quirky typography were all popular in our session.

At first, there was a strong inclination to lean towards a clean, white UI that would frame and showcase the NFT artwork and pop the call-to-actions, making for a more intuitive app experience, but would it be enough to help the brand stand out in an increasingly competitive space?

Market Research

Competitors & UI Trends

User Research

Initial Persona Profiles

Investors & Collectors

For the purposes of this project, we developed initial profiles based on secondary research and to primarily focus on the Investor and Collector needs at a high-level.

As a point of clarification on the User Flow, all NFT marketplaces require a cryptocurrency wallet of some kind, so we are assuming the User already has their wallet and account setup.

Visual Exploration

Playgrounds & Moodboards

Design Directions

Splash & Home Screens

Design Critique

Feedback

Love

• the typography from Direction 1

• the playfulness of Direction 2 (though possibly not the right fit for Investors and Collectors)

• the cleanliness of Direction 3

Continue

• exploring the branding in Direction 3

• exploring Direction 3's card treatment with the CTA treated so prominently

Caution

• Interesting "swipe-up" use on Direction 2 – how will the overall navigation work?

End of Week Summary

Deliverables

• 2 Distinct Moodboards

• 3 Design Directions

Design Criteria

• High brand impact on Splash

• High NFT impact on Home

• Home is easy to navigate and highly actionable

• UI Framework is intended for personalization (tailoring content to user preferences and behavior is key)

Design Decisions

• Out of scope: Account Setup, Onboarding UX, Sign-In Flows or Wallet Setup

THE PROCESS

WEEK 02

Refining & Scaling the Design

Activities

Design Feedback Incorporated

Brand & Design Direction Refinement

Prototyping

Design Feedback Incorporated

Splash & Home Screens

Brand & Design Direction Refinement

Splash & Home Screens

Splash Screen

Exploration of brand treatments to increase brand impact

Above are various splash screen iterations – the one on the far right is entitled "Ray Eames meets NASA".

Splash → Home Screen

Exploration of the brand banner treatment when in proximity to Cards

Home Screen

Exploration of Portrait-Oriented Cards to Showcase NFTs

Splash → Home Screen → Search → Profile → NFT Detail

Exploration of the User Flow

Home Screen

Exploration of Navigation Treatments

Home Screen

Exploration of Landscape-Oriented Cards to Showcase the people behind the NFTs

Prototype

Continuously evolved over the course of the week to inform design choices

Check the Prototype out for yourself!

Design Critique

Feedback & End-of-Design-Phase Reflections

Love

• the branding on the Splash Screen - "...nice and bold! Which is a great teaser for what's to come inside :)"

• the typography feels playful and clean at the same time

• the various cards make it feel exciting and inviting

• the countdown isn't too in your face but still cleverly pops on the detail page

Continue

• exploring how to pull more of the brand elements from the splash screen into the app

Caution

• the icon treatment in the navigation feels like it needs more refinement, would definitely test it in a usability study

END OF WEEK 02 SUMMARY

Deliverables

• 5+ Key Screens

• 1 Design Direction

• 1 High-Fidelity Prototype

Design Criteria

√ High brand impact on Splash

√ High NFT impact on Home

√ Home is easy to navigate and highly actionable

√ UI Framework is intended for personalization (tailoring content to user preferences and behavior is key)

THE PROCESS

WEEK 03

Polish, Document & Package

Activities

Design "Clean Up"

• Check Screens for Alignment & Consistency

• Check for Usability and Accessibility

• Check Components, Styles & Treatments

Document Design

Publish UI Library

Check the UI Library out for yourself!

END OF 3-WEEK PROJECT SUMMARY

Deliverables

• 2 Distinct Moodboards

• 3 Design Directions

• 1 Refined Design Direction

• 1 High-Fidelity Prototype

• 1 UI Library

Key Learnings

• Don't skimp on the visual design exploration! It's not only fun but is also an invaluable foundation come time for making design refinements later on in the process

• Wireframes can be good guidelines, but design feedback from Users is the best form of input or source of inspiration – it was a hugely missed aspect of this process as was a team collaboration

• While the brand banner was promising, in the end, it detracted time and focus from refining the navigation model, icons and UI animation details that were on the nice-to-have list for this project

Thank you!

I truly appreciate your time and hope you enjoyed this case. Please show some love and like this case or DM me if you have any questions or queries.