The goal of hackathon is to create a functioning app within 3 days while solving a real-world problem and incorporating Esri GIS technology. As my team did not have a single geographer, we had to figure out how to utilize GIS to the app.
As a newcomer in town who enjoys walking and exploring, I am unsure about the safety of the neighborhood and how to discover local treasures while wandering around.”
“I’m Seeking guidance on how to have a safe and fulfilling walking experience."
It's not just a routing app!
It does have routing suggestions and navigation just like Google Maps. However, the goal of this app is not to give you the most efficient route. It gives you a safe route, a route full of local treasures, and of course, the fastest route.
Most importantly, it gives you options to go for a walk based on how much time do you want to spend. How about going for a good 20-minute walk?
It helps you choose safer routes with pleasant surprises.
Incorporated with a crime API, the map visualizes crime data that you can toggle on and off. If you choose a safer route, it will lead you to not the safest, but certainly a safer route.
Have you noticed the pop-ups while walking? They are local treasures that other users registered on the app. Click and see the details. If you like it, reroute to go and see the spot.
Explore and report hidden gems while walking!
Look, there's a cool-looking statue! You gotta share it with all the other fellow walkers. Click on the report button that will lead you to an embedded Survey123. Take a photo, describe what you saw, and submit! You can see all submissions on ArcGIS Instant Apps as well.
Congratz, you now have your own route!
Once you arrive, the app shows you the summary of your journey with all the local treasures you encountered or passed by. Save the journey if you liked it!
We have successfully developed an advanced iOS mapping application that seamlessly integrates ArcGIS maps from ESRI, providing users with real-time tracking of their current position. The application boasts a sophisticated search bar equipped with Geocode's autosuggest functionality, ensuring the swift autocompletion of destination addresses. Our solution leverages FindAddressCandidates from the REST API to perform precise address geocoding, facilitating the identification of optimal routes through the utilization of the RouteResult within the REST API. By incorporating Enrichment Services, we have enhanced the map's utility by enriching it with valuable crime data and points of interest, providing users with comprehensive information. To further augment user experience, we have thoughtfully integrated multiple web views, enabling users to visualize and explore various points of interest. Additionally, we have seamlessly integrated ESRI's Survey123, empowering users to easily submit hidden gems and report issues related to places of interest directly through the application.
The goal of hackathon is to create a functioning app within 3 days while solving a real-world problem and incorporating Esri GIS technology. We tried not to solve too big problem because we had such a short time, ended up finding a trivial yet disturbing pain point: reapplying sunscreen several times a day.
“I know I have to apply sunscreen every 2-3 hours but I keep forgetting. Someone should remind me of it.”
A sunscreen reminder app with push notification
Many people apply sunscreen every day but not all of them reapply regularly. It may be because they don't know they have to, or they are too busy caring about it. UVengers calculate reapplication time based on users' activity and sunscreen type then sends push notification on users' mobile.
Data visualization with aesthetic✨ on the dashboard
Home screen provides several different information at once: time left, start button, user status card, UV level visualization card. It aims to look colorful and cute with vivid colors and illustrations so that encourages users to come back not only for the function but also for its design.
Incorporating GIS technology and monetization
One of the main goal was to use ArcGIS on the app, since this was Esri hackathon. Our GIS specialist team member created UV map using OpenWeather API and categorized UV level into four. Different colors and sizes of the sun emoji indicates the level of UV, letting users know the UV level of all states.
For a monetization purpose, I included shop page on the app. We did not pursue this idea too much, but my idea was to partner with beauty brands and link their sunscreen products pages on the app.
Because of the time constraints, we did not conduct a user research and instead focused on figuring out which type of users would need a sunscreen reminder. After a series of brainstorming, we decided to build a sunscreen reminder (timer) that sends push notification and shows UV level in real time based on the location to both inform the users and incorporate GIS. Additionally, we used ArcGIS SDK and OpenWeather API each to display users’ location and UV level. Initial thought was to personalize timer based on the UV level of the user location but it was disregarded as we found that there is no such instruction in applying sunscreen. After a short secondary research, we found that experts recommend reapplying sunscreen every 2 hours, and every 40 minutes for swimming and outdoor sports. So, we categorized activities and added pop-up screen asking current activity when the user starts the timer.
Home Screens
Home screen has 2 different goals; 1) setting up the timer and 2) status visualization. Bright orange color start button guides users directly to start the timer. Two cards on home screen each represents user status (exposed or well protected) and UV level with cute illustrations.
UV Maps
The other main feature is UV map that brings web app from ArcGIS. UV level is numeric value but we categorized into 4 levels; very low - low - high - very high, each level differs colors and size.
SUN GIFs
Shop
Shop screen potentially partner with beauty brands such as ULTA or sell advertising to sunscreen makers.
My Sunscreen
The app shows warning if the user’s sunscreen SPF level is too low (under 30), as experts recommend using sunscreens between SPF 30-70.
Working on my very first UX design project, I'm proud to successfully complete the tasks within a short timeframe. It was my first hackathon experience as well, and I learned so many things from it. I learned how to collaborate and communicate with experts in various fields, using their words and compromising. I was able to show creativity by leveraging skill I had, even the skill I acquired a few days earlier from the hackathon such as Adobe XD.
As a UX designer AND a marketer, I filmed a presentation video in a form that nobody chose. Each team had to make a presentation video without specific format so I took advantage of the rule and ended up making the most creative one. While other teams recorded a PowerPoint presentation, I instead filmed each of my team member talking about the product and their roles. Later I edited the video to insert a small screen next to the member's face and the screen interactively changed as they talk. The video was taken in front of Esri cafeteria, where greens and blue sky play as a beautiful background, which made the video even more stand out. We got 9.5/10 in presentation, the highest of all. At the end, UVengers won 1st place by Esri Intern Hackathon judges and 2nd place at the final.
I'm not allowed to change or develop this project since it's owned by Esri, but I was allowed to present the project as my portfolio. These are the things I wish I have done:
1. Conduct a usability testing. There was no time to test the app even within the team. I would definitely conduct a usability test to see if the tasks are easy enough.
2. Spend more time to communicate with the engineers.
3. Know what's possible and impossible so that my design would be on the ground.
