STARZPLAY’s App

Reading Time: 6 minutes

Client: Starzplay.
Platform: Mobile App.
Project duration: 1 week.
Software tools: Sketch, Zeplin, InVision, Google Forms, Google Analytics…

The Challenge

The challenge was to improve content search in the STARZPLAY’s App. First of all, let’s have a look at some screenshots related to the current STARZPLAY App:

Research

The first step was to carry out some netnography in order to know more about STARZPLAY; how the brand was ranked and what was said about it. I looked for opinions that may offer insights to better understand the challenge I was facing.

Orange TV – The first result was the Orange TV site advertising STARZPLAY and offering recruitment and technical information. I assumed that the service was already available in Spain under Orange TV. Otherwise, I didn’t see any comments or opinions from users. I moved on to the next result.

Xataka – The article clarified dates for service availability. They confirmed that the service was active in Spain since March 28th. There were no comments or opinions from users. We moved on to the following results.

StarzPlay – When I pressed any CTA ‘View Now’ it gaves me the option to subscribe via Orange or Vodafone. No user comments.

Espinof – Here we had some comments. I collected those that may be enlightening. I saw 6 quite negative comments. From my experience, I would say that this type of negative feedback was due to the feeling of “saturation” that many users have in the new emerging platforms, such as Apple’s or Disney’s. Nobody talked about the quality of the platform’s contents or the experience of using the platform. Next.

Genbeta – Provided information on the scope of the platform (10 million viewers for the most watched series ‘Power’). No user comments.

Fueradeseries – Neither does it provided direct information on the platform user experience.

Starz.com – Official website of STARZ. No user comments, but I finded it useful as an approach to their interface.

Computerhoy – Similar to the previous ones. There were no user opinions on the use of the platform. They explained that the platform was property of Lionsgate and its availability through Orange TV.

We moved on to the iOS and Android app stores. In my experience, this was a good reference point for netnography:

AppStore – The rating was 2.9 out of 5 and there were few comments. None of them refered to the experience using the interface, only to its availability in different countries.

Google Play – First relevant finding. It refered indirectly to the STARZPLAY interface. Several comments indicated that the Chromecast feature worked better than on Netflix. This leaded me to two findings:

• The platform seemed to have a solid performance.
• The interface seemed clear on the use and understanding of the Chromecast resource.

So far the netnography. It had not given me much information to be able to empathize with the users in their use experience, but as a kick-off it was very useful to me when it comes to giving a better context.

Proposals

I analyzed the STARZPLAY Android App and the competitors platforms I had access to: Netflix, Prime video, HBO and Disney +. I will just give references if necessary to justify the interface design decisions I made.

1. Improvements to the current version

I had developed a first, more “conservative” proposal that would add improvements to the existing interface. I had done this for two reasons:

• Could be used as a short-term and more affordable improvement (budget constraints). It would be a natural iteration, keeping the same version.
• The review and improvement of the current interface served me to delve into the design and thus make a much more innovative and valuable proposal (read on to the end!).

Let’s explain the improvements I proposed:

a) Home:

• Added Chromecast icon in the header, next to the search icon. Its function was to facilitate the App-to-TV broadcasting. This improvement was guided by the findings obtained during the research phase.
• The icon text to show all items in rows and columns was changed to (‘SEE ALL’). Easier to understand and more accessibility friendly.
• Added item counter (‘2 | 46’) for better accessibility. Combined with the ‘focused’ state that adds a blue border, larger size and ‘play’ button (if applicable) we made the user more aware of the reviewed items and their two-dimensional location within the App. The blue color will generally be used to identify items in the ‘active’ state.
• The ‘play’ button only appeared on the element that had the focus (if applicable). For example, in ‘CONTINUE WATCHING’ it only appeared in the element that had been tapped to see its detail. When returning, it was assumed that the user was interested in playing this item. Eliminating the buttons on the elements that do not have the focus improved the visual perception of the covers.
• Finally, I improved vertical layout. Depending on the screen format of the smartphone, it let users know that there were more sections before start scrolling. This issue had a direct impact on users being able to discover STARZPLAY content, which was the main goal.

b) Side menu:

• Avatar system was added to make the user experience more customized and friendly.

• The active section or subsection was marked in blue to highlight contrast and readability, as well as to facilitate understanding of navigation levels.

c) Side menu / Settings:

The same criteria in legibility and contrast improvement from previous screen was applied.

2. New navigation system – (Wireframes)

I decided to use a Bottom navigation menu instead of the ‘Hamburger’ side menu. Ergonomics was improved by being able to use the App with one hand. It forced the development team to review and simplify the navigation, which benefits the users when understanding the App, handling it and discovering STARZPLAY contents.
The major advantage of the bottom navigation menu was that it is consistent throughout the App. Let’s analyze the wireframes developed for some of the key screens.

a) Home / Category with ‘featured’ section:

• Categories became tabs placed on top of the screen. We changed tabs by swiping over any empty area of the screen or by touching the tab itself.
• The slider now showed us related content, tailored to our preferences.
• The section ‘FEATURED’ was added. It showed new content to be released on the platform. Another valuable way to improve the ability to discover new STARZPLAY contents.

b) Home / Category without ‘featured’ section:

The ‘FEATURED’ section became optional.

c) Search (basic):

We had a classic search engine that most users knew. It allowed both keyboard and voice inputs. It also offered a number of popular searches that helped users discover new and related STARZPLAY content.

d) Search (voice assistant):

Conceived as a section to be developed in the future. It could be considered a key differentiator against the competition. It would be a specialized Artificial Intelligence that takes us away from the traditional method mentioned above. We could ask for “the series I was watching last night”, “comedy series like “The Big Bang Theory”, “historical documentary”, etc.

It was seen as the most powerful and effective way to achieve our goal. We realized (euristics, mainly) most of the times, users don’t want to spend a lot of time searching for covers. In addition, the results can be very fast and specific or more general, depending on the user’s intention at each moment.

Finally, the main screen layouts are shown:

3. Final Designs

a) Home / Category with ‘featured’ section:

b) Home / Category without ‘featured’ section:

c) Search (basic):

d) Search (voice assistant):

4. Outcomes (KPIs)

For this project, my work ended at this point and I have no data about outcomes.