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

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 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.


GOOD


BAD


GOOD


BAD


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

CX

UX

Usability

UCDUI


Designers need to up their user-centric design game


Hi,

I am theUX 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 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!!!!


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 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 tabbed content UI illustrates cause and effect


A modified Light box becomes an engaging storytelling content


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.


Recap


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

128

[email protected]