Designing UX for Offline – Designer vs. Developer #19

Designing UX for Offline – Designer vs. Developer #19

in UX is always the big thing. It’s like making sure that the
user knows what the state is. ROWAN MEREWOOD:
But what they found is that by having that
branded experience there, users just weren’t
dropping out of the funnel. [MUSIC PLAYING] MUSTAFA KURTULDU: What
I’ve noticed with payments and e-commerce,
there seems to be a challenge between developer
interests and business interests, and where
they meet in the middle. Developers want to use
the most latest tech but have problems convincing
business why to use it. So whether it’s offline
patents or whatnot. What do you feel about where
business and our interests meet, as it were? ROWAN MEREWOOD: Yeah. I think it’s a key thing. So developers do get
excited about doing code and about solving these
complicated technical problems. And it can be a
challenge to actually make sure that that
translates into something that is going to help the
business make money in the end as well. So something I’ve really
been trying to focus on is helping developers with
that communication step. So how do you take
the technical stuff that you want to do and
actually frame it in a sense where you can kind
of say, this is going to affect our bottom line? Like, this is going to
make more money for us, this is going to
increase conversion, or this is going to drive
repeat visitors to the site. So yeah, kind of looking
at things where it’s like, don’t get super wrapped up
in this amazing technical implementation, but
actually turn it into something that is
going to help get you paid. MUSTAFA KURTULDU: Yes. So I mean, is there
any techniques which developers
really want to push for but don’t necessarily make
sense from a business UX point of view? Because I can see
having large images, there’s a downside to it. But in the context of people
who often are uploading stuff, adding products to
e-commerce sites, they’re not technical
people necessarily. They’re just getting
on with their job, so how do you create a situation
where performance becomes like a business interest thing? And how do developers
convince businesses that this is an important
thing rather than this is just the coolest, latest fad? ROWAN MEREWOOD: Yeah. I think we’ve been
pretty good with pushing the message of performance has
an impact on your bottom line. There are loads of
metrics out there that we’ve shown people,
like, multiple times– that if you make people wait
more than three seconds, you’re going to lose
53% of your audience. Amazon did the one where
they were showing for, like, each microsecond
that you were waiting, you were losing a
percentage of people away from the site,
which is really nice. But it’s a very
blunt tool, right? Performance cannot just be
applied as this kind of one size fits all to
every single solution. So a lot of it’s about
getting developers thinking in a more nuanced
way about the problem that they’re actually
solving with performance and whether they’re making
a lasting solution as well. So where you’re
talking about images, we’ve seen this a
couple times, where developers will put the work in
to fix the site as it currently is. So they’ll go through,
they’ll make sure that the images are
optimized, that they’ve got multiple versions hosted for
appropriate devices and so on. But then as soon as the
next sale rolls around, like Black Friday
comes in, suddenly it’s like panic station. So everybody just uploads all
of the raw catalog images again, and it all just goes
back to the way it was. So the key thing there
is like, it’s not about getting those
results right now, it’s about how you actually
work that into the process. For example, if
you’re a site that’s like a classifieds-style one,
like either eBay or a sort of Pinterest-style thing, then
when you’re uploading images, you’re probably already doing
some processing at that point. Like, you want to strip
out the geo data from it, so that it’s not telling
the internet where I live. Those are the points where
you should be looking at, OK, in there, can we actually
put the image processing in, so that we’re also creating
the optimized versions? That we include some
kind of sign-off flow, so that product and
marketing can actually take a look at
those images and go, yeah, we’re happy that the
optimizations haven’t actually affected the quality
levels that we care about. MUSTAFA KURTULDU: So
is there any tools that teams can actually use
to implement– to basic– because it’s not
just about creating a great e-commerce
site, but it’s creating a process and a toolset
for the people who are actually working on the back-end side
of [INAUDIBLE] just content management. Is there anything that
developers can actually look at? ROWAN MEREWOOD: I think that’s
probably the challenge here– is that it’s pretty
straightforward to do the one-off optimizations. And we can give you a tool
where we can say, hey, this works like this. Just go ahead, run it, and go. But building it into your
process is a harder task. So there’s not necessarily kind
of like, hey, your business– MUSTAFA KURTULDU: A
one size fixes all. ROWAN MEREWOOD:
–yeah, can do this. It is one of the
reasons that we’re starting to do more
things like talk with CMSes like Drupal,
WordPress, Magento, and so on, to kind of
say, hey, can we actually look at where these
things would fit in? Is there a plug-in
that can be used? So that’s normally the
technique I’d suggest– is take a look at who’s common
to what you are doing already. And try and steal all the good
ideas from them to [INAUDIBLE].. MUSTAFA KURTULDU: Yeah. So contextual to their
process rather than trying to somehow [INAUDIBLE]
or whatever tool into it. ROWAN MEREWOOD: Yeah. That’s a common problem
that we sometimes run into– is like I’ll
espouse, like, hey, this is all really good advice. And people want a
single right answer. They kind of say–
it’s like, hey, what framework should we use,
or what library should we use? The answer is
always, it depends. MUSTAFA KURTULDU: Well, yeah. I mean, everyone
wants the answer. It’s like, what’s
the meaning of life? So I mean, we’re talking
about performance, but there’s also offline. And offline is– and
the UX of offline is something I’ve been pushing. But one of the
things is that we’ve had to be honest with
some of the people that we’ve been working with,
say, OK, offline is great, it’s brilliant, but
it’s not the one bullet, and it doesn’t fix
everyone’s problem. And maybe there are cases
where offline doesn’t actually apply or work. But it’s new, shiny thing. And I think developers also
have the same challenge of, all right, how do you convince
businesses that offline is the way forward? What’s the metric
that you’re using? Because we spoke
about this before. And it’s like the one metric
is sales for e-commerce sites. But how do you actually
translate offline stuff in [INAUDIBLE]? Is it worth doing
offline for everyone? I mean, I think it depends
on the business again, because that’s [INAUDIBLE] the
people who have often signed off and are not technical. ROWAN MEREWOOD: I think
it’s one of those ones where I wish we could have gone
back and stopped ourselves from using the term
“offline” first, because it really set the whole
discussion as this kind of view of it as a binary state–
you’re online or you’re offline. And it also made
people think about it in terms of the feature,
again, rather than the problem that they were solving with it. So what I would really
suggest is that you’re not thinking about
offline, you’re going through each stage in
your funnel or your path to purchase, and you’re thinking
about how you can change that positively by weaving
in aspects of resilience to network connections
or total offline. Because there’s a tendency,
when you demo stuff like this, to switch your
phone into airplane mode, so you can say, hey,
I’m offline now. But in real life, that
doesn’t actually happen. Most of the time, it’s like,
you’re going into the tube or you’ve just
popped into a lift. So in places like that, some
of the key things I focus on are either making
it so that the user doesn’t notice that their
connection’s been interrupted. So those are things like
if I’m adding to my basket, that’s an action where,
if it doesn’t go through to the server, you can actually
capture that and just wait until you have a
reliable connection, either looking at your
network information or just [? polling ?] a little
[? heartbeat ?] with your server. And in those situations,
that’s great, because it’s not like
a high-risk operation. I don’t have to do too
much conflict resolution when I come back online. It’s like it’s in my
basket or it’s not. If it’s not, that’s not the
end of the world either. MUSTAFA KURTULDU: I see. ROWAN MEREWOOD: Then the other
ones are actually intentional offline. And for things like that,
I consider that to be stuff like if I’ve saved a
shopping list, then, you know what, I’m
on the tube home, I might actually want to check
that shopping list to see, oh, yeah, did I add
the eggs to that? Or I’m looking through
my order history. Those are great candidates
for saving onto your device, because your order
history doesn’t change and it’s something that you
might actually want to refer back to if you’re– MUSTAFA KURTULDU:
Yeah, like a receipt. ROWAN MEREWOOD: Yeah. Like, you’re kind of trying
to work out– it’s like, oh, did I buy my friend socks
for their birthday last year? It’s like, oh, well, I can
just hop in and I can check. And it’s one of those
ones where that then allows you to sell it not just
in terms of the robustness, but also in terms
of performance. Because if it’s offline, it’s
just available instantly. MUSTAFA KURTULDU: Instantly. Yeah. ROWAN MEREWOOD:
Instantly you get it. I think one of my favorite ones
there for the robustness story is the Trivago one. They implemented a really
simple offline fallback page. So whenever your connection
doesn’t go through, they just show you
this error page. Well, error page is sort
of an unfair name for it. It’s actually like a
little JavaScript game, like one of those marble
rolling ones that [INAUDIBLE].. And when I first saw it, I
was kind of like, mm, this is a developer’s Friday
afternoon project where they’ve kind of had some fun
and put this novelty thing up there. But what I came
to appreciate when they shared the figures
is that, actually, it’s keeping people in the journey. So previously when someone
would lose their connection or a request would fail,
they’d just drop out. But now what happens is they
see this branded Trivago experience and a
message telling them that, hey, your
connection’s down, but we’re going to try
again in a little bit. And it means that,
actually, they were seeing way less people
fall out of their funnel. And it’s just one
of these things where just having that
branding in there– it’s small and it’s simple,
but the effect that it has is just so much
more significant. SPEAKER: What tends to happen in
companies is that people hire– eventually, they
realize that they can’t do design
without a designer, so they hire a designer. And then the designer says,
well, it’s hard for me to do design without
the research findings and to really understand
the context I’m working in. So that’s the kind of, like,
pattern it tends to happen in. It would be nice,
from my perspective, if it worked the
other way around.

4 thoughts on “Designing UX for Offline – Designer vs. Developer #19

  1. For images I would build image optimization and resizing into the cdn. That way it doesn't matter what images are uploaded. The cdn will handle everything for you. Services like imgix and filestack do this already.

  2. This dichotomy between developers wanting to do "cool" stuff and business wanting to do "money" stuff is only characteristic of immature people on both sides. We should all be interested in solving useful and interesting problems in the world and this idea that one would be a "developer" or "business" person without participating wholistically is very sad. Rather than teaching developers to be more "nuanced" I would say we need to get real about the fact that a developer who isn't thinking wholistically just isn't a very good developer.

Leave a Reply

Your email address will not be published. Required fields are marked *