Beyond pixels, screens and best practices designing with ux in mind

Carbon Interactive Pte Ltd. Proprietary and Confidential 2016
15 APR 2016
Presented By:
Carlo Victoriano
Beyond Pixels, Screens and
Best Practices
Designing with UX in mind
1
No. of Pages:
134

What we’ll cover
1. The UX we know
2. Impact of UX
3. UX Challenges we face
4. Designing with UX in mind
5. Recap

The UX we know

Definition:
User Experience Design (UXD) is
the process of enhancing
customer satisfaction and loyalty
by improving usability, ease of
use, and pleasure provided in the
interaction between the customer
and the product.

In a nutshell,
capture the hearts and
minds of our users

Keeps them glued to your siteUX
SEO Leads users to your site

UX Design is….
Organising Content
UX Design is arranging content and designing information architecture using card sorting

UX Design is…. Identifying Touch Points
UX Design is creating the customer journey map and identifying touch points

UX Design is….Sketching Layouts
Low-fidelity wireframes to perform iterations on usability

UX Design is….Simulating User Flow

The Good, the Bad
and the Ugly

THE
GOOD
UX
Easy to like
Easy to understand
Easy to use
THE UX HONEYCOMB
The UX Honeycomb presents different focus points in defining UX priorities. Is
it more important for your website to be desirable or accessible? Usable or
Credible? Each facet serves as a focal point in transforming how we see what
we do, and enable us to explore beyond conventional boundaries.

GOOD

BAD

BAD
SUPER

A good experience
● Enhances the perception of your brand
● Encourages customers to return
● Generates brand loyalty

A bad experience
● Creates frustration
● Discourages customers from returning
● Drives customers to competitors

Impact of UX

Demand for better customer
experiences and the need to
grow faster through
differentiation
have led companies to adopt
design-centric ethos

● ESPN.com revenues jumped 35% after
a homepage redesign
● Time.com bounce rate dropped 15%
points after implementing continuous
scroll
● Choosing a specific blue amounted to
an additional $80 million in annual
revenue for Bing
● Demand for top design talent created
150,000 UX jobs
- Job Trends Report: The Job Market for UX/UI Designers, 2015

Local UX Scene

Organisations and
Communities
Source: http://www.interface.sg

Universities and Polytechnics
Source: http://www.interface.sg

The UX Challenges
we face

User behaviour has changed
drastically and is more
complicated

It takes more than just best
practice and usability to design
good UX.

UX [User eXperience]
addresses how a user feels when using a
system.
USABILITY
is about the user-friendliness and efficiency
of the interface.
UI [user interface]
is the interface.
UCD [user-centric design]
is a philosophy that puts the user in the
centre of the design and development
process.
CX [ Customer Experience ]
UX, USABILITY, UI and UCD
CX
UX
Usability
UCD
UI

Designers need to up their
user-centric design game

Hi,
I am the
UX Designer/
Web Designer/
SEM Expert/
Front-End Developer

Designing with
UX in mind

noun
the circumstances that form the
setting for an event, statement, or
idea, and in terms of which it can
be fully understood.
ˈkɒntɛkst/
context
TIME COST
SCOPE

UX ICEBERG

UX Ice Kacang

UX Ice Kacang vs UCD Steps

USERS & BRAND
Users and Brand forms the
foundation of the experience.
Similarly the bowl that holds the
dessert together, is the base where
everything rests. The size of the
bowl also signifies the need of the
users (small or large) which is
synonymous to factors that
designers need to take into
consideration before they start
designing.

User first
Content is king, Distribution is Queen, Context is the new king, Conversation/Storytelling killed the
king. But in Carbon, we’ve always believed that the USERS still hold the mouse.

Know who you are designing for
We are not designing for ourselves, we are designing for our user.

. Do put yourselves in your
user’s shoes

Generations X,Y and Z

We’re doing
a UX Refresh!
We’ve all heard these before

. Do put yourselves in your
user’s shoes
Yeahhh!!!!

WHY?!

Identify your user’s needs
and goals
Ultimately our goals would direct our design decisions. The goals serve as
invaluable roadmap for everyone involved in creating a website or app,
including any third-party creatives or digital agency team members.

Do not assume
“You are not your user. As much as you can follow patterns from
others, you should not implement things just because you can.
Speak to your users and find out what their primary tasks and
objectives are, and not what you think they are.
Real answers may surprise you.”

GQNGIUSIQNS
Can you read this?

GQNGIUSIQNS

However, “context….”
Try this!
Imagine you are the client and you are
presented with a design (next slide). What
would you say? Bad UX? Terrible UX!
Where’s the design?

Perception is selective. Our brains are wired to think as such.
Don’t trust what your brain tells you.

Do ask questions,
lots of questions

Quantitative Approach
Analysis of NUMERICAL data
Qualitative Approach
Analysis of WORDS

No budget for focus group? No time?
A simple dipstick survey also works.
Throw in some open-ended questions and
pick a gem (insights) or two.

INFORMATION & INTERFACE DESIGN
Content is the base ingredient
(ice). To delight users, designers
are required to prepare,
organise and structure their
content(information) properly
which is very much like how ice
is packed and shaped nicely into
a mountain of ice.

3. Design for worst-
case
scenarios
Learn to Sketch

“You can use an eraser on a
drafting table, or a sledge
hammer on a construction site.”
- Frank Lloyd Wright, Architect, Writer, Interior Designer

case
scenarios

Identify patterns

Page Template or Module Blocks?
CAROUSEL
CONTENT-BLOCK
TABBED CONTENT

Don’t start from scratch

Faster, Smarter with UX

AESTHETICS & VISUAL DESIGN
Aesthetics and Visual Design adds
life to our creation, like the colourful
and flavourful syrups added into a
dessert. By using the right layout,
colours, typography and visual
imagery, a designer is able to
evoke emotion, grab attention and
provide motivation, thus making the
experience more memorable.

The Lord of the Rings

Who inspired who?

Let’s add some colours!
Add UX into the mix, to make your works more impactful and memorable

Tell a story
Storytelling delivers a better user experience.

How are experiences created?
MemoryPerception
(Senses)
Processing Information
Emotions, Attention, Motivation

We let the ‘optimised’ images do the storytelling
http://aprilasia.com

Welcome to RIAU, Indonesia
http://aprilasia.com

If you have concerns about loading time, use big
background images responsibly.
Find a way to optimise your images.

Remove to improve
Mind the user’s flow and minimise distractions.

“ A designer knows he has
achieved perfection not when
there is nothing left to add but
when there is nothing left to take
away.”
- Antoine de Saint-Exupery

The wonders of set meals

Do not simplify just to make it look sleek
and cool. Simplification works when you
are able to help the users perform a task
faster and easier.

Make the brand
work harder

How are you able to differentiate airplanes?

Colours,
Identity and
Visual Cues
Can make the
difference.
Which bank’s
website is this?

INTERACTION DESIGN
Toppings are the wow-factor of
desserts. Not all ice kacang are
created equal, hence not all would
have the same toppings. Similarly, it
will be those additional effects and
features that you add on top of your
designs that will bring your creation
to a different level, thus making the
experience more impactful.

Innovate and
make things
happen
Necessity is the mother of invention

A tabbed content UI illustrates cause and effect

A modified Light box becomes an engaging storytelling content

An <a href> link delivers a simple yet unique experience

http://mindef.gov.sg/safvc
An <a href> link delivers a simple yet unique experience

Do not innovate just for innovation’s sake.
Too much interactivity can disrupt user flow too!

What if we give a site a
personality?

Our recent
pitch exercise
for Singapore
Art Museum

...like Siri

A predictive
search
bar with
a touch
of branding

Take the opportunity
to build the brand
even in unexpected
places –a witty 404
error page

Do not cross the line and bombard your
users with too much advertising, you will
chase your users away.

TESTS & VALIDATION

Managing
Expectations

Design for worst-case scenarios
When proposing a design layout or working with bought
templates make sure that your design layouts don’t break
when you fit the actual content.

case
scenarios
What if I need to
place 8 icons?

case
scenarios
What if 1 column
actually has more
text?

Go for the win
Invest and learn to create high fidelity prototypes to Gain Buy-in.
Stakeholders are much more likely to get on board if they can see and interact
with a low fidelity version of what you are proposing. It doesn’t have to be
perfect or use any fancy tools.

http://principleformac.com/

It’s not everyday you will have time to create high-
fidelity prototypes, choose and prioritise projects that
you really want to impress and amaze your clients
with. Clickthroughs work too!

/ Test, test and test /
What differentiates a good user experience from a bad one is
not based on how many awards it gets; instead, it's based on
superior measurable outcomes.

UX FAIL

It’s not everyday you will have budget to perform
full-scale user tests to refine your product and
deliver the best UX – simple usability tests are
better than none at all.

Recap

1. Context
2. User-first
3. Do not assume
4. UX Ice Kacang
5. Faster, better with UX
6. Innovate and make things happen
7. Test, test and test
Remember these...

You will never look at Ice Kacang the same way again

UX, UX EVERYWHERE
Awaken your inner UX

Thank You
Carbon Interactive Pte Ltd
50 Ubi Ave. 3 #04-05
Frontier ePark@Ubi s(408566)
t: 6292 4373
www.carbon.com.sg
12
carlo@carbon.com.sg

Beyond pixels, screens and best practices designing with ux in mind

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Beyond pixels, screens and best practices designing with ux in mind

Similaire à Beyond pixels, screens and best practices designing with ux in mind (20)

Dernier

Dernier (20)

Beyond pixels, screens and best practices designing with ux in mind