- Marina Neff
- Digital Designer
- Berlin
Magine TV
- Web
- Touch Apps
- Big Screens
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.
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.
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.
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.
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.
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.
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.
Magine TV
- Web
- Marketing
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.
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.
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.
Sign up completed
By implementing this section after the registration of new users, it was able to increase the sales numbers. Special events such as Olympia or Christmas got a visual adjustment.
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.
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.
Siemens
- E-Commerce
- Landingpage
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.
Brand
Specific brand colors and font were provided from the print design. For the web use more nunaces of the colors were created.
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
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.
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.
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.
The tile can be used for various purposes and needs.
Aperto
- Web
- Mobile
- Print template
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.
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.
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.
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.
Desktop
TabletLandspace
SmartphonePortrait
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.