Dalit Steinbrecher
Hi there! my name is Dalit Steinbrecher, don’t feel bad if you
can't pronounce my name, even in Isreal (where I was born) it's an
uncommon name. I'm a product designer currently based in New
York....
for more info/contact
UX/ UI design
Animted Layout
Apester is a platform for creating stories. Apester has an editor
with several engines that let publishers create their unique
visual story After examining the analytics of different publishers
(GQ, Rollingstone Magzine, Time Out Tel Aviv, E-magazine, etc.) we
realized that the contents with the most engagement were with
videos or animations. We wanted to make it easier for our
publishers to create high-engagement stories that include videos
and animations.
We had two goals:
1. Apester users are mostly writers and editors without any knowledge of editing or design programs, so the user flow had to be simple with the user placing content and the animation will happen “automagically”.
2. Create an interesting and beautiful layout template library that will increase engagement. Together with the marketing team, we started by doing research. We wanted to create certain case studies for content:
1. Apester users are mostly writers and editors without any knowledge of editing or design programs, so the user flow had to be simple with the user placing content and the animation will happen “automagically”.
2. Create an interesting and beautiful layout template library that will increase engagement. Together with the marketing team, we started by doing research. We wanted to create certain case studies for content:
The use of those backgrounds raised a lot of user experience
challenges in the editor side. Inside of the existing editor, I
created a new tab for animated layout (as opposed to regular
layouts), these layouts have an inner editor that with, a few
simple steps, allow the user to create their own animated story.
First, while the user hovers with the mouse on the layout they
get a preview of the animation and by clicking on the chosen
layout it will appear on the editor. Then, the editor will show
every step on the way to change and modify the new layout. The
main thought that lead me to create this flow was: Apester users
don't have time to spend on design so the flow had to be clear
and structured as possible.
As time passed we found additional case studies that required
custom flow in the editor. One of these examples is the case of
"one vs other". This case-study looks like this:
