Apester is a platform for creating stories. Apester has an editor
with several engines that let publishers create their unique
visual story. The users are mostly writers and editors without
knowledge in editing or design programs. After many conversations
with different publishers (GQ magazine, Rollingstone magazine,
Time Out Tel Aviv, E-magazine, etc.) we realized that readers are
more likely to engage with stories that include images and
especially with an image gallery. The issue was that our users
(writers and editors) can't create galleries by themself.
wanted to create a gallery engine and we had two goals:
1.Reducing development time - we decided to re-use an existing
engine and add a few adjustments
2. Having an no-code and no-design process - our users are neither
developers nor designers and we wanted something that will “just
work, and fast”.
After researching the online galleries that already existed, I
made a list of components that have to be in a gallery. Then I
used the user flow of an existing engine and removed all the
features that were not relevant and left the ones that were
important for the gallery. The only feature I added was an option
to upload all the images - the user will only need to drop or
upload all of their photos into the editor and the images will be
organized automatically. If the user wants they can control the
order of the photos by dragging them:
The content that was created in Apester was published mostly on
these publishers’ websites which the readers mostly watched on
their phones. So the ratio was adjustable and responsive to
accomodate smartphones:
There were 2 issues with that:
1. The photos can be in different ratios and because of that can
be cropped.
2. I needed to think about the 'full screen" scenario on a
desktop.
For the ratio cropping, we decide on a solution that was solved by
an image processing algorithm, every uploaded photo will be
centered and cropped from the sides. For the desktop full screen,
I decided that the background will be a blurred extension of the
image that is shown at any given moment. Even though the gallery
itself takes a small part of the desktop screen I wanted that the
whole screen will be a part of the experience. So I showed the
upcoming photos and spread the different buttons on the screen.