Paula Daneze
User Experience/User Interface Designer & Art Director
thumbnail.png

EXP with
UX/UI Design

EXP with | UX/UI Design
EXP with is a mobile app to help you find, organize and share your best travel experiences.

EXP with is a project I developed during the User Experience Design class at General Assembly in the Summer of 2016. 

PROBLEM
I created EXP with app to solve the following problems:
• Travelers waste a lot of time looking for things to do and planning an itinerary.
• They also have a problem trusting reviews and recommendations from unknown sources. 

  USER RESEARCH   Based on my problem I performed a survey and interviews to find out: who was my audience, the travel apps they use, where and/or whom they get travel tips from, and what’s their travel and social media habits.

USER RESEARCH
Based on my problem I performed a survey and interviews to find out: who was my audience, the travel apps they use, where and/or whom they get travel tips from, and what’s their travel and social media habits.

   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
         
 
       
 Normal 
 0 
 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
       
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}      INTERVIEWS KEY FINDINGS  • Most of the interviewees waste a lot of time looking for things to do when traveling and when they have last minute change of plans in their hometown. • Even though interviewees look for travel tips from apps like Yelp and TripAdvisor, they prefer to trust people they know or influential travel and food bloggers than reviews from strangers. • Interviewees enjoy using social media to discover for new places to go and to share places they have been.  • Check-in feature is valuable for users and help them keep track of places they have been to either come back or recommend to others.

INTERVIEWS KEY FINDINGS
• Most of the interviewees waste a lot of time looking for things to do when traveling and when they have last minute change of plans in their hometown.
• Even though interviewees look for travel tips from apps like Yelp and TripAdvisor, they prefer to trust people they know or influential travel and food bloggers than reviews from strangers.
• Interviewees enjoy using social media to discover for new places to go and to share places they have been. 
• Check-in feature is valuable for users and help them keep track of places they have been to either come back or recommend to others.

 Based on my user research I created 2 personas.

Based on my user research I created 2 personas.

EXP with_persona2.png
   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
   COMPETITIVE ANALYSIS  I developed a competitive analysis with my main competitors: Foursquare, Yelp, Time Out, TripIt and Instagram. 

COMPETITIVE ANALYSIS
I developed a competitive analysis with my main competitors: Foursquare, Yelp, Time Out, TripIt and Instagram. 

  SOLUTION  Based on user and competitors research I decided to include these key features in the EXP with app: • Search page, where users can discover places to go based on recommendations from people they trust.  • Home page that shows the feed of the places users’ friends have been. • Allow users to share posts and upload images, videos or audios of places they have been. • Profile page, in which users can see their saved places and posts, and organize places into different categories to help them planning a trip. • Check-in into places and follow place or people features to measure the app’s success. 

SOLUTION
Based on user and competitors research I decided to include these key features in the EXP with app:
• Search page, where users can discover places to go based on recommendations from people they trust. 
• Home page that shows the feed of the places users’ friends have been.
• Allow users to share posts and upload images, videos or audios of places they have been.
• Profile page, in which users can see their saved places and posts, and organize places into different categories to help them planning a trip.
• Check-in into places and follow place or people features to measure the app’s success. 

   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
   BUILD & DESIGN  Before I started sketching and designing my app, I created 2 main user flows, the MVP and the site map. 

BUILD & DESIGN
Before I started sketching and designing my app, I created 2 main user flows, the MVP and the site map. 

EXP with_BUILD2.png
EXP with_BUILD3.png
   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
  After deciding what was important to include in the app, I started sketching and created a low fidelity prototype with POP app to test the user flows I created. Click  here  to see it. 

After deciding what was important to include in the app, I started sketching and created a low fidelity prototype with POP app to test the user flows I created. Click here to see it. 

   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
  The next step was to create annotated wireframes and UI design using Sketch software. 

The next step was to create annotated wireframes and UI design using Sketch software. 

 I designed the screens using Sketch, created animations on Keynote and used Invision to create the high fidelity prototype.  Click here to see the prototype

I designed the screens using Sketch, created animations on Keynote and used Invision to create the high fidelity prototype. Click here to see the prototype

   
  
 
  
    
  
 Normal 
 0 
 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
   
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
   USABILITY TEST    
  
 
  
     
  
 Normal 
 0 
 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
    
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
    I tested my prototype with 5 different users.        Key findings:   1)  When I asked users to create a new post they were confused between the “camera” and “messages & notifications” icons on the bottom navigation menu. I will redesign the icons and/or implement tutorial on onboarding screens.  2)  On search page, users expected to see highest ratings first.  3)  On place page, users took a while to find the “Check-in” button; the solution is to change the location of the button below “Follow” and “Save” buttons and design an icon for it.    NEXT STEPS    
  
 
  
     
  
 Normal 
 0 
 
 
 
 
 
 false 
 false 
 false 
 
 EN-US 
 JA 
 X-NONE 
 
  
  
  
  
  
  
  
  
  
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
    
 
 /* Style Definitions */
table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-priority:99;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Univers LT Std 45 Light";}
 
    • Design interface for business account • Design onboarding screens • Fix issues found during user testings • Marketing • Funding • Additional features 

USABILITY TEST
I tested my prototype with 5 different users.  

Key findings:
1) When I asked users to create a new post they were confused between the “camera” and “messages & notifications” icons on the bottom navigation menu. I will redesign the icons and/or implement tutorial on onboarding screens.
2) On search page, users expected to see highest ratings first.
3) On place page, users took a while to find the “Check-in” button; the solution is to change the location of the button below “Follow” and “Save” buttons and design an icon for it. 

NEXT STEPS
• Design interface for business account
• Design onboarding screens
• Fix issues found during user testings
• Marketing
• Funding
• Additional features