Week 9

This week, we were basically finalizing all the final products of our project.

We created the video based on the scene we shot last weekend, added in some screenshots and a voice over describing the app we created. We were also working towards delivering our final deliverable, which is the high-fidelity interactive prototype. As requested by the school, we also wrote a draft for our final project report and created a draft deck for our final project presentation. Everyone in our team was working very hard toward wrapping up this project and we were all very excited to see the final result.


Week 8

This week was busy!
We were able to update our prototype and get it ready for a second round of guerilla testing. We also added visual style to the prototype which made it look a lot more “real” which we felt help users understand the concepts better. We tested our prototype with 6 users on Thursday Feb 26th. Some highlights include:

  • Overall, we are still “ on the right track”
  • Positive findings:
    • App seems useful and something user can imagine using in context
    • Users like switching between map/list view  (improvement opportunities exist for this)
  • Opportunities
    • Onboarding – a little confusing, users would like to skip part of this, not all of it
    • Activity detail page – a few user flows/interactions aren’t expected as is
    • minor and ixd and visual issues (back, clickable or not)

After testing completed, we met as a group and went over the results in full. From there, we printed out copies of all of our screens and went through changes to make based on findings and our own thinking. We’ll be wokring on getting this updates in now, and we prioritized them so we know what’s the most important, and what are just “nice to haves”. Since we have a fixed timeline, this was a critical step in the process.


In parallel, we are building out a high fidelity prototype in HTML/CSS.  This work is already underway, but it’s about to become the center of attention as we aim to have this completed by next Monday (3/9).


Another major activity that took place this week was working on our product video, which is also due next week. Last week we mentioned we had storyboarded our initial idea – over the course of the week we fleshed out the script and on Saturday we spent a few hours filming and recording the audio. We also took a few photos to incorporate into our final poster.


We’ll be editing the video from here in After Effects, and once the high fidelity prototype is done we will add a later of it to our video too.


We have a lot to get done in a week but we are confident we can do it! Stay tuned for our progress next week.


In the last week:

  • We did a gorilla usability testing on students in UW to gather feedback for our App. Overall, the participants liked the general idea of our app. The main take-aways from the test are:
    • The participants were confused about the status (offline or online).
    • Too much information is on the onboarding page.
    • Different icons should be used to show “eat”, ”drink”, ”sleep” and “do” on the map.
    • “Home” is confusing (home page or real “home”).
    • Distance should be shown to users when they click attractions on the map.
    • Add sign in/up page.
  • Based on the feedback gathered from the test, we improved the fidelity of our wireframes and start adding some material design element into the design.
  • We started brainstorming for the video and the poster. We have created some initial idea for video and poster.
    • We do not want a text-heavy poster. In order to attract people’s attention we choose to use a big image as a background and apply a small number of texts at the corner of the poster.
    • WP_20150221_11_29_42_Pro
    • The video is about a story in which a backpacker encounters lots of problem when he travels in Germany and Backpacker helps him to solve all the problems he has.
    • WP_20150221_11_23_20_Pro

Next step:

  • We will start coding an interactive hi-fi prototype and have a final test to iterate the design.
  • We will finish the video script, based on which we will film our video.
  • We will create the poster.

Week 6 Recap

For the last week, we presented our revised wireframes and user flow to our peers in class for feedback. We narrowed down our app to focus mainly on the transportation pain point per our client’s feedback. We presented how each screen would work individually and in flow; and our peers gave us some very valuable feedback.

20150214_111800On Saturday, we discussed some design updates that we are thinking about adding to our app later. These updates include tools, on-boarding experience, offline indication and etc. We also prioritized them so that we are not adding all of them at once in which way would be a huge change to our app. We were also prioritizing them in a way that some of them are “need to have” and some of them are “nice to have” feature.



We also discussed how we can keep testing and iterating our wireframes. We also started to explore some colors for the visual design of our app. Hopefully for the next week, we are able to create a color scheme for our app.

Color exploration



Week 5 Recap

Can’t believe that we only have 4 more weeks to push to the finish line.

To recap what we did last week, we developed user stories, user scenarios, user flows, and site map. We also started to develop low fidelity prototype using Sketch. Sketch is a new tool that I started exploring for this project. This prototyping tool is very easy to use and have a very short learning curve. The amount of outside resources (such as templates) for this tool is also impressive.

We presented our app concept to the client. The client liked the direction we’re going but felt that the scope need to be focused even more to serve that users’ single pain point when backpacking. After listening to our client’s feedback, we took a step back and went back to our drawing board and refined our concept. We listed the 5 categories of our users’ pain points: transportation, language, culture, safety, and social. We then went back to our interview scripts and highlighted interesting statements made by our users and wrote it on post-its.

IMG_6226IMG_6204We did card sort activity to find some patterns and to prioritize features. We saw user comments like, “Transportation delays is probably the biggest gripe.” and “…the biggest frustration is also transportation… and you can get really lost because of that, then trying to figure out where I am.”. From there we decided on focusing to solve our users’ problem with transportation.

IMG_6195Once we decided on our focus for the app, we went back to the whiteboard and refined our concept. We did mind map activity to brainstorm ideas and to make sure that we covered all of our grounds. We also made sure that we were aware of our users’ goal and what we wanted our users to think and feel when using our app.

IMG_6201We also defined and refined our main user flows and then screen flows.


Next steps for this week is to build these wireframes digitally and put them in front of our users to respond and give feedback to. From there we do quick iterative testing and prototyping technique. We are going to build the wireframes in Sketch and bring it into Invision to add interactivity.

For the results of our testing, look it up on next week post.

Week 4 Recap

Well, week 5 is already underway which means we are HALFWAY done. As grad students, that excites us as much as it frightens us. Here’s what progress we made last week.

We started by creating a second version of individual sketches and gathered feedback from peer review. In order to make the sketches easy to share and eventually test, we decided the second version should be focused on a more complete user flow instead of independent features.


After we received feedback, we were able to combine common features into one “set” of 9 screens. We shared these concepts with 2 users that meet our persona criteria last week to get feedback on the features.

Survey findings

We also started drafting our user flows. These will help make sure the interaction and overall IA of our app work cohesively for our users.

It was great to get early feedback form users and has helped us make some scoping decisions. We’ll be meeting with Expedia this week to share our latest design and make sure we get any input or ideas from them.


Now we will be focusing on iterating on a new design and flow and putting these wires into digital form for testing. We are also starting to build out our sitemap, create a visual inspiration board, and sending out a testing screener to gather more participants.

More soon!


In week 3, we came up with some ideas and sketches separately based on the user research. The sketches were mainly focused on independent features that can solve the problems that travelers usually encountered during their trips.


In the weekly meeting, we shared and critiqued the sketches and selected the features and interaction we like.


We categorize the “liked” sketches into 5 groups, which are shown below:

  • Map
    • First screen
    • Poke + hello
    • Hostel recommendation
    • Filter search
    • Off screen attraction summary
  • Activity suggestions
    • Weather based suggestions
    • Suggesting new country
    • Recommend ideas based on destination
  • Tips + resources
    • General (city or country info)
    • Language, money, tradition …
  • Direction
    • Activity description
    • Plan B
    • Google map, One bus away integration
  • Profile Setting & Preference
    • Set travel style (score 1-100)
    • Set group size
    • Duration
    • distance

And then we listed the user stories and mapped them with the 5 groups of sketch ideas to make sure that we covered all the users’ needs.


The next step is to create the second version of the sketches and to gather feedback from peer review and the meeting with clients from Expedia. In order to make the sketches easy to test, we decided the second version should be focused on user flow instead of independent features. We are also looking for travelers who are willing to attend our usability testing.