UX Portfolio - Jun Ge

Download UX Portfolio - Jun Ge

Post on 16-Apr-2017

116 views

Category:

Design

0 download

TRANSCRIPT

  • Jun Ge designer on the way

  • 07/2010

    Graduate with Bachelorin Electrical Engineering

    Start my design career in game industry

    07/2010 - 05/2013

    Lead Designer/PM

    Design for game system & gameinteraction.Design for internal tools and game-related applications.

    08/2013 - 05/2014

    08/2014 - 05/2016

    Graduate study in HCI

    Hands-on experiences in HCIresearch, design/prototyping and user studies.

    Working with startup

    Built web application in a small team with visual designer and full-stack engineer.

    Next journey as a designer starts here.

    I wish.

  • MY JOURNEY DESIGN TOOLKIT PROJECTS LETS TALK

    EXPLORE UNDERSTAND IDEATE DESIGN TEST EXECUTE

    listen read observe research get inspired intuit try new apps

    interview survey competitive analysis contextual inquiry business goal synthesize

    affinity diagram card sorting flowchart scenarios collaborative

    sketching

    sketching whiteboarding prototyping MVP design document iteration

    thinking aloud heuristic evaluation A/B testing feasibility report QA report

    interactive prototype front-end prototype joint debugging design spec pattern guideline

    Design Toolkit

  • MY JOURNEY DESIGN TOOLKIT PROJECTS LETS TALK

    Giant Data Reporting SystemWeb application design

    Hengyue WebsiteResponsive Web UX

    Privacy by DesignUser Research & Interface Design

  • Privacy by DesignResearch & Interface Design

    Research question: how cognitive heuristics work in privacy

    decision-making process.

    Contribution: user research, prototyping&design, front-end

    development

    Team: HCI lab, Media Effects lab

    Project Detail

  • People make privacy decision by using cognitive short-cut instead of more rational thinking.

    Whistles and bells in interface design

    Sundar, S. S. (2008). The MAIN model: A heuristic approach to understanding technology effects on credibility. Digital media, youth, and credibility, 73100.

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Focus Group Interview

    Large-scale Online Survey

    Learn users general perception about privacy issues when theyre using web/mobile applications.

    e.g. Which kind of interface design & interface function will make them feel the website more credible?

    Validate a series of proposed privacy heuristics.

    e.g. How likely are you to disclose your credit card information to Siri when comparing with a human agent?

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Selected Preliminary Findings

    Community Building

    Sharing personal information can contribute to community building.

    Bandwagon

    If majority of other users have revealed information to a website, I will do the same.

    Gatekeeping

    When a system has many layers of access, it makes me feel safer.

    Fuzzy Boundary

    My information may be shared with third-parties, therefore it is unsafe.

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Research Process

    Generate Heuristics

    Design Prototypes

    Validate Design Ideas

    Design Guideline

    scenario familiarity

    website authenticity

    heuristic isolation

    8 prototypes

    60 minutes / session

    4 heuristics

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Scenario Design

    Activity Scenario

    U likes to make purchase of books, clothes, make-ups and other stuff online. This day, U signed up for a new online payment platform.

    Information Scenario

    When logging into the payment platform, U saw several recent payment activities from Amazon. Meanwhile, U can also see the current balance and card information.

    Interaction Scenario

    U can click recent activities to review more payment history. U can also use Wallet or add your bank to link a new card to the system.

    Rosson, M. B., & Carroll, J. M. (2009). Scenario based design. Humancomputer interaction. Boca Raton, FL, 145-162.

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Heuristic Stimuli Design

    Gatekeeping

    Information Scenario

    U found there was an order labelled as waiting for pay. U would like to pay for this order.

    Interaction Scenario 1

    U chose the order and would like to pay for it now. U was required to re-enter password and enter 4-digit security code.

    Interaction Scenario 2

    U chose the order and would like to pay for it now. The order was completed directly without additional steps.

    Rosson, M. B., & Carroll, J. M. (2009). Scenario based design. Humancomputer interaction. Boca Raton, FL, 145-162.

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Formative User Study

    testing prototypes

    thinkingaloud

    post-interview

    Thinking-aloud & Contextual Interview

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    Study Results

    When adding multiple steps before pay for an order, the participants felt more comfortable to use the payment platform.

    The average perceived privacy/security level of the website was 4.3 in the gatekeeping condition, while only 1.3 in the non-gatekeeping condition.

    Study Insights

    interpretation

    to be influenced

    process contextual stimuli

    context

    cuesdesign works

    trade-off

    benefit

    risk

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    More Findings

    less trustworthy. Unwilling to discuss private stuffs.

    more trustworthy. Willing to discuss private stuffs. (31% higher response rate)

    anthropomorphic chatbotdoctor avatar

  • PRELIMINARY RESEARCH SCENARIO-BASED DESIGN USER STUDY

    More Findings

    Gambino, A., Kim, J., Sundar, S. S., Ge, J., & Rosson, M. B. (2016, May). User Disbelief in Privacy Paradox: Heuristics that determine

    Disclosure. In Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in Computing Systems (pp. 2837-2843). ACM.

    Rosson, M. B. & Ge, J.(2016, May). To Disclose Or Not: Scenario-based Design of Privacy Heuristics. CHI 2016 Workshop: Bridging the Gap

    between Privacy by Design and Privacy in Practice.

    Sundar, S. S., Kim, J., Gambino, A. & Rosson, M. B. (2016, May). Six Ways to enact Privacy by Design: Cognitive Heuristics that predict Users

    Online Information Disclosure. CHI 2016 Workshop: Bridging the Gap between Privacy by Design and Privacy in Practice.

    More in progress :-)

  • Any thoughts for this project? #^_^#

  • Data Reporting SystemInternal Tool Design

    Main function: review and analyze operational data.

    User: 3 project teams in ZT Department.

    Contribution: user research, prototyping&design, project lead

    Team: ZT department, Giant data centre

    Project Detail

  • ZT department has three project teams with

    hundred thousands of players and daily revenue

    in $.

    It is difficult for team members to review

    operational data in original system with

    complicated data base and data tables.

    Without a easy-to-use and user-friendly data

    system, project team could not get useful

    insights for future design and development.

    Project Team Need a New System

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Project Process

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Interview & Contextual Inquiry

    Director PM Data Analyst

    System Log AnalysisWhich types of data were browsed most frequently?

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Card Sorting & Information Architecture

    Data Type vs. Server Name

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Chart Analysis

    Feasibility Verificationpotential technical problem and solution

    discussion with engineering and QA team.

    system development

    tracking deployment

    system inheritance

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    1 2

    3 4

    5

    Daily Dashboard

    1. left bar navigation

    2. daily report

    3. KPI report

    4. real-time tracking

    5. KPI by server

    Mid-fidelity Prototype

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    1

    2

    3

    Time series data

    1. time scale selector

    2. line chart

    3. indicator selector

    Categorical data

    4. stacked bar chart

    5. highlight indicator

    4

    5

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    User Testing Assigned Task & Free Exploration

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Iteration According to Test

    Free comparison tool

    switch of line chart / bar chart

    compare between various server / time period

    Event Icon

    know reason of unexpected change

    in data series

  • USER RESEARCH IDEATION DESIGN TEST&LAUNCH

    Explore More Designs

    quarter KPI indicator

    18,325,876

    25,824,124

    Completed

    73%18.3M/25.8M

    Completed

    Plan: 16,800,000

    Complete: 18,241,000 +2,441,000

    Plan: 18,240,000

    Complete: 15,481,000 -2,739,000

    Plan: 16,800,000

    Complete: 18,241,000 +2,441,000

    daily KPI indicator

    Daily: 275,310 +121,834

    Plan: 240,000

    Target: 154,287 78,644

    Daily: 147,258 - 87,415

    Plan: 240,000

    Target: 223,509 18,644

    Daily: 275,310 + 21,834

    Plan: 240,000

    Target: 354,287 78,644

    k1052

    173k

    k125.3

    173k

  • Release

    Facilitate project development and operation in an in directive way.

    Reduce the efforts of team members to review and analyze data.

    More function to be added in future:

    event/threshold alert

    geographic distribution of user

    automatically generated report

  • More discussion for this project~ (_)

  • HYOO WebsiteResponsive Web UX/UI Design

    Project Detail

    Website function: Web application to reserve on-campus service Marketing website

    Contribution: UX/UI design, user testing

    Team: 1 UX design, 1 UI visual design, 1 full-stack

    engineer & founder

    Result: MIT-CHIEF Business Plan Contest 2015

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Provide on-stop living services

    including routine meal delivery,

    housekeeping packages and short

    road-trips.

    Strategy

    Scope

    Structure

    Skeleton

    Surface

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Beta Service Website

    HYUMMY

    one-time meal delivery & routine meal delivery to designated

    locations around the campus

    HYSKEEPING

    reserve housekeeping in different packages with optional upgrade

    service at designated time

    HYTRAVEL

    join short road-trips or become driver for trips to HYOO

    authenticated routes

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Beta Service Website

    Feature Guideline:

    Use one webpage for each task

    No link between different services

    Currently no online payment feature (security concern)

    Web Content:

    HYUMMY: meal detail, delivery location, deliver time

    HYSKEEPING: pre-listed departments, price package, service time

    HYTRAVEL - driver: trip routes, compensation, driver verification

    HYTRAVEL - customer: trip routes, available time, trip detailStrategy

    Scope

    Structure

    Skeleton

    Surface

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Website IA

    Strategy

    Scope

    Structure

    Skeleton

    Surface

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Page Skeleton

    Strategy

    Scope

    Structure

    Skeleton

    Surface

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Mid-Fidelity WireframeInteraction Issue

    1. improper design for a long location list

    2. hard to notice that the card is clickable

    Interaction Issue

    1. repetitive to choose location for each day

    2. repetitive to choose start/end week for each day

    3. unnecessary to show academic calendar

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Design Iteration Interactive Map Location

    Library 30/30

    ORDER1IST Bld

    18/30

    +

    Delivery Tracking

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    Design Iteration Location Selector

    Meal Card

  • STRATEGY SCOPE STRUCTURE SKELETON SURFACE

    More Work on Surface

    Color Pattern

    HYUMMY

    HYSKEEPING

    HYTRAVEL

    Select Your Option

    option 1

    option selected

    option 3

    Drop-down List

    Interface Widget Sample

    Chandelier+ $5

    Chandelier+ $5

    default selected selected-hover

    default- hover

    +

    Select Date

    1 2 3 4

    1 2 3 4 5 6 7

    8 9 9 10 11 12 13

    14 15 16 17 18 19 20

    21 22 23 24 25 26 27

    28 29 30

    25 26 27 28 29 30 31

    Mo Tu We Th Fr Sa Su

    Aug 2015 (6)30 Invalid date

    30 valid selectable date

    user selected date

    valid data has been selected by other users

    30

    30

  • Any more interests about HYOO?

  • More About JunBesides designer, Im also a:

    Chef Cat Servant LEGO Builder Game Fan

    Love life, keep passion and have fun!

    MY JOURNEY DESIGN TOOLKIT PROJECTS LETS TALK

  • Thank you very much. ^-^More design works in: junfordesign.com

    http://junfordesign.com