JULIEN QIHUI
PORTFOLIO - UX/UI DESIGN Paris XI University HCID x Amadeus UXD
CONTENTS PROJECTS FOR AIRLINE
2
Social seating redesign Travel magnet collect & book
OTHER PROJECTS
12
Secret Destination Clothez
GALLERIES UI Design galleries Short film making
1
17
PROJECTS FOR AIRLINE I’ve worked for Amadeus User Experience Design (UXD) team for a 6 months internship. As an UX/UI design intern, I worked on design and prototype of experimental features on the airline booking website DX (Digital eXperience). Two projects are introduced: the research and redesign of social seating feature, and an itinerary share and rebook platform named Travel Magnet.
2
With avatars interest match & data
Amadeus e-retail DX airline booking flow Redesign & Innovation
CONTEXT Social seating is a concept appeared from 2011, aiming at helping passengers know other people onboard and possibly select their travel companion. However, the low number of usage and the implementation cost made this service barely attractive for the airlines. This project explores possible redesign to create incentives for travellersas well as airlines.
DESIGN PROCESS DEFINE
DESIGN
PROTOTYPE
Scope of work
Personas/scenarios /touchpoints
UI Design
DESIGN SOLUTION
Target Users
Apart from the existing social conntecting service via Facebook/Linkedin, I propose selection of avatars representing airline behaviors, and interest match mechanism to encourage personal info sharing in a way where travellers and airlines benefit.
Benchmarking
Rapid Prototyping Value proposition Web developing Wireframe
Requirements Target groups
MY ROLE I lead the project from problem definition, design and prototyping with Sketch and Web development.
3
Specification functionalities
Interactive Prototypes
IMPROVEMENT Discussions with dev, pms Walkthroughs
DEFINE Amadeus Self service check-in currently runs a social seating product used by South African Airways. Other airlines that has similar service includes KLM, Malasyia Airlines, etc. And for non-airlines events booking, Ticketmaster has similar features.
Benchmarking
Feedback “There is no real social experience, apart from tagging the seatmap”
SOCIAL CHECK-IN (Amadeus Self Service Check-in Product)
USER GROUP
USER GROUP • • • •
Bookings with 1 passenger KLM flights to and from Amsterdam Until 1 h before departure Check in online 48 hours before
MAIN FLOW
• • • •
“Facebook analytics tools shows a low usage of login. ”
Unlimited number of passenger in bookings Most flights Until 1 h before departure Check in online 24 hours before
flyass.com Social Check-in Log in Facebook/LinkedIn
Select profile details to share
Select profile details to share
Add personal travel details
Add personal travel details
Broswe other participating passenger’s profile & available seats on the seatmap
Seatmap
1 h before departure the social seatmap view is closed
“Lacks fun and incentives to login.”
Requirements Potential Travelers
Log in Facebook / LinkedIn
Select and modify seats
“The cost of functionality is high.”
MAIN FLOW
KLM.com My trip / Check-in Seatmap
“The interest is limited, no viral effect here”
Broswe other participating passenger’s profile & available seats on the seatmap cut-off time 90 mins Domoestic/ 120 mins International
Optional e-mail notification about who has joined on the flight (3 days before departure)
Social Aspect Avoid certain group of people eg. noisy kids
They want privacy to be protected.
Possibly meet people going to the same event
Possibly find people for taxi sharing, etc.
If I upload my information, I hope to receive personalize service base on this infoamtion. Personalize Aspect
4
DESIGN Benchmark
This is one of the personas built to clarify design needs of potential users.
Personas
Upload Photos / Add personal details
.
Browse profiles interested? Mark Y/N
T-shirts
iPad
Beret hat
RELATIONSHIPS
Laptop
Hair gel
Start a chat
Join a group / create a group
DIGITAL
Virgin America Turkish Airlines EasyJet Uber Airbnb
Everyday is an adventure Don’t make me think Mobile games
Create a comprehensive personal profil Browse a list of profiles Filtering possible /Recommend profiles Start a chat
Participate meetups /Organize meetups
External batteries
Skyscanner Airport counter staff Stewardess Girlfriend Parents Colleagues
MINDSETS
Recommend meetup groups based on location
Select groups of interests
Headphones Razor Perfume Condoms Watch
Passport
Create personal Profile
Found people mutually interested
Marc, THE EXPLORER POSESSION
How to meet new people in a virtual world?
Be cool.
Success rate Effort for user Amount of data Personlisation
Depends
Success rate Effort for user Amount of data Personlisation
Success rate Effort for user Amount of data Personlisation
Accept every cookies usage on the web
Airline Mobile Apps
Enjoy sharing Online check-in
User Journery
E-ticket
Acceptable of sharing Data about… Age Profession Sex Education Company
Relationship status Food Taste Travel Purpose Personality
5
Customize approach
select seat while booking
Declare cabin behavior
Check-in
Customize cabin service
Possible Social onboard
Interest Incentive approach
select seat while booking
Choose interest groups
Check-in
Possible Social onboard
Possible customize cabin service
DESIGN
UI Design & Web prototyping
Approach 1. Selecting avatars representing cabin behavior
This set of avatars are in a playful style. It adds fun elements to the seat map as well as attracts passenger to customize their looks by selecting the avatars, therefore the categorization is finished.
The first approach is by simply asking passengers to choose an avatar that can represent them. In this proposal we‘ve designed five category: Socializer, Hard-working, Enjoying life, Gourmet, Golden Silence.
Approach 2. Selecting interest groups/discussion topics The second approach learns from social meeting apps like meetup, and ask passengers to choose topic of interest. The use of this service is completely voluntary.
PROTOTYPE Paper prototype & wireframe
Low fidelity prototype are built using various type of media, like paper sketching, axure wireframing, principle animated mockups. They are perfect tools for rapid prototyping and communication.
10A
12A
10B
10C
10
11B
11C
11
12B
12C
12
This is the version developed in Web. Try to play with it at: http://playful.bitballoon.com/
6
10D
12D
10E
10F
11E
11F
12E
D
D
This is the interest match approach on the seatmap. Passengers are proposed a group of interest topics, those who share the same interest have the possibility of matching and seat together.
10E
10F
11E
11F
12E
7
8
IMPROVEMENT Walkthrough Design walkthroughs are conducted within the design teams and implementation teams to explore the feasibility and improvements of the system.
Usability test A sample of 5 users are recruted for the usability test. The system are tested for certain tasks like seat selection GHOHWLRQ FKDQJHV DV ZHOO DV WKHLU IHHOLQJ DERXW WKH YLVXDO GHVLJQ RI WKH V\VWHP
Outcome & followup • •
The system is feasible with a third party data storage and analysis provider. EVA AIR woulc be a candidate for the seatmap with avatar.
9
Travel Magnet Collect & Book A portal for itinerary sharing and trip reproduction
Amadeus Digital API for airline and anciliaryr booking Product design in collaboration with team of 2 front-end developers, 2 back-end developers, 1 product manager
CONTEXT Travel Magnet is the winner of the internal innovation contest in Amadeus, lead by a senior manager, with a team of two back-end developers, two front-end developers and a product design intern (me). The original idea is to make use of the NFC tags with trip experience stored and enable sharing and rebook.
DESIGN PROCESS DEFINE
DESIGN SOLUTION This project is aimed at creating a social collaborative booking platform by sharing the whole bundle of travel experience, from flight, hotel, car, to activities. The original idea is built on NFC tags, it has some limitation. We’ve introduced a portal system, aka. Wall of Magenets, integrated inside the airline APPs to generate more traffic. The rebook mechanics make use of the newest API of Amadeus Digital shopping cart concept.
Clarify problem Target Users
DESIGN
DEVELOPMENT
Touchpoints / Basic flows
UI Design & Integration
Value proposition
Android development
Specification features
Android App & Back-end
Benchmarking
Requirements Target groups
IMPROVEMENT Discussions with stakeholders Walkthroughs User Test
MODE AGILE
MY ROLE As a product design intern I worked closely in the team to interpret business requirments to design interface.
10
DEFINE Value Proposition Where “Travel Magnet” Came From
We mainly targeted low cost carriers or short haul flight providers. The business cases could be as follows:
NFC(Near Field Communication) tag is enable users to share data with a super light-weighted medium with thickness of paper. Travel Magnet take the affordane of collecting real travel magnet (stickers) to the virtual data: the whole travel experience can be store inside the tag and share.
Promote destination in an appealing way, featuring exchange of magnets Attract new customers, and revisit loyalty program for this model Upselling, for example NFC tags, goodies Brand differentiation: the use of NFC tag integrated product can have a virtual or physical entity, with airlines’ branding and speciality
DESIGN
DEVELOPMENT
Touchpoints
NFC
Scan magnets from physical NFC tag (or online platform).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Change the dates.
Read travel experience stored on the magnet.
The design and development of this project is in a mode super agile. I produced high-fidelity mockups directly and the development took place at the same time. We discussed around the product constantly and made 4 iterations of interface in total.
The whole travel experience, including flights, hotels, car rentals and other activities can be booked with one click.
11
1st iteration
Several version splash screens Exploration UI card design
Add booking flow
2nd iteration
Add landing notification
12
3rd iteration
New UI card design Responsiveness improved
4th iteration
In this stage we adapt an imaginary customer - Icelandair, and I apply a look and feel accordingly to the UI design.
Styleguide
This style guide is for icelandair, established in iteration 4.
Color Palette
Typograhpy Guide
Primary Colors #59BEFC
Accent Color
#BBE5FF
#FFBC22
Heading 1
Style for a first level header
Heading 2
Base Colors
Style for a second level header #4C5157 #93AFCC
#FFFFFF
Heading 3 Style for a third level header
HEADING 4
Components Samples
STYLE FOR A FOURTH LEVEL HEADER
Buttons
HEADING 5 STYLE FOR A FIFTH LEVEL HEADER
Create a new plan Create a new plan Magnets
13
UI Cards & Carousel
OTHER PROJECTS Apart from my projects for airlines, I have two other projects, the secret destination and Clothez, showing my ability of coming up with designs emphasized on business campaigns, and as well as my knowledge and skills on the development side.
14
Secret Destination A H5 trip sharing mini app
Marketing campaign, interaction design
CONTEXT
DESIGN SOLUTION
Secret Destination is an idea of a marketing campaign for airlines I proposed during my internship in Amadeus UXD Team. Travelers do not always have an idea about where to travel. Airlines can not always fill their seats either. How to better organize the resource to make a win-win?
Secret Destination propose to travelers a lottery of 4 travel destination, with a very attractive price. A traveler buy this lottery and a scratch card will be send to his/ her travel companion. The receiver reveal the travel destination and finalize the booking by completing their trip. This collaborative way is designed to add surprise and fun and also create a viral effect.
15
VALUE PROPOSITION Secret Destination propose a new way for re-organization of seat resources. Airines put their empty seats on the secret destination pool, let travelers to choose them with a controllable rate. For the travellers side, the low price and the ease of planning are the attractive factors to those who don’t have specific travel plans.
DESIGN Sender
Receiver
Travelers flexible travel plan low price
Airlines optimize usage of seats gain more customers
ease of planning
promote new destination
The purchase of this secret destination ticket is designed as a collaborative task A h5 scratch card is implemented for revealing the surprise. The booking flow is illustrated as follows: Use his/her chance & generate 1 scratch card Receive the scratch card reveal the destination
16
Get destination and offer
Finalize booking
Get destination and offer
Finalize booking
Clothez Take a shot and buy this cloth online!
Image search engine & Android development Bachelor thesis in SJTU(Shanghai Jiaotong University) Intelligenct System Lab, 6 months in the image search research group.
CONTEXT DESIGN SOLUTION
This is my bachelor thesis in Shanghai Jiaotong University. Consider this scenario in real life: you walk in the street, you see someone wearing nice clothes, that you might probably want a same one. It is kind of embarrassing to step forward and ask. Or perhaps one clothes you like inside the show window has a discount on the online store, and you want to access it instantly on your phone.
I designed an android application that searches clothes with image. User just need to take one photo, and the app will find out same or similar clothes and return the link of purchase. The technology involved are: image search engine, image processing and image matching alogrithms, android development, cloud image data base deployment, and mobile interaction design.
DESIGN PROCESS DEFINE
RESEARCH
Requirements
Algorithms Interaction
DESIGN & DEVELOPMENT Mobile
Cloud Databse
Search Engine
17
PERFORMANCE ASSESSMENT Sucess rate
User satisfaction
FROM ALGORITHM TO INTERACTION System Architecture
A series of image processing and image matching algorithms are tested to attain the purpose of cloth searching. There are two main algorithms that affects the way user input. Grab cut / Frame Selection
The Grab cut algorithm (2004 Rother Carsten et al.) is able to grab the contour of the clothes and eliminate unwanted parts. To apply this algorithm, a maxim area of the clothes should be garantied. To to that, on the mobile side, the interface is designed to left user drag a rectangle frame to select the area containing the clothes. This interaction is easy and intuitive.
The system is divided into two main parts: • The mobile app, an interface that guides users take photo, apply primary image process, display search results. • The server, which holds a data base of clothes and their feature files. The image searching engine also runs on the server.
Anchor point segmentation / Augmented guides
Demo
Anchor point segmentation algorithm divided the clothes into 5 different areas. After segmentation affine transforms will be applied to the images to eliminate the distortion and other errors. On the interaction side, we introduce 3 anchor points augmented on the camera screen to guide the user to take the right picutres. And we also adjust the algorithm to make these points movable, to ensure a good user experience.
You can adjust the anchor points
18
GALLERIES This sections contains: 1) my sketches during the design workshop and ideation process; 2) my works of UI design, either starting from scratch or copying good works online in a very short time. These demonstrate my skills in Sketch and Photoshop in building final user interface. 3) a short film as a supporting communication material, which I made during an innovation contest in Amadeus.
19
20
Sketches
UI
Practices
Film making
https://www.youtube.com/watch?v=F1SEld5RWfk
22