ui/ux foundations part 1 - design

Download UI/UX Foundations Part 1 - Design

Post on 15-Apr-2017

2.114 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  • UI/UX Foundations:Intro to Design

    Meg Kurdziolek & Karen Tang

  • Your Goals

    What would you like to learn today?

  • Our Goals

    We want you to

    feel confident when talking to designers

    describe why an interface may not feel right

    understand common themes & UX terms

    understand basic design principles

  • Introductions

    Which of these domains interests you?

    Health Education

    Civic/Government Kids/Families

    Travel Weather

  • Agenda09:00 - 09:20 Breakfast and Introductions09:20 - 10:20 Storyboards & Personas10:20 - 10:30 BREAK10:30 - 11:30 Sketching, Prototyping, Studios & Critiques11:30 - 11:40 BREAK11:40 - 12:15 Journey Maps & The Golden Path12:15 - 12:45 LUNCH12:45 - 01:10 Typography, Grids, Colors01:10 - 01:25 Style Guides, Voice & Tone01:25 - 01:45 Special Topics: Mobile Design, Motion Design01:45 - 02:00 Group reflections & wrap-up Q&A

  • Design Process

    Refine

    BuildLearn

  • Design Process

    BuildLearn

    Refine

  • Storyboarding

  • StoryboardingA storyboard is a powerful design tool because it

    conveys the big picture idea in just a few pictures

    combines many design elements (personas, requirements, solutions, etc.) into one coherent story

    has assets that can be shared, tested, and collaborated on

    makes you think through & articulate the problem and solution requirements

  • Storyboarding - Freytags Pyramid

    http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/

  • Personas

  • Personas

    A persona is a powerful design tool because it

    turns data into motivating, easily remembered assets

    helps clarify design goals

    helps evaluate success

    has assets that can be shared, tested, & collaborated on

    makes you think about & investigate who your users are

  • Factsmajority of users are male, 35 to 45 years old, and make between $60 to $80k annually

    return users check website 1 to 3 times a day

    homepage bounce rate of 30%

    Facts Persona

    Persona

    Freddy the First Time User

    40 year old male, has a small budget of disposable income.

    Moderately tech-savvy. Uses a PC laptop and owns an Android.

    Enjoys to golf, and frequently checks the weather.

    He found the website by searching for Weather in Pittsburgh on Google.

    Scenario: Design an interface where new users can quickly find current weather conditions and forecasts.

  • Basic PersonaName Pick a memorable yet distinct name.

    Picture Headshot photo that you will be able to recognize.

    Quote The most salient detail summarized into one quote. (If they could ask for one thing)

    Skills Domain skills your persona brings to the table. (Novice or expert? Tech-savvy or not?)

    Goals Goals your persona fulfills by using your product. (end goals, experience goals, life goals)

    Habits A typical day for your persona. (hobbies, sports, activities, habits)

    Must Do/Never What product absolutely MUST DO and MUST NEVER do.

  • Activity - Part 1Total Time: 32 minutes

    Start (8 mins): Brainstorm existing problems in your chosen domain. Discuss your ideas and pick the one you would like to design an application for today.

    Storyboard

    (8 minutes) Individually: Describe how your application will solve this problem for a target user in the form of two storyboards. (Just need to be 3 tiles: Initial Problem, Struggle, Happy conclusion)

    (8 minutes) Everyone present their storyboards to the group, discuss common themes. As a group, create one 3 to 6-tile storyboard.

    Persona

    (8 minutes) Develop a persona for the main character in your storyboard.

  • A Parting Thought

    Storyboards and personas are good for capturing ideas

    but, best when coupled with research

  • Storyboard Example

    Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)

  • Storyboard Example

    Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)

  • Storyboard Example

    Courtesy of Alysia Finger & AEDreams (http://aedreams.com/)

    Storyboards showing with parents involved with their children received more favorable reviews in A/B tests.

  • Sketching & Prototyping

  • Sketching & Prototyping

    You should always start with a sketch, because

    your first idea is never the final solution

    you can focus on concepts before details

    you can start testing and refining faster

  • Sketching & Prototyping

    Low-Fidelity prototypes are rough representations of a design concept. Allows you to validate and improve upon the design early in the process.

    High-Fidelity prototypes closely resemble the final solution. Allows you to last-minute test a design before it is finalized.

    Low-Fidelity High-Fidelity

  • Sketching & Prototyping

    http://www.olesiagraphic.com/chefgenie.html

  • Design Studios & Critiques

  • Design Studios & CritiquesDesign Studios & Critiques are useful because

    it encourages you to take chances and explore radical ideas

    its intensive. You generate and explore lots of design solutions in a short amount of time.

    it allows everyone to participate in design

    it facilitates team alignment (and makes good UX *everyones* responsibility)

    it enables everyone to learn through (constructive) criticism

  • How to Run a Design StudioStep 1: Decide who you are designing for and what problem you want to solve

    Step 2: Sketch as many ideas as possible within a set time limit.

    Step 3: Review sketches with the group, identify the best ideas, and repeat Step 2.

    (Tools: Paper, pencils, and a timer)

  • How to CritiqueThere is something good about every idea, even if it is not the solution for the current problem

    You critique the idea, not the person

    Method to try: Dot voting

    Everyone is given three dots

    Place your dots on the designs you like best

  • Activity - Part 2Total time: 30 minutes

    Round 1: Sketch 5 minutes, Critique 10 minutes

    Goal: Sketch as many concepts as possible. Dont draw an entire interface - just the bare minimum to convey the idea. Think: quick and ugly. Then each person has 1 minute to present their best ideas, and the group has 1 minute to comment. Discuss the best ideas and where you would like to take them next. (Use your dots!)

    Round 2: Sketch 5 minutes, Critique 10 minutes

    Goal: Pick the ideas you liked the best from Round 1 and sketch 1 or 2 new prototypes. The sketches should still be rough, but more complete. Then regroup and discuss.

  • Journey Maps

  • Journey MapsA journey map is a diagram of a complete customer experience: from initial contact to completed task. A journey map should answer the following questions:

    What is the customers goal?

    What is their initial approach to solving the problem?

    What questions do they need answered?

    What is each step they need to take?

    How do they know they are on the right path?

  • Basic Journey Map

    Customer A persona or type of customer.

    Process The process the customer is trying to complete.

    Touch Points & Interactions

    Where & how the customer interacts with the product or service.

    Customer Thoughts What the customer is thinking and feeling along the way

  • A simple example

    Rebecca searches for toddler snow

    pants on Google and clicks first result

    She selects Boys->Winter from the

    side navigation

    She scrolls through the options and sees

    one pair she likes. She selects the size

    and color and adds it to the shopping cart

    She clicks on the shopping cart and clicks Check-out

    Discovery Research Choose Purchase

  • The Golden PathThe Golden Path (n.)- the customer journey that ~90% of users will take through your product.

    Synonym: the most common user scenario.

    In a sentence:

    We have to make sure the golden path for our new photo upload tool is rock-solid. Lets run a few more usability studies and make sure weve made it as intuitive as possible.

  • Activity - Part 3 Total Time: 15 minutes

    With your group, create a simple journey map outlining how a first time user would discover and successfully use your design.

  • Example Journey Map

    http://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/

  • Example Journey Map

    http://uxmastery.com/5-alternatives-to-slide-decks-for-communicating-findings/

  • Example Journey Map

    http://www.servicedesigntools.org/tools/8

  • Lunch Time!

  • Agenda09:00 - 09:20 Breakfast and Introductions09:20 - 10:20 Storyboards & Personas10:20 - 10:30 BREAK10:30 - 11:30 Sketching, Prototyping, Studios & Critiques11:30 - 11:40 BREAK11:40 - 12:15 Journey Maps & The Golden Path12:15 - 12:45 LUNCH

    12:45 - 01:10 Typography, Grids, Colors01:10 - 01:25 Style Guides, Voice & Tone01:25 - 01:45 Special Topics: Mobile Design, Motion Design01:45 - 02:00 Group reflections & wrap-up Q&A

  • Design Process

    BuildLearn

    Refine

  • Design Process

    BuildLearn

    Refine

    Storyboards Personas Critiques Journey Maps

  • Design Process

    Learn

    Refine

    Build

    Typography Grids Colors Style Guides Voice & Tone

  • Typography

    Letterform (anatomy of a let