UX/UI Design

Verifiedink

Verifiedink is a digital platform where athletes can sell and customize limited edition AR NFT cards (Ink) to showcase their talent and earn income. In this case study, my challenge is to design an intuitive user flow for a new to-do feature that guides users through various tasks on their dashboards.

Projects Duration: 3 weeks

Role: UX/UI Designer

Tools: Figma, Photoshop, Illustrator

Stakeholders: VerifiedInk, Creative Director

01
Research

When researching for verifiedink's to-do feature on user's dashboard, I first need to do a a market analysis on competitors using a heuristic evaluation.

02
Define Users & MVP

Define a persona and create a MVP Chart that helps prioritizes the key functions of the To-Do feature.

03
Userflow  

I have created a user flow to help me visualize the overall navigation of getting a new task to finishing them.

04
Design & Iterate

Mid-fi wireframes help me get an overview of how visuals can inform the order of tasks and getting feedback from user-testing can help with further iterations.

05
Finalize and Hand Off

Organize files with design specs, components and assets to be sent off to web developer.

01
Research

Market Analysis

Competitors such as NBA Topshot and SettleMint also enable users to buy and sell NFT collectibles. By conducting a heuristic evaluation of NBA Topshot and SettleMint, I can identify positive features to incorporate into Verifiedink's dashboard, particularly concerning the To-Do feature.

Evaluation Criteria (based on Nielsen’s 10 Heuristics for User Interface Design)

Skip to Summary

Visibility of System Status

  • Positive: Clear indication of user progress and notifications.
  • Negative: Loading times for certain features (e.g., NFT details) are not always indicated.
  • Positive: Real-time updates on blockchain transactions and task statuses.
  • Negative: Initial load times for dashboard elements can be unclear.

Match Between System and the Real World

  • Positive: Sports-themed design elements and terminology align well with the target audience’s expectations.
  • Negative: Some NFT-specific jargon may be confusing for users new to the platform.
  • Positive: Uses familiar business and blockchain terminology.
  • Negative: Technical jargon might be overwhelming for non-expert users.

User Control and Freedom

  • Positive: Easy navigation with clear back buttons and menu options.
  • Negative: Limited undo options for certain actions, such as completing or removing tasks.
  • Positive: Clear navigation paths and easy-to-use backtracking options.
  • Negative: Limited undo functionality for certain blockchain-related actions.

Consistency and Standards

  • Positive: Consistent use of icons and terminology throughout the site.
  • Negative: Occasional inconsistencies in layout between different sections.
  • Positive: Consistent interface and terminology throughout the platform.
  • Negative: Occasional discrepancies in icon design and placement.

Error Prevention

  • Positive: Clear confirmation dialogs before performing critical actions.
  • Negative: Some error messages are not descriptive enough, making it hard for users to understand the issue.
  • Positive: Pre-emptive checks before performing transactions.
  • Negative: Some error messages are vague, lacking detailed explanations.

Recognition Rather than Recall

  • Positive: Frequently used actions and information are easily accessible from the dashboard.
  • Negative: Some navigation elements are hidden within submenus, requiring extra clicks to access.
  • Positive: Frequently accessed features are prominently displayed.
  • Negative: Some essential functions are buried under multiple menu layers.

Flexibility and Efficiency of Use

  • Positive: Keyboard shortcuts for power users.
  • Negative: Lack of customization options for the dashboard layout.
  • Positive: Advanced features for experienced users.
  • Negative: Limited customization options for the user interface.

Aesthetic and Minimalist Design

  • Positive: Clean, visually appealing design with a focus on sports imagery.
  • Negative: Occasionally cluttered interface due to overlapping elements and pop-ups.
  • Positive: Professional, business-focused design with clear typography.
  • Negative: Some sections appear cluttered with excessive information.

Help Users Recognize, Diagnose, and Recover from Errors

  • Positive: Tooltips and hints are available for most features.
  • Negative: Limited help options for less common issues.
  • Positive: Detailed error logs and diagnostic tools.
  • Negative: Limited immediate guidance on resolving specific issues.

Help and Documentation

  • Positive: Comprehensive FAQ section and tutorial videos.
  • Negative: Some advanced features lack detailed documentation.
  • Positive: Extensive documentation and user guides available.
  • Negative: Some documentation is overly technical, not user-friendly for beginners.

02
Define Users & MVP

Persona

Verifiedink's target audience are mainly athletes who are still in school and these personalized NFT cards enable buyers to support the athletes.

Pamela Connor

Highschool Soccer Team Player

Age: 15

Location: Columbus, OH

Pamela is an Ohio high school sophmore and a dedicated member of her school's varsity soccer team. As a passionate athlete,  she strives to improve her skills and support her teammates. Pamela is also a natural leader and well-respected by her peers, known for her positive attitude and strong work ethic. Her team has recently qualified for nationals at Chicago, and she is eager to help the team make the journey. Pamela has found VerifiedInk and signed up for free to create her own digital trading cards with a small fee for the fundraiser. However as a new user, she is not sure what she needs to do to set up her cards.

Goals

  • I want to see the status of my tasks so that I can easily track my progress.
  • I want to receive notifications for upcoming due dates so that I don’t miss important tasks.
  • Easy to upload NFT photos.

Pain Points

  • Pamela is already busy with school and soccer practice, she needs a fundraiser that is easy to set up.
  • She doesn’t know where to start with fundraiser so having a checklist throughout the process is very important.

" I am passionate about soccer and I really want our team to go to nationals. Being able to productively fundraise for my team is my current goal."

MCSW Chart

Must Have

To Do Button to gather all to-do items in one place.

Able to upload NFT card photos all in one screen.

Responsive layout for both desktop and mobile.

Set priorities to tasks

Status indicators (e.g., "Pending," "In Progress," "Completed")

Descriptive error messages

Help section with FAQs and contact support information

Should Have

Iterate on design and functionality based on user feedback

Email notifications for important reminders (optional setting)

Could Have

Options to personalize the dashboard layout

Optimize white space to reduce visual clutter

Won't Have

Detailed guides and examples for advanced features (future iteration)

Push notifications (future iteration)

Full customization of To-Do feature with drag & drop reordering (future iteration)

03
User Flow

The user flow diagram on the right illustrates the steps a user will take from receiving a to-do task alert notification to completing the task. In addition to developing the to-do feature on the VerifiedInk dashboard, I will also concentrate on designing the NFT photo uploading interface.

04
Design & Iterate- Option 01

To-Do Feature

For the first option, I aim to make it easy for users to access their to-do tasks by placing it at the top and including a drop-down list to display their pending tasks. A red highlight on the task count will alert users to any incomplete tasks.

To-Do Drop Down List- Prioritizing Tasks

Numbering the Tasks
‍
‍Numbering will allow users to focus on the most important tasks first and manage their time more effectively.
‍
Direct Destination
Clicking on a task in the drop-down list will take the user directly to that specific task, reducing the hassle of searching for it themselves.

Clearing Tasks
Once a task has completed, the order of task will rotate up according to prioritization.

Upload Photos for Users'
NFT Card All in a Single Screen

For the first task, I need to create a system for users to upload photos for each of their NFT cards. The NFT cards come in three tiers of rarity: common, legendary, and rare.

My Challenge
I have to design a UI that enables users to upload their photos on a single screen, eliminating the need to navigate to another page.

04
Design & Iterate- Option 02

To-Do Feature

In contrast to option 01, this To-Do UI opens up to a popup modal that keeps all the to-do tasks inside that modal.

Alert Indicator
Along with the red background of the task count, I also added a red shadow to enhance the task visibility.

Pop-Up Modal

A pop-up modal allows users to access each task through a dropdown list. When users click on a task, the modal switches to display the selected task.

Need Help?
If users encounter an error or problem during their tasks, they can easily access help from the upper right corner of the modal.

Upload Photos for Each Rarity

With the different rarities of the user's NFT cards displayed, they can easily select which card to upload. This visibility helps reduce the likelihood of errors.
‍

Switching to Another Task

As the user completes a task, the task count will update to reflect the number of remaining incomplete tasks.

04
Design & Iterate- A/B Testing

Since I have two design options for the To-Do Feature and the NFT card photo uploading task, I decided to conduct A/B testing. This testing can provide insights into which interface users prefer, as well as what they liked and disliked about each option.

3/4
Users prefer Option 02

1/4
Users encountered minor problems navigating Option 01

4/4
Users are able to locate tasks under 1 minutes in both options

Option 01

PROS

  • Accessible To-Do Dropdown list right on dashboard
  • Direct navigation once clicked on the to-do task

CONS

  • Have to navigate back to dashboard if directed to another page
  • The numbers next to tasks can be misleading, as they may be interpreted as indicating the number of incomplete subtasks within that task.
  • NFT Cards: Not clear enough that users need to choose rarity before uploading because it was hidden as a menu list in the button (shown below)

Option 02

PROS

  • Dedicated pop-up modal for tasks, reducing distraction from rest of the site's interface
  • Can interact with the tasks directly within the modal without navigating away from the current page, reducing the steps needed to manage tasks.

CONS

  • Some users finds the pop-up modal be an extra step when tasks can be easily accessible from the main dashboard.
  • The visual is a bit overwhelming as it is overlayed on top of the main page.
  • The numbers next to tasks can be misleading, as they may be interpreted as indicating the number of incomplete subtasks within that task.

05
Finalize & Hand-Off

After gathering statistics from the A/B testing, the results showed that the majority of users prefer Option 02 for the To-Do Feature. They appreciated the pop-up modal, which allows them to focus on completing their tasks and each task is accessible through just the modal.

Adjustments According to Users' Feedback for Option 02

Feedback 01

Number next to the task is confusing as it can be interpreted incomplete subtasks within that task.

Solution

Eliminate the numbers and once task is completed, the task disappears and task count alert decreases.

Feedback 02

Not enough contrast between background and pop-up modal causing visibility and can be distracting.

Solution

Increase the blur effect of background and increase color contrast.

Option 02: Pop-Up Modal

Verifiedink To-Do Feature on Mobile View

Creating a pop-up modal for a desktop viewport versus a mobile viewport can differ in certain aspects, such as graphics and progress cues to help users identify their current steps. However, it is important for me to maintain consistency with the desktop version because a unified user experience ensures familiarity and ease of navigation, regardless of the device being used.

Pack All UI Components for Hand-Off to Web Developer

Reflection

By comparing two different interface options for the To-Do Feature, we gained valuable insights into user preferences and behaviors. The clear preference for Option 02, with its pop-up modal, underscores the significance of focused and intuitive design elements in enhancing user experience. The success of Option 02 demonstrates the impact of thoughtful design choices on user satisfaction and task efficiency.

Next Steps
In the next steps, I would definitely enhance the customizability of the To-Do feature, where users can either put a deadline to their tasks or to rearrange the order of priorities. As this feature gets implemented, I would love to monitor the statistics of the To-Do feature and make further adjustments accordingly.

Previous Project

DC Career Connect

Next Project

ProSentry