— PROJECT NAME
Sequential
— ROLE
Researcher
UI Designer
UX Designer
— DATE
11/2018
Your Friendly Neighborhood
Comic Curator
Sequential is an app that helps people find comic books they’ll love based off of their interests in other media such as tv shows and movies.
PROBLEM
People are interested in reading comic books, but don’t know where to look to find ones they would most enjoy reading.
RESEARCH
In the research phase of this project, I conducted user interviews in order to get a better understanding of the problem. I was most interested in validating the initial premise that people are interested in reading comics and discovering their methods for how they find new movies, shows, and other media to enjoy in their free time.
Competitive Analysis
I conducted a competitive analysis comparing what features that are expected in a media app, but also which ones would set Sequential apart. My findings after investigating direct and indirect competitors highlighted there was no way to find comics based off of people’s distinct taste similar to what Netflix does for movies and Spotify for music. Most recommendations were lengthy lists that readers would have to dig through to find something they would enjoy.
Feature Comparison
I created a feature comparison matrix comparing Comixology, Marvel Unlimited, and Netflix to identify necessary industry standard features as well as areas where Sequential could stand out.
Persona
To develop the personas I combined user research and affinity mapping to highlight similarities between users and build a persona. I decided early on to use persona as an easy point of reference. Clark is the guy who loves engaging in pop culture and wants to be in the know before the next big movie drops. The persona affected the design by informing a trendy interface and patterns that are recognized by other apps like Netflix that the user would be familiar with using.e
User Flow
Helped me consider how the user would physically and emotionally come to the app and I began to work out the process of how it would work. Once a flow was set I tested with paper prototypes and Invision to validate the initial design concept.
Card Sorting
I decided on the content categories with an open Card Sorting session. The main purpose was rather than figure out the information hierarchy, instead see how users prefer the content to be sorted. It was informative to see whether content categories should be more narrow or broad but every sort ended in the user preferring broader categories rather than getting too specific.
Sketches
I came up with 6 different versions to try various placements and input methods. It was a great way to brainstorm and work through and nail down the flow of the app better. I decided to go with version 3 since it struck the balance of being innovative and familiar, but also had the elements in areas that were easier to spot by the user. It displayed the picked shows/movies at the top rather than at the bottom where they get lost or covered by user’s fingers while searching and selecting.
Wireframes
Incredibly useful to hone in on the feel of the app more. This is where I started to consider spacing and other elements. Also began to consider the interactions from page to page more. At this point is where the app felt like was beginning to come to life Used low fidelity wireframes. I used Adobe XD for creating them and tested them using Invision. I had two iterations of wireframes that were tested.
User Testing
At this part of the project I did more user testing to learn about user’s behavior and improve features. I tested three people and in the target group of 20/30s who use Netflix at least two to three times a week. I utilized remote testing through the Invision app and interviewed them as they used the Sequential app prototypes. Their task was to buy a physical comic from their newly generated recommended list. My findings from the tests were that the star rating system didn’t work. Users were confused by its purpose. I redesigned the rating system with a single star for favoriting comics they’re interested in returning to. I also changed the discussion layout to feel less like a chatbot and more like a forum after user testing.
UI Design
Visual style dark, similar to Netflix to make the bright colors of the movies and comics images pop due to the contrast. Followed some iOS style guidelines which informed the spacing and navigations decisions.
Demo
Here you can see a recording of the Sequential interactive prototype built in Adobe XD.
Learnings
My biggest fear was the interviewing process since that was new to me. I noticed the more I interviewed the better I got. It became easier to ask better follow up questions and dig into the users pain points and perspectives.