David Williams


Local Advisor



A new take on travel planning



Traveling the world like a local



Local Advisor is a resource that helps travelers experience life as a local — no matter where they're headed. The app connects users with a global network of local advisors: people who advise travelers on how to live like locals in cities and countries all across the world. The advisor program is as interactive as users want it to be, whether they want a few recommendations on local cuisine or a partnered guide in their destination city.


The idea behind Local Advisor came as part of a user experience course at General Assembly. Each person in the program had to identify a product, process or service that could benefit from an improved user experience. Then, they were tasked with researching and designing a prototype that would do exactly that. I chose to address the challenges encountered within travel planning.




The importance of knowing your user



My role began with customer research. Though I initially thought people would want further app integration, those who were interviewed focused more on how they wanted to travel. After finishing the interviews, and after doing some competitive research on the current market for travel apps, I used affinity mapping to organize my notes. The mapping resulted in a few key clusters, though the largest was 'traveling like a local.' Those interviews and findings directly informed the user personas, one of which I've included here.



Sketching, usability and iteration



Once I'd created user personas, I identified the main user flows throughout the app and began sketching rough designs for each key screen. The process went back and forth between sketching, testing for basic usability and returning back to my original sketches — making revisions when necessary. I moved to Sketch after a few rounds of usability testing.


The following are a few of the steps I took from initial sketches through high-fidelity prototyping.



Initial Sketches



These sketches weren't meant to be perfect by any means. Drawn in a few minutes and focusing on stages in the main user flows, the screens I drew initially were meant to test whether users could find (and properly use) the steps in the process.



Information architecture



I also put together a site map based heavily on the results from various rounds of card sorting. The IA you see here is only slightly different from the one included in the final prototype.



Medium-fidelity prototype



I used Sketch to put together key screens and wireframes for pages throughout the product — focusing on the hierarchy of CTAs and information as well as general content strategy.



Annotated Wireframes



Though the prototype I eventually created didn't involve animation, I wanted to create a list of prospective interactions for the (hypothetical) dev team to reference. The full list of annotations can be found here.



Creating an interactive prototype



The last stage in the project (and the prototype) was transferring the Sketch screens to InVision. One last round of usability testing led to a few minor changes in the InVision screens, and I also added a few additional templates in order to cover the full range of the project's page designs. Each page includes hotspot interactions within InVision.


Note: the screens included here aren't fully designed. This was due to the accelerated nature of the course and due to the fact all key interactions took place on the main screens. Content that isn't included would only be supplemental, either adding more branded content or providing more information regarding the app's services.


VIEW THE SCREENS

David Williams


Atlanta, GA