COLLECTR APP 

App Design • User Interface • User Experience


Overview

In preparation for an interview, I was asked to quickly create a fake app based on a short brief and type of collectible item I chose from a small list. Minifigures were my automatic first choice, because who doesn’t like LEGOs? Here's what I created.

The Problem

Users have Lego Minifigures collections of varying sizes.
They want to:

  • Inventory their personal collection and track it

  • Know what's missing from their collection easily

  • Message/engage with other Minifigures collectors

  • Add new figures they acquire to their collection with ease

  • Know how many more figures they need to complete individual series

  • Find out what each figure they have is currently worth quickly and easily

Required Deliverables

  • Attractive, high-fidelity app homepage

  • User flows/wireframes for adding an item to your collection

Materials Used

  • Adobe Illustrator

  • Sketch

  • Pen & paper

 

 

The Homepage

 

Homepage Features

Part of my assignment was creating a clean homepage with features that collectors entering the app would benefit from accessing first.

After researching the number of LEGO Minifigures that are available to collect, I interviewed two friends I knew were fans of collectibles to see what they’d want from an app like this.

I based the following features on my findings, knowing additional testing would be needed to determine the best “final” product:

  • Modular, easy to test with users and replace segments. Can have infinite scroll to accommodate new sections

  • Add a new Minifigure immediately, using either the button at the top or the nav bar

  • Click into a search screen to to find an individual item and see its current price

  • Latest Minifigure news

Nav Bar

  • Collections (series list)

  • Forum—connect with other users and send/receive messages. Will have notifications.

  • Add item

  • Price guide

  • Personal profile

 

 

Add Item Flows

For this part of the assignment, I wireframed two methods of adding an item: one for an individual figure, and one for adding multiple Minifigures in a series. 

Method 1: Users can either tap the large button in the first section of the home screen or the large "+" button in the nav bar to get to a page where they can add an individual figure to their collection. Since the app will have a preloaded archive of all existing Lego Minifigures as they are released, their info will autofill as the figure name is typed or some other type of identification is added.  

Method 2: Because adding many figures to a collection in one go is a very common use case, especially when users first download the app, I came up with tap-to-add: a user navigates to a series, either by navigating to their collection and scrolling through or navigating to the series list, and can add a new item to a series with every tap of a "got it!" button. To signify it's been added, the figure appears fully opaque and the "got it!" turns to a check mark. Removing it from your collection is as simple as tapping the item again.    

 

Results

I got the job! My tap-to-add feature ended up getting used in the actual Covetly app I was being hired to design, and over 60% of users prefer it to searching individual items to add them.