• Marina Neff
  • Digital Designer
  • Berlin
Alternative text that describes the image

Magine TV

  • Web
  • Touch Apps
  • Big Screens
Alternative text that describes the image

A new TV experience

Magine TV is a Swedish TV streaming network which is also available on the German market with multiple apps. With the creation of the new exclusive PS4 app Magine expanded its range of products. Simultaneously the other apps, amazon TV, web app and all touch apps were updated and got the same concept and design.

I was responsible for the whole UI Design of all product apps and the creation of the new key visual. And also helped to solve some UX issues. The challenge was to design for surfaces and products that aren’t conventional online platforms.

Company

Magine TV

Role

UI designer

Year

2017

Programs

Big Screen

One Gist of the big screen design was the design of the key visual that pulls through the whole app surfaces. The challenge was to create and design the apps in order that the same functionality and concept was guaranteed to the user no matter what controller and device are used. Also, it was important to design every element, that they don’t disturb the users in their TV experience but rather support and improve them.

Colors

Magine TV provides a big range of colors. The color red offers a visual destinction to it’s direct competitors zattoo and waiputv. The other colors are there to give every section it’s on color code.

Primary

#FA0046

Primary

#FA0046

Primary

#15D8C6

#FFFF00

#451FA3

Packages

A special offer was acquired together with PlayStation for their customer's and is placed in the focus of the package overview. Each package got a unique color variation of the key visual.

Alternative text that describes the image
Alternative text that describes the image

The electronic program guide settles over the current program, this way the user won’t miss anything. A clear marker of the running programme. Blocked channels are visibly marked for the user, simultaneously they know which package contains the requested channel.

Alternative text that describes the image

Player

The gist of the big screen app is the player. It’s possible to switch between channels or search in specific view through all channels. The programme will not be disturbed when it’s not necessary.

Alternative text that describes the image
Alternative text that describes the image

The upsell marker communicates the package that is required to see the channel. All important information is displayed to the user.

Web

The web app is the platform with the highest traffic and therefore the most important product field. The main aspect was to rebuild the product with the focus on the player. Above that various new section like the media library and catch up were designed.

Alternative text that describes the image

The user can start right away to watch TV. Blocked channels and the required package to watch them are clearly visible. It’s easy for the user to switch channels through the channel overview which will blend in or out.

Unlike the live TV section, the media library focus on the channels and their programme cards. The user can filter for the specific content of a requested broadcaster.

Alternative text that describes the image
Alternative text that describes the image
Alternative text that describes the image

Touch Apps

The final issue forms the touch apps of Magine. Designed and adjusted for the distinct need of mobile devices. The small space that was provided through the mobile devices was optimally used to created necessary features.

Alternative text that describes the image

Magine TV

  • Web
  • Marketing
Alternative text that describes the image

Watch wherever you want

Magine TV is a Swedish TV streaming network which is also available on the German market on various platforms and also a web application. One important point was the permanent improvement of the website, on a desktop, tablet, and smartphone. Further, there were new upsell options designed for the product.

Newsletter, Banner or Facebook Post, it was my responsibility to work together with the marketing team to fill this channels or create new business opportunities, like the white label EPG. All UI decisions lay in my responsibility. Through the adjustments of marketing relevant channels, it was able to increase registrations and sales, thereby the companies KPIs could be achieved.

Company

Magine TV

Role

UI/UX Designer

Year

2015 -2017

Programs

Color

Magine TVs signal color is red. All important CTAs and the advertising of the main product are displayed in this color. Due to cultural distinctions, the color green is taking this task for the Swedish market. The blue color is a supporting color for both markets.

Primary

#FA0046

Secondary

#29B6F6

Tertiary

#71C2AE

Website

The main task of the website is to convince users to register. The user is convinced on various pages with different reasons to become a customer of Magines product. The website is built on a modular system which enables the possibility to place any module on any page and is easy to fill with content.

Pages

There are various important pages of the website with a different area of responsibility. For example, the homepage conducive to explain the service to potential customers. The channel page promotes the content and the channels itself to the user.

Alternative text that describes the image
Alternative text that describes the image Alternative text that describes the image
Alternative text that describes the image

All modules are able to display on any device.

Module iteration

Important modules were consistently improved and advanced through multiple iterations, thereby to fulfill the marketing KPIs. All iterations were verified through A/B testing.

Alternative text that describes the image

Pricing page

The whole concept together with the UI of this page got edited. The focus now lies on the advertising of the main products basic and premium. This way it’s easier for the customer to compare the packages with each other. The sales improved by this changes.

Alternative text that describes the image
Alternative text that describes the image

Marketing

Creation of cross-cutting marketing and business relevant advertising material on different media, such as a newsletter, banner or a white label EPG which can be resold to business partners. There are two possible views for the EPG. One compact version of the current TV schedule additional with the TV highlights of the day. The other one is the detailed version for all yet airing shows of the day. The design of the EPG is easy to adjust to the brand guidelines of the partner.

Alternative text that describes the image
Alternative text that describes the image
Alternative text that describes the image
Alternative text that describes the image

Siemens

  • E-Commerce
  • Landingpage
Alternative text that describes the image

Smoothly way of shopping

A new e-commerce webpage for an important Siemens retailer was created. Together with a landing page that promotes special events, services etc. of the retail store. Both websites form a consistent image. The new brand design of the store was implemented and advanced for the online environment. The design was adapted into the clean and reduced UI design of the Siemens world. Special attention was laid on to SEO aspects.

I was responsible for the development of the online shop. In collaboration with the lead designer, a consistent visual online brand was created. Together with the concept team, I elaborated a new filter principle.

Agency

Aperto – An IBM Company

Role

Designer

Year

2015

Client

Siemens

Programs

Brand

Specific brand colors and font were provided from the print design. For the web use more nunaces of the colors were created.

Alternative text that describes the image
Alternative text that describes the image

Pages & details

The pages are built on clean and simple modules. The main design aspect is the product pictures which are displayed in various executions together with the CTA button.

Homepage

Alternative text that describes the image

The tag helps the user to know if the product is also available in the physical store.

Product list

For a detailed search result it’s possible for the user to optimize the search. Additionally the filter module can be blend in or out depending on the need of the user. The user is also able to quickly recognise the efficency class and brand of the product.

Alternative text that describes the image

It’s able to switch the product grid into two different views.

Product detail page

The product detail page contains a strong CTA. Siemens product highlights are displayed and detailed explained in an own module to the customer.

Alternative text that describes the image

Global link to the store landing page.

Shopping basket with a visual display of the contained products.

Store landingpage

As part of the new store opening an especially therefor landing page was created. It’s got a strong visual language through the tile and parallax design.

Alternative text that describes the image
Alternative text that describes the image

The tile can be used for various purposes and needs.

Aperto

  • Web
  • Mobile
  • Print template
Alternative text that describes the image

New look & feel

To give Aperto's new profile a well rounded look, the agency got a new and responsive website. Bigger images, appealing texts, an easier navigation as well as compress the content to the essential gave the website a modern and fresh appearance. Next to cases and Aperto's range of services, there can be found whitepapers by which Aperto shares their knowledge with the user.

I was responsible for designing whole module concepts up to the implementation of the final design. My work included image editing, creation of mobile and tablet views, mockups for the keyvisual, 3D-artworks as well as the creation of design templates for building the whitepaper in the new look of the agency.

Agency

Aperto – An IBM Company

Role

Designer

Year

2014

Client

Aperto – An IBM Company

Programs

Wireframes

To keep the number of the template low for this project the focus was to leave it with three main templates and work with modules that can work for every section or just be suitable for a specific case. With this workaround, specific modules can be edited instead of a various number of templates.

Alternative text that describes the image

Colors

Aperto provides a clean and minimal color plate. The black color transmits together with the white a luxurious feeling. Thereby, that the green is the only real color it gets a special visual attention from the user.

Accent

#99CC00

Primary

#212121

Secondary

#444444

Case detail page

A variation of modules is available to advertise each case depending on the required need, especially for the highlight case studies. Its possible to switch between cases without having to go back to the work overview page. Likewise, the tag module provides the possibility to search for reliable studies.

Alternative text that describes the image
Alternative text that describes the image

Other pages

Modules of the home and case detail page were used to build and fill this pages. There are a few modules designed to fulfill specific needs of some pages. Like the blog module, that enables it to download knowledge papers.

A specific grid for the teaser module was design to display these without any problem on all devices.

Alternative text that describes the image

Desktop

Alternative text that describes the image

TabletLandspace

Alternative text that describes the image

SmartphonePortrait

Alternative text that describes the image

Print template

All existing knowledge papers got a new and cohesive look based on the created web design. Additionally to the redesign, a print template for future papers was created. Thes knowledge papers can be downloaded as a PDF on the blog page.

User Interface Designer based in Berlin.

Hi, I’m Marina Neff. I’m passionate about what I do, and I love to help people. Nothing is more fulfilling than being part of a team with similar interests, and an organization that values its employees. I have been working for 5 years as an User Interface Designer. During this period I had clients in fields of NGO, Banking, Public and famous brands such as Siemens, Rossmann, and MAN. For the last two years, I worked for the TV streaming start-up Magine TV. Thereby I had the opportunity to work in a consumer-focused field.

Say hello!

mail@marinaneff.com

Check out more

Please resize.

This website is optimized for desktop or tablet view. Please resize your browser or view it on another device.

No support

This website doesn’t support this version of your browser. Please use the newest version or use another browser.