Product & Design Track Kickoff- Sophia Huang - Oct 2016

EDUCATION FOR THE INNOVATION ECONOMY

Sophia HuangSr Product Manager @GILTsophiahhuang@gmail.com

@shh223

WEB DESIGN TRACK KICKOFF

Product Manager with a focus on UX & design.

Former Contemporary Art Curator, Marketing Manager, Mobile

Strategist, and Project Manager

WEB DESIGN TRACK KICKOFF

Product Manager with a focus on UX & design.

Former Contemporary Art Curator, Marketing Manager, Mobile

Strategist, and Project Manager

WHAT WE’LL COVER TODAY

A brief overview of your web design curriculum

Difference between UX/UI/Usability

Job of a UX Designer vs. UI Designer vs. Front-End Developer vs. Product Manager

Portfolio Examples

Design Challenge

1

2

3

4

5

WHAT YOU’LL BE LEARNING THIS FALLIntensive: Product Cycle + Agile Methodologies

Intensive: Wireframing

Intensive: Rapid Prototyping

Intensive: UI, UX, and User-Centered Design

Intensive: Design Thinking Methods

Module 1: Intro to Style for the Web

Module 2: Fonts and Layouts

Intensive: Intro to CSS Frameworks

Module 3: Best Practices & CSS3

Portfolio Review 1

1

2

3

4

5

6

7

8

9

Module 4: Responsive Design and CSS Frameworks

Module 5: JavaScript Foundations, Loops, and If Statements

Intensive: Navigation and Flow

Portfolio Review II

Module 6: JavaScript Functions, Arrays, and Objects

Intro to Product Management

Module 7: Intro to jQuery and JS Libraries

Intensive: More JavaScript

Intensive: Principles of Design

10

11

12

13

14

15

16

17

18

19

*By the end of the program, you should have a professional portfolio website with 2 or 3 portfolio pieces.

INTENSIVE VS. MODULE

Directly facilitated by an instructor and should be individualized to that instructor’s experiences, using the Startup Institute Core Instructional Practices.

The module setup is meant to facilitate deeper engagement with lesson content. It contains an immersive intro where you’ll be ready to complete an independent lab, and a debrief for the instructor to answer any questions that came up from your lab work.

INTENSIVE MODULE

Questions about the curriculum?

“Every self-respecting designer should do something. Come up with new

ideas, dust down old ideas and place them in a new context. Silence the

cynics. Let the politicians know that wheeling and dealing achieves

little. Prove that actions speak louder than words. Demonstrate the

power of design. Designers can do more than make things pretty. Design

is more than perfume, aesthetics and trends.”

– Richard van der Laken, founder of What Design Can Do

UX vs. UI vs. Usability

UI REFERS TO THE VISUAL DESIGN OF THE INTERFACE

These interfaces are what facilitate a great experience for users. It’s often interchangeable with visual design.

● Good vs Bad examples?

UI elements let people achieve their goal, but you don’t necessarily get any feelings from it.

UI is a really important part of UX, but there is much more to it than having a polished interface

UI Elements

Easy to use navigation, place extra items under “More” to reduce feelings of being overwhelmed

Credibility boosted by seeing that 8 million people use this product

Imagery of desk makes you feel like you are sitting at a desk - delights and makes it feel more human

Easy to find search

Clear and direct messaging about what they do, and what they can help you do

Graphic makes sending emails through Mailchimp look easy

Clear that you can sign up for free

WHAT IS UX DESIGN?

The goal of UX design in business is to “improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.”

● Good vs Bad examples?

Image by Dan Saffer

UX DESIGN = UI + IA + RESEARCH & TESTING

UX DESIGN IS ALL ABOUT PROCESSA few examples:

Story-driven design

Rotman’s 3-Gears of Business Design

Double-Diamond Design Process Model

Data-Driven Design

Human-Centered Design

1

2

3

4

5

https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

A persona is a way to model, summarize and communicate research about people who have been observed or researched in some way.

PERSONA

PERSONA

$67,000 per annum

Quotes from user research

● I listen to podcasts to catch up on latest news and interesting tech industry trends on-the-go and when I am working at my desk

● When I find good episodes about entrepreneurship, I want to share my learnings with a bunch of tech communities that I am part of because we are all interested to learn how different businesses operate, esp. being in Silicon Valley. There is no way for me to share my notes on the takeaways

● I also find enjoyment in being the torch-bearer of discovering good podcasts among my friends. They turn to me for recommendations, but I cannot share my playlist with them all at once, so I share an episode instead

● I would like to share short snippets and good quotes of episodes easily

The Torch-Bearer Ace Brooks

26 years old

2.5 listening

hours daily

https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

Each persona represents a significant portion of people in the real world and enables the designer to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals.

PERSONA

USER FLOW CHART

http://uxkits.com/products/website-flowchart-and-sitemap

STORYBOARD

http://web.mit.edu/2.744/www/Project/Assignments/conceptSketches/design-o-mite/storyboard/note-story.html

CUSTOMER JOURNEY

https://hbr.org/2010/11/using-customer-journey-maps-to

A customer journey map is a very simple idea: a diagram that illustrates the steps your customer(s) go through in engaging with your company, whether it be a product, an online experience, retail experience, or a service, or any combination.

CUSTOMER JOURNEY

https://hbr.org/2010/11/using-customer-journey-maps-to

CUSTOMER JOURNEY

http://cdn.macadamian.com/wp-content/uploads/Bonus_Content_Customer_Journey_Map.jpg

INFORMATION ARCHITECT DIAGRAM

http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

Information architecture is the creation of a structure for a website, application, or other project, that allows us to understand where we are as users, and where the information we want is in relation to our position. Information architecture results in the creation of site maps, hierarchies, categorizations, navigation, and metadata.

Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online

INFORMATION ARCHITECT DIAGRAM

http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

USABILITY REFERS TO HOW EASY THAT UI IS TO USE

For example, is the menu built in a way that’s easy to use? This is an important part of UX design, as products that have bad usability will cause frustration when using a product.

http://usabilitygeek.com/usability-metrics-a-guide-to-quantify-system-usability/

Usability metrics: 1) effectiveness 2) efficiency, and 3) overall satisfaction

Class Exercise: Let’s differentiate between UI vs UX Elements

A FEW TAKEAWAYS

UX/UI/Usability may be a bit different, but there is a lot of overlap, and they are all part of the job of a UX designer.

The joy of throwing a baseball is UX, the way the ball is made and stitched is UI (Dain Miller, http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/)

The more you get your users feeling positive towards your product, the more they will engage, and the more they will come back.

1

2

3

Life of a UX DesignerWhat does a UX designer do day-to-day?

STAGE 1: IDEATIONIdeation is the process of generating a lot of different ideas in a short amount of time.

● Old school brainstorming with pen and paper

● Research. Research. Research.○ Data. Data. Data.○ Human Centered Design.

● 3-12-3 Brainstorming

STAGE 2: PRIORITIZATIONe.g., How, Wow Now Matrix

Be sure to involve stakeholders as early on as possible!

Sketch by hand

Wireframing

Lo-Fi and Hi-Fi mockups

HTML/CSS (Can use Foundation/Bootstrap frameworks to build prototypes quickly)

·

·

·

STAGE 3: PLANNING AND PROTOTYPING

·

PROTOTYPING TOOLS

STAGE 4: EXECUTION

Development Cycles

Sprint Planning

Visual Design

·

·

·

BEGIN DEVELOPMENTThis is the job of the front-end and back-end developers.

The back-end developers will typically set up the environment and database

Front-end developers will begin adding templates for the different pages (HTML), styles to those templates (CSS), and potentially interaction to the site (JavaScript)

Development typically happens in sprintse.g. Sprint 1 might include setting up the environment, and Sprint 2 might include setting up search functionality

·

·

·

VISUAL DESIGNER (UI DESIGNER)

A Visual Designer is the person designing the interfaces that users will see, incorporating colors/fonts/layout, etc.

ADD VISUAL ELEMENTS

Start to think about colors, fonts, layout, etc.

ADD VISUAL ELEMENTS

Start to think about colors, fonts, layout, etc.

USER TESTING CONTINUES THROUGHOUT THIS WHOLE PROCESS

It’s an iterative process. Even before development starts, place your sketches in front of users. Continuously test, iterate, and re-test.

The job of the Front-End Developer

THE FRONT-END DEV IS IN CHARGE OF ALL THINGS HAPPENING IN THE BROWSER

This includes HTML/CSS/JavaScript

The part of the site that the user can see and interact with

For example, when you book a flight, most of what you see is on the front-end until you click “Purchase”, and then the browser communicates with the back end to store the information about your purchase—all of that info stays on the server so you can see it the next time you log in.

·

·

·

SOME THINGS THE FRONT-END DEV DOES/DOESN’T DO

Front-end devs spend a lot less time (if any at all) talking to users than designers and product managers

They sometimes have to tell UX designers and stakeholders that they are crazy in thinking an entire app can be built in a week

Make sure that a site still works across all different platforms (e.g., iPad, mobile, etc)—also known as responsive design and important for UX designers too!

Know how to keep the size of the final application small so that it loads quickly

Keep up with latest technologies in a very quickly changing field

Understand what scaling design would look like, i.e. creating library of common UI/UX elements

·

·

·

·

·

·

The job of the Product Manager/Owner

PRODUCT MANAGEMENT IS VERY STRATEGIC AND BUSINESS ORIENTED

Works on meeting market needs and scoping out features

Understands budgets and timelines

Talks to users and stakeholders

Has knowledge of the technology being used to build out the product

Knows what goes into building a product, and thus timelines for different features and bug fixes

Creates product roadmaps

·

·

·

·

·

·

IN THEORY: PRODUCT MANAGER

REALITY CHECK: PRODUCT MANAGER

CHEATSHEET PM 101

Or continue the conversation @shh223

Please email me your thoughts on the talk or suggestions for improvement: sophiahhuang@gmail.com, and I will reply with the cheatsheet for product management.

COLLABORATIVE PROCESS BY ROLES

COLLABORATIVE DEVELOPMENT

BE A SUPERB UI/UX/PRODUCT DESIGNER!

“The main tenet of design thinking is empathy for the

people you’re trying to design for. Leadership is exactly

the same thing – building empathy for the people that

you’re entrusted to help.

– David Kelley, Founder of IDEO

A FEW GREAT RESOURCESLukeW - Ideation & DesignLearning How to SeeDesigning for the Next StepPrinciples of Interaction DesignGamestorming.com (Games for design)Fivesecondtest.comIDEO - Design KitGive Your Website Soul With Emotionally Intelligent InteractionsAffordances in Web DesignConsistency: Key to a Better User ExperienceHow to Design for Human BehaviorThe Five Pillars of Interaction DesignUX Design, Role-Playing & MicromomentsBuilding Your PortfolioLean UX MethodUX & ImpactMy Favorite Tools:Sketch, Marvel, Invision, Axure, Post-it Plus, Pen & Paper, Flinto

A few great portfolio sites:Van Schneider (Former Creative Lead @spotify)Matias CoreaFabio MunizAnthony AndersonMert Sondac - SI AlumLucas Mosele - SI AlumMariusz CieslaPatrick Lewis - Button / Techstars NYCJoel Califa - Product Designer @ Digital OceanRobert Gaal - Product Manager @ GoogleWilliam Macivor - Senior UX @ Loblow DigitalJohn Antoniello - Creative Director @ RazorfishKyle Decker - Product Designer @ SwiftypeNick Yeh - Interaction Designer @ GoogleIssac PaavolaKey Takeaway - designers document their UX design process for each project in their portfolio rather than show the end product

Intro to the design challenge

CONTACT INFO

Sophia Huang@shh223

sophiahhuang@gmail.comwww.sophiahhuang.com