As an outcome of the global pandemic, more and more people have been reconnecting with nature to escape from pandemic anxiety. In a recent IPSOS poll, 94% of respondents credited nature for helping to relieve the stress and anxiety brought on by the pandemic. In a world where people are spending more time indoors under fluorescent lights and in front of computers, the great outdoors has become the great escape away from the glow of screens at home.
With easing restrictions and a sense of normalcy on the horizon, we recognize that mental and physical health challenges are not exclusive to the pandemic alone. It is for this reason that we believe ongoing prevention efforts to mitigate these conditions is imperative to ensure people and families can thrive both mentally and physically more than ever before.
As fellow human beings and technology enthusiasts, we’ve identified an opportunity to utilize our skill sets and Ford API technology to create a product designed to support and encourage Ford drivers to use their vehicles as a means to get outside and explore the beauty of their local communities and beyond.
The Trust for Public Land estimates that 100 million people in the U.S., including 28 million kids, do not have a park within a 10-minute walk from home. According to an article published by the New York Times, “even just 20 minutes per day spent in nature can lower stress hormone levels, boost self-esteem and improve mood” and that “escaping to a neighborhood park, hiking through the woods, or spending a weekend by the lake can decrease blood pressure and reduce the risk of asthma, allergies, diabetes and cardiovascular disease, while boosting mental health and increasing life expectancy”. Further to this, a recent survey of 1,000 Americans, published by TELUS International reports that:
In times of increased stress and anxiety, hiking trails, parks and other open spaces offer cooped-up individuals a welcome escape. However, not everyone has the benefit of living near natural landscapes or parks they can visit every day.
How Might We...
How might we design a product for Ford drivers to alleviate the mental and physical health effects we experience from spending too much time indoors so that we can build and support communities of healthier, happier people and avoid adverse outcomes for the future?
Introducing… Ford Adventure
Ford Adventure is a web-based solution designed to encourage driver's to explore the world around them using their Ford vehicle. Spending time in forests, hiking in mountains, visiting a beach, and just being outside can lead to significant health benefits which is helpful for our overall well-being. Connecting with nature gets through to our brains and bodies, and with a line-up of vehicles like the Escape, Expedition, and Explorer, the Ford Adventure web app feels like a natural companion to the Ford experience to get drivers to get into their vehicles and embark on an exciting adventure.
What It Does
The Ford Adventure web app runs a periodic check on the user's vehicle, then based on the outcome of the vehicle's levels (i.e., fuel, battery, etc.) the app will suggest to the driver various location options within the radius their vehicle can easily travel to based on their fuel level, oil life, and battery charge, tire pressure, and more. For example, if the user has a full tank of fuel, a charged battery, a recent oil change, and good tire pressure, the adventure locations they’re presented with would include a wider range of options knowing their vehicle can safely take them there. The better maintained their vehicle is, the further their vehicle can take them. If a vehicle has been poorly maintained, the user will be limited to location options within a smaller radius from their location.
To enhance the experience beyond a simple select-and-go model, we’ve gamified the process and integrated a social networking angle to ensure users are consistently motivated to continue using the app on an ongoing basis. This includes a photo feed where users are prompted to upload a pic from their adventure to share with other members of the Ford Adventure community, a leaderboard and points system where drivers can earn points for selecting further distances, going on more adventures, and maintaining their vehicle, as well as a badge system where drivers can earn badges for each location they visit - much like collecting national park stickers or badges by avid park-goers.
How It Works
A healthy lifestyle shouldn’t be complicated. It should be automated. By following similar practices used by couch to 5K apps and other fitness products that utilize push notifications to encourage people to get up and get moving, we’ve implemented this strategy into the Ford Adventure app to prompt drivers via SMS notification to select a location, get in their vehicles, and go explore somewhere new.
For drivers who wish to use the app without being prompted, they can easily open the app which would take them to a dashboard consisting of the photo feed, leaderboard, and their earned badges. An easily accessible hamburger menu provides quick access to the “New Adventure” option where users looking for potential date night ideas, weekend road trip suggestions, or even just a quick escape to get away from the confines of home for a few hours can easily do.
Who Is It For?
According to the CDC, “mental health conditions are disproportionately affecting specific populations, especially young adults”. We believe that consumers in the 16-29 age bracket are the primary target for Ford Adventure as this age group is among the most technologically savvy and the most deeply involved in social networking. This segment is closely followed by the 30-44 year old age group comprising young families with kids, becoming suburban homeowners and buying vehicles such as the Ford Escape, Bronco, or EcoSport that can accommodate this lifestyle. It is for this reason that we believe Ford Adventure could be a welcome addition to the Ford smart vehicle ecosystem.
When Would They Use It?
After identifying who we were designing for, we then began to think about why they would use the app. We determined that some of the most likely scenarios could include: date nights, weekend escapes, road trips with friends, family outings, and more. There are a multitude of scenarios in which drivers may feel the urge to get outside for some fresh air or experience a change in scenery, which is why we believe Ford Adventure is positioned to do well across a wide audience segment throughout Canada and United States. For drivers with access to a Ford vehicle, access to natural spaces is a barrier that can easily be broken, giving drivers quick and easy access to suggested escapes however far their vehicle can travel.
When designing this app, our primary goal was to ensure that it didn't function as a novelty product, but one that provides value to both the business and consumer. The Ford Adventure application has been designed to:
(a) Break down barriers and access to natural spaces to improve the mental and physical health of Ford drivers.
(b) Encourage more consistent vehicle usage.
(c) Build and establish an exclusive community of Ford drivers.
(d) Position Ford to have a unique edge among the competition in the automotive market.
(e) Strengthen brand loyalty while forging a deeper connection between Ford and Xennials, Millennials, and older end of the Gen Z population.
(f) Deliver a unique low-cost and low-risk marketing tool to showcase where Ford vehicles can take you.
(g) A social and gamified user experience to encourage regular app usage.
How We Built It
The Ford Adventure app is built on top of a number of OSS tools. The application is a Serverless React app, built with NextJS, and served on a CDN by Vercel. The UI templates are composed using ChakraUI React component library. The animations are created by composing JSX templates, using Framer Motion. The DB is a Supabase Postgres server, and handles Authentication as well as storage. NextJS runs a small Node server, and hosts static pages, as well as dynamic pages that are built on the server with each request. At build time, static pages are saved to be served by a CDN. This makes page loads load almost instantly. We use React props and state to show and hide loading states inside templates. The individual pages of the app are React components, and the container of the app handles authentication between Supabase, as well as the Ford Connect API. Ford Authentication is done with cookies, using OSS libraries to fetch and store session data in NextJS.
Scope Creep The struggle is real. As our concept started to come to life, so did more ideas about how we could make the product bigger, stronger, and better than ever before. Thankfully, we were able to keep ourselves in check for the most part while fresh and fun ideas came to mind for ways to integrate new features to the app, change the way something looks, or even how the driver might navigate the product.
Loss of Group Members Life happens. We get it. Unfortunately throughout the process we started to see a drop off in group members due to other work, school, or family obligations.
Technical Challenges A lot of time was wasted trying to mimic Instagram's horizontal Stories UX, only to find out that recent updated to iOS Safari was causing the animations to stutter. We tried three libraries before giving up. We also abandoned an attempt at rendering the car in 3d, using ThreeJS.
This was an ambitious project but one we're incredibly proud of. We started off as a larger team of 8 who brainstormed ideas for a product concept that could be viable and achievable given the tight time constraints. The scope and ui/ux were ambitious for an app that would be rendered within the web browser. There are definitely things we would do differently next time, or moving forward, but for a concept as ambitious as this we're pleased with how much we were able to conquer as team members dropped off at various points throughout the challenge. Further to this, the team had almost no Database or AuthO experience. Our team was able to develop the user authentication, posts feed, post tags generation, profile page and geocoding; as well as database design, boilerplate code, setup authentication mechanism the overall system architecture and code design.
Learnings & Takeaways
Kori I always welcome opportunities to learn from different developers in terms of how to design better interfaces that can be developed quickly and efficiently. Working with a range of developers has helped me understand different practices for better hand off, enhance communication between teams, as well as gain a deeper understanding for how to strengthen the workflow between designers and developers.
Shri “Trying and failing is better than not trying at all”. Through this hackathon we were presented with unique opportunities and challenges to apply what we already know and learn new things. I feel blessed to have the opportunity to work with exceptional people who are as passionate about creating something remarkable, as I am. As a software engineer, I strive to solve problems and help people make their lives a little bit easier. This project has excited me and humbled me at the same time. The sheer breadth of possibilities to this has made me understand how far I have come, and how much more there is to learn. I loved working with my teammates and learning new aspects of design and architecture. This app would surely be a bar-raiser in the IT industry.
Pushkar I was fortunate enough to get a chance to work with the subject matter experts of Software Engineering and UI/UX domain. By observing the way team-members worked, I learnt how to call an API, design cutting edge user-flows, understand AWS structure diagram and formulate the Technology Stack for our Ford Adventure project. I also explored the QR code functionality which we are planning to implement down the road. I was able to complete low fidelity and medium fidelity wireframes. I would love to learn more about Web and App development and try to implement next time.
Matt When we started building the UI, My goal was to pre-build pages statically to improve page speed. However, when dealing with a custom OAuth provider like Ford Connect, I had to figure out how to handle cookies when building static pages with React and NextJS. I also became more familiar with SQL, Postgres, and particular the Supabase service.
What’s Next for Ford Adventure?
iOS & Android Compatibility Although the web application is a great start, our choice of platform was selected based on the area of expertise among each of our team members. Going forward, our UI/UX overhaul would also place greater emphasis on building a native application for the Ford Adventure experience.
Additional API Integration When users are notified of their vehicle requiring maintenance, we would like to offer them recommendations for the closest Ford Dealership where they can get their vehicle taken care of, and also include a fuel API to suggest the nearest gas station when fuel levels begin to run low.
Improve the UI & UX Rome wasn’t built in a day. As the UI/UX designer of the project there are definitely some improvements I would like to make should the opportunity present itself. When the initial app was designed, responsiveness across different screens and platforms was the main concern while also working under tight time constraints to develop the final outcome from finding a team to generating an idea to developing the final solution in a month.
Invite a Friend With more time to develop the social networking aspect of the app, one idea that was discussed was the possibility of including a QR code drivers could use to add other Ford drivers to their networks. The purpose of this would be to encourage meet-ups and build stronger social connections and brand loyalty among Ford drivers.
Give Life to Dead Links Given the tight time constraints of the hackathon, we decided to focus on developing only what was necessary for our MVP solution, which sadly means there are deadlinks within the current iteration of the app. Under the hamburger menu certain options such as “Profile” or “Settings” are not currently functional; however, if the app were to launch publicly we would certainly want to ensure all links meet the user’s expectations.
Details Matter There are so many details I wish we could have included in the initial MVP solution, such as the option to search for photos based on tags, or the overall swiping functionality of selecting an adventure. However, with time being a key issue, we needed to focus on the foundation of the app before building upon it.
“For Pandemic-Weary Canadians, Nature Is a Relief.” NCC, 28 Jan. 2021, www.natureconservancy.ca/en/who-we-are/news-room/news-releases/for-pandemic-weary-canadians.html.
“Mental Health, Substance Use, and Suicidal Ideation During the COVID-19 Pandemic - United States, June 24–30, 2020.” Centers for Disease Control and Prevention, Centers for Disease Control and Prevention, 14 Aug. 2020, DOI: http://dx.doi.org/10.15585/mmwr.mm6932a1external_icon
Randall, Cassidy. “Why Going Outside Is Good For Your Health, Especially Right Now.” Forbes, Forbes Magazine, 9 Apr. 2020, www.forbes.com/sites/cassidyrandall/2020/04/09/why-going-outside-is-good-for-your-health-especially-right-now/?sh=6f2f94392de9.
Sheikh, Knvul. “How Much Nature Is Enough? 120 Minutes a Week, Doctors Say.” The New York Times, The New York Times, 13 June 2019, www.nytimes.com/2019/06/13/health/nature-outdoors-health.html.
Westfall, Chris. “Mental Health And Remote Work: Survey Reveals 80% Of Workers Would Quit Their Jobs For This.” Forbes, Forbes Magazine, 8 Oct. 2020, www.forbes.com/sites/chriswestfall/2020/10/08/mental-health-leadership-survey-reveals-80-of-remote-workers-would-quit-their-jobs-for-this/?sh=12052a8e3a0f.