top of page

The Product:

DEALER is a responsive website that has a wide range of customisations for playing cards. The target user base is comprised of people (all around the world) who collect custom card decks, people who love getting personalised gifts, people who want to comission fandom related playing cards that range from books to video games, and magicians who want to have their own branding on their cards.

OVERVIEW

Challenges:

  1. Communication is challenging for companies that are not based in the user's country

  2. Differing costs for printing and no way of comparing options on the same platform

  3. Lack of variety and range for customisation for users who do not design themselves

  4. Hard to check the quality of the printed cards before they are shipped to the user's address.

Personas

Aliya recently moved out from her parents’ house but still maintains a very close relationship with them. She loves to get them and her close friends personalised gifts. That’s why she keeps a notebook that has special dates and a list of what each of them are interested in to help her choose things.

 

Father’s Day is coming up and she wants to get her father a card deck that has her dad’s face on the King cards and has a couple more customisations so that her dad loves it. However, she cannot find a platform that allows her to do all the customisations.

The oldest of 3 siblings, Robin loves to collect custom card decks. His youngest sibling, Kye, is 22 years old and is also interested in collecting items. Since they have a common hobby, Robin loves to get them collectibles. 

 

However, Kye is interested in niche video games and animes that don’t have a lot of merchandise or collectibles online. Robin wants to find card decks that have elements of Kye’s favourite shows to enjoy their hobby together, but he cannot find a platform that offers the option.

Eren is an upcoming card magician who needs a budget-friendly way to have his own custom deck because having his own deck will help him grow his brand online.

​

However, since he's still a student, most of the card customisation options people on foreign forums recommend are too expensive in his currency. He doesn't know any website that offers printing custom playing cards around his area

Frustrations:

  • “I’m not familiar with the art scene so I’d love to have a masterlist of artists to consult”

  • “I have all these cute ideas for gifts but no talent to make them myself.”

Frustrations:

  • “The only option I have is commissioning artists but they are not always available”

  • “It’s tiring to try and search for a specific feature on multiple websites.”

Frustrations:

  • “When I try to search for things like this online, nothing in my language shows up”

  • “Comparing prices is very confusing and time consuming”

Goals:

  • More options in customisation in one platform

  • A place to direct her to artists for commissions

  • Image uploading option for visual customisation for card decks

Goals:

  • Wide range of media incorporated in card decks

  • More options in customisation

  • A chance to merge playing cards with other card decks

Goals:

  • Finding geo-location based options if possible.

  • More language options 

  • Comparing prices according to the user's financial situation and desires.

User Stories

  • "As a researcher who is not artistically inclined, I want to have access to resources that allow me to browse and customise items so that I can get my loved ones aesthetically pleasing sentimental gifts."

 

  • "As a collector with a busy and spontaneous lifestyle, I want to be able to commission someone to make custom card decks in a certain timeframe so that I can enjoy my hobby with my younger sibling when we see each other."

​

  • "As a student who is interested in card magic and has a limited budget, I want to make my own deck of cards that no one else has so that I can start branding my content to get more exposure."

Problem Statement:

Eren is an upcoming card magician who needs a budget-friendly way to have his own custom deck because having his own deck will help him grow his brand online.

Goal Statement:

Our website "DEALER" will let users from all backgrounds browse designs, compare prices, and give prompts for custom art for their own card decks which will help them efficiently purchase and print custom cards by using their location and adjusting for their financial situation.
​
We will measure effectiveness by analysing customer reviews.

Structure

Sitemap Dealer

Wireframes (Paper and Digital)

20230503_220355.jpg
lofi-dealerpre.png

User Research

Research Goals

  • Determine if users can complete a user flow / core task within the prototype of the Dealer website.

  • Determine the pain points in the page design and interactivity.

Methodology

  • Unmoderated usability study

  • Location: worldwide, remote (participants will go through the usability study in their own home)

  • Date: Sessions will take place between April 10 - 15.

  • Length: Each session will last 10 - 20 minutes.

KPIs

  • Time on task: how much time it takes for users to add a deck to their cart

  • User error rates: how often do users get stuck trying to complete the tasks

  • System Usability Scale (SUS): a questionnaire to evaluate customer feedback

Participants

  • Aged between 16 and 75

  • Participants can be from any country (however, the study will be conducted in English so they need to have a level of fluency that allows them to properly understand the tasks)

  • 2 males, 2 females, 2 freelance artists (gender not important)

Lo-Fi Prototype

This is the 2nd iteration of the wireframes since some users after the testing found the purchase flow confusing. I decided to focus on only one task, instead of designing every single page in detail, so this user flow is only selecting, customising, and purchasing an already existing card deck.

lofi prototype

Hi-Fi Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the first and second usability studies.

hifi prototype

Mockups

mdealer1.png
mdealer2.png
mdealer3.png

I included a flyout menu that is clickable through a hamburger menu icon. Users browse from a variety of devices, which brings the need to optimise the flow for a range of device sizes for a smooth experience.

Logo Design

logo2.png

I created this playing card shaped logo using the colour scheme in the design system I compiled on Adobe XD.

 

The breakdown of the elements were done in Adobe Photoshop using the letters "D", "E", "A", "L", "e", "r" to spell out the name of the website "dealer"

logodealerbreakdown2.png

Accessibility Considerations

1

Hierarchy

I used the WCAG measurements for the hierarchical font sizes for H1, H2, and body

2

Assistive Technology

I designed the site with alt text available on each page for smooth screen reader access

3

Contrast

I made sure that the colour contrast was high for easy browsing.

Takeaways

Impact: 

The website is accessible to a worldwide audience thanks to the language and geolocation components. Thus, it also allowed me to conduct a usability test worldwide instead of just US-based. Designing with accessibility in mind, not just for disability, but for geographical and linguistic differences as well opens many doors.

What I learned:

Working with different design tools is easier than I thought. It took me a little time to adjust to Adobe XD, and I had my fair share of technical difficulties: however, integrating user feedback on my prototypes have been a great experience with this project. 

bottom of page