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.

mockup5-2

Details

Project: DC Comics End to End App

Timeline: 11 Days

Role: UX Designer

Client: DesignLab

Tools: Figma, Photoshop, Instagram

Prototype: Click Me!

STEP 1. RESEARCH

svg2

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
svg3

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
svg1

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

  1. There should be a filtering system, but one that isn’t complicated
  2. An easy to use search bar front and center
  3. Main page can display both featured and new
  4. There should be a clear option to create different sections of the digital library like a playlist as well as pre-made lists
  5. 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

persona3
persona2
persona1

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

5e726404bf518bc7c2e1787e_94fee47c-f0f0-454c-9d5b-d3e569b8f3e8_rw_1200
5e72640456e99fcb30c9a869_0eb045cf-d828-438c-9284-a5910fe0786a_rw_1200
5e72664d86f71f30cbeb449e_3d27400e-53de-407e-be32-f3b558fd975a_rw_1920
5e7266ec03e5c75d8d18ff7e_8f723dff-5870-4ebc-b87c-75333268c9ca_rw_1920-1

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:

ex1
  • 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
ex2
ex3
  • 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
ex4
Screen-Shot-2020-06-07-at-10.17.52-AM

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

svg4

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.

svg5

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

svg6

‍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.

svg7

‍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

svg-image

Like what you see? Let's connect!

Devon Browning
UX / UI Designer
201-294-9485
dvnbrwning@me.com