Stack Up
A mobile app for comic book and video game collectors, where they can keep track of their collection, see its value and trade with people of similar interests.
Concept Project
Made during a UX course at "Create"
Guided by Lior Yair
.jpg)
Shaping the concept
I've been collecting stuff since I can remember: Figures, scale models, vinyl records, etc. But it was never organised or cataloged in any way.
I even inherited a large post stamps collection from my grandparents, but I didn't know it's value, and didn't have the time to start researching about it. So it just ended up lying in a cabinet.
I've noticed that other collectors have the same issues so I decided to further look into this problem to see if I could provide a good solution.
Research
Personas
Based on my research, I defined 3 main collector personas:
📚 The Hoarder
One that collects various items, without a specific intent. Basically it's the most common type. People are collecting stuff just for fun - travel magnets, beer caps, foreign coins, etc. In some cases, this type of collector may buy something he/she already has.
Intent: Collecting items for fun.
Biggest need: A fast way to add items to a collection in order to keep a track of his stuff.
🧩 The Systematic Collector
One that collects items of a specific theme or type in order to complete a collection or make it as big as possible.
Intent: To complete a collection.
Biggest need: An ability to track missing items in order to complete collections.
💰 The Investor
Collects items with an intent of reselling.
Intent: Gain profit from the collection
Biggest needs: An ability to see an approximate value of items in the collections, a way to buy and sell items.
Current Solutions
I looked at existing tools that offer a way to manage a collection, and I found some good ones. Most of them provided really good solutions for a specific problem (like a fast way to add an item to a collection by scanning it's barcode), but I didn't find one that answered all of my user's needs.
UX & Design
Structure
I wanted to create a straight forward structure and simple navigation so users could easily find what they're looking for.
-
The "Collections" is the main screen that organises the user's items according to publishers and series.
-
Adding a new item is done by scanning a barcode or taking a photo, and has an easy entry point in the main navigation.
-
In the "Explore" screen users see suggestions of items they might want to purchase in order to complete their collection.
-
The "Profile" screen is where users control their notifications, messages, settings and see their achievements list.
Sketches
Coming from Industrial Design, I rely heavily on sketching throughout the entire product development process. It is a great tool for brainstorming and visualising ideas. The more thoughts I put on paper, the easier it is to create logical wireframes and flow.
I knew that the content is what matters the most in this project so I chose to use large item images and thumbnails and to let them speak for themselves. Creating these sketches helped me decide on the most suitable layout and hierarchy for each screen.
Wireframes
After the sketches I created high fidelity wireframes. I wanted to create a clear flow and stay true to OS guidelines so the app would look and feel familiar to users. I chose to use big thumbnails in each list to keep the content recognisable. I decided to display the value of each item and collection on the thumbnail, on every page because to give the user a sense of value.
UI Design
In UI design I mostly stayed true to my wireframes. A few conclusions and thoughts guided me throughout this phase:
-
Due to graphically rich content, the application should stay as clean and clear as possible.
-
Color variations kept at a minimum and in most screens remained monochromatic.
-
I picked "Muli" as my font, because it looked solid and classic enough, yet a bit "funky" in appearance.
The Final Flow
Collections
The "Collections" screen is the main one. Here users can see their collections, start new ones and search for specific items. For example, if I want to see an approximate value of my collection, or what items are missing, I will select the "Comic Books" collection, pick a publisher and the desired series (Avengers).
All the owned issues are displayed in full color while items that are missing from the collection appear in greyscale. For more item information (story summary, writers and artists, item condition) and editing, the user has to tap on the thumbnail.
Adding a New Item
To add a new item to the collection, users need to go through the "Add Item" flow. After scanning a barcode or taking a photo of a comic book cover, the new item is displayed on a new screen, showing basic publishing info. There is an option to add more photos if needed.
In the bottom section, users can pick the item's condition and see it's estimated value. It's also possible to mark the item for sale. After saving the item, the user is prompted back to the series screen, where the newly added issue is shown. When completing an entire series for the first time, the user receives a matching "Achievement" award.
Explore
This screen displays all the missing items from the collections and relevant items based on interests. Tapping on the thumbnail opens a detailed view with more photos, condition and the collector who sells it. Trade is arranged outside the app, by contacting the collector directly.
Profile
All the preferences and application controls can be found in the "Profile". Message history, items marked for sale, wishlist and collector's achievements are located here.
Conclusions
It's hard to create a product that provides a solution for all user types. I didn't want the app to be cumbersome and loaded with unnecessary features. I focused on my personas and their main need, which is managing and organising their collection. This is why i didn't implemented a social aspect to the app and didn't created a marketplace.
