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 PracticesDesigning with UX in mind

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 GOODUXEasy to likeEasy to understandEasy 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.

BADSUPER

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

Usability

Designers need to up their user-centric design game

I am theUX Designer/Web Designer/SEM Expert/Front-End Developer

Designing with UX in mind

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

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 firstContent 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 forWe 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!!!!

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 ApproachAnalysis of NUMERICAL data

Qualitative ApproachAnalysis 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

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 storyStorytelling 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 improveMind 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 brandwork harder

How are you able to differentiate airplanes?

Colours, Identity andVisual CuesCan 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 exercisefor SingaporeArt Museum

...like Siri

A predictivesearchbar witha touch of branding

Take the opportunityto build the brandeven 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

ManagingExpectations

Design for worst-case scenariosWhen proposing a design layout or working with bought

templates make sure that your design layouts don’t break when you fit the actual content.

What if I need to place 8 icons?

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.

1. Context2. User-first3. Do not assume4. UX Ice Kacang5. Faster, better with UX6. Innovate and make things happen7. 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 YouCarbon Interactive Pte Ltd50 Ubi Ave. 3 #04-05Frontier ePark@Ubi s(408566)t: 6292 4373

www.carbon.com.sg

carlo@carbon.com.sg

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

Design

mitel 6700 sip telephones - spydurpbx.com · mitel m675 •...

dynamic pixels

“ pixels that sound ” find pixels that correspond...

bu505m/bu302m series users guide - toshiba teli...20 : 2.0...

pushing pixels

wasting pixels

ora -...

advertising specifications - microsoft · online banner ads...

about pixels

framemaker dialogue modifications - daubeframemaker dialogue...

neighborhood pixels

from participants to pixels: making the transition from ux...

differential photon mapping - consistent augmentation of...

product white paper · elite screens inc. |elite screens...

squishy pixels

importing an image into blender as a plane€¦ · web...

truelles & pixels

d20 screens...d20 screens d20 desk-mounted screens straight,...

phantom screens 08 11 63/pha buyline 2419 retractable...

bu1203mcf users guide - toshiba teli...40 : 4.0 mega pixels...