Key Collector Comics
UI Design
4 weeks, 3 sprints, 2019
Sketch & InVision
Key Collector Comics
Key Collector Comics is an app for comic book collectors, with 8,000 monthly users that focuses on identifying, cataloging and purchasing key issues off of Ebay. Key issues are books that contain first appearances of characters, origin stories, iconic cover art and other categories that make a comic valuable.
Challenge
Key Collector Comics approached us needing a redesign and rebranding of their app. They boast a product that is completely reinventing comic book collecting. Our challenge was to make our client’s app, visually and functionally, as cutting edge as their company.
We dove right in to find out what issues Key Collector Comics was having with their app. The client’s research indicated, that a majority of features weren’t being noticed by 70% of the users. Currently, the platform has 10,000 key issues identified, with more keys, lists and categories being added each week. The app has, understandably, experienced some growing pains due to this rapid expansion. It needs a system in place that is equipped to handle this data. Additionally, our client wanted to explore different visual paths that their app could take. Our client was not married to any of the branding or UI elements currently in use, but did have a clear idea on the values they wanted to portray. These values were simple, professional and clean. We expounded on those to keep our work in line with what the client had in mind.
SIMPLE
While the product is comic books collecting, the target users are adults; so we will use UI elements that appeal to professionals.
PROFESSIONAL
We will keep our color palettes, font styles, icon styles simple and minimalist so the look of the app is contemporary, rather than outdated.
CLEAN
We will be methodical in our design patterns to organize the complex information in the app to keep designs clean and intuitive.
After aligning with our client on the challenge, the biggest blocker for our team, was to figure out how we could hit as much as we could on these issues, in the timeframe we had. We had a quick 4 weeks to complete this design project. We discussed with our client and aligned on our client’s priorities and expectations on what our client would be receiving from us.
Our Goals
- To address the organization of information issues and make the unseen features, seen.
- To create an up to date, aesthetically pleasing design pattern that effectively displays all the features to the user and that was flexible enough to be applied to all screens current and future.
Competetive Analysis
To better understand the current market, we analyzed other similar companies to understand the tools and visual elements they were using.
Goodreads: We chose Goodreads because they are also a cataloger of massive amounts of books. They used a large variety of categories and filters to help the user very effectively navigate through the app. Swimlanes are utilized to keep everything organized and clear for the user.
Offerup: We chose Offerup because they are marketplace and an Ebay partner. They use a lot of card designs. So, even though there are massive amounts of information and images on the home screen, the cards help them look organized and not overwhelming to their users.
Robinhood: We chose Robinhood because they are a direct competitor that has modern, clean design. The 2-column grid and card layout helps with displaying enough info to the user to be able to digest. The playful icons and accent colors give the app a youthful vibe.
Wireframing
Organizing the features so that they were all noticed by users within the interface was where the UX work came into play. The biggest change to the current layout was separating content on the home screen and giving it its own space within the app:
1. By moving things off of the home page, I had more room to display the comics. I did this by getting rid of the icons for lists and replacing them with carousels and swim-lanes. This was done so users could more easily view the comic book covers contained in lists.
Current home page:
New Design for home page:
I everything contained with the “options” tab and the “additional” tab on the homepage, to a separate page titled “Search” on the bottom navigation. These tabs containing all the additional search options, were broken up so that all the different options were immediately visible to users on the search page.
Current app:
New Design for Search page:
I also added a section to the bottom navigation called “Profile” and moved everything contained within the menu slider there. The “Options” slider, on the top right hand side that contained the filters, was adjusted and relocated deeper within the app search flow.
Current Menu Tab:
New Design for Profile Tab:
MOODBOARDS, STYLE TILES & USER TESTING
Since our client was open to going a different direction, we wanted to explore other visual paths our client’s app could take, stylistically, than where it currently was. This led us to create moodboards. Our client had said they didn’t want the app to look like Pop Art or like a Lichentenstein piece; however, I still wanted to reflect the comic book nature of the app. I did some research on comic book colors, and referenced its expansive history in my moodboards. I found that heroes tended to be dressed in bright, colorful clothing, while villains were wore silvers, purples and earthy tones, like brown or green.
MOODBOARD 01
This first moodboard is a play on the good guys. They usually wear primary colors while their sidekicks where secondary colors.I wanted to play up this hero and sidekick dynamic through my use of the primary blue and it’s secondary complement, orange. I strived to make this board is friendly but still have a modern edge. The shapes are organic and the bright photos add to the openness.
MOODBOARD 02
For the second moodboard, I referenced the genre of comics that was black and white. Then the red was brought in, as that is the most used color for comics. This one was a play on the really sleek, adult, modern style that my client was drawn to.
MOODBOARD 03
Our client’s current app is mainly blue and purple. The splash screen is of a purple superhero. It has lots of dark tones as well as pink and a little bit of yellow. This last one is built within the current brand.
Traditionally, there is a high skew of villains wearing purple. So, this mood board was built to be dark purple, with a slightly edgy, modern aesthetic.
DESIRABILITY TESTING
To better understand what branding direction best suits the users, I did desirability testing with my team on these boards. With that research done, I had a better idea of different directions that the branding could go with the moodboards. I created style tiles from these boards to test how they would translate to an app design.
STYLE TILE 01
This style tile got good feedback on the colors, the dots and how modern it was. However, most of the users thought abstract shapes were childish. That was a big thing our client wanted to avoid, so this board was a big miss. However, I really pushed myself to design a board that was completely outside anything I’d done, so this board was a good design experience for me.
STYLE TILE 02
Users didn’t like the black, white and red together. They found it intimidating. But they did like the dollar bin diving section, they saw it as engaging and potentially useful.
STYLE TILE 03
This style tile tested the best in my research. Users found this style tile simple, calming, innovative and familiar.
Since it got the best overall feedback from users and was rated most in line with the design principles, this is the design direction I moved forward with.
First Round of mock-up/prototype testing
Doing the first round of mock-up/prototype testing, users responded positively to the use of carousels to show off the comic book covers within the app.
HOME PAGE:
They especially liked the idea of the carousel at the top and the idea being able to see comic book covers within the lists contained in the carousel but they missed having the icons representing the lists as they were super fast and easy to find within the homepage. They liked being able to see more of the categories all at once.
Users overall had positive feedback of the UX changes that were made to the home page and bottom navigation. We got some pushback on users regarding the pages containing catalogued lists of comics. There was dissention whether the details of comics should be always showing or showing on when a drop down was clicked.
HOW TO HANDLE COMIC DETAILS: TO EXPAND OR NOT TO EXPAND
Our client was very clear he did not like the look of the bullet points; he thought it looked messy. We found, while doing our testing, that users generally liked the information, detailing why the book was a key, to be constantly visible while they were quickly scrolling through. There was a differing of opinions as to what was best, which gave us an opportunity to test!
Asking further questions in regards to usage, we discovered that some users had their phone perched next to them while they are searching through boxes and are using a single finger to navigate the whole app.
EXPLORING HORIZONTAL SCROLL AS AN OPTION:
I wanted to explore the idea of using a horizontal scroll vs a drop down on these pages. I hypothesized that when you have minimal contact with a screen or when you’re scrolling through very quickly, it would be harder to find a button to click than it is to swipe.
THE IMPORTANCE OF SPEED:
One of the most common comments we got when we were doing testing was, “It seems like extra clicks”. When I asked follow up questions, I found that speed was arguably the most important benefit to the user. Users were often accessing the app from comic book stores with shoddy internet service. The more screens that had to load the longer it took to get anywhere. Especially when, as one user put it, “you’re standing at a box of comics with other old men breathing down your neck as you wait for the app to load”. Bottom navigation was added on almost every screen to bypass this problem while trying to get back to the search or home screens.
UX ALIGNMENT
We decided that as a team, we needed to align on a few UX directions within our individual prototypes. We wanted to find some continuity between our designs to make sure we were giving our client the best UX updates. We affinity mapped out responses that we got from the users and decided upon those changes.
Those of our team that created a separate search page, got great user and client feedback. So we decided we’d all more forward with that. Every single user we interviewed gave us enthusiastic positive feedback on having the swimlane at the very top of the home page featuring the recently added books, that decided we’d all do that.
TESTING THE NEED FOR A PRODUCT PAGE: (HINT, THERE WASN’T ONE)
One change that half of us built and half of us didn’t, was an actual “product page” that contained all the details of the individual comic. I had a product page. We needed to test and see if this page was necessary or if users used the cataloged list page to do everything.
Second Round UX Usability Testing Results
We iterated on these things and then tested them on users. Overall, the horizontal scroll didn’t test that well; users didn’t even notice it. Given more time, I would do more testing on the horizontal scroll. Since we were working on this accelerated sprint schedule, I decided my time was better spent on moving forward with a simpler solution.
SOLUTION TO BULLET POINT CLIENT CONCERN
We decided to do a drop down vs having all the details frozen on the page, as the users we tested did express some evidence that they could possibly get used to the dropdown. However, to draw conclusive evidence, more testing is needed. Ultimately, as the designer, we had to make a call. Dropdowns are a better design choice for managing large amounts of information than leaving it out.
Our research on the product page, however, was very clear: users didn’t need the “product page”. Again, they didn’t even notice that it existed, those this time it worked in our favor, and completed all of their tasks from the cataloged list page. The biggest additional feedback we got from users, is that they wanted to see more comic books on the screen at one time when they were on that cataloged list page.
Solution:
Our freshly iterated upon, prototypes were presented to Key Collector Comics, along with future considerations that we gathered from users. Our client will be picking aspects from all of our designs and will be moving to development stage as soon as possible. Our client was very excited as the company will be rolling out a big marketplace feature in the next six months; and our client will be using our design pattern to tie this new feature into the rest of the app.
To explore my InVision prototype, click HERE.