The final Set Collector tablet solution

Knowing the client designed the desktop without doing user research, or creating flows we started with research so we could provide them with desktop + flow improvement recommendations. Lastly, provide mobile and tablet designs illustrating the card catalog in a digestible and intuitive format.

But, how did we get there? Find out below.

Users and Audience

The primary audience for card collecting, especially sports cards, has been male-dominated. They tend to be more interested in the investment aspect of card collecting.

Usability test

We started the project by auditing designs and creating a usability test with 4 users. Using the current user flow, we identified pain points, bottlenecks, and areas for improvement. Based on the client's designs, we laid out 3 user goals and another designer created the "complete a set" prototype.

Preview the "complete a set" desktop prototype

‍‍Summary of usability test findings:

• Navigation and Usability
  • Participants generally found the navigation straightforward.
  • Encountered challenges with specific functionalities like button actions and expected outcomes.
• Tasks
  • Clear instructions were appreciated
  • Confusion arose around task specifics, such as user actions and expected results.
• Interface and Design:
  • Generally the users had negative comments on interface clarity, use of space, and consistency across tasks highlighted areas for improvement.

Accessibility recommendations and desktop cleanup

One thing that came up during the design audit was that I noticed the color and typeface size didn’t meet accessibility standards. Knowing the user base skews older, it was especially important for them to have a AAA rating. I tested all their component instances' colors and font sizes and then provided recommendations below. I also noted some incorrect header typeface usage, component sizing issues, and elements not aligning with the grid on the desktop. I brought these issues to the client's attention and then set up components and text styles to streamline future updates and establish a well-organized design foundation. These improvements will help the client work more efficiently in the future.

Competitive analysis

One of my favorite tools in the UX toolbox is competitive analysis. I learn so much from how other designers choose to solve problems or not. My fellow designers took a look at Set Collectors' main competitors, http://sportscardspro.com and https://www.tcdb.com/, so I decided to review Discogs, a tertiary competitor. Discogs offers users a discography database to catalog their personal collections and a marketplace to buy/sell items. 

Key learnings:

• A thoughtful content hierarchy is a key aspect of figuring out how to condense a database for users. 
• Your approach to the information architecture of your database has a huge impact on the front-end table experience and the site navigation. For example, Discog has top categories like genre that allow users to arrive on a page that continues the exploration of the genre's themes. 

Wireframes

When I approached tablet wireframes my main focus was the set screens featuring the catalog table because it functions as the front end of the catalog database. It requires a lot of information in one view, and the user can perform bulk actions on this one screen. 

I decided to move forward with the first option, because it was the best one for bulk actions and allowed the user to view more task options in one view.

High-fidelity tablet

Once I felt good about the direction of the set screens, I built out all of the screens for tablet. Tablet followed much of the same behavior for desktop except for a few key components that I built out for tablet. 

Usability test with final recommendations for tablet

Now with my tablet designs in order my fellow designer created 3 prototypes and lead the final usability test. We chose to test mobile and tablet updates. From there she created a usability test report. I put together a list of the problems users encountered and my solutions. 

Project Results

Using the usability test performed by the other designers on the team we were able to show incredible improvements in error rates and independence to complete tasks from the initial designs to the completed designs. I will note that the first usability test solely tested desktop design. The second usability test was on mobile and tablet so I acknowledge it is an imperfect comparison. However, we had to pivot our plans and move forward.

• The task completion rate improved by 50%, with all 4 participants completing the tasks in each flow in the tablet design compared to the 2/4 users who completed desktop goals during the first test.
• The error rate was reduced by 30%, and we measured it by any points of confusion or incorrect button selection. During the tablet test, we saw fewer errors reported, more accurate target hits, and a better understanding of the task flow.

The final "catalog cards" prototype

The final "set an alert" prototype