Trip Premium - Interface design for travel planning service
- Apr 19, 2016
- 4 min read
Trip Premium UI design is created by the team of:
Anderson Wang, Pengfei Guo, Tiya Hsieh, Laurinda Yao
Ideation
Our group chose travel as context to work on since travel has been a very popular activity in people’s life in current days. As of today, there are about 1 million people in the world are using mobile apps and there will be about 1.6 million people will be using mobiles apps in 2015. Another reason why we chose travel as our context was because all our group members are all travel fans. We found out that existing travel apps don't have that many options to fit the travel needs of the young generation. So we decided to generate a travel app that provides more options to increase user satisfaction. For example, it allows people to join into other trips that have been created/customized by other people around the world. So people can enjoy their trip as a group when they don't want to travel alone.
User Study and Building Frameworks
Audience: people who would like to travel
Goals: help them find interesting activities/events and travel mates.
Ideas: this app allows people to customize their own travel plan and invite other people to join in their travel group. The idea is that one person to initiate the travel plan, which set the destination(s) and categorize into a specific domain, and other people can join in easily. People who would like to go on the same trip will join in a group that allows them to discuss the activities/events at their desired destination(s).
In order to create an user-centric product that fulfills the expectations of the target audience, we created three personas to represent the different groups of end-users.
f27fac_93d434264b364662b6601e1d4d335d59 f27fac_910448d170c54c7e8b1af902d85c5197 f27fac_1f0d6b4876d1420ba6fccedc55fe02de
Crafting UI Elements
In order to a create vibrant interface, we composed a series of color theme palette and button designs. These elements helps the team to build up the interface brick by brick till a complete informatic structure is framed.
f27fac_7947e90d330d41b6b8f26e94ed2171be f27fac_19e4bcd1e41f445b9291f3d452214508
In terms of font selection, we chose Open Sans and Helvetica Neue as the typography style. These two fonts provide the most natural reading experience while being widely supported on different platforms.
Low Fidelity Prototype
As at the low fidelity prototype phase, we used wireframe method to play around with the interface appearance.
We also created several tasks to represent the functionality aspect and the interaction that end-user will be performing.
f27fac_3fbc656f32304fbe913f7826840e2672 f27fac_df6f2067b4b3486bb793de3d82066ec8 f27fac_249faf1ac584496c8bb62bc41a2b2d65 f27fac_26d9564deff94856abf5912984a4f2ce f27fac_a3119b1611004b6bbbf52016c47bd16c f27fac_e9c0c7f572f74fa384a155a1f542d32a f27fac_d581dffbebdf46c2b3af98437bb1ed88 f27fac_7ac3683497ed4ab2860e36157d4d0939
User Testing, Prototype Refinement
1 2 3 4 f27fac_9a3ad47ccd0d4d8db8cb58ecd6b7d3a4 f27fac_3bd32e77fd524625b6a7aff8854685d0 f27fac_0cef0ed70117456997cc80aa79eb3372 f27fac_69171bd9948d4eebbc2215c59c1f06b3
User Testing Plan Scenarios:
You are the constructor and you are planning to take a vacation after this project, which going to one attraction near the current location with your family.
You are planning to take the annual vacation in the next month, you are planning to travel to somewhere else. You do not want to travel alone and want companions to join your travel. So you want to initiate a trip with selected default package and post to the public.
You are an international student in Canada. You just finish your university life and you want to have a relax and de-stress vacation, which is preparing for your working life. So you want research some places that may be interested and customize your trip by yourselves. Additionally, you want to travel with new people who just join to your trip plan. Participants:
Testing method: Our user testings are mostly done with interview and survey in person. We create scenarios for users to complete the task so that users would be fit in the situation. We use think aloud method and survey to test our users. We want to find out the efficiency of our interface.
Test conductor roles:
Anderson: take notes during testing
Pengfei: take notes during testing
Laurinda: Introduce our app to participants and organize the testing
Tiya: asking participants addition question after they complete the test and take notes.
User test procedure:
To process the user testing, we will meet our participants and introduce what our purpose is. We will ask them about the first impression of seeing the interface. Then, we provide our scenario for users to complete their tasks, while we record what they are talking during the testing since think aloud method.
Finally, we have exit testing survey that help us to understand what the users’ ideas/thoughts on using our interface if they are going to plan a travel. We introduce our app and explain our concept to users.
Also, we want to get participants’ permission to record the process. Then we ask they to sign the consent form. When the testing starts, we ask users to do the 3 tasks and interview them after the testing. One or two of our teammate will observe the user and take note.
After we done the testing, our team use the recorded video to review what we miss on the note.
Goals:
After every user finished their user test, we will collect all the questionnaire forms from participants. We will separate their answer in terms of quantitative and qualitative data.
We also create ethnographic for any quantitative data we collected such as time of completing one task and how many errors users made. So we can analysis the data and understand how efficiency the users would be using the interface and whether the app is easier to learn when the participants first time using it.
What is more, we can understand the aesthetics of our current interface is based on qualitative data such as ask them the first impression when looking at the app home page.
High Fidelity Prototype Presentation
page 1 page 2 page 3
For interactive prototype created by Axure, please visit:
http://s0xes2.axshare.com/#p=home
Comments