How can you utilize technology to engage the community in the city's parks and recreation?

For the AT&T Parks and Rec hackathon, I came together with a team of three other developers to create a mobile application that would make it easier for people to enjoy the outdoors in the city of Seattle. My idea was to create a "sunshine finder" to help people locate and enjoy the best sunny spots.

Role: Ideation, UX Design, Visual Design

Wireframing and Ideation

The initial idea was to have a map static on half the screen, while sunny spot "cards" were listed below. Each card would have a mini map, the address of the location, and the distance from the current user's location. 

Once the user clicked on a card, they would be taken to the detail page of the location. If the location was a public place (such as a park or a beach), the detail page would list amenities, ratings, and photos.

The "double maps" felt too redundant, and was scrapped. The amount of photos people would submit was questionable, and thus was limited.

A) We could either get rid of the static map, or replace the thumbnails with pictures of the location instead of another view of the map. However, the map was still very small in both these views-- it would be difficult for any person to use the app to locate an area as we intended for.

B) We looked towards simplifying the detail page to photos of the location and details about the park. If we got rid of the location-specific map view in the previous screen, we could show it in the detail page.

C) The winning frame! Enlarging the map allowed us to give users the information they needed up-front, as soon as they opened the app. The cards at the bottom can be swiped left and right to shuffle through nearby sunny spot options.

D) The detail page was also refined, taking out the map for redundancy and introducing customer reviews of the location.

Building and Creation

After a night of junk food and problem-solving, this is what we created...

The use of icons made it easy to understand what parks and public areas had to offer. The pins brought more attention to public spaces...

... whereas the yellow dots indicated sunny areas that were more private (right). 

The circle icon on the right of the screen indicates the position of the sun in real-time. Our team limited the states to three: rising, optimal shine time, and setting.

The detail pages revealed more information about public spaces, pulling in information from Yelp and Google.

Users can rate the parks themselves. Yellow suns indicate a user rating, grey suns indicate a Google rating.

Users can click on icons in order to find out their meaning.

One thing is missing from the app, that we did not have time to build. The engineers on my team deserve full credit for devising a formula that takes into account time of rise and fall, outside temperature, wind speed, humidity, UV index, and body temperature to determine optimal conditions for going outside when it's sunny. Together, this calculates the Sunny Score-- similar to a "Walk Score.

All in all, I had a pretty damn good time. I learned so much about what engineers look for when working with designers, and how I can make my designs more effective and easy to create. I was also lucky to link up with a crew that was always willing to help a newbie learn. Thank you Team Sunshine!