Travel Collaboration Mobile App

Scenario Mapping

I developed a scenario to describe the stories and context behind why a specific user would encounter this website/app. I noted the steps and goals and defined the possibilities of how the user might achieve them with the product. I would use this scenario throughout my design process.

Scenario:

A group of college friends have decided to plan a trip to New Orleans together. They need a collaboration tool that will allow them to virtual share and save ideas for the trip such as bars, restaurants, hotels and other attractions they want to visit.

Paper Prototype

After sketching a few iterations of my product, a created a paper prototype of a mobile app I named "Travel Collab". I chose a mobile-first design because I anticipate users will want to use the app while they travel and are away from their computers.

The paper prototype allowed me to quickly test with my roommates, but I also created a digital prototype in Marvel to test with a larger audience.

Paper Prototype Testing Insights

• Users wanted pre-populated boards of popular destinations

• "Continue" button should be disabled until user names new board

• Users needs to see validation that board was created before sharing with others

• Onboarding process was too long

• "Start column" vs "Add column" is too vague

• Filter button was not intuitive

Low Fidelity Prototype

I turned my paper prototype into a digital low-fidelity prototype using Balsamiq. I updated my design based on feedback from the original testing.

I conducted several remote, moderated tests using the "think aloud" protocol. I tested several tasks including creating a new board and adding a location to the board.

Low Fidelity Prototype Testing Notes

• "Home" icon in top left corner is too ambiguous

• Give users a list of categories and also option to add new

• "Tool tip" examples were confusing to users

• Users want to see location price ratings, customer reviews, phone number

High Fidelity Prototype

I reiterated my design and created a high fidelity prototype in AdobeXD. I focused on creating an organized and helpful interface using design conventions consistent with iOS apps.

High Fidelity Prototype Testing Notes

• Users would want to see details of location before adding to board, even if location is known

• Users wanted to add comments to posts (ex. "try the dumplings here")

• Users wanted to add to "favorites" from detail page

UI and Branding

In my final designs, I made some adjustments based on the last round of testing, updated the UI, and applied branding and stock images. I utilized mobile interface elements and graphics that are visually clear, with a distinctive color palette.

I added more white space between each section on the homepage, increased size of the buttons to make it easier to tap on, decreased text length so that the items were easier to read.

See final presentation for screen annotations.

Conclusion

This project allowed me to practice iterative prototype testing at various levels of fidelity. After each test, I incorporated user feedback into my redesign. Overall, it helped me to build my interaction design and problem-solving skills.

I learned that it is important to get users' reactions to the overall idea before moving on to specific features or details. It's also important to make sure that the user can see their own problem being solved by your product.