EDUCATION FOR THE INNOVATION ECONOMY Sophia Huang Sr Product Manager @GILT [email protected] @shh223
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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: [email protected], 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
Related Documents
