DC COMICS
As the comic book industry has struggled with paperback comics, the jump to digital has never been greater. Because of this, there are a lot of readers who have made the switch and utilize DC Comics, Comixology, and other apps to read and buy online. But not everyone is convinced, and as an avid user myself, there are certainly changes to be made to create a better experience for all readers.
I will be redesigning the DC Comics app to a cleaner, easier to use design that will allow readers of all types to enjoy the content as well as easily search for comics. This revamp will be focused on iOS users only.
Details
Project: DC Comics End to End App
Timeline: 11 Days
Role: UX Designer
STEP 1. RESEARCH
RESEARCH GOALS
- Find the pain points of navigating, finding, and reading comics on digital devices
- What works for their app already
- What makes and breaks an iOS app in general
- Why paperback readers haven’t already moved to digital
RESEARCH METHODS
- Interviews: I will be conducting interviews with participants of the chosen deomographic, either via a phone call, text thread, or an in person session. I will have a set of questions, some listed previously, and write answers while also hoping to expand on answers that may lead me to questions I had not thought to ask. All questions are also not specific to Comics Books or DC Comics, but to digital reading in general.
- Surveys: Once interviews are complete, I will send out a survey to a broader audience based off of information gleaned from interview results
PARTICIPANTS
Ages 19-35
Single Men
In Greater NYC Area
Working Full Time
Active
INTERVIEWS
Questions
What are some of your favorite apps?
Why do you enjoy them so much? Is there anything you’d change about them?
What experiences have made you delete apps?
Are there any apps on your phone that you hardly ever open but won’t get rid of? If so, why?
When you read, do you do it with a paperback or digitally? If digitally: What made you make the switch? If not digitally: What keeps you from making the switch to digital? If both: what benefits keep you from using one totally?
If you were to suggest a comic to someone, how would you suggest they go about getting it or reading it?
Results
The participants did not have the same answers, but provided different pains and gains that stuck out the most to them. With this information, I can now take those pains and gains and craft a survey to a broader audience to understand what the opportunities are for DC’s redesigned app. All participants brought up great but contrasting points that give us a well-rounded list to tackle and things to keep in mind when starting to build sketches and wireframes.
SURVEY
There are still a lot of people who are not yet sold on the digital reading of comics, and the design should focus on helping people make the move.
Results
- There should be a filtering system, but one that isn’t complicated
- An easy to use search bar front and center
- Main page can display both featured and new
- There should be a clear option to create different sections of the digital library like a playlist as well as pre-made lists
- The in-app purchases need to appear safe, easy, and trustworthy
80%
Prefer to read physical comics
73%
Prefer to search using a search bar
62%
Are skeptical of in-app purchases
59%
Love to use and create playlists
STEP 2. PERSONA RESEARCH
I created the personas above to get a clear idea of potential users and what their journeys would look like with the future design. I took information from the interview results and crafted personas from different backgrounds, professions, and interests. I can now use these personas to get a better understanding of what their user journey and flows will be with the new design.
STEP 3. INTERACTION DESIGN
TASK FLOW
Two task flows were built to showcase different journeys that a user will have in the app. I started by considering what the app already does, and keeping in mind the preferences gleaned from the survey. The task flow will now be used as a foundation for the upcoming user flow.
USER FLOW
The user flow is then crafted to see how the personas would interact with the task flow taking into consideration their pains and gains. I used my task flow to create the user journeys, making sure the journey made sense to their persona. This will help me craft the first sketches of the wireframes, making sure I keep these journeys in mind to display for a prototype.
SKETCHES
I drafted out sketches to put together ideas from the current app as well as designs from interest to focus on the needs of the new design. I used Procreate to sketch and just began putting together necessary elements and paths. This will now help me make a lo fidelity wireframe to prototype and change as needed.
WIREFRAMES
Wireframes came next so that I could easily change and play around with the designs before committing to anything final. I started by using my sketches as reference in Figma, and trying to keep it as simple as possible. I can now use these lo fi screens to create the first prototype and build out the other screens I will need to make to complete a full prototype.
STEP 4. USER INTERFACE DESIGN
HI FI DESIGN
I built hi fi designs based off of the lo fi wireframes and prototype. There were a lot of changes that were made during this process to cater to the user and brand goals. I used a lot of inspiration from Pinterest to change the designs and kept a few elements from my original ones. These designs can now be used as presentation in mockups as well as a final hi fi prototype that will lead me to usability testing. As far as what was changed and why:
- The menu bar is now condensed at the bottom where search can be found front and center. Because the app advertises a new way to read comics, imagery is incredibly important and I found that the less busy the pages look with icons, it allows for focus on the actual media content.
- The sign in page also makes it easier for new or current users to either sign in or create an account
- Purchasing a comic as it stands, goes through the Apple Store. A very easy journey that I wanted to still replicate as an option.
- The visual design here is also an example of the chosen app colors that help the media content pop. The white and heavy dark blue allow for comic covers and art to be the focus, while also helping the user navigate through the app
- The library page is now solely a scrolling library similar to what a music app would have. It also features a drop down menu to allow users to change how they want to search their library whether it be by series name or character.
- Reading list page is added in, displaying how users can create their own lists, similar to that of a playlist, for themselves or to share out
- Character/Info pages show how users can navigate through the different content available for a specific search
- Another big change was the "layered" look for all pages. While I did find that in other designs that were used as inspiration and worked in their favor, it made the pages here too busy and didn't allow room for focus on media and content. So I wanted to prioritize the ease of being able to get back to previous pages, or back to the homepage.
- The system in which DC Comics uses already to read the actual comic stays, for the most part, the same. The options available are easy to use and still work well within the new design
HI FI PROTOTYPE
The hi fi prototype was made so that the journey is clear and concise for both myself and the users. Like the lo fi prototype, I took the designs in Figma and used the prototyping tool to build out all of the available paths. This will be the last step before usability testing, where participants will share their feedback on these designs and the journeys available through the prototype.
Next Steps
Usability Testing
I will need to start usability testing and planning for participants to use the hi fi prototype. In this scenario, I would give them multiple tasks and take note of how they complete each one as well as write down any other feedback.
Affinity Board
With the feedback and observations of the testing, I'll be able to create an affinity board that will help prioritize the next actions necessary and give me a better understanding of the participant's pains and gains.
What I Learned
Trust the research. I took into big consideration the results of my interviews and surveys that the design needed to work in favor of the biggest features: search, navigation, and organization.
Design process is getting stronger. Even though the process and decisions will always be different, I feel as if I have a stronger understanding of how to think and make decisions no matter the problem and solution. I also now feel far more comfortable not hanging on to certain things and working ahead so that I can potentially work backwards to keep all bases covered.
Selected Works
DesignsPassion Projects & Design Challenges
DC ComicsEnd to End App
ApplePayFeature
North Jersey Muay ThaiResponsive Website Redesign
