Key Collector Comics is a mobile app and web platform that focused on key issue comic books (comics that are first appearances, early appearances, origin stories, iconic cover art, classic stories, and many other categories) and offers the most comprehensive database of information and price guides to comic book collectors. In addition to the ability to search information on key issues (comic books featuring characters’ first/early appearances, character origin and death stories, iconic cover art, major events, classic storylines, etc.), users can also catalog their own collection, build wishlists and find items on eBay. The platform also offers up-to-the-minute news, notifications and curated content.
Launched in October 2017, the iOS and Android apps have seen over 75,000 downloads globally (primarily in the US, Canada, and the UK) with 6,000 paid subscribers.
Key Collector Comics’ users are comic book collectors of all stripes, though mostly men from 35–45. This includes new collectors (perhaps introduced to the hobby by the rise of superhero movies), people who have been collecting for years, and people who are looking to get back into it after some time off.
We had a kickoff meeting with our client to learn more about his insights and concerns about the app. He thought the app needed a stronger brand voice to establish its identity to increase the number of its users. The app has been adding more and more functionality since its launch in 2017 and it was becoming unwieldy and potentially overwhelming to users. In addition to a visual redesign, we were also asked to address feature prioritization, the information architecture of the app and some UX strategy.
At the meeting, the client showed us the research he conducted and the result he synthesized from the returned survey he sent out to users. Based on the surveys, we learned that users didn’t notice some of the features in the app, and that's one of the biggest concerns form our client.
He wanted users to describe his app using the words mature, adult, clean, sharp, and professional. We revolved around these words to start our rebrand design journey for Key Collector Comics.
There are four CTA buttons on the home page, but three of them are different types of search. Often these CTAs were overlooked, and sometimes users were confused with the unclear labeling. We decided that we could combine all the searches together to a search page and keep the home page’s more valuable screen space.
The Icons on the home page needed to be more organized.
A high percentage of users are unaware of the existence of the “Option” button and the Key Issue alert.
The “Own”, “Want”, and “eBay” icons needed to be more visible. The eBay button as the primary CTA needed to be the most prominent.
The client wanted a different design for the Notes to establish a hierarchy.
The client wanted a different design for the variants.
We researched some relevant competitors such as Covrprice, Gameye, Offer up, Comixology, Vivino. We learned from them and gathered some valuable takeaways that we should consider when we designed for the Key Collector Comics.
screenshot from Vivino
Searching and filtering were often core functions in these apps, and they helped the user find items or make lists.
screenshot from Gameye
When there were a lot of images in the app, competitors keep their color palette and fonts style very simple.
screenshot from Offerup
Card design and tab menus helped to organize a massive amount of information and images.
Combining the client's expectations and the research we did, we defined principles to guide our direction throughout the design process.
We will be methodical in our design patterns to organize the complex information in the app to keep designs clean and intuitive.
While the product is comic books collecting, the target users are adults; so we will use UI elements that appeal to professionals.
We will keep our color palettes, font styles, icon styles simple and minimalist so the look of the app is contemporary, rather than outdated.
I tried to think about what elements and colors people would associate with comic books. I then thought of superhero sidekicks, things that are illuminated, and sharpness from the armor and weapons in the comic stories.
I translated my moodboard into my style tile to present the initial style of UI elements. I want my design to be perceived as sharp and bright.
When I was moving forward from the style tile to my initial mockups, I tried to step into our users’ shoes, people who have a passion for collecting comic books. I conceived the paper detail (like the Menu button on homepage) design idea for the initial prototype. I wanted users to have some fun moments that they could associate with real comic books when they are using the app. I also used a card pattern for the massive amount of information to keep the interface organized and clean from page to page to align with our design principles.
I tested my initial prototype with 5 users. As people who have been using the app for different lengths of time and who know comic books very well, they provided a lot of valuable feedback to me.
“I really like the design!
It's visually appealing,
but I am not a big fan of yellow”
Most of the users liked the design of the app, especially the CTA buttons and the menu button. At the same time, most of them were not a fan of the color palette. Some users suggested having a more “comic looking” color.
Users felt like there were too many search choices which made it difficult to find a comic book. However, users really liked the variant design because they thought it was more intuitive compared to the original design.
Users really liked the variant design because they thought it was more intuitive compared to the original design.
Users really liked the variant design because they thought it was more intuitive comUsers had mixed feelings about seeing the information of each comic book. Some of the users would like to see the information without extra clicking, and some users preferred the information is hidden until they wanted to read more.pared to the original design.
The most common feedback I got from different users for the initial prototype was the color. Users reacted positively to the design but not the color. This challenged me to readdress my visual styling in subsequent iterations.
For my iteration, I made a big decision for the process, which was changing my entire color palette. I chose red because I felt it was more of a “comic looking” color than yellow.
I then conducted remote usability testing on my high fidelity mockups with 6 number of users. I had them share their screen with me while they were interacting with the prototype, so I could see how smooth it was for them to complete the tasks, as well as which parts of the prototype they struggled with understanding how to use.
Users liked the color palette (big milestone!)
They had mixed feelings about the white background, some users liked it because it made everything pops, some users preferred an overall darker interface.
Users liked seeing all the latest comic book updates on the home page now, but they would also like to see comic books as the first things when they launch the app.
They would also like to see the subscription icons before they actually subscribe to the app.
The search page was easier for users with fewer search choices. Users really like the ideas of voice search and photo search.
Users loved that the value bar highlighted which grade of comic books they owned.Some users didn't like the pink background on the value.
I developed the final prototype based on feedback from usability testing and created some micro-interactions to enhance my design concepts. My aim was to create some enjoyable moments for users when they use the app.
Considering the feedback I gathered from the users, future interface design could incorporate the ability to switch interface themes. I created 3 darker theme screens to showcase this consideration.
At the end of the project, our client thought that the final design was a great improvement from the original Key Collector Comics app and he aims to implement it as soon as possible.
We had a great time working with our client. He was very open to the design choices that we made with our user-centered thinking and research. Working with Key Collector Comics taught me to consider more about the user base. As a designer, I design for the users, not for myself. I learned that different demographics of the user base have a different aesthetic requirement of color, design, and style. Having a full understanding and enough research before getting into the actual design helps with efficiency. Every user has their own needs, we can never make everyone perfectly happy with what we design, but I learned to listen to the user's opinions to the greatest extent and combine their needs to build the closest perfect product.
