Hackathon organized by
Helping travelers shop like a local
Background
Project Overview
Team: 2 UX designers including myself, 3 developers
Duration: 2 days
Role: Ideation, wireframing, mockups, visual design
Tools: Sketch, Photoshop
Deliverable: Functional web app prototype for hackathon presentation (host server no longer live)
technologies
Discover APIs: ATM Locator, City Guides, Currency Conversion
Other APIs / Libraries: Google Places, Folium/Leaflet
Backend: NodeJS, Python
Frontend: ReactJS, React Native
Cloud: AWS & Google Cloud Platform
CHALLENGe
Hack the travel industry by using 2-3 of Discover’s APIs to create an innovative solution with the goal of improving the travel experience.
Team
For the hackathon project, I collaborated with 1 other UX designer and 3 developers (one is not pictured). I attended the event on my own and met everyone on my team there. I wanted to challenge myself with working jointly with individuals that I have not had prior experience with.
Project Pitch
Opportunity
Language, currency, shopping culture differences, and lack of market data cause travelers to overpay for local goods
Solution
A mobile app to find nearby markets at travel destinations, learn local bargaining culture, and aid in price negotiations.
API Details & Feature Implementation
CITY guides api
Create city guides to help capture spend with traveling cardholders at accepting merchants in popular destinations
Quality Merchants - Merchants are popular travel & expense places among tourists and validated to accept Discover cards
Map and Location Functionality - Assets to place merchants on a map
Local Market Finder (List) - Through implementing the City Guides and Google Places APIs, we built a tool for users to view a compiled list of local markets that indicates business information, whether or not they accept Discover cards for members, and shows the average bargaining discount that other Haggle users have crowdsourced over time. This is accessed through the Markets tab at the bottom of the screen.
atm locator api
Locate nearby ATMs and cash access locations
ATM locator - discover ATM locations to withdraw cashDirections - Provides mapping and step-by-step instructions to locate participating ATMs
Local Market & ATM Finder (Map) - This aspect of the app was created through incorporating the ATM Locator API along with using Folium/Leaflet libraries.
Tapping on the ‘map’ icon in the upper right corner of the Market Finder List will switch to this tool which gives users a map view of nearby local markets for directions (City Guides API) and ATMs in the vicinity (ATM Locator API).
We recognized that for many international local markets, it’s common for merchants to not accept card so providing easy access to ATMs for cash retrieval is vital.
CURRENCY CONVERTER API
Calculate conversion of one currency to another worldwide
Vast Currency Selection - 151 currencies available for card member to select in the currency converterTrip Planner - Travelers can use this tool to get a pre-estimate of what things would cost while traveling
Price Negotiation Tool - Bargaining prices with local merchants is commonplace in many countries. Prevalent issues for travelers when it comes to doing this with merchants are overcoming the language barrier and not quite understanding how much money is being spent due to unfamiliarity with foreign currency.
This tool helps travelers work through those issues by acting as a live currency converter and by providing a languageless interface for bargaining between buyer and seller.
To use this tool, the mobile device should be held parallel to the ground between both the user and seller as they face each other on opposite ends of the device.
The user enters either their home or appropriate foreign currency and a live conversion of one currency to the other is displayed as they type.
Once the user is satisfied with the amount of money they want to offer, tapping the ↑ button will submit the offer in the foreign currency to the seller’s side of the device.
The offer is displayed “upside-down” on the screen to remove the need to rotate or hand the device back and forth repeatedly to communicate offers.
When the offer is presented to the seller, they can accept by tapping the √ button.
If the merchant rejects the offer, they can tap the X button which reverses the interface so that the merchant can enter a counteroffer.
Tapping the ↑ on their end will submit an offer back to the user to consider. The user is shown the foreign currency price along with a direct conversion to their home currency to avoid any uncertainty about how much they are being asked to spend.
When an offer is agreed upon by both the user and the seller, the user is prompted to provided the approximate original price in the foreign currency.
This input is added into the feedback loop that adjusts the average bargaining discount that is displayed when someone views the details for that corresponding market.
Alternatively, the user can tap the X button to skip providing this information and immediately return to the Price Negotiation Tool.
If the user does choose to provide the approximate original price, they’re given positive reinforcement for helping others.
Tapping on the √ button returns the user back to the Price Negotiation Tool.
Results
We competed against 17 other teams at the hackathon and although we did not win, the overall event was a great learning experience for me in collaborating with others especially under time pressure that I very much enjoyed.
Even though the event was held over 2 days, we only had a little over 24 hours to actually work on the project from scratch including taking the time to learn what everyone’s skillset was and what each of Discover’s APIs offered that we could implement into a feature.
We had another feature planned of a guide that would help educate users on the bargaining culture and practices of different countries but ran out of time to create it. Despite not being able to completing that feature or winning the competition, I’m proud of the fact that we were part of the minority of teams that was able to build a functioning product by the deadline.
Event Photos
