Top Spritesheets were used for collections of
similar assets to help with file size and reduce
HTTP requestsHow we built
PAUL
BUTTON
Button is a co-founder and
creative director of Set Reset.
He designed and illustrated the
Cytora microsite.
t: @madefromdataBOB
WILSON
Wilson is co-founder and
managing director of Set Reset.
He provided design support and
sense checking throughout.
Insta: @set__resetCytora is a technology company
with its aim firmly focused on
using big data and machine learning
to transform the insurance industry.
This is achieved using an AI-driven
risk engine that enables insurers to
underwrite policies at a fraction of the
time and cost. Aware that it needed a
way to explain its complex proposition
and how it can benefit insurers,
Cytora brought in Set Reset (set-reset.
com) to create an animated one-pager
(cytora.com/ai-guide) that clearly
demystifies its process.
What was Cytora looking to achieve
with this site?
BW: AI is such a loaded term and
difficult to describe in a business
context. Cytora’s proposition is complex
- ingesting and ranking billions of data
points to price insurance. They wanted a
visual narrative that was simple enough
for anyone to understand, while at the
same time managing to convey the
power of the technology.
Can you take us through what your UX
process involved?
PB: This is a fairly simple site from a UX
point of view, being essentially a one-
pager. Our aim was to keep it as clean as
possible, so the user could focus on the
linear narrative we wanted to tell. Once
Chris had built a basic prototype, we
experimented with different scrolling
systems and how they would trigger the
animations. Our aim was to cut anything
that wasn’t essential to the story – even
going as far as removing the nav menu.
BW: Dividing the narrative into easily
digestible sections helps to break up what
is quite a long scroll. Giving the user
small snippets to read means they’re less
likely to miss the animation on the other
side of the screen. We pushed to have
animation with each part of the story,
in order to keep things interesting and
moving along.CB: The scrolling mechanism changed
a few times throughout the design and
development process. Initially, the site
was designed to be a long scrolling page
that ‘hijacks’ the users’ native scroll
position to power the animations and
copy. After some testing, we felt that
a fixed carousel-like scroll was more
appropriate for storytelling and would
also prevent users getting ‘lost’ between
the sections.Both AI and underwriting are pretty
complex subjects. How did you
approach breaking them down into a
concise but coherent narrative?
PB: Information design is a lot about
coming to a subject as a beginner and
being able to deliver that subject with
clarity and from a position of authority –
and this project was no different. Cytora
gave us a great brief, with a high-level
narrative of the story they wanted to
tell. We took that and broke it down
into individual scenes, each with key
highlights we wanted to focus on with
animation. We aimed to space out these
highlight events so the story flowed
as evenly as possible. We worked with
Cytora to strip the story down into simpleCHRIS
BROWN
Brown is co-founder and technical
lead of Set Reset. He was tasked
with building and animating the
Cytora microsite.
t: @set__resetTIMELINE
Key dates in the
Cytora projectOCTOBER 2018
Set Reset dives into the content,
creating a concept and then pitching it
to Cytora.
NOVEMBER 2018
Wireframes are storyboarded and
animations prototyped.
NOVEMBER 2018
Codebase and artwork assets set up.
NOVEMBER 2018
UI and scrolling functionality developed.
DECEMBER 2018
Implements animation framework.
DECEMBER 2018
Iterating on transitions and graphics.
JANUARY 2018
Reviews and overhauls copy and makes
last-minute design tweaks.
JANUARY 2018
Carries out bug testing and ensures
consistent experience across devices.
JANUARY 2018
Deployment and then a celebratory
Launch Roast!