BluTV Mobile App Redesign — increased membership by 87%

Redesigning the entire experience (which hadn’t been updated in 3 years!) was a bigger task than what we anticipated.

Result

Although there was a decrease in the payment transition, the overall conversion increased because of the improvement in the beginning of the funnel. Resulted in total of 87% increase.

Apple phased release

We released the update in stages by enabling Phased Release for Automatic Updates in the App Store Connect. Our update went out to an increasing percentage of our users with the automatic updates turned on, over a 7-day period.

We used the phased release as a fallback plan for smoother lunch. While publishing the app, our developers watched the app’s usage and gain early feedback from the 1%, 2% and 5% of users that received it. This allowed us to confidently release the app to all of our users by the end of the week.

We decided to focus on value proposition

We all know the importance of gaining new costumers and how sometimes companies acquiring new costumes can cost them more than revenue.

For example, before the referral program, dropbox was spending nearly $400 to acquire each new user and the premium subscription price was just $99. (by Hacking Growth Sean Ellis).

Our value proposition is one of the most important characteristic of BluTV. It’s how you steal thunder of interest, communicate who you are, and entice them to subscribe to our service — However crafting a strong value proposition is a challenge, particularly when we tired to tackle too much information at once.

During our design process, we had run many experience with the language, tag lines, call to actions and the text that accompanies imagery. We value the messaging as much as the design aesthetics for our brand.

Sean Ellis, in his book Hacking Growth talks about two design rules on how to optimize your landing page. He says the first rule of design is to treat it as a unique, onetime encounter with your product. The second rule is that the landing page must accomplish three fundamental things. Bryan Eisenberg, who is widely considered the godfather of conversion optimization, refers to these three factors as the conversion trinity.

1. Communicate relevance

2. Show the value of the product

3. Provide a clear call to action

The communication relevance stands for how well the page matches the intent and desire of the visitor — is this what they came for? Showing the value is immediately answering the visitor’s question. What’s in it for me? Clearly and concisely. Lastly, the call to action provides a compelling next step for visitors to take. I know this might be old news for some of you and it might seem intuitive to talk about but unfortunately most landing pages are lacking in one or another, if not all.

Tab bar navigation

Why tab bar navigation is so important? While using the application, we know our users rely on a one thumb 👍 positioning to get things done. According to Steven Hoober in his research of mobile devices usage, found that 49% of people behave this way.

We think it’s important to place top-level and frequently-used actions at the bottom of the screen, because they are comfortably reached with one-thumb interactions. By moving the navigation to tab bar, we think our users will gain speed, reachability and information Hierarchy.

Icons looks familiar?

While designing our tab bar navigation, we used SF Symbols that provides a set of over 1,500 consistent, highly configurable symbols.

Preview Content Details before get into details

Three dots rounded button overlay that displays summary of the content, meta data info and additional call to actions such as add to watch list and rating.

Reducing Churn

Customer churn refers to the situation when a customer ends their relationship with a company, and it’s a costly problem. Customers are the fuel that powers a business. Loss of customers impacts sales. Further, it’s much more difficult and costly to gain new customers than it is to retain existing customers. As a result, organizations need to focus on reducing customer churn.

The good news is that by innovating new features that our users will find useful and increasing engagement on our app, we can reduce churn.

Adding comments to mobile player

By designing this feature, we aim to be unique in the world of streaming services for accentuating on the community. Commenting and connecting our audience with each other is how we planned to do this.

New user experience makes it easier than ever for our audience to connect via social interaction. Commenting is a core social need for humans to interact with each other. We decided to mix and match watching experience with social interaction.

Our users will love it

While enjoying favorite shows and movies, BluTV fans will use this feature to give instant feedback and reply directly to others.

Getting started is easy

1. Select a content to watch and open video player.
2. Click the comment icon at the right side of the seek bar at the exact moment in the timeline you’d like to leave a comment.
3. Click the “add comment” box, write your comment and click the submit button to send.
4. Alternatively, you can reply to another user’s comment by tapping the user’s comment bubble, writing your reply and clicking the submit button to send.

Coming soon : The commenting feature has not been released yet. When released, it will be available on iOS and Android mobile app.

Adoptive background color (Coming This Summer)

We are working on a method that would enable us to change the background of the app to match the color of the content it displays. This way, we can reflect on what matters to our users the most.

Content Discovery (increasing LCV)

Here’s a brand new updated library view that puts a better emphasis on how our users can discover content. Inspired by the Apple Book Store redesign, without having to go back to the category page, users can now simply swipe through content to make a selection. We believe this can increase engagement and the overall outreach of our content.

Viewers who are engaged in content are more likely to watch more and more and subscribe to our service. It’s not just for the moment, it’s our long-term goal to increase Lifetime Customer Value (LCV) and find ways to keep subscribers on board for the long run.

We bring you thumbs up / thumbs down

Another way to reduce churn is to increase the amount of content each user watch per month. According to our data, users who are likely to watch more than 3 shows a month tends to keep their membership for longer period.

So we decided best way to do this is to get to know our users.

We now give our users the option to rate their favorite TV shows and movies with a “thumbs up” or “thumbs down.” When they like a TV show or movie, they would give it a “thumbs up.” If they didn’t like it, they would give it a “thumbs down.” Every time our user share a rating with us, they are teaching us what kinds of things they enjoy and the more they share with us the more we learn about their watching preferences.

How do ratings affect my watching experience?

We offer so many movies and TV Shows. So when you rate them, you’re helping us filter through the thousands of selections to get a better idea of what you’d like to watch.

We use a complicated recommendation algorithm that takes certain factors into consideration, such as:

• The genres of TV shows and movies available
• Your continue watching history, and previous ratings you’ve made
• The combined ratings of all our members who have similar taste as you

Finally, our smart computers punch in bunch a numbers to calculate the best recommended titles for you. This process is unique to each user, and indicates how likely we think you are likely to watch.

Challenge

People who can’t decide on what to watch are more likely to drop off and cancel their memberships.

When deciding on what to watch, our users struggle to make a choice due to hesitance, as they need large amounts of reassurance that their film / TV show choices have been made as a collaboration, this will then create an onslaught of questioning, such as, ‘did I make the right decision?’, ‘Let’s just watch the first ‘10 minutes and decide’, ‘are you sure its okay?

Finally my favorite line, ‘we can watch anything that you like’, after already having previously agreed, creating even more doubt. 💆🤦‍

Solution

As a user, when I want to watch anything, I rather not spend my time on endless browsing, dealing with its frustration but would like to spend my time effectively, by having the platform of my preference to have chosen the content for me and initiating the watching experience automatically.

What to expect from this experience:

• Stream, Not Just a Library
• Immediate
• Constant
• It’s always-on, always-there
• Always-new
• Skip through and sample (Zapping)
• Do nothing
• Channels are the interface

Is watching television addictive?

On average, people in Europe spend 226 min watching TV a day, in the United States TV viewing, on average, amounts even to 297 min per day. In Turkey however, viewing time goes up to 330 min a day, leaving Europe and Unites States behind the line.

What is binge watching?

the practice of watching multiple episodes of a television show in rapid succession

A more recent study found that most Netflix members choose to binge-watch their way through a series versus taking their time — finishing an entire season in one week.

Shows that fall in the Sci-Fi, horror and thriller categories are the most likely to be binged. Three hundred and sixty-one thousand watched all nine episodes of “Stranger Things” second season on the first day it was released.

I never have time for Ghostbusters, but I always have time for the last 30 minutes of it.

“It’s comfortable. It’s almost automatic,” said Smith. “We didn’t do enough in our experience to help the users in transition.” Ben Smith, head of experience at Hulu

Flow Diagram

• You sit down in front of the TV after a long day at work
• You are granted access to several channel options
• You decide to start watching the first show comes up on display
• Upon watching, chemicals are released in your brain. “When engaged in an activity that’s enjoyable such as watching TV”
• Your brain produces dopamine
• Reward of pleasure and happiness
• Your brain reinforces continued engagement in that activity
• You keep zapping through channels
• Your body experiences a drug-like high

Your body does not discriminate against pleasure. It can become addicted to any activity or substance that consistently produces dopamine.

Similar Patterns

• They sit down on a comfy chair after a long day at work
• They think of something to do
• The big screen in front of them stares lovingly at the viewer
• The viewer reaches to the remote control on the coffee table and grabs it
• They hit the red and inviting on/off button
• Although they are alone, they enjoy the noise in the house
• Knowing that there is a “flow” outside of their life satisfies and intrigues them, hence they start zapping in order to pick a flow based on their current mood
• Finally, they stop when they find the sound that they enjoy or an actor they are fond of
• They watch for hours however the magic is broken at commercial breaks, causing distraction
• They keep zapping
• They move on to a different channel as they do not want any distractions and would like to get away from reality
• TV is ready to comply with this desire and show a different content
• The viewer starts becoming knowledgeable about the broadcast streaming and possible contents that will be shown through social media accounts after a point
• Now, they can be active in discussions relating to the shows on social mediums

Please see full research from the link below:

TV_İzleme_Alışkanlığı Nedir-.pdf

Wireframe

Ideation + Validation

Users Interviews

You can access full report on usability test below

canlıTv.pptx

Usability Test Preview

What kind of personas were used to conduct the test?

• Ozge, Web Designer, spends 30+ hours weekly on web-related content. Watches Westworld, Masum, G.O.T. Is an active user of Puhu, BluTV and Youtube.
• Atakan, Student, spends 30+ hours weekly on web-related content. Watches Fi, Masum, G.O.T. Is an active user of BluTV, Youtube, Puhu and Netflix.
• Esra, Designer, spends 40+ hours on web-related content. Watches Full House, The Handmaid’s Tale and Shameless.
• Selahattin, Art Director, spends 15+ hours weekly on web-related content. Watches G.O.T, Westworld, Mr Robot. Is an active user of Digiturk: BeIN Connect.
• Hakkı, Front End Developer, spends 6–7 hours weekly on web-related content. Watches The Handmaid’s Tale, Sense8, La Casa de Papel. Is an active user of Netflix and BluTV
• Volkan, Programmer, spends 5–10 hours weekly on web-related content. Watches movies. Uses content-bootlegging websites.

General Results— Happy Moments

• The users resembled their experience to a regular TV use (5/7)
• The concept of “previous channel-next channel” was comprehended (7/7)
• The main page screen (video) was highly attracting and made the user feel as if they are in a special platform (4/7)
• All of the channels were comprehended (5/7)
• The users were able to understand the video content on the main page (7/7)
• The users were able to understand the live function (5/7)
• The channel names within the categories were comprehended, (Aksın gitsin, Vurdulu kırdılı) (5/7)
• “Watching Now” section was clear (7/7)
• All of the controls on the “Player” were noticed and comprehended (7/7)

General Results — Pain Points

• The live TV badge on BluTV was not clear (4/7)
• The region indicated in blue, demonstrating the content playing live on the channel, was not understandable (2/7)
• The live stream option was not clear(2/7)
• User was concerned with spending too much internet data due to the opening page with the video (2/7)

Acceptance Criteria

• In this phase, the feature is only available and can be viewed by the users who are logged-in and have the permission to watch the content
• When the user accesses the website, a live stream video player starts playing on the page

• Based on the user’s preferences this feature remains either active or inactive during the next visit
• The cursor becomes a pointer when the user hovers on any part of the footer showing the main navigation and when clicked on, the video player collapses, the video pauses on the last scene and the relevant page appears slides up on display

• When collapsed, the player becomes a sticky header and when scrolled down, still appears at the top.
• When the player is off, the cursor becomes a pointer when hovered in any field. When clicked on, the video player expands and resumes playing.

Video Player

• The content of the video to be played is recalled from the EPG module, created on CMS
• The content related to the timestamp of the day plays during the initial access, which is recalled from the first channel on the EPG list.
• When the user changes channels, the latest-watched channel is saved and opens as the selected channel on the next access.
• Based on the user’s previous preferences the subtitle and dubbing options are selected as on the current player and maintains the same functionality.
• Previous and next channels are demonstrated on both sides of the play/pause button. The name of the channel is indicated below.
• When clicked on the Previous / Next buttons, a 1–2 seconds snowy cable TV reception animation is activated, during this period, the content on the next channel is recalled from the EPG and begins playing. (Important: the broadcast (meaning the audio) should not cut off, the audio of the present broadcast should be active. The transition should occur when the content on the next channel is ready to be viewed. It is crucial that this process runs smoothly as possible.)
• The left/right, up/down keys on the keyboard are used for zapping on the active player.
• The colors etc., on the visual of Seek bar are revised.
• The relevant channel name and the name of the live content appear on the lower left corner of the player
• If a TV show is being viewed, the corresponding episode and season information appear next to the content’s title.
• When clicked on the title of the content, the page transitions in to the detail page of the content, during this transition the header of the website disappears, the content area found below animates toward the top and the player collapses. The detail page is in modal view, when closed, the player appears once more and the header appears on the footer. The same structure functions when on full-screen.
• The total run time of the content and the current minute is viewed on the Seek bar.
• Although the content plays live according to the EPG information, the user can seek fast forward or rewind the content. In this case, a different color is used to indicate the current minute and the minute the live stream is on, on the Seek bar. The “live” icon is used to indicate where the live stream is. When clicked on, the user comes back to the timing on EPG and the “live” feed marker disappears.
• If the user zaps to another channel, the manually sought minute is disregarded, it is played from the relevant timing of the EPG on the respective channel.

• When the users seeks backward, the content on the relevant channel might have ended according to the live stream
• In this case, the “live” icon and the marker appear at the very end of the seekbar. When clicked on, it transitions to the live timing on EPG and the relevant content.
• If the user watches a content for more than 10 minutes, then the “resume playing” feature appears for this content on the homepage.

EPG View

Story

As a user, I would like to use the EPG screen so I can access the channels and explore other live stream channels.

• “All Channels” button is placed on the upper right corner of the live player.

• When clicked on the button, the EPG screen appears with a drop down animation.
• Picture-in-picture will allow to continue watching the current channel while making a selection on this page.

• On the left hand side of the screen, the names of every channel running on EPG are listed.
• The active channel appears in blue.
• “Now Playing” icon appears on the active content on player.
• 30-minute time frames, starting from the current time, appear on top
• The marker on the current time appears on the whole page
• The current time marker updates itself every second
• The active and next contents are listed on the rows of every channel, based on the EPG information.
• The size of the content should correspond to the run time of the content. (eg. a content beginning at 12 with a run time of 1 hr 42 mins is placed within 1:42)
• Each content visualized with horizontal posters can be monitored in the CMS settings.
• When clicked on any content, the EPG closes and the relevant content starts playing on the player.
• If this is a content from the live stream, it begins from the current run time.
• If the content is not from the live stream, it starts from the beginning.
• Based on the status on EPG, forward / backward buttons appear on the upper left and right corners.
• When clicked on forward / backward buttons, if the user is not following the live stream, they can preview up to 2 hours prior to the live stream. (The marker indicating the live stream scrolls as well)
• On EPG, one can scroll forward for up to 6 hours for each channel.
• One cannot scroll back to over 1 hour based on the current time on EPG. (Meaning scrolling backwards is not a viable option on default, one can scroll backwards only if they previously scrolled forward.)
• On the EPG page, one can scroll up and down with their mouse. During this time, the EPG timeline becomes sticky and keeps showing.
• When exited from the EPG page, the screen shifts back to the video player.

Logged-Out User Flow

• Users who do not have a subscription can also experience this feature. However, this feature will have a 5-minute of preview length.

• The time remaining for the preview is shown on the lower right corner of the player with the text indicating that is it free of charge.
• The user benefits from all the features of the live player
• When the preview time is over, the video stops, all the controls on the player’s panel disappear and a directing message appears on the screen

• The length of the preview is stored in the browser’s cookies and if the preview session has expired before, the user will not be able to preview the feature again.
• The length of the preview should be controlled and changed in CMS settings.

Final Prototype with Framer

Transactional video on demand (Rent movies)

Transactional video on demand is all about urgency or excitement. This will enable consumers to access movies and TV series much sooner after their general release, and the users will have the chance to either renting or buying each content

Story

As a user I want to be able to rent most recent movies and TV Shows at anytime so I don’t have to go to movie theater to watch

My team

• Jeff Romi UX/UI — Research
• Selma Vatansever — UX/UI — Research
• Ceylan Sayar — Usability Test

User Interviews

You can access full usability test from the link below: https://drive.google.com/file/d/1VZn_yR7zdAdgGCIEfI5vfrI6WQX7WT6m/view?usp=sharing

What kind of personas were used to conduct the test?

• Erkan, a director spends 30+ hours weekly on web-related content. Is an active user of Netflix, Youtube and BluTV.
• Orçun, a student spends 20 hours weekly on web-related content. Is an active user of Netflix and BluTV.
• Sinem, an industrial engineer spends 15+ hours weekly on web-related content. Is an active user of Digiturk, Netflix and Bootleg and BluTV websites.
• Burcu, Social media director spends 20+ hours weekly on web-related content. Is an active user of Digiturk, Netflix and Bootleg and BluTV websites.
• Hayrul, a student, spends 20 hours weekly on web-related content. Is an active user of BluTV and Netflix, TV Plus, Amazon Prime and Digiturk websites.
• Fatih, spends 25+ hours weekly on web-related content. Is an active user of Netflix and Youtube.
• More…

Usability Test Overview

MVP Requirements

• Kirala&İzle sayfasını ilk kez açan bir kullanıcı olarak bu özelliğin ne olduğunu ve nasıl kullanıldığını öğrenebilmeliyim.

• Anasayfada kiralanabilir tüm içerikleri görmeliyim.
• Anasayfadaki search bardan izlemek istediğim içerik BluTV’de var mı bulabilmeliyim.
• Listeleme sayfalarındaki posterlerin üzerinde kiralanabilir bilgisini görebilmeliyim.
• Listeleme sayfalarındaki posterlerin üzerinde kiralama fiyatı bilgisini görebilmeliyim.

• Detay sayfasında Kiralama bilgisi (fiyat, Kirala butonu) görebilmeliyim.
• Kiraladığım bir içeriğin detay sayfasına girdiğimde içerik bende olacağı süreyi görebilmeliyim.
• Bu içerik dizi ise bölüm kiralama yapabilirim.
• BluTV üyesi olursam hangi içerikleri ücretsiz izleyebileceğimi görebilmeliyim.

• Kiraladığım içeriği webden hemen izlemeye başlayabilmeliyim.
• Kullanıcı bilgilerimle giriş yapıp ödeme yaparak içerik kiralayabilmeliyim.
• Film kiralayabilmeliyim.
• Üye değilsem üyelik oluşturduktan sonra kolaylıkla içerik kiralayabilmeliyim.

• Listeleme sayfalarındaki posterlerin üzerinde kiraladığım içeriğin ne kadar süre ile bende olduğunu görebilmeliyim.
• Kiraladığım içeriği detay sayfasından iptal edebilmeliyim.
• Responsive cihazdan kiralama yapıp diğer cihazlarımda izleyebilmeliyim.

• Web’den kiralama yapıp diğer cihazlarımda izleyebilmeliyim.
• Kiraladığım içerikleri ayrı bir listede görebilmeliyim.
• Kiralayıp izlediğim içeriklerde nerede kaldığımı görebilmeliyim, kaldığım yerden devam edebilmeliyim.
• Blutv ücretsiz TVOD içeriklerini subscription ile izleyebilmeliyim.
• Kayıtlı SVOD kartım varsa bununla ödeme yapabilmeliyim.
• Kiralama akışında girdiğim kart numarası saklanmalıdır.
• Kiraladığım içeriği detay sayfasından iptal edebilmeliyim.
• Hesabımdan kiraladığım içeriklerin e-faturalarını görüntüleyebilmeliyim.
• (Web) Mevcut mobil ödeme veya kredi kartı bilgimle ödeme yapabilmeliyim.
• Kayıtlı ödeme bilgilerim arasından tercih ettiğim birini seçerek kiralama yapabilirim.
• Navigasyon bar’da Kirala&İzle butonuna tıklayarak sadece kiralanabilir içerikleri görüntüleyebilmeliyim.
• Bu içerik dizi ise sezon fiyatını ve bölüm fiyatlarını ayrı ayrı görebilmeliyim.
• Detay sayfasında içeriğin fragmanını izleyebilmeliyim.
• Thumbnail’da içeriklerin fragmanlarını izleyebilmeliyim.
• SVOD üyeliği satın alırken daha önce kiralama adımında eklediğim ödeme yöntemimi kullanabilmeliyim.
• Kiralama adımında eklediğim kredi kartımı SVOD birincil ödeme yöntemi olarak set edebilmeliyim.
• Kiralama, yerine abonelik başlat.
• İndirimli SVOD satma
• Kiralama bilgilendirmesini e-posta olarak alabilmeliyim.
• Kiralama iptal edildiğinde e-posta ile bilgilendirilmeliyim.
• Responsive’den kiraladığım içeriği app’e yönlenerek hemen izleyebilmeliyim.
• Kiraladığım içerikleri Hesabım’da kiralama bilgisi ile beraber görüntüleyebilmeliyim.

MVP Product Planning

Week 1

• UX Araştırma & Keşif
• Scope Belirleme
• Legal Konuların Netleştirilmesi
• İçerik Ekibinden Bilgi Alınması
• Epic ve Ana Storylerin Çıkarılması
• Web ve Responsive Wireframe #1

Week 2

• Grooming — CRM & CMS #1
• Web Kullanıcı Testleri #1
• Storylerin hazırlanması
• Teknik Konuların Netleştirilmesi (Mimarinin konuşulması..)

Week 3

• Web Wireframe #2
• Mobil Kullanıcı Testleri #1
• Grooming — Content Team
• Web Grooming — UI #2
• Storylerin hazırlanması
• Hukuk ve İçerik konularının netleştirilmesi

Week 4

• Web Tasarım Final
• Web Storyler Final
• Mobil Storyler Final

Week 5

• Big Screen Tasarım Final
• Big Screen Analiz Final
• Big Screen Grooming
• Raporlama Analizi

Projemiz artık yayında:

https://www.blutv.com.tr/kirala

Rent a Movie was originally published in blutv on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today we are changing the meaning of “watching TV”, tomorrow we will aim to be the primary source of television, whether at home or on the go. Welcome to the new Golden Age of television.

Take a sneak peek at our recently launched features that you can enjoy while watching your favorite movies and TV shows.

We bring Preview Mode (Draft version)

Auto-play trailers, which begin right before you’ve selected a show to watch. If you decide you like the preview, all you have to do next is hit play button and enjoy watching.

Focus State & Animation

The Focus is the element that highlights a selectable component and signifies the user’s current on-screen location. A clear and highly visible focus helps the user to quickly recognize their current on-screen location, and eases the navigation.

Content-Discovery

Hardware often defines design patterns. On TVs, the wide yet squat canvas lends itself to long rows of content that maximize the amount of content visible and discovery stage with appealing imagery slideshow. Just like the experience on web, this pattern has become common on most TV streaming UIs.

Binge Watching

Most of us have watched several episodes in one sitting, at times even an entire season. And since we’re spending so much time in front of a screen, it doesn’t hurt to enjoy your TV binge session on a large, beautiful screen — especially since it gives you access to a wide range of some of the best contents available.

Continue Watching

BluTV will keep track of the shows you are watching across any device. You may begin watching a show on one device and resume watching on another right where you left off. You can access your “Continue Watching” list from the home screen of all devices.

Episode Selection

This section now includes a streamlined episode menu that expands to show full episode info.

Post-Play Suggestions

Suggests content similar to what the user watched in the past and content that has been relevant for other users similar to user’s taste profile. Tends to stay confined in the user’s comfort zone. Limits true catalog exploration.

Your Feedback is Important To Us

Collecting and acting upon customer feedback is a must for providing our users the best experience possible.

Notifications You Don’t Want to Miss

We are excited to share the news with our users. If you’re a BluTV junkie, this is where you will discover upcoming episodes and BluTV originals.

Data-Saving Option

Enabling this option can help you save up to %50 internet data. 2000 kbps stream at 540p resolution quality burns through roughly maximum 0.88 GBof data per hour. In addition, 4000 kbps stream at 1080p resolution quality burns through roughly maximum 1.76 GB of data per hour.

This service is only available on mobile devices.

Express Login

If you’ve got a long email and password, it’s not much fun entering your login details on-screen using your remote. So we’ve made logging into your account easier via activation code.

For a quicker and easier way to login, you may use the activation code below on your computer or mobile devices. Stay on this page and you will be automatically logged in once the code is verified.

BluTV original shows

We began to produce our own original content on January 29th, 2017. The first production released was called Masum.

BluTV’s original and exclusives series include Adana Sıfır Bir, Benim Varoş Hikayem, 7YÜZ, Bize Gezmek Olsun, Çalınmış Hayatlar, Midnight sun, Can’t Cope, Won’t Cope, Apple Tree Yard, Victoria, Fearless, Descendants of the Sun, Dudullu Postası and more.

Other must watch original series include Golden Globe winner The Handmaid’s Tale, based on the best-selling novel by Margaret Atwood.

BluTV will have a long history in original programming as long as we continue serving our users.

BluTV on Twitter

Türkiye'nin ilk internet dizisi #Masum 27 Ocak'ta sadece #BluTV'de! https://t.co/P16u0rxckb https://t.co/k5uW8WDkmE

Prototyping Using Framer

While designing BluTV experience, I have used framer, a code-based design and prototyping tool in our UX design process. https://framer.cloud/LrVmu

BluTV: Designing The Future of TV (w/Framer app) was originally published in blutv on Medium, where people are continuing the conversation by highlighting and responding to this story.

User Story

As a user, I would like to be able to watch the trailer of a content and switch to the other contents available within its category all while viewing the details of the content so that I can have an easier time making a decision regarding whether or not to watch the show and explore new content.

Türkçe versiyonu için lütfen aşağıdaki link’i kullanın;

https://medium.com/@jeffromi/movie-tv-show-page-d9177e7054a5

Design process

Ideation + Validation

• 2 variation and responsive mobile screens have been designed
• We tested our idea with our product team as well as our current users outside of the office.

Objective

• Viewing the details-> Increase in the views
• Total session -> Increase in the views
• 10–20% of the detail page views switch to the other contents available within its category

Acceptance Criteria

The development and the new design will solely be for the desktop in the first phase and an A/B test will be conducted priorly. The A/B test plot will be similar to the previous A/B plots that we have used. All of the users visiting our website from Desktop will be subject to the test.

User Interviews

You can access detailed information from the link below: https://drive.google.com/file/d/1m7J0oFp34z6k10M5a89is2BrPo9ECpzJ/view?usp=sharing

What kind of personas were used to conduct the test?

• Hakkı, a programmer spends 8+ hours weekly on web-related content. Is an active user of Netflix and BluTV.
• Ezgi, a student spends 20 hours weekly on web-related content. Is an active user of Netflix and BluTV.
• Sinem, an industrial engineer spends 30 hours weekly on web-related content. Is an active user of Youtube and Bootleg websites.
• Ruba, content engineer and editor spends 25 hours weekly on web-related content. Is an active user of Netflix and Bootleg websites.
• Emre, a CRM coordinator, spends 6 hours weekly on web-related content. Is an active user of BluTV and Bootleg websites.
• Ahmet, spends 50 hours weekly on web-related content. Is an active user of Netflix and BluTV.
• More…

The Features That We’d Like the User to Explore

• Watching the Trailer mode
• Accessing the details of each episode by clicking the “More” button visualized with three dots
• Signing up and watching when the second episode hovers
• Accessing more information on the content by clicking on the “More” button at the end of the page
• The appearance of the hover pop up for the next show
• Accessing the details when clicking on the “More” button

The Trailer-Watching Mode (Version1)

The first thing that grasped the attention of the users was the Trailer Mode. The users were able to explore the content quickly. They were able to understand that the trailer appears when they click switch on the button (8/9)

Clicking on the More Button From the Episode

The users were able to use this feature in order to access more information on the episode and discovered that this feature displays the summary of the episode. (9/7)

Signing Up and Watching When the Episode Hovers

The users were able to understand the warning that popped up directing them to signing up and watching when they got to the second episode. When they clicked on it, they assumed that they would be directed to the “Log In/Sign Up” page. They understood that they could watch the first episode but would have to log in/sign up for the second one, which made it easier for them to understand what the lock signs stand for next to the episodes. (9/9)

Pain Points

• The users could not understand the binge watching term (6/9)
• The users could not comprehend the + symbol next to the button that indicates changing a season. (3/9)
• The users could not see the “Free” writing written on the first episode. They assumed that they would not be able to watch the show without signing up.(4/9)
• The fact that the more button and the specific button for details showed the details on the content confused the users. (3/9)
• The users were confused based on what the next / similar content would show.(3/9)

Users Suggested

• The “free of charge” writing can be more visible. (2/9)
• A descriptive writing on the function of the button can show when the cursor is on + “Add to my List”. (2/9)
• The user searched for a scroll after opening the detail page in order to get back to the previous page. (1/9)
• The name of Binge Watching can change. (1/9)

Navigating Through the Logos / Titles and the Contents

• If the content opens in a collection or category page, the related category of collection’s title show up on the upper left corner (eg. in the design in the attachment, the user has accessed the detail page of “Yaşamayanlar” from the “most viewed shows” collection)
• The logo of every content, if available, or its title with a pre-determined font and text is shown.
• When opened initially, the logo of the content shows on the left as active.
• The logo or the title of the active content is scaled at 1.2 and it’s opacity is 100%. The opacity and the size of the inactive contents’ titles are lower.
• If the selected content is not the first content of the relevant collection/category, a button to go left is shown on the right. In the meantime a part of the collection’s previous content’s logo shows on the left. When clicked on either one of these, the previous content is accessed.
• If, in the collection or the category, there are different contents than the chosen content, the logos line up on the right. When the user clicks on the logos, the corresponding content becomes active. During this transition, the logo’s row shifts, with the selected logo staying in the middle. If the selected logo is already in the middle, the rows do not shift. If the logo belongs to the last content of the collection, the rows do not shift and the logo appears active on the right side of the row.
• The next and previous buttons located on the upper right corners, only appear if there is a previous or next content that can be shown. When clicked on, the aforementioned animation appears. With every click, only one content shifts. If clicked multiple times, the upper line shift with the same speed, however the details of the content do not update. The detail page shows with a 3-second delay (when the rapid clicking is over).
• When clicked on the video area, one can access the next content (It should function the same way when clicked on the right arrow)

Trailer & Video Screening

• If the related content does not have a trailer, the gallery images are used in the field of the video. The relevant images should be shown 2x in retina. The images change in every 4 seconds, in a loop. The animation here should be a fadein/fadeout.
• If the related content has a trailer, the first image is shown for 4 seconds, then fades out and the video starts playing.
• The audio state of the trailer remains active during the first use. When the user clicks on the audio off icon found at the lower right part of the screen, the audio mutes and the icon state changes to mute. Based on the user’s preferences, this is saved in between the following sessions.
• When the trailer starts playing, the line on logo of the active content moves as a progress bar.
• When the trailer is over, it rewinds to the beginning just as the progress bar.
• If this content has more than one trailer, the progress bar is separated based on the amount of trailers (eg. showing 2 lines rather than one). When the first trailer is over, it moves on to the second one and its corresponding progress bar moves accordingly.
• If the content has more than one trailer, the shift to the right features firstly plays the other trailer and after the last trailer switches to the next content. (Clicking on the video field, clicking on the right arrow)
• After the trailer starts playing, the mouse movements of the user start to be tracked. If the location of the cursor does not change for 8 seconds, the lower panel of the screen disappears and the opacity mask on the video or the images disappear as well. Only the opacity mask on the top part (where logos and navigation are) is maintained. When the user moves their mouse, it comes back to its previous state.

The General Feature of the TV Show Pages

• When it is initially opened, the “episodes” tab becomes active
• While the episodes tab is active, the seasons of the show appear below
• The related episodes of the active season appear below
• On the TV show pages, the lower field runs over towards under the screen when initially opened. This causes only a part of the posters to show
• If the user scrolls down or hovers to the field where the general features are with their mouse, this screen animates upwards. (Animation should occur during scrolling, so it’s not natural scrolling)
• If the user hovers from the lower field to the outside of the screen, the lower part disappears downward after 2 seconds
• If the user opens the lower field by scrolling, hovers to the lower part and hovers back to another field, the panel closes the same way in 2 seconds
• If the user already watches the show, the season and episode where they have left off actively appears (The season is active, the latest episode that has been viewed appears on the top of the row. If it’s the last episode then it shows at the bottom)

The Trailer View on all of the Detail Pages

• The trailer plays at the background, if the TV show/movie has a logo, the logo shows instead of text
• If it is a BluTV original production, the required tag shows and it functions just like the other tags
• When clicked on the button below or the “more” link in the description, further information on the episode can be viewed
• All the detailed information is hidden with the trailer switches and provides an audible, full screen viewing
• A similar content is shown, when hovered
• When the user hovers on the watching list, the “add to my list” tool tip appears
• The play button indicating that the first episode can be viewed free becomes active while when the user hovers on the others, it requires a log in/ sign up

Final Prototype with Framer

Conclusion

According to a research done by ‘The Stories Landscape Today’ snapchat is the one app where Stories has reached maturity, with around 81% of daily users engaging with the feature, Instagram has seen swift and steady adoption, with 60% of daily users on Stories and 300 million daily Stories users overall which is more people than Snapchat’s entire 187 million daily user base.

I know that the story design pattern used by these social platforms is the format of the future and therefore can result in increase on total sessions as well as switching between pages up to 10–20%.

Movie / TV Show Page was originally published in blutv on Medium, where people are continuing the conversation by highlighting and responding to this story.

Objective

Being a subscription-based business model, BluTV’s success depends entirely on the number of active subscribers. Our primary objective was to get more of our mobile website visitors to sign up for a paid subscription trial.

Challenges

We began the process by observing our user’s behavior on BluTV’s website. With the help of the analytics team Hype, we looked into the quantitative data such as Google Analytics, heap analytics and VWO (Conversion Optimization Platform). We found that the conversion rate for mobile visitors was significantly low compared to our website average.

Design process

The steps of the engineering design process are;

Solution

We proposed a re-design in order to increase the conversion rate for our mobile responsive site.

Empathy Map

In order for us to re-design our responsive home-page, I knew an empathy map would result in understanding our user’s needs while helping us develop a deeper understanding of the users that I’m designing for. This research consisted of five quadrants. Thinking, Feeling, Hearing, Saying and Seeing. These quadrants demonstrate the user during the observation/research stage.

User Journeys

Here we researched actions user take, questions they ask, happy moments they experience, pain points and finally opportunities we can gain upon completion. Each and every step is conducted by researching different channels like social media, costumer service feed back, eksi sözlük, user testings, surveys (google forms) done on the live website.

Potential Users Interviews

A user test has been conducted on total of 11 users. Multiple versions of landing page has been used during user interview.

Happy Moments

• While signing up, the BluTV originals and the contents that can only be found on BlutTV have a high value for the users. Especially The Handmaid’s Tale, 7Yuz and Masum were big blockbusters. (5 of the users confirmed that they would sign up solely for these contents)
• ‘Watch From Wherever You Like’ feature and Mobile Payment were quickly noticed by the users, which led to a positive reaction. (4/11)
• 1 week trial period and the commercial-free content info added an incentives to the sign up process. (4/11)
• There were no question marks regarding the pricing. The users were able to notice the price of the service.

Pain Points

After analyzing the page, the users asked some of the following questions:

• Are there any contents other than these? The users would like to access information on them. For instance, are there documentaries? (5/11)
• Can I cancel immediately? Is there an affidavit? (1/11)
• The contents arouse curiosity for the users and they would like to watch the content’s trailer when they click on the content or they would like to see more detail on it. (3/11)
• They wanted to know the answers to various questions such as ‘How do I sign up?’, ‘Is the process for signing up takes a long time?’ (2/11)
• Subtitles and dubbing exist every content and am I able to watch the content in HD? (2/11)

Solution

Based on this insight, we decided to completely re-design our mobile responsive home page. I intended to do so by addressing potential areas of improvement identified in the research and then test those against the existing ones.

Re-Design

• Removed all the distractions in the header section
• Kept only the logo and sign-in link in the header
• Included BluTV’s main value propositions and information about pricing
• Used animation for scrolling
• Promoted some of the most popular content available in BluTV’s library
• Added an FAQs section at the end to answer any common queries from different visitors

Iteration

Users and audience

In order to shape our users, we decided to create a survey, which we could share with our users online.

User Research Questions (Google Forms) Please review questions here

We asked some of the following questions;

• How much time on average do you spend weekly on watching web-related content?
• Which video sites do you use?
• In which tv shows are you the most interested?

Team work:

Our team has primarily worked on User research, Interaction/Visual Design and prototype while Hype Analytics team has worked on setting up the A/B test, conversion optimization, visitor research and optimizing conversions.

Constraints

• Scroll animation did not work on some of the browsers.
• We did not have sufficient developer resources on hand and hence could not code the entire project, so we used imagery in some places.

Final Prototype

https://vimeo.com/303486869

Result

With the help of Hype, we ran the test for a duration of 19 days and included 89,290 visitors. The Alternative variation increased the conversion rate by over 42%.

Please review live project here (Only works on mobile devices)

Case study featured on vwo.com

VWO is the all-in-one platform that helps you conduct visitor research, build an optimization roadmap, and run continuous experimentation.

Link below:

https://vwo.com/resources/case-studies/blutv-increases-subscription-trials-for-mobile-visitors/

UI/UX case study for mobile our subscription page (uplift rate by over 42%) was originally published in blutv on Medium, where people are continuing the conversation by highlighting and responding to this story.

For Turkish version, please use this link

On the September of 1997, Migros introduced the virtual shopping experience to their customers, considered a “first” at the time. Migros Virtual Store: with its scope of services and the product variety that they have from fruits, vegetables to meat, is considered to be a first even in Europe. The Virtual Store’s registered customers, today, has reached the booming number of 40 thousand.

Here is how the Migros officials explain their objective: “Our principle derives from providing limitless and unconditional service to the customers. By increasing the areas of use of the internet, we would like it to become a part of life. We aim to provide this service, with the use of the latest technology, to everyone with time and transportation limitations or to ones who are unable to leave their homes due to various health issues.”

My role and team

• Caner Özgökmen — PM
• Esra Rençber — UX Research
• Jeff Romi – Head of Product / UX

UX Research

Our user

• While the offline customers are mostly composed of males, the online customers are generally females.
• The virtual store customers: during their first visit use the banner and during their second visit tend to use the search button to make a purchase.
• The virtual store customers were described as “the people who buy food to their houses” twice during the meetings, however after their discourse about the issue, they reached to the conclusion that increasing the penetration of the currently existing mass of customers would be better.
• Current customers: women between the ages of 35–44, married, educated, mostly iPhone users, have an above the average bachelor’s degree, with kids.
• The current customers are a sub group of the plaza employees who do not have the sufficient time, this is the target group.
• Active customer = Has placed an order at least twice

Pain Points

• The user who hasn’t verified their membership cannot open a new account with the same national ID number.
• At the beginning of the process the users experience panic regarding the delivery time and day- they do not know that their order can be delivered on the day and time of their choice.
• The pop-up ads that appear interrupt the experience.
• The warning and information messages that appear at the beginning of the page do not strike the user’s attention.
• The “Welcome *Name*-*Last Name* writing on the blue bar at the top is not noticed.
• The customers is not informed regarding the shipment charges until the very end.
• After completing and placing the order, the users cannot predict what they will encounter.
• At the checkout, after selecting the region, the page goes back to the main page.
• The products that have been added to the cart previously appear in the cart during checkout and as they are forgotten by the user, they have a hard time making meaning out of why the products might be listed there.
• The users have a desire to enter all the necessary information prior to hitting the “complete the purchase” button, regarding the payment and delivery.
• The need to manually change the amount of the product after adding it to the cart, and hitting the “add” button.
• After entering the quantity information, the users forget to hit the “add” button.
• Difficulty in locating the cart on the page.
• Difficulty in realizing that the products change after filtering.
• Problematic search results.
• Difficulty in realizing the default listing of the products and the reason they are listed that way.
• Difficulty in realizing the purpose of “Buy all” button in “Everyone to the Table”.

Benchmarking

1. E-commerce on the Rise

The shopping trends that evolve based on the ever changing lifestyles defy the traditional concept of a market. The e-market sector, is more rapid in adjusting to the change, compared to the currently existing markets. Although this brings certain disadvantages caused by its nature, the e-markets make up for their weaknesses by providing new services every day.

Peapod

One of the fore-runners of e-markets in the USA, Peapod, provides a service of having their customers who use smart phones scan a QR code using the Peapod application, with the two dimensional stores situated at the exits of crowded subways in Chicago, making it easier for them to order.

Following the successful pilot application, the company is planning to open these virtual stores to 100+ bus and train stations.

Grocery Run

Grocery Run, in Australia, brought and adapted the concept of short term design products’ discount to grocery products and executes 48-hour discount marathons on basic products.

With a year’s worth of business, Grocery Run has become the biggest e-market in Australia, pushing other offline stores to have big discounts on dairy products like milk and basic products like toilet paper.

E-mart

The fridge with an LCD screen, that has been launched by Samsung in Korea not long ago, helps the consumers order the products that they ran out off, easily and rapidly.

Quidsi

Quidsi, offers a new shopping experience with the sales that they make specially for certain categories.

• Periodic sales, for basic goods
• Low prices
• Easily remembered URL’s
• Quick shipping, 1–2 days
• Superior customer services

Schwan’s

With a background of 50 years of ice cream services, Schwan’s entered the frozen goods sector, and with the trust that they gained from their previous customers, expanded their territory of sales by providing a shipment service with 6.000 trucks.

2. Thinking Differently

In the future, the applications made on prices and product diversity will start falling short for physical stores. The customers will expect to be entertained. Hence, we will start seeing innovative shipment models where one can go through the “drive-thru” or where the customer will not even have to leave their vehicle. The virtual stores integrated with the physical ones will be on the rise.

Auchan

The French company Auchan, entered the market in Suzhou, China with their drive-thru stores. The customers can place orders online and drive through to pick their orders during the time zones determined by themselves.

Tesco

Tesco, initiated the service where the customers can scan the barcode of the products with their smart phones and add them to their online carts.

P&G and Walmart

P&G and Walmart merged and started delivering to their customers in big cities via scanning the QR codes of heavy products. The customers have an easy access to the QR codes via the PGMobile trucks that are parked in New York.

“This is quite smart, no one wants to carry a 5-pound dog food package or 30 toilet papers all the way to their apartments.”

3. Connections Made with the Customers

The reciprocal communication with the customers will escalate into a new dimension. The best example for this how the Seiyu group, owned by Walmart, asks their customers through Twitter which products they prefer to have lower prices and offer 4-week discount on the first 100 ones offered by their customers. The brands will now have identities that evolve based on the active relationships they create with their customers rather than specific and rigid ones.

Lawson

One of the stores located in Japan, Lawson, created a virtual character called Akiko-chan, in order to better assist their online customers.

After the creation of Akiko-chan, it is said that the visits of the website increased by 1.4 times.

Whole Foods

Whole Foods, from the USA, reached to 1 million Twitter users in during their first year (currently it is 3M).

85% of the tweets that are posted are composed of providing answers to the questions posed by the customers.

While the company strengthens their relationships with the customers through Twitter, it also introduces the culture and lifestyle of Whole Foods.

Whole Foods is also the first company ever to use Pinterest as a medium of marketing.

Seiyu

Seiyu (Japan) has asked their customers through Twitter which products they prefer to have lower prices and offered 4-week discount on the first 100 ones offered by their customers.

Real

Real, in Germany, has developed a system where the customers can hold their smart phones on the products and can see and use the related coupons on them if they exist.

Marks & Spencer

Marks & Spencer collaborated with Jiepang and Weibo in China and through their GEO technology, has been sending the texts regarding the promotions going on at their newly opened stores to the users.

Through this strategy Weibo — the biggest social sharing platform in China — has created interaction between their customers, sending gifts to those who share posts about them.

Conclusion: What’s in the Future?

• The customers will expect different shopping experiences, and if the stores fail to accommodate that, they will face with lower sales. The interaction between the online and offline sales will keep increasing.
• Technology will increase the efficiency and will cause the price competitiveness to reach its climax.
• Gathering the customers’ information and analyzing them will have greater importance.
• Same day delivery options will increase and the online stores will have to start to efficiently balance their capacities and the demand.

Previously Failed Attempts

For 18 years, various projects have been tried out and were dismissed.

• Accessing to recipes through the products didn’t work so it was cancelled.
• They demonstrated discounts by crossing out the actual prices but it was thought to be confusing, so they stopped using that method.
• Efficient search and filtering projects are run and are about to be completed.
• The concept of “member get member” system is being improved.

Operational Recommendations

• Periodical ordering feature
• Identifying alternative products
• Delivery at any desired time frame till 10 PM
• Paying cash/credit card upon delivery
• The old ordering module
• Notifications regarding specially picked and packaged products
• Delivery/pick-up from Migros Express locations such as gas stations like Petrol Ofisi
• Delivery from the store
• Pick-up from vending machines
• Return guarantee

Solution

• The subscription phase should be simplified. E-mail and password information should be asked for at the first step and all the rest of the required information should be requested upon the completion of the order. “Why should I create an account?” can be added as information. The fact that the activation e-mail is received late during the creation of the account is an issue. In addition to this, receiving the second mail when the user clicks on “send the e-mail again” late is another issue. The duration of receipt of the mail was approximately 10 minutes in the test that we conducted. Whether the activation phase exists of not should be re-evaluated.
• In the page where the user picks their territory, they should be informed about the delivery options. For instance, when the customer picks delivery from the store, they should be informed that they will be creating the order online but will be picking up from the store. The same arrangement should be done during “How Should We Deliver Your Order?” part while placing an order.

• The category menu should be moved to the left.
• There is a lot of text in the shopping steps and there are a lot of links that may cause the user to leave the cart. These should be simplified. Kliksa’s cart has been optimized like this and the completion of the order being placed increased by 10%.
• In the notification area located on the cart’s Freeze Header, there should be a warning such as “Buy X TL more, enjoy free services fees”. This warning should change based on the cart total.

• The advantages that are at the “cashier front” should be shown at the cart.

• The phases of the shopping experience should be shown step by step. The current step of the purchase should be indicated above.

• The purpose of “Gift Card” should briefly be indicated. The tabs on the payment page should be rearranged. Eg: There appears to be a tab called “Points and Accounts”, however it is hard to tell what its function is. In this field, the customer can benefit from the discount by entering the discount code, however it may be perceived that they can use their credit card points from this field as well. The radio button should be removed, there should only be a field where the customer can enter their coupon codes.

• In the “Payment Options” step, we can perceive the card type by the first 8 digits of the card, without the customer having to make a selection. This way, we can make the customer make less clicks and selections. The process of choosing the credit card should be eliminated. The customer should only be inserting the credit card information and these information, if “pay by credit card” option is chosen, should be retracted from the area under this selection. The step of choosing the payment type and entering the payment information should be done on the same page.
• Distance Sales Contract should appear on the screen of the returning customers by default. There should be demonstrations of personalized banners and promotion announcements based on the customers’ segment. Personalization can be conducted based on the purchasing habits of the customer or based on clickstream data.
• There should be a newsletter sign up box on the main page for those who would like to be notified about various promotions that will be held. It should be shown to the guest users. SMS verification should be requested on the second step as well.
• A representative image that won’t take a huge space on the page must be shown along with the products listed right below it, in each category page. The representative image should not overshadow the product images. Currently, the products don’t seem to appear at the eye level.

• The top sellers, the related products and suggestions on the category pages are situated under different regions but they look quite scattered. These should be rearranged. If there appears to be a product that the customer previously bought from that category, that one must be prioritized.
• The brands page must be arranged. All the logos of the brands must be shown alphabetically, in a way that the customer can click on them. On the brand pages, a special banner created for the brand should show, along with the brand’s products. “All of the Campaigns” page must be rearranged”. The campaigns should be demonstrated with representative images.

• Membership operations must be gathered under the “My Account” page. Password should not be requested when the customer would like to update their membership. The membership information must be shown and an input box must appear when the customer would like to change their currently existing membership information. Otherwise, there shouldn’t be an input box.

• Warning messages and their design should be modified. Eg: when we add a product to the cart via the Online Migroskop from Migros.com.tr, it redirects the customer to our website, however the warning below shows at the top of the page. If the customer sees this list without seeing the products on their cart, they will probably assume that they couldn’t add the product to the cart. This warning must only be shown when the customer would like to proceed to the payment page with a cart value under 65 TL.

• The “take a look” pop-up that appears when hovered on the product visual should be eliminated. Also, the fact that the pop-up does not disappear when the customer adds the product to their cart via the pop-up is an issue. It must either go away, or a button indicating “keep shopping” should be added. When the customer adds the product to their cart from this screen, warnings such as “Log-in / Sign-up” appear. Subscription should be requested in order to add the product to the cart.

• The main page should be simplified. It should be evaluated if the modules other than the mostly used “top sellers, products on sale, personalized campaigns, what is purchased the most at the moment” will be used by the customers or not.

My Account Page

Navigation

Mobile Responsive Design

UI Style Guide

Objective

Being a subscription-based business model, BluTV’s success depends entirely on the number of active subscribers. Our primary objective was to get more of our mobile website visitors to sign up for a paid subscription trial.

Challenges

We began the process by observing our user’s behavior on BluTV’s website. With the help of the analytics team Hype, we looked into the quantitative data such as Google Analytics, heap analytics and VWO (Conversion Optimization Platform). We found that the conversion rate for mobile visitors was significantly low compared to our website average.

Design process

The steps of the engineering design process are;

Solution

We proposed a re-design in order to increase the conversion rate for our mobile responsive site.

Empathy Map

In order for us to re-design our responsive home-page, I knew an empathy map would result in understanding our user’s needs while helping us develop a deeper understanding of the users that I’m designing for. This research consisted of five quadrants. Thinking, Feeling, Hearing, Saying and Seeing. These quadrants demonstrate the user during the observation/research stage.

User Journeys

Here we researched actions user take, questions they ask, happy moments they experience, pain points and finally opportunities we can gain upon completion. Each and every step is conducted by researching different channels like social media, costumer service feed back, eksi sözlük, user testings, surveys (google forms) done on the live website.

Potential Users Interviews

A user test has been conducted on total of 11 users. Multiple versions of landing page has been used during user interview.

Happy Moments

• While signing up, the BluTV originals and the contents that can only be found on BlutTV have a high value for the users. Especially The Handmaid’s Tale, 7Yuz and Masum were big blockbusters. (5 of the users confirmed that they would sign up solely for these contents)
• ‘Watch From Wherever You Like’ feature and Mobile Payment were quickly noticed by the users, which led to a positive reaction. (4/11)
• 1 week trial period and the commercial-free content info added an incentives to the sign up process. (4/11)
• There were no question marks regarding the pricing. The users were able to notice the price of the service.

Pain Points

After analyzing the page, the users asked some of the following questions:

• Are there any contents other than these? The users would like to access information on them. For instance, are there documentaries? (5/11)
• Can I cancel immediately? Is there an affidavit? (1/11)
• The contents arouse curiosity for the users and they would like to watch the content’s trailer when they click on the content or they would like to see more detail on it. (3/11)
• They wanted to know the answers to various questions such as ‘How do I sign up?’, ‘Is the process for signing up takes a long time?’ (2/11)
• Subtitles and dubbing exist every content and am I able to watch the content in HD? (2/11)

Solution

Based on this insight, we decided to completely re-design our mobile responsive home page. I intended to do so by addressing potential areas of improvement identified in the research and then test those against the existing ones.

Re-Design

• Removed all the distractions in the header section
• Kept only the logo and sign-in link in the header
• Included BluTV’s main value propositions and information about pricing
• Used animation for scrolling
• Promoted some of the most popular content available in BluTV’s library
• Added an FAQs section at the end to answer any common queries from different visitors

Iteration

Users and audience

In order to shape our users, we decided to create a survey, which we could share with our users online.

User Research Questions (Google Forms) Please review questions here

We asked some of the following questions;

• How much time on average do you spend weekly on watching web-related content?
• Which video sites do you use?
• In which tv shows are you the most interested?

Team work:

Our team has primarily worked on User research, Interaction/Visual Design and prototype while Hype Analytics team has worked on setting up the A/B test, conversion optimization, visitor research and optimizing conversions.

Constraints

• Scroll animation did not work on some of the browsers.
• We did not have sufficient developer resources on hand and hence could not code the entire project, so we used imagery in some places.

Final Prototype

https://vimeo.com/303486869

Result

With the help of Hype, we ran the test for a duration of 19 days and included 89,290 visitors. The Alternative variation increased the conversion rate by over 42%.

Please review live project here (Only works on mobile devices)

Case study featured on vwo.com

VWO is the all-in-one platform that helps you conduct visitor research, build an optimization roadmap, and run continuous experimentation.

Link below:

https://vwo.com/resources/case-studies/blutv-increases-subscription-trials-for-mobile-visitors/

User Story

As a user, I would like to be able to watch the trailer of a content and switch to the other contents available within its category all while viewing the details of the content so that I can have an easier time making a decision regarding whether or not to watch the show and explore new content.

Türkçe versiyonu için lütfen aşağıdaki link’i kullanın;

https://medium.com/@jeffromi/movie-tv-show-page-d9177e7054a5

Design process

Ideation + Validation

• 2 variation and responsive mobile screens have been designed
• We tested our idea with our product team as well as our current users outside of the office.

Objective

• Viewing the details-> Increase in the views
• Total session -> Increase in the views
• 10–20% of the detail page views switch to the other contents available within its category

Acceptance Criteria

The development and the new design will solely be for the desktop in the first phase and an A/B test will be conducted priorly. The A/B test plot will be similar to the previous A/B plots that we have used. All of the users visiting our website from Desktop will be subject to the test.

User Interviews

You can access detailed information from the link below: https://drive.google.com/file/d/1m7J0oFp34z6k10M5a89is2BrPo9ECpzJ/view?usp=sharing

What kind of personas were used to conduct the test?

• Hakkı, a programmer spends 8+ hours weekly on web-related content. Is an active user of Netflix and BluTV.
• Ezgi, a student spends 20 hours weekly on web-related content. Is an active user of Netflix and BluTV.
• Sinem, an industrial engineer spends 30 hours weekly on web-related content. Is an active user of Youtube and Bootleg websites.
• Ruba, content engineer and editor spends 25 hours weekly on web-related content. Is an active user of Netflix and Bootleg websites.
• Emre, a CRM coordinator, spends 6 hours weekly on web-related content. Is an active user of BluTV and Bootleg websites.
• Ahmet, spends 50 hours weekly on web-related content. Is an active user of Netflix and BluTV.
• More…

The Features That We’d Like the User to Explore

• Watching the Trailer mode
• Accessing the details of each episode by clicking the “More” button visualized with three dots
• Signing up and watching when the second episode hovers
• Accessing more information on the content by clicking on the “More” button at the end of the page
• The appearance of the hover pop up for the next show
• Accessing the details when clicking on the “More” button

The Trailer-Watching Mode (Version1)

The first thing that grasped the attention of the users was the Trailer Mode. The users were able to explore the content quickly. They were able to understand that the trailer appears when they click switch on the button (8/9)

Clicking on the More Button From the Episode

The users were able to use this feature in order to access more information on the episode and discovered that this feature displays the summary of the episode. (9/7)

Signing Up and Watching When the Episode Hovers

The users were able to understand the warning that popped up directing them to signing up and watching when they got to the second episode. When they clicked on it, they assumed that they would be directed to the “Log In/Sign Up” page. They understood that they could watch the first episode but would have to log in/sign up for the second one, which made it easier for them to understand what the lock signs stand for next to the episodes. (9/9)

Pain Points

• The users could not understand the binge watching term (6/9)
• The users could not comprehend the + symbol next to the button that indicates changing a season. (3/9)
• The users could not see the “Free” writing written on the first episode. They assumed that they would not be able to watch the show without signing up.(4/9)
• The fact that the more button and the specific button for details showed the details on the content confused the users. (3/9)
• The users were confused based on what the next / similar content would show.(3/9)

Users Suggested

• The “free of charge” writing can be more visible. (2/9)
• A descriptive writing on the function of the button can show when the cursor is on + “Add to my List”. (2/9)
• The user searched for a scroll after opening the detail page in order to get back to the previous page. (1/9)
• The name of Binge Watching can change. (1/9)

Navigating Through the Logos / Titles and the Contents

• If the content opens in a collection or category page, the related category of collection’s title show up on the upper left corner (eg. in the design in the attachment, the user has accessed the detail page of “Yaşamayanlar” from the “most viewed shows” collection)
• The logo of every content, if available, or its title with a pre-determined font and text is shown.
• When opened initially, the logo of the content shows on the left as active.
• The logo or the title of the active content is scaled at 1.2 and it’s opacity is 100%. The opacity and the size of the inactive contents’ titles are lower.
• If the selected content is not the first content of the relevant collection/category, a button to go left is shown on the right. In the meantime a part of the collection’s previous content’s logo shows on the left. When clicked on either one of these, the previous content is accessed.
• If, in the collection or the category, there are different contents than the chosen content, the logos line up on the right. When the user clicks on the logos, the corresponding content becomes active. During this transition, the logo’s row shifts, with the selected logo staying in the middle. If the selected logo is already in the middle, the rows do not shift. If the logo belongs to the last content of the collection, the rows do not shift and the logo appears active on the right side of the row.
• The next and previous buttons located on the upper right corners, only appear if there is a previous or next content that can be shown. When clicked on, the aforementioned animation appears. With every click, only one content shifts. If clicked multiple times, the upper line shift with the same speed, however the details of the content do not update. The detail page shows with a 3-second delay (when the rapid clicking is over).
• When clicked on the video area, one can access the next content (It should function the same way when clicked on the right arrow)

Trailer & Video Screening

• If the related content does not have a trailer, the gallery images are used in the field of the video. The relevant images should be shown 2x in retina. The images change in every 4 seconds, in a loop. The animation here should be a fadein/fadeout.
• If the related content has a trailer, the first image is shown for 4 seconds, then fades out and the video starts playing.
• The audio state of the trailer remains active during the first use. When the user clicks on the audio off icon found at the lower right part of the screen, the audio mutes and the icon state changes to mute. Based on the user’s preferences, this is saved in between the following sessions.
• When the trailer starts playing, the line on logo of the active content moves as a progress bar.
• When the trailer is over, it rewinds to the beginning just as the progress bar.
• If this content has more than one trailer, the progress bar is separated based on the amount of trailers (eg. showing 2 lines rather than one). When the first trailer is over, it moves on to the second one and its corresponding progress bar moves accordingly.
• If the content has more than one trailer, the shift to the right features firstly plays the other trailer and after the last trailer switches to the next content. (Clicking on the video field, clicking on the right arrow)
• After the trailer starts playing, the mouse movements of the user start to be tracked. If the location of the cursor does not change for 8 seconds, the lower panel of the screen disappears and the opacity mask on the video or the images disappear as well. Only the opacity mask on the top part (where logos and navigation are) is maintained. When the user moves their mouse, it comes back to its previous state.

The General Feature of the TV Show Pages

• When it is initially opened, the “episodes” tab becomes active
• While the episodes tab is active, the seasons of the show appear below
• The related episodes of the active season appear below
• On the TV show pages, the lower field runs over towards under the screen when initially opened. This causes only a part of the posters to show
• If the user scrolls down or hovers to the field where the general features are with their mouse, this screen animates upwards. (Animation should occur during scrolling, so it’s not natural scrolling)
• If the user hovers from the lower field to the outside of the screen, the lower part disappears downward after 2 seconds
• If the user opens the lower field by scrolling, hovers to the lower part and hovers back to another field, the panel closes the same way in 2 seconds
• If the user already watches the show, the season and episode where they have left off actively appears (The season is active, the latest episode that has been viewed appears on the top of the row. If it’s the last episode then it shows at the bottom)

The Trailer View on all of the Detail Pages

• The trailer plays at the background, if the TV show/movie has a logo, the logo shows instead of text
• If it is a BluTV original production, the required tag shows and it functions just like the other tags
• When clicked on the button below or the “more” link in the description, further information on the episode can be viewed
• All the detailed information is hidden with the trailer switches and provides an audible, full screen viewing
• A similar content is shown, when hovered
• When the user hovers on the watching list, the “add to my list” tool tip appears
• The play button indicating that the first episode can be viewed free becomes active while when the user hovers on the others, it requires a log in/ sign up

Final Prototype with Framer

Conclusion

According to a research done by ‘The Stories Landscape Today’ snapchat is the one app where Stories has reached maturity, with around 81% of daily users engaging with the feature, Instagram has seen swift and steady adoption, with 60% of daily users on Stories and 300 million daily Stories users overall which is more people than Snapchat’s entire 187 million daily user base.

I know that the story design pattern used by these social platforms is the format of the future and therefore can result in increase on total sessions as well as switching between pages up to 10–20%.

What could I have done better?

• Introducing a new feature like Instagram story format is never an easy task. Due to time and development restrictions I did not have enough time to move forward with full functions.
• In phase #2, I would have liked to use more data and live content on site to back up my theory for the level of success.

Making an emotional connection with your users

I want to begin the conversation with the importance of making an emotional connection with our users. A good design experience, serves the basic needs of our users. Functional, reliable and usable product. Is that it? No!

Great design experience is where the magic happens. In addition to the basic needs, it must serve an emotional connection between the user and the product.

The first step to creating a GREAT experience, is to show personality and character in your designs. Without personality, we cannot communicate with each other. I believe, we can do this with humor.

Humor can be applied for multiple purposes. Humor is a therapy, and uses the power of smile and laughter to aid healing. It’s a social interaction, that takes away those awkward and uncomfortable feelings. It helps to prepare the mind for stressful events, making us more tolerant to minor difficulties.

It can encourage a positive and engaging attitude. It gives us a sense of perspective on our problems, and releases tension for the user. Humor is an emotional connection, which we can establish with our users.

We as a user, need to make sense of everything as it happens. When we have a good understanding, and control over what is happening, (which can be guided by humor) we can predict and when we can predict we can also make a decision on the relevant actions, which can ultimately lead to achieving our needs and goals.

Scott Weems, a researcher at the University of Maryland, explains humor as a form of exercise — a way of keeping the brain engaged. According to Dr. Weems, we benefit from humor in the same way, we benefit from a long run, or a tough spinning class.

Research published in 1998, by Heather Belanger suggests that humor improves our ability to mentally rotate imaginary objects in our heads — a key test of spatial thinking ability. Johns Hopkins University, explains Spatial thinking also known as visual- spatial thinking as the process of solving tasks in everyday life.

For instance, using a map, to guide you through an unfamiliar city, merging into high-speed traffic, and orienting yourself in your environment.

A person with higher spatial ability tends to show better performance in solving a puzzle game, which requires combining smaller objects to form a larger shape.

In human-computer interaction, visual spatial ability is the process of search and information retrieval.

Every time we go to a website, we put our emotions into that experience. Whether it’s positive or negative, we create an imaginary feedback in our heads.

By successfully using humor, we establish an emotional connection and remind the user that there are real people behind the design. We let people know that if something goes wrong, we are here to help and guide them through the issue.

We are making our product ATTRACTIVE!!!

Don Norman, who is the author of Emotional Design, describes why “attractive things work better.” He says attractive products trigger our creativity and expand our mental processes, making us more tolerant to minor difficulties.

According to Norman, attractive products make problem-solving easier, which can benefit both the designer and the user.

As explained by Aaron Walter, babies tend to create a special bond with their parents. This is a feedback loop signaling communication between the baby and the parent. When the baby cries, parents respond by soothing them, which releases calming neurotransmitters in their brains. As this cycle repeats baby begins to trust that their parents will respond when they need them.

A similar process can be seen in design. Positive emotions (like humor) can build a sense of trust, and a special bond between the user and your product.

By successfully applying humor to our experience, we are making our product appealing, effective, enjoyable and memorable.

Effective

Effective product guides the user’s attention and make sure they find what they are looking for.

Enjoyable

It allows the user to appreciate your website and have fun.

Memorable

It builds a relationship with the user and ensures a positive memory with your product.

Making this connection will ultimately put the user, at the center of all design decisions.

According to research

• With appealing products, user assigns more meaning to humorous artifacts
• User holds more positive perspective about completing the task
• User feels more motivated about the experience and builds a special bond with the product

Smallest details or even an unnecessary one can make a huge difference on a user

In this example below, mail box becomes appealing to us. By using humor in our designs we are making our product stand out.

This is the experience we need to provide for our users.

Finally, how do we implement humor into our design?

You can start by asking the following questions to guide you through the process

• What is the goal of this product?
• What do we want user to achieve in the process?
• Is humor used in proper places?
• Is humor offensive?
• What is the audience’s relationship with humor?
• Does humor empower the user?
• Humor design is guaranteed when the experience is useful, natural and memorable