Introduction

Challenged by Shopify with 24 hours to "lower the barrier to entrepreneurship", I joined a multidisciplinary team to solve the issue. The solution was an NFT marketplace based off of social commerce. The result was a platform that could create momentum and growth in an untapped market by Shopify.

Notably, this app features my collaborative skills as a UX designer in a high-pressure setting.

Too curious? Jump to the prototype

  • Project Type: Hackathon
  • Duration: 24 Hours
  • My Role: UX/UI Designer (1 of 2)
  • Tools: Figma
  • Platform: iOS

My Role

As one of two UX designers of this project, I had the opportunity to work together and build from ground up:

  • Problem Space
  • Ideation
  • UI Design
  • Prototyping
  • Illustation

How might we connect NFT sellers to their digital buyers through a social commerce platform to foster engagement and confidence in their community?

Problem Space

My fellow UX designer and I took the lead to define the problem space with such a broad prompt. We discussed that the NFT market has been exponentially growing and Shopify has not launched their market yet. Therefore, we thought it would be great to introduce NFT's to the public by tying in social media through social commerce.

Hypothesis

My fellow UX designer and I took the lead to define the problem space with such a broad prompt. We discussed that the NFT market has been exponentially growing and Shopify has not launched their market yet.

Therefore, we thought it would be great to introduce NFT's to the public by tying in social media through social commerce.

Secondary Research

  • Half of brands plan to start investing in social commerce over the next year
  • 1/3rd of people increased spending on social media over the past year

Social commerce is a growing field and is forecasted to continue to do so

  • The NFT market is valued at 22 billion, with growth of 8.5x over mid-late 2021
  • The market has exponentially grown over the past year but Shopify has not yet launched their market

NFT market is booming -- so how can Shopify disrupt it?

Persona

In order to guide the application creation process, we created a fictional user to keep their wants and needs in mind. Our synthesized user was  Mike Lang, a new NFT creator who is looking for a market to sell at.

Task Flow

After discussing multiple iterations of a task flow, our web developers gently grounded us to focus on what would alleviate Mark's pain points. We decided to feature Mark's first introduction to the social commerce market and how Shopify can best help him out.

Here's how Mark would interact with the application as a new seller:

  • Encouraged to start touring from the home screen
  • Views a sample of the NFT marketplace
  • Learns information about the market
  • Learns about Shopify support
  • Prompted to start selling

Sketching and Wireframing

Making our thoughts not only tangible... but also presentable!

Initial Sketches

With two UX designers on the team, we divided and conquered this phase.  My partner was more comfortable with live sketching while I verbalized my design ideas. Together, we bounced ideas off each other and decided on sketches that we were both excited about.

Mid-Fidelity Prototype

While my partner was sketching, I quickly drafted mid-fi wireframes so that we could present our ideas to our whole group. We prototyped our designs over Zoom for our web developers to understand and begin ideating their role.

High-Fidelity Prototype

View Figma Prototype

How might users be introduced to the application?

Key design decisions:

  • Warm greetings and prompting - sellers are greeted by the first name and a quick welcome to the marketplace
  • Familiar formatting - the home page was very similar to the existing Shopify applications in order to be stylistically true to the existing Polaris design system

How might users meet the NFT marketplace?

Key design decisions:

  • Eye-catching examples - sellers are first greeted by GIF's layered with buttons and descriptions that a buyer would see
  • Swipe-up animation - the simple gesture teaches the seller how buyers intereact and distinguishes the market examples from the rest of the application
  • Descriptive text - shows the formatting of a title, caption, and hashtags that a seller could write

How might users learn about Shopify features?

Key design decisions:

  • Friendly copywriting - we made sure that information was easily understood and sounded optimistic!
  • Informative (and fun!) illustrations - these were quirky but also supportive to the message they were trying to convey - compliant with Shopify design standards

Key Lessons and Next Steps

Working collaboratively and constructively

Multidisciplinary work requires trust and mutual understanding

These are a few my key takeaways:

  • Working with other fields requires pivoting and compromising- and we did that a few times without issue!
  • Not being the sole designer for a product took a load off my shoulders. It was easy to communicate with my partner and bounce ideas off of them.
  • I'm honest in defining my strengths, weaknesses, and boundaries in order to make sure we establish trust while getting work done quickly and comfortably

Approaching design for the real world

Next steps:

  • Narrowing down metrics and activity that would quantify success or failure
  • Observing the impact of social commerce and how our product could be an effective solution
  • Keeping an eye out on how Shopify launches their NFT platform later this year