E! News Mobile App: UX Redesign

Jackie Delagrammatikas
7 min readNov 10, 2016

--

As one of the world’s leading entertainment media companies, E! News digital products average ~469 million unique visitors from around the globe every year. In order to remain on the cutting edge of this competitive marketplace there is an undeniable need to continuously iterate and improve our digital product offerings for our global audience.

The Challenge

While the desktop and mobile web platforms had very recently undergone a redesign, the app itself had largely not been iterated on in 2+ years. We needed to start the project from scratch and treat it as a unique organism (despite having a shared CMS and ad units) due to this inordinate amount of time. Here are the steps I took to identify our users and their concerns:

E! News User Persona
  1. I utilized both internal and external ethnographic data and research toward the creation of a user persona that is representative of our primary demographic.
  2. User persona research and data were provided by Adobe Analytics, comScore, Omniture, Facebook Insights, Pew Research, NNG and Moosylvania.
  3. I conducted remote, unmoderated, task-oriented user tests and interviews with 7 participants (via remote usability testing site UserTesting.com) during the week of July 10–17, 2016.
  4. Tasks and interview questions were presented to establish a baseline of overall usability of simple tasks and to answer questions that had been previously up for internal debate.
  5. The user test participants demographic was chosen based on the information previously determined by the user persona.
Example displays the user flow through only one section of the app.

6. I created an example of the current app’s user flow to display the path of the user as it currently stands.

7. Then I cross-referenced the user flow with Widget Clicks/Impressions Per Device data (collected from Omniture)

8. Following this I used both sets of information to establish a Prioritization List for all of the subcategories of the app.

User Journey

After analyzing all the data I had collected so far, I was able to begin to imagine the kind of situations the user would likely be using our app in. This super simple scenario wound up leading a lot of the design decisions further along in the process.

What We Learned

UserTesting.com user working through tasks in the E! News iOS app.

User Test

Task 1: “What are your initial thoughts after going through the app’s tutorial?”

Takeaways: Almost all of the users (5 out of 7) attempted to interact with the tutorial, unsuccessfully. Several users referred to the tutorial as “basic” and there’s an overall sense of it not being necessary.

Task 2: “Upon landing in the All section — what is your initial impression of the layout? Is there anything you would change?”

Takeaways: All users ranked All section 4 or 5 and overall seemed to enjoy the layout. Though some seemed to have some confusion differentiating between All and News sections.

Task 3: “Explore the app as you normally would and think aloud as you go.”

Takeaways: Most users enjoy the layout of the articles. 2 users remarked on the slow loading time. There was some more confusion around the differentiation between All and News sections as well as which way to swipe within the photo galleries.

Task 4: “Open any article (you don’t have to read it) — what do you think about the layout? Is there anything you would change?”

Takeaways: Everyone likes the way the Article Detail Pages are laid out. One user experienced an issue with a Twitter link which may require additional consideration. What the users seem to dislike most about the ads is clicking them by accident or when they block content.

Task 5: “Open any Photo Gallery. Apart from the actual images, what are your thoughts on the way everything is displayed?”

Takeaways: The users enjoyed the full screen images. Against our hypothesis, most (5 out of 7 users) had no trouble figuring out how to dismiss captions from view.

Task 6: “Play any video, what are your thoughts of this process? Does everything behave the way you would expect? How does this video player compare to others you’ve seen?”

Takeaways: Users enjoy the fact that the videos are short and sometimes piecemealed into multiple videos. One user noticed that the 30-sec rewind might be too much to rewind backward due to the short time lengths. All of the users seemed surprised when the video loaded oriented in landscape orientation and almost all of them (5 out of 7 users) disliked it.

Task 7: “Imagine you want to look at celebrity fashion at the Emmys, please navigate to the section you think you could find this specific content. Was this task easy or difficult to perform? Why or why not?”

Pass: 4/7 users

Fail: 3/7 users

Takeaways: Pass-Fail rate quite close. The organization appears to be subjective which may be causing confusion for users regarding whether they should search in the Style,Photos or Red Carpet sections. None of the users attempted to search the Events section, this begs the question: what would happen if we tasked them to seek something that lives there?

User Interviews

Question 1: “What are your thoughts about the app overall? Is this something that you would use regularly, why or why not?”

Would use regularly: IIII

Would not use regularly: II

Takeaways: The users who said they would not use the app regularly explained that is due to disinterest in the type of content being provided (i.e. celebrity gossip).

Question 2: What do you think is the best or most useful aspect(s) of the app?

Likes Photos: II

Likes Navigation: IIII

Access to content: I

Takeaways: The users perception of the app’s navigation does not appear to be adversely affected by their exhibited difficulty navigating while actually using the app. They even describe the navigation as being their favorite part. This may be a result of unintentional bias due to the way the question was phrased or that the difficulty was not perceived by the individual during the tasks.

Question 3: “Was there anything you found annoying or frustrating?”

Takeaways: There was no clear consensus of responses. Video orientation and slow loading time of photos appear to be the most pressing with 2 users mentioning both. Other mentions include: banner ads, navigation and the buggy horizontal scroll sub-navigation.

Question 4: “Is there anything you wish this app had that it doesn’t already?”

Takeaways: While there was, again, no clear consensus of responses. There were some ideas the users mentioned that are worth considering.

Question 5: “Would you like to be able to add or read comments from other people in the articles? Why or why not?”

Takeaways: The majority of users (4 out of 7) seem to strongly dislike the ability to comment in this format. 2 of the users gave neutral responses. Only 1 user stated a strong interest in this feature.

Opportunities

Original in-app tutorial

Tutorial

  1. Remove the swipe-through tutorial images that displays only on the very first login.
  2. Either make the tutorial interactive or allow users to discover app features on their own.
Notification alert occurs with no prior prompting.
  1. Can use the tutorial to better present the value proposition of enabling notifications on first login.

List Page Organization

  1. Allow users the option to sort pages in order of Trending or Most Popular (in addition to chronological order, as it currently is).

Information Architecture + Labeling

Subjective labeling between; All v. News, and Red Carpet v. Events
  1. Allow for distinction between All and News sections, if there is none, then remove 1 of them altogether.
  2. Re-label subsections so that they’re less subjective for user interpretation.
Optimized user flow
  1. Organize the content to align both user and business goals.

Photo Gallery scroll indicator

The photo gallery displays no guidance to users which direction to swipe.
  1. Indicate to the user which direction to scroll to view images in the photo galleries.

Video Player Default States

Example of the current video user flow.
  1. Default videos to remain in portrait orientation and keep the sound off until the user decides for themselves to change the state.

Commenting

  1. Sync in-app comments with Facebook comments or remove the ability altogether due to low engagement and expressed disinterest.

Load Time

  1. Optimize for shorter load times.
  2. Design the loading states to distract users from wait-time if shorter load times cannot be achieved.

Results

The new E! News iOS app is currently in production. Upon it’s release we will have the opportunity to put our design decisions to the test.

--

--