Create, design & validatePart I – the proces of a design

Yura van Winden | 29 oktober 2012

Yura van WindenWillem de Kooning Academie, Arts Academy

UX, User Experience consultant / Art director / Visual designer at Capgemini the Netherlands

HFI, Human Factors International - Certified Usability Analyst™ (CUA)

Yura van WindenWillem de Kooning Academie, Arts Academy

UX, User Experience consultant / Art director / Visual designer at Capgemini the Netherlands

HFI, Human Factors International - Certified Usability Analyst™ (CUA)

Yura van WindenCreative UX User Experience Visual Design UI User interface design E-commerce User Centered Design Workshops Usability RDV Rapid design & visualisation Rotterdam Social media Online Concept Mobile Responsive Result-oriented Moodboards Online Marketing Affliate Marketing Icon design Photoshop Online Applications Customer Journey Scenario Persona User needs

What is online design

• Online design is the skill of creating presentations of content that is delivered to an end-user. This includes the information architecture, user interface, site structure, navigation, layout, colors, fonts, and imagery. All of these are combined with the principles of design to create a website that meets the goals of the owner and designer.

User experience

useful

valuable

credible

findable

usable desirable

accessible

How to create

What do I need to create a design?

?

1/Business goals

• Why a visual design?• Design strategy• Look & feel

1/Business goals

1/Business goals

2/Brand guidelines

• Branding• Focus on design• Look & feel

2/Brand guidelines

3/User needs

• User profiles, personas

• Mental model• Knowing users and

their goals

3/User needs

User needs, User profiles, Personas• (learn to) think from user perspective• a clear understanding of the motives of a user• mapping the (Internet) user behavior • draft the functionality and requirements

3/User needs

Persona

• Marco de Graaf is 32 jaar en woont samen met Petra. Het familiebedrijf waar hij werkt teelt lelies. Drie jaar geleden heeft hij samen met zijn broer de leiding over het bedrijf overgenomen van zijn vader. Samen met zijn broer heeft hij het doel om de afzet te vergroten, eerst binnen Nederland en misschien wel uiteindelijk naar het buitenland, maar dat is nog toekomstmuziek. Ze voeren nu aan bij VBA.

Internet doelen:

• Marco overdenkt om (ook) bij FloraHolland aan te voeren. Hij wil weten wat FloraHolland hen kan bieden o.a. op het gebied van:

• Diensten (dienstenpakket) en tarieven (bv. transport)

• Productondersteuning en –innovatie

• Afzetmogelijkheden binnen Nederland (vestigingen, pendeldiensten)

Internet kenmerken en criteria:

• Overzichtelijk

• Actuele en complete informatie

Potentiële kweker - Persona

Marco de Graaf32 jaar

samenwonendLisse

Agrarisch ondernemer (Lelie)

10

Persona’s

4/Task profiles

• Functions, task• User story, scenario• Customer journey• Sacred Six

4/Task profiles

User story, scenario;• Objectives with Interface• User interface needs and requirements• Key activities (Sacred Six) • Information about goals• Expectations and motivations• Actions and reactions

3/Task profiles

| 4

Scenario

Als kweker weet Marco natuurlijk af van het bestaan van FloraHolland, maar heeft zich nooit verdiept in de coöperatie, omdat VBA prima voldeed.

Na zijn werk, gaat hij achter internet zitten om wat informatie over FloraHolland te weten te komen

Hij leest het laatste nieuws over FloraHolland

Daarna wil hij bekijken hoe het staat met de verkoop van lelies via de klok en de directe handel. Hij leest over de verschillende vestigingen en de opties die FloraHolland biedt om via meerdere vestigingen aan te voeren.

Natuurlijk wil hij ook weten welke diensten FloraHolland heeft, en welke tarieven zij hanteren.

Ook is hij geïnteresseerd in de energie die FloraHolland steekt in innovatieprojecten.

Potentiële kweker - Scenario

Marco de Graaf

32 jaar

samenwonend

Lisse

Agrarisch ondernemer

(Lelie)

Vincent van Waal

• Vincent is 36, getrouwd met Lisa, samen hebben ze twee kinderen (Ramon van 11 en Shirley van 8). Hij woont in Tilburg en heeft in het centrum zijn eigen restaurant het Pleintje.

• Het Pleintje is een gezellige brasserij met een bar en een groot terras. Het Pleintje is klantgericht zo kunnen mensen aan tafel via het mobiel betaalautomaat betalen die de serveeersters op zak hebben.

• Vincent vindt het fijn als er met creditcard wordt betaald, het is alleen een beetje puzzelen met hoe dat nou moet met fooi.

36 jaar | eigenaar restaurant | Tilburg

Ik heb graag dat mensen met creditcard afrekenen.

5/Site structure

• Card sorting• IA Information

architecture

5/Site structure

5/Site structure

6/Wireframe

• Mockup• Blueprint • Storyboard• Navigation

6/Wireframe

7/Design & visualisation

• Online design concept• UI user interface design• Resolution, Responsive• Accessibility• Page types• Layout, grid &

navigation design• Colors, fonts, icons,

images

7/Design & visualisation

8/Style guide

• Guidelines• Online design guide• Contract for design• Distances and sizes• Colors in #• Graphics, icons• Font types and sizes• Form layouts

8/Style guide

Design Strategy