A traditional paper magazine to a non traditional web magazine

Filter is a Swedish paper magazine which often covers topics that questioning established "truths" and discovers details that gives new perspectives. With that attitude, they have been rewarded with some of Sweden's most prestigious journalistic awards.

* These covers are made by Filter.

Brief & challange

Filter came to our school asking for ideas to reinvent their paper magazine to fit the web and how to make people pay for online content.

Filter put a lot of effort to produce well written, in depth and long articles which fits well in a traditional paper magazine context. It doesn't translate well in our rapid online behavior with a much less attention span. It's more likely we read longer texts on a physical paper than on a screen.

Solution

Magazines put down a lot of effort and money to design  each issue and article. Why wouldn't that apply to a digital medium? Why spend less effort to design for a medium with more readers? Why would consumers want to pay for online content when sellers won't?

Our approach was to create a platform for the magazine were every article feels like its gotten some love and attention. We embraced the qualities and capabilities the digital medium has to offer.

A screen has almost the same aspect ratio as a spreadsheet. While a magazine utilizes this, a webpage often don't. We split the article pages into two columns. One dedicated to the written article and the other for images, quotes, lists, notes, fun facts, sources, links or whatever is related to to article.

Inspired by video content, and our aim to give the articles an extra layer of dynamic, we made a set of animation templates triggered when anchored words in the article is scrolled into view. Much like scrubbing thru a video.

The paywall

Our research showed people don't pay to access online content, they pay for convenience. If we look at Netflix. All their content is accessible for free just one google search away. Netflix offers the convenience of not having to deal with popup ads.

We made an "adwall" instead. To unlock an article the users had to either pay or watch an ad and answer a question. This is something app's and mobile games have been doing for a while with very good results.

Team

The group consisted of three students from UX design, one from web development and my class mate Anton Åsberg. My role was to design and make the prototype.  I took the opportunity to widen my knowledge in javascript and made the prototype in code. This gave me more control over the translation from design to code and facilitate the developer with a bone structure. This was a a very efficient way to speed up the production and minimize the language barrier between our different fields of expertise.

Magasinet Filter — 2018
View more
01

A source to help you understand and get started with the worlds most popular cryptocurrency

Bitcoin.se is a swedish website about the Bitcoin cryptocurrency. It aims to help people get around the technical and teoretical barier and get started with Bitcoin.

Brief

Bitcoin.se has been around since 2012 as a blog where David Hedkvist, the founder of the site, wrote and discuss topics around Bitcoin in swedish. Since then the site has grown and the blog approach was making it hard for the users to navigate and find what they were looking for.

I was hired to rebuild and redesign the whole website from the ground up and create a visual identity, which was none existing at the moment.

Challange

The visitors knowledge about Bitcoin range from those who has no idea what it is to those who are experts. The site contains both the basics and the a more in depth articles, news reports and discussions.

The challenge was to find the same balance in the design as in the wide range of the content. We needed to reach both the beginners and the experts and make them confident enough to learn and eventually take part of the forum discussions which is a huge part of the site.

Solution

I went with a playful and fun look and feel to contrast the users potential feelings about the topic. The playfulness also helps in a pedagogical and educational way.

Instead of presenting all the navigational choices as a specific list of links. All the content was dissected into categories and sections which left us with a small navigation bar with quick links and drop downs.
The landing page displays a variety of the different content on the site.

Colors

Blue and yellow was the starting point for the mixing palette. Since Bitcoin.se is, unlike most other websites about Bitcoin, in Swedish I wanted to reflect upon that in the choice of colors.

I ended up with a color scheme of dark and light purple, blue and yellow as the main colors with a wide variety of complimentary colours to use for accentuate elements and color coding contents into categories.

Typography

Futura PT, in two wights, is used as the only typeface  across the whole site and the visual identity.

Futura PT Book
Futura PT Bold

Logotype

It was desired to have a symbol in the logotype that could work on it's own both large and extremely small. That meant it had to be very simpel in its shapes and details without looking generic to the point it wouldn't be recognised.

The symbol is a combination of a coin and a speech bubble forming the letter B as in Bitcoin.

I modified the typeface in to logotype to mirror the symbol, the rounded corners on the site and a give it a slightly forward direction.

I wireframed and made the first designs in Sketch and as I moved into Webflow I could jump seamless between design and development. That was a crucial part of handling the whole project myself as I could preview the design in it's actual context and change the design on the fly to fit the medium as I stumble upon problems in the translation from design to code.

After effects, Illustrator and Cinema 4D was other tools I used in the project.

Please visit Bitcoin.se for a full view of the work.
Bitcoin.se — 2018
View more
02


How to solve the housing problem in a popular city during your internship?

You've got the perfect internship in a city you always wanted to live in but as in all major citys there isn't any housing that fits your budget? Or the housing is just too far away it's not worth the hours commute to the working space?

Brief

We had an individual school assignment where we had to come up with ideas to facilitate students before, during or after their internship abroad.

We had free rein to visualise our ideas. However, we had to use the colours blue and yellow and the San Francisco typeface.

Solution

I decided to take on the housing situation you face when moving to a new city during 3 to 6 months.

My solution was to make an web app that tailors the most efficient and budget friendly stay at different motels that fits your preferences based on how far away from the working space you could possible live and how many times per month you to move between motels.

Desktop

Screenshots.

Mobile

Screenshots.

Prototype

Made in Flinto.

Mopla — 2018
View more
03

A usefull tool for students and real estate managers

Akademiska Hus is one of Sweden's largest real estate companies providing buildings to schools and universities around Sweden.

Brief

As a school assignment Akademiska Hus asked us to redesign their app for reporting errors and reach out with information to both real estate managers and tenants without expanding their number staff.

The app should work as a channel where tenants and real estate managers could communicate.

Solution

Our solution was to design an UI around maps and blueprints in a isometric view. Using blueprints and pins we could present information on a local level without menu diving and confusing lists of information.

Our group was assembled by two web developer students, my classmate Ellen Neüman and myself.

Colours

Akademiska Hus visual identity consist of an extensive colour palette which we used to further distinguish between the different states, functions and sections.

Micro animations & transitions

As we decided to make a website instead of an app, we still needed it to have all the qualities and convenience as an app, in terms of ux. A big part is the experience of flow and seamless transitions.  Well designed micro interactions will facilitate the user experience. It indicates where they are, where they will go and what is happening when you interact with elements.

I used Sketch and Flinto in the making of the prototype.

Depth in UI

We designed the structure around a 3 dimensional hierarchy in the Z axis.

To exemplify; The navigation tab is at the top of the hierarchy those its positioned at the far back as a base to wrap around the whole site. The submission form of an error report is positioned below the map of the building. Submitted error report is displayed as a pin on the map and when clicked, the report i displayed as a modal above.

Screens

A selection of screenshots in mobile view.

Components

Usually we deliver designs to the developers in Invision. This time this wasn't possible, so we had to deliver assets along with clear visual guidelines

Typography

Akademiska Hus uses Chronicle and Scene Ah in all of their communication. We decided to only use Scene Ah and not use Chronicle, which's a serif typeface, at all as it don't perform well in an UI environment, especially not in small sizes on small screens.

Akademiska Hus — 2018
View more
04
Work

Peter Bartel

Looking for internship
Nov 2018 — May 2019
GBGothenburg, Sweden
Design student
HI+46 767 88 88 89
IgFb
About
b. 1987 in Sweden
IgFb
hi@bartel.se+46 767 88 88 89
Kryssdäcket 1, 413 27
Gothenburg, Sweden
My name is Peter Bartel
I’m a multidisciplinary digital design student with focus on motion, UI & UX
Education
2008 — 2009Art College Folkuniversitetet Gothenburg
2009 — 2010Art Photography Gamleby Folkhögskola
2010 — 2013Beachelor in Fine Arts Umeå Academy
2012BFA exchange program Valand School of Arts, Gothenburg
2017 — 2019Digital Design YRGO Yrkeshögskola Gothenburg
Language
Swedish
English
HTML
CSS
Javascript
Tools
Sketch
Invision
Webflow
After Effects
Illustrator
Photoshop
Cinema 4D
Indesign
Glyphs
Flinto

I am looking for intership
from nov 2018 — may 2019

hi@bartel.se+46 0767 88 88 89