Hackathon organized by
Helping travelers shop like a local
Background
Project Overview
Team: 2 UX designers including myself, 3 developers
Duration: 2 days
My Role: Ideation, user flows, wireframes, mockups, redlines, visual design
Tools: Sketch, Photoshop, paper and pencil
Deliverable: Functional web app prototype for hackathon presentation (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 during team formation. I was looking 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) - This is accessed through the Markets tab at the bottom of the screen. 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 and whether or not they accept Discover cards for members.
I contributed the idea to display the average bargaining discount that other Haggle users have crowdsourced over time.
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 language-less interface for bargaining between buyer and seller.
I came up with the idea to have the device be used by both the customer and merchant at the same time. The offer sent is displayed “upside-down” on the screen to remove the need to rotate or hand the device back and forth repeatedly to haggle. To use this tool, the device should be held parallel to the ground between both the shopper and seller as they face each other on opposite ends of the screen.
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 shopper 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.
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 they can enter a counteroffer.
Tapping the ↑ on their end will submit an offer back to the shopper to consider. The shopper 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 shopper and the merchant, the shopper is prompted to provide the approximate original price in the foreign currency. Selections are calculated by percentage buckets in the backend.
I proposed the idea to gather this data so that users can view the average bargaining discount when looking at the details for any market. This input is added into the feedback loop that adjusts this amount.
If the shopper 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. This included taking the time to learn what everyone’s skillset was and what each of Discover’s APIs offered to determine how they could be implemented into a feature. It was an interesting and different experience having to produce something that was not as polished as I would normally like due to the nature of hackathons and their short time limits.
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 implement 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. The event overall has given me better insight on the dynamics of collaborating on a team that carries out different roles.
Event Photos
