PORTFOLIO Xiaoxi Zhang
Interaction Design
Content
1
Experience Design
2
Autonomous Driving
3
Service Design Make Heritage visible
Experience Design Smart home
4
Web Redesign Visit London
About me Xiaoxi Zhang jessiezhangxx@gmail.com 077-19658799 (UK) 2015. 09 - 2016. 12 Loughborough University / Design School / 1 year full-time master / Interaction Design MA
My UX design process:
Discover
Define
Develop
Deliver
01
Autonomous Driving
2016.03 - 2016.05 Team work This project was a collaboration with Jaguar Land Rover in developing a concept how to enable trust through interaction design when it comes to autonomous driving. I contributed every research and data analysis session. For the design work, I mainly focused on designing the wireframes & UI of interfaces. And I also worked on the user journey map.
Project Background Full autonomous vehicles are something that we will expect to see as mainstream on roads by 2030. During the next five, ten and twenty years, there will significant research and development advancement into how this will look and feel. Using today’s users we are able to test and understand what future users would want from their vehicles and what expectations they will have in 2030.
“
WE CAN'T PREDICT THE FUTURE BUT WE CAN BE PREPARED
WHERE WE ARE - 2016
WHERE WE ARE HEADING - 2030
L0 – No automation
L0 – No automation
L1 – Function specific automation
L1 – Function specific automation
L2 – Combined function
L2 – Combined function
L3 – Limited self-driving automation
L3 – Limited self-driving automation
L4 – Full self-driving automation
L4 – Full self-driving automation
The Brief Based on preliminary research, the overarching theme of TRUST is most important and critical consideration to carry forward. By focusing on trust we can design the L3-L4 environment to feel safe and humanise the overall experience for the user.
Design Research
Secondary Research
Primary Research
Visit to JLR Dealership
Survey Target Users
Focus Group Discussion
Interviews Target Group
Online research and subjective group research into the automotive industry and future trends
Contextual, qualitative research
Visit to Sturgess Jaguar Land Rover dealership - interviews with staff members and experienced the latest JLR vehicles
Quantitative Research
Semi - structured group discussions with our target user age group
Eight Interviews conducted with both target group and expert researchers within the field autonomous vehicles
Key Findings In summary, the insights generated from the user interviews showed a positive perception towards technology, however people do not want to feel like they are being controlled by
Optimum Levels
but do not feel that they can fully trust L4 autonomous cars.
1
This was interesting as although users are familiar with gesture and voice in their
PERFORMANCE
technology. They will accept supported autonomous functions which L3 vehicles would offer
AUTONOMOUS MANUAL
current smart devices, the need to identify with and feel safe was the knowledge
OPTIMUM
of knowing and seeing a physical button or control such as a steering wheel. This signified a greater level of safety and control to a user - something physical felt safe.
2
INATTENTION
In addition, they would still like to be able to take charge at any moment when driving in autonomous mode, since there are seen as too many potentially hazardous situations that can happen in driving in real terms.
FATTIGUE
ACTIVE DISTRACTION OVERLOAD WORK LOAD STRESS
Target User Group Sampling Methods
The chart below represents the complexity in where these experience levels are. As designers it is important that we ensure there is a balance between these so that when the driver moves into autonomous mode there is enough attention required by the user to not become overly detached from their autonomous environment.
Male - 23 Student 2 years of driving experience
Male - 53 Manager 30 years of driving experience
Male - 25 PhD Student Research fieldConditional Automation
Maintaining the optimum levels is key to ensuring trust and safety.
Male - 25 Student 4 years of driving experience
Male - 23 Student 5 years of driving experience
Male - 26 PhD Student Research fieldSystem Engineering
Data Analysis Affinity mapping was a useful way for us to understand a large amount of data. After collecting insights into words and short statements, we were able to understand where recurring patterns and themes were present.
Insight
Opportunity
HUMANS ARE BAD PASSIVE MONITORS
TO DESIGN A SYSTEM WHICH COMMUNICATES CLEARLY AND QUICKLY TRUST AND SECURITY
IN L3 - YOU ARE TAKING THE PRIMARY CONTROL AWAY FROM THE HUMAN
KEEPING THE DRIVER AWARE
USERS ARE DISCOURAGED IN SYSTEMS TOO TECHNICAL, THEY WANT TO TAKE CONTROL BACK AS THAT FEELS MORE FAMILIAR
TO ENSURE THE SYSTEM IS AHEAD OF AND MORE INTUITIVE THAN THE USER
THE DRIVER NEEDS TO SEE ONLY CRITICAL INFORMATION, LEAVE OUT THE REST
USE HEURISTIC PRINCIPLES TO HELP USERS FEEL MORE FAMILIAR WITH REAL WORLD OBJECTS, TO ENABLE FEELINGS OF CONTROL
Concept
2030
In 2030, we know that L4 capabilities will be in most cars.
The cabin environment will utiles UI information and will
As we learned from JLR, they are trialling an autonomous
has a physical button for the driver to change modes
L4 car using a designated autonomous lane. As we were
(transit manual and autonomous driving). There are three
aware that this was a reality, it was safe to assume that an
interfaces which the driver will interact with. First, the main
autonomous lane will be in place and used in L4 vehicles by
screen “touch screen� as centre control interface of the car,
2030. We devised a scenario whereby the driver of an L3-L4
second the dashboard, in front of the driver and behind the
vehicle can move in and out of the autonomous lane.
steering wheel, third, a physical button between the steering wheel and the main screen.
Design Principles
Visibility Controls should be made visible and located where users expect them to be
Affordance
Feedback
Visual cues should be used to help understanding
Users should be given confirmation that an action
how an object/control can be used
has been performed correctly (or not correctly)
Heuristics Consistency Constraints
Things that look similar should do similar things
Systems should be designed with restrictions so to
Mapping Provide a direct correlation between controls and real-world objects
minimise margin of error
Persona
2016 Michael -Student
2030
(FUTURE PROJECTION)
Michael - Programmer
21 years old
35 years old
• Streams music for Uni projects and for personal use
• Father of a 2 boys, aged 3 and 5 years
• Drives his mum’s car when he is home from uni and likes the
• Works with science and touch technology to develop products and
adaptive cruise control
services
• Owns lots of tech devices and likes going to tech and gadget
• Enjoys collecting vintage vinyl
events
• Spends his spare time using AR at home to experiment with new ideas
Needs: Strong wifi signal
Needs: A good UI system in vehicle
Frustrations: Slow drivers
Frustrations: Slow drivers
Experience Goals: To buy his own car
Experience Goals: To be able to work from his car during his journey into work.
Scenario
HOME
1
2
3
4
5
Driving in manual lane with manual mode
Coming to the auto lane
Changing to the auto lane
Coming to nearly the end of the auto lane
Changing back
OFFICE
Driving in the auto lane
Moving to auto lane
Read data & plan route
Communicate data begins with other auto cars
Driving in auto mode
Display feedback ( reminded to loosen his hands )
Auto mode now is on
Initializing auto mode (countdown from 15 sec)
Driving in manual mode
Set up map Start
Plan route
SYSTEM
Check his e-mail
See the car is changing lane
Relax and loosen his hands from the steering wheel
Receive the feedback & wait for auto mode countdown
Press the physical auto button
Auto lane is available on route - switch to auto mode
Arrive at the motorway
Drive away from the house
ConďŹ rm destination & route
Input the destination - oďŹƒce
Still like to feel in-control of his vehicle. For Michael the car should work with him, this makes him trust the car more
Is tech savvy so will enjoy to use in-car features to help him feel more productive and the car and features more fun
It is important to Michael that he trusts and feel safe whilst driving his car
Is a family man & has two children
Michael
User Journey
PERSONA
HOME
Driving in manual mode
Change to manual mode ( auto mode is o )
System sensors identify hands on the wheel
Remind to change back to manual mode
Driving in manual lane
Moving to manual lane
Waiting for changing lane
Communicate data with other auto cars
Remind to take it over
Detect the distance to the end of auto lane
OFFICE
LEGEND MANUAL MODE
AUTO MODE STRESS
AWARENESS
RELAX KEY SYSTEM STAGES
AUTO-LANE SECTION ON JOURNEY
Leaves the motorway
Continues to drive in manual mode
Interface informs him that manual mode is now activated
Holds the steering wheel with both hands
Is informed by a countdown that he needs to prepare to take back control of the driving in xxx seconds
Feedback and interface visibility that the car is changing lane, out of autonomous
Put his work aside & prepare to take it over
Receives feedback that autonomous lane will end soon
Skype meeting with his boss
User Testing
Ver 1.0
Usability Testing
Feedback 1
2
3
4
Make the animations and graphics as intuitive as possible. We had a picture of a handshake between two cars, and we used two hands as a visual, but the user didn’t understand what was happening because he didn’t know about the term “handshake”.
Some of the feedback needs to be more consistent throughout the scenario, to ensure the users are following the actions of the vehicle.
Explain more information with the arrow ahead the car, instead of adding new symbols ( for example: go a bit further to the car when accelerate, a bit closer on the opposite; changing direction ).
Change lanes could be done automatically by the vehicle, users should be free to do anything they want to afterwards.
Switching to Auto Mode Task flow
Decativate autonomous mode by turning button
(Feedback - reinforces trust and safety)
3
Driving in Manual Mode
Take Over Request (TOR) is currently 5-8 seconds We have emphasised this for trust purposes
GA
Initialise Autonomous press button to on (Usability principles -
2
4
1
IA
SA
Autonomous mode now working & on
All Interfaces consistent and displaying that auto mode is on
TA
Interface/steering wheel reminder by blue light going around car will be initialising auto mode 2
1
TA
SA
Countdown to autonomous mode from 8 seconds
(Usability principles -
1
Interfaces remind to loose hands
Current Lane positioning
SA
1 SA 2 TA 3
GA 4 IA
Situation Awareness
How the interface is communicated directly with the driver
Temporal Awareness
How a situation is changing, paired with situation awareness
Goal Awareness
How the interface alerst the driver to the overall aim and intention
Identity Awareness
The key things the driver needs to be aware of
Driving in Manual Mode
Initialise Autonomous press button to on
After setting up the journey, the interface shown on the main screen changes to an overview of the motorway. The driver activates the autonomous mode by pressing a physical button. Through our research we found At this moment the car is driven in manual mode. that this was the preferred way to change between the modes, rather than on the actual interface. By having a physical button we encourage a sense of control and trust in the driver.Design principle: Affordance
All Interfaces consistent and displaying that auto mode is on
Interfaces remind to loose hands
After initializing the autonomous mode, the blue light on the steering wheel gives the driver feedback that the The main colour of interfaces has changed to blue to help the driver to easily tell the difference between auto autotonomous mode is on and shows clearly that the car is controlling the steering wheel. The wheel will also and manual mode. Design principle: Visibility move to show that it is driving and slowly move inwards from the user. Both interfaces will now show that it is now safe for the driver to let go of the steering wheel.
Switching to Auto Lane Task flow
1 SA
Interface displays the computer is changing data with others now
2 TA
3
1
Moving to Autonomous Lane
Handshake 1 SA 2 TA 3
GA 4 IA
Interface displays a planned route
GA
SA
Interface displays the auto cars around you (This is to show there is communication between autonomous cars see lane map)
autonomous lane has been alerted to you moving into it
Goal Awareness Identity Awareness
SA
Countdown to autonomous lane from 8 seconds using dashboard Interface and steering wheel
Car moves into auto lane
(Feedback - reinforces trust and safety)
Auto Lane Displayed
4 IA
3
Handshake
GA
Comupter no.1 sends information to conputer no.2 indicating a move to autonomous lane
No.2 Acknowledges the information and interface alerts user to new lane
Situation Awareness Temporal Awareness
1
1 SA
No.2 decreases speed to allow safe distance (3 chevrons) for no.1 moving into auto lane
4 IA
No.1 is alerted to no.2 reducing speed
Safe distance is acknowledged on both of the cars interfaces
The interface shows that the car is communicating data with other auto cars. Visualising the handshake The interface shows that the car is changing lane follows the planned route. between multiple vehicles by providing a direct correlation between the car patterns and real world objects which helps the driver understand what is happening or what is about to happen. Design principle: Mapping
DSHAKE HAN 2. SYN/ACK Computer acknowledges the sent from no. 1 2.information S
1. SYN Send information to computer no. 2
No1
No2
3. ACK Computer acknowledges computer no. 2 by confirming acknowledgement back
DSHAKE HAN
Key SYN - Synchronise ACK - Acknowledge
3
The car is driven on the auto lane. 8 minutes is going to be saved in this journey.
02 Smart Home
2016.10 - 2016.12 Individual Work This project has been set in collaboration with E.ON one of Europe’s leading energy companies. It aims to design an smartphone app that interacts with connected home technology to enhance home life for students in Loughborough.
Research: Interview The in-depth interviews were designed with 15 open-ended questions. For learning more from the users, the interviews were conducted in participants' apartment which is a real context to know how they use their heatings in daily life.
Analysis: Participant Board Name: Xiaoxuan Ding Gender: female Age: 22 Occupation: postgraduate student Nationality: Chinese
# Living Conditions flat ( on campus ) -- do not need to pay for bill
# Using Habit Opening hours of school heating 7.00- 11.00 am 4.00- 11.00 pm (Nov)
“ I always open the central heating to keep the room warm.”
Experience Goal
She is a international student and lives in the flat on the campus. She is afraid of the cold weather. So she likes to use the central heating all the time if it is allowed. In leisure time, she do a part time job to hand out flyers in order to earn money for a part of living fee.
- does not need to worry about switch operation of heating
She always turn up the central heating eventhough she leave to have a class for couple of hours.
Task Goal
“I want to have a very warm room when I come back. And my class mostly only two hours. So I do not think it is necessary to turn off the central heating.”
makes her feel convenient
makes her realize how much energy she already has used - raising awareness
when she leaves, helping her to control the central heating automatically knows how much energy she already has used
Actually she does not care about how much she use. “Actually, I do not care how much energy I use, because I do not need to pay the bill. I just want to keep my room warm all the time.”
Persona “When I use the central heating, I always open it to max all the time, although sometimes it makes me feel uncomfortable.� Marie is a fresh postgraduate student. She rents a house with 5 friends near the university. In this winter, she uses the central heating all the time. Although sometimesshe she gets a sore throat, she really does not know how to guard against this problem. And living in her rental house, she lacks the awareness of saving, because she does not care how much she already has used. Her bill is included in rent, so she just does not want her usage over the bill. Actually, for the utilities in UK, she has no sense of the price.
Task Goals # understands potential health problems caused by heating # gets some useful advice of using heating
The habit of using heating & Pain points a typical day in her daily life
# when she leaves home, helping her to control automatically
after leaving, she has no sense of turning down the heating
# keeps track of her electricity bills
Experience Goals # when she uses the heating, makes her feel comfortable # when she leaves the house, does not need to worry about the state of heating # when she uses the app, makes her feel attractive # simple operation- does not spend too much thought
gets a sore throat when she use for a long time
does not know how much she already has used this week
Concept From the preliminary user research, it is found that participants do not care how much energy they use if their rent include bill. When they use heating in a long time, they may have throat problem because of the dry air. The application is aimed to help renters build a energy saving, healthy living environment, and also encourage them to save energy. Through scientific analysis of their usage, the app will remind them the rational use of heating in a healthy way. The app also could help users turn off the heating automatically after detecting users leave home through GPS.
Smart when users leave home after a fixed time, helping them control the central heating automatically
Information Visualization visually display the usage of bill in order to make users know their usage
Healthy intelligently analysis the using state of heating and give advice from a health perspective
Convenient allow users to easily control the heating, and even remote control
Site map
Story Board
At 7.00 am, he turned up the central heating.
Until 10.00 pm, the heating was still opening, but at this time, he might get a sore throat soon.
At this moment, the app sent a reminder message. It includes some advice of using heating.
He was going to class.
When he left the house xxx metres away, the app helped him turn off the room heating.
When all of his roommates left the house xxx metres away, the app helped them turn off master controller.
Initial Wireframe
Start page
Sign up
Home screen
set the exact location in order to use “smart mode”
the image represent the users’ health state
Heating control
Menu
Three routes Route 1: know health state and get health tips Route 2: check bills Route 3: check smart mode (leave home) Knowledge details
Health tips
Smart mode
get some advice and learn the knowledge about using heatin
w h e n u s e r s l e av e t h e home, this screen will be the home screen
Check bills know how much energy they use / do they expend over the bill
Monthly bills
User Testing & Iteration Test plan The wireframes were transferred to POP for iPhone 6, allowing clear communication of the design on a iPhone 6.
Participant: Ya Zhang postgraduate student sharing house with friends
Test location: in her bedroom Content: try to accomplish 3 tasks and do a short interview
Goal: testing the usability of the app
Test result Screen
Home Screen
Method
POP prototype / short interview
Menu
User Feedback
circle of health state should be more clear
need some tips about what is this image means
text of display temp andhum is not obvious
arrow of switching health and heating control
Iteraction
redesign the circle, m a ke t h e p r o g r e s s more clear
if users click the image, it will display the meaning of it
make the display easier to see
put the arrow in the left side
“smart mode” should be displayed in the “menu”
if users turn the GPS switch on, smart mode will appear
Screen Design # Route 1
heating control
healthy state
switch
represent different health state
indoor temp and hum
F o r f i r s t t i m e l o g i n u s e r, they need to set the exact location of residence, in order to use smar t mode.
When users click the “health state� image, this screen will display the indoor environment in detail in order to explain why they got that score of health.
Screen Design How much energy they consume How much money they spend
# Route 2 Check bills Users could check their bills based on weekly and monthly bills.
Set maximum limits (it could be the bill included in rent ) Family member status updates
# Route 3
Turn on the GPS switch, users can use smart mode
Manual switch
Smart Mode When users leave the House in a certain range, after a cer tain time, APP will determine that the user is away from home, and automatically turn off the heat. In this state, this screen will be the home screen. After all people in the house leave, the master controller will be turned off. Has set a fixed limit
03 Service Design
Teamwork 2016.03 - 2016.05 Historically the Loughborough town is associated with the world’s famous bell foundry, its steam railway, textile manufacturing history. Nevertheless, nowadays Loughborough is often only recognised for its University. This project aims to benefit economically and socially from increased tourism. I contributed the research work and every stakeholder meeting. For the design work, I mainly focused on the LOGO, map and poster design.
The Brief The brief from client: Grow tourism in Loughborough by getting more visitors to the town itself. Involve more local residents in events and projects.
"
Discover Loughborough is a Facebook-based amalgamation of applications that help visitors and residents get the most out of a day in town.
Project Background
"
Target User
University Students in Loughborough spend little time in town and know almost nothing of its history.
In Town But Loughborough does have cultural attractions, including museums, railways, and a burgeoning food scene.
Research Service Safari (train station) Secondary research Primary research: target user interview Primary research: stakeholder meeting
Young people who study at Loughborough University
Young people who have friends living in Loughborough
Stakeholder Map
CoDesign workshop with stakeholders
Concept Visualize the heritage in Loughborough : There are four typical and famous attractions in Loughborough
Taylor Bell Foundry
Great Central Railway
Town Center
Queens Park
User Journey Floor-based graphics Start the journey here !
1
Poster 2
Loughborough Train Station Platform One option is floor-based graphics that direct people towards heritage sights and piques their curiosity.
Photo
The bus stop of train station
Search Loughborough page Scan QR code to directly access the Loughborough Facebook page
Recommended route / Postcode / QR code
Discover Lboro
Audio guide 4
3
scenic spot
several interesting heritage in Loughborough
Map
show some restaurants and activites near heritage sites
Each area contains a main heritage site along with nearby eating and shopping opportunities They have been designed so they are no more than a ten minute walk to cross through
Bell Foundry Area Great Central Railway Area Town Center Area
Heritage Guide
audio guides on heritage pages provide additional context
Origins and Construction Heritage Site History Artifacts and Features Uses Throughout the Years Current Situation
04 Usability Testing & Redesign Individual Work 2016.01 - 2016.02 This project is based on a traveling website, serving people who are interested in London. It is a comprehensive website which gives tourists an approach to be acquainted with London. The purpose of the project is improving problems which affect user experience to make better use of the website by testing, redesign, retesting.
Usability Testing # The target user of the website: serving people who are interested in London
# The scenario of the test: International students plan to visit London with their parents three days. Participants are asked to arrange the detailed journey using the website www.visitlondon.com.
# Three tasks: Goal
Date
Fee
Remarks
Task 1
Watch a famous musical with their parents
As early as they can
Under ÂŁ60/ ticket
Choose a good seat except the last area
Task 2
Book a seat for afternoon tea
The same day
Under ÂŁ30/ person
Near the theatre you have chosen before
Task 3
Know how to arrive the theatre from Oxford Street by tube
The same day
//
# The process Design the testing plan
Sample & recruit participants Testing
Testing Redesign
Interview Analyze the data
Feedback & Redesign #1
The layout of home page
original
Problems: Visual clarity Unclear structure Repetitive information
new
Feedback: Eye-tracking #2
The task flow of booking musicals the introduction/ choose date and quantity
Problems: Visual clarity Unclear structure Important information aren't highlighted Tolerance When the users make a mistake, it is hard to undo the action easily Efficiency Users take so much time to achieve a task, eg: find the information of transportation
choose seats
choose extras
go to basket
checkout
confirmation
Redesign
The important information is put in the top of page The detailed information is reorganized with different clusters
The red sideline reminds users which step they are at
The seat plan is directly displayed The price is changed with different selection
Xiaoxi Zhang
jessiezhangxx@gmail.com