intro to ux women@google sa conference

UXD user experience design

hello.

h"p://prepaideasy.tutuka.com/2013/07/17/weview-­‐wednesday-­‐gautrain-­‐gold-­‐card/

UXD

UXD

UXD

UXD

think say feel do

UXD

think say feel do

UXD

people

experience

plan process

shifting our perception of branding from logos to experiences is fundamental to understanding how users interact with your brand today

h"p://www.brandingmagazine.com/2014/02/01/future-­‐branding-­‐user-­‐experience/ Ethan  MarHn

THE INTERFACE IS THE BRAND IS THE EXPERIENCE

And, interface is everywhere

ShowerSelect SShowerSelect S thermostatic mixer for concealed installation for 2 functionsSurfaces: chrome___Article Number: 15743000

More details online on the website_www.hansgrohe-int.com_We look forward for your visit 4 / 7Page

Descriptionproduct features· 2 outlets· simultaneous use of several outlets· Select push-button on/off control for 2 outlets· safety lock at 40° C· flow rate: 26 l/min · operating pressure: min. 1 bar / max. 10 bar Mandatory Accessoires· Basic set iBox universal (#01800XXX)Optional Accessoires· Extension element Ø 150 mm (#13597XXX)· iBox universal basic set extension 25 mm

(#13595XXX)

Article Details

Price incl. VAT* 6.814,21-ZAR

Technology

Product image Scale drawing

Flowchart

So, how might we deliver better experiences?

Discovery Specification Build

Test, test, test

Ask questionsInterrogate responsesCuriosity matters and helpsField researchCompetitor researchDifferent verticals

Out of insights come plansKeep things simple

Design and develop

Discovery: ask questions

Two fundamental questions

Why does this exist?

What do I want people to do?

Specification: codify and plan

Personas

Back Story Social & Entertainment Digital Life

Persona | UX Training Day

Name

AgeGenderLocationOccupation

Back Story Social & Entertainment Digital Life

Persona | UX Training Day

Name

AgeGenderLocationOccupation

Sarah

32FemaleJohannesburg - Craighall ParkDigital Consultant

Recently moved to JHB, so still establishing friendship groups.Often socialises over dinner parties, especially at home.Goes out for post-work drinks in Braamfontein at places like AntiEstabishment. Likes to try new restaurants, and doesn't like chains.Prefers time in small groups to large parties.Likes to be in the know of places to go out.

Digital native and digitally savvyConnected devices: iphone, ipad, macbookHome highspeed WiFi and 3G on the goRegularly uses: Gmail (on phone, iPad and Macbook, Instagram, Pinterest, Chrome for browsingTwitter to keep abreast of industryWhatsApp and SMSes to keep in touch with friendsLikes to have the latest technology, but prefers simplicity and good experience

IA and Sitemaps

h"ps://www.gliffy.com/examples/site-­‐map

h"p://www.juicyresults.com/2011/structure-­‐site-­‐for-­‐seo/

Userflows

Wireframes

The web is an interactive environment. We make things for people to do things.

Build: design and execute

Build a good looking website

• Hover.com – easy domain registrations and management

• Squarespace.com – beautiful and easy to use. Has ecommerce integration.

• Wordpress.org – if you are working with a dev team.

Useful Tools

• Pen and paper! Get sketching. • Xmind.net – free mindmapping software.

Useful for planning and sitemaps. • Balsamiq.com – easy to use, well priced

wireframing software. Free 30 day trial. • Google Analytics – free, very powerful web

analytics – make sure you enable site search tracking!

• Gliffy.com for sitemaps and userflows

Learn more

Training course from Flow: http://www.userexperience.co.za/ux-training/ Balsamiq online course (free!) http://www.uxapprentice.com/ Experience Mapping Workbook (free!) http://mappingexperiences.com/

Some favourite resources

A List Apart http://alistapart.com/ Adaptive Path Ideas http://www.adaptivepath.com/ideas/ IDEO Human Centred Design workbooks http://www.ideo.org/

Getting started – read these

Don’t Make Me Think by Steve Krug http://www.sensible.com/ The Power of Habit by Charles Duhigg http://charlesduhigg.com/ The Pursuit of Elegance by Matthew E May http://matthewemay.com/

Theme colours and fonts credits Colour theme based on Lou Taylor’s Swimmers papercut http://loutaylor.bigcartel.com/product/synchro Colours extracted using Color Palette FX http://www.palettefx.com/ Colour palette based on COLOURlovers palettes: http://www.colourlovers.com/palette/528606/dont_forget_the_kid http://www.colourlovers.com/palette/532241/love_is_colorful Fonts Source Sans Pro available from Google Fonts https://www.google.com/fonts/specimen/Source+Sans+Pro Ostrich Sans from The League of Moveable Type https://www.theleagueofmoveabletype.com/ostrich-sans