We tried to go for a minimal aesthetic with a lot of soft greens (to inspire a casual going outside vibe). One source of inspiration was Forest because of how minimal the app is. It feels useful to have this kind of aesthetic when trying to make it as frictionless as possible for our users to go outside. It will need to be as good of a user experience as possible so that our app actually facilitates our desired behavior instead of making it harder because of a poor UX. Our mood board also include designs with a soft touch (specifically avoiding any sharp edges) that keeps the tone of our application friendly. We want our users to seek solace in the app, especially when in need of a break.
We also added screenshots of some games whose aesthetics we thought fit our product really well, like A Short Hike, Firewatch, and Monument Valley (a relaxed autumn feeling). We also added a picture of the note-taking app Bear because of its clean and emotionally satisfying design. The images of parks and forests are meant to inspire the integration of natural environments with the artificial spaces that people are otherwise stuck in for most of their day. Play (hence the playgrounds) is another important theme in our app in making the activities fun, approachable, and sufficiently motivating for people to take a break from their busy schedules. Additionally, our mood board also includes several, beautiful views of the skies — another benefit of going outside!
Style Tile
Approach - Based on the mood board, we opted for brighter colors, mainly green, to convey our service’s connection to the outdoors as well as the fun aspect of completing the activities. The tasks themselves are intended to be approachable, so we wanted the typography and other styling to have this same unpretentiousness and friendliness.
Colors - The primary accent colors, green, teal, and orange were chosen to represent both the outdoorsy energy and the variety of activities provided by our service. Green and teal will be used as the main accents for adding color to screens, while orange will be used to draw the user’s attention towards important information and interactive elements, such as buttons. These colors will also be used as opacity overlays over images to match the theme of a particular task.
Font - We chose Noto Sans because it’s a fairly neutral display and body font with a slightly friendly feel. Though the app is intended to be casual, we didn’t want to lean in to this attitude too hard. Given the simplicity of the tasks, we wanted to also make sure to use a versatile font to reduce styling complexity.
Components - Because the main user flow involves getting assigned and providing proof of a single task, the component of interest is the card that describes the activity. This component is designed to focus on this singular piece of information and guide the user through the roughly linear flow of getting the task, providing proof, and viewing others’ completed tasks. The photo in the background reinforces the theming of the activity itself, and the overlay mutes the intensity of the image so that the focus remains on the task.