Video walkthrough showing the prototyped app. Users can add new plants by taking a photo or uploading it; view plants yet to be discovered and those they've already found, and earn badges as they go.

The Task
To create an Android app design for a specific target audience and prototype it.
The Solution
Scout is an app for grade-school age children to enjoy with their parents. The app encourages users to explore their neighborhood and learn about local plants by "discovering" them. Scout provides descriptions of each plant and it's habitat, as well as photos, so that users can easily understand what they're looking for. 
Once the user finds the plant in real life, they can take a photo of it, upload it, and add field notes. Once the plant is "discovered," the user unlocks fun facts about that plant. Along the way, they can also earn badges for different achievements!
A bright color palette, friendly layout, and large buttons make the app easy to navigate—so users can spend time exploring and learning about the plants around them.

The splash page and home page. The home page includes easy-to-find buttons for taking a new photo of a plant or uploading an old one, user stats, the current local weather, and some plants to look for.

The process for adding a new plant from a photo upload. The user checks it against a list of possible matches supplied by the app, and can view more detail about a possible match in order to pair it with their photo. Once they match it, they will be able to add notes about the plant they found, and it will be added to their "My Plants" list.

The alternate process of taking a photo in the app, logging field notes after matching the plant, and getting the confirmation pop-up.

The "My Plants" page. Tabs at the top of the page allow the user to filter through plants that they have yet to discover, or have already found. Each plant has a detail page with more information, such as photos, the name and latin name of the plant, and descriptions of the plant and its habitat. Discovered plants also include information on where and when it was discovered, and fun facts about the plant. Users can see the plant photos in more detail for both discovered and undiscovered plants.

The badge system. Like the "My Plants" list, badges can be filtered by locked/unlocked by using the tabs. Each badge has a detail page with its name, icon, description, and achievement status. At the right is the screen users see when they achieve a new badge.

The app settings are locked by a passcode, to be set by parents. 

The site map for Scout. 

Style guide for Scout, including typography, colors, icons, and buttons.

Process Work

One possible site map for Scout. At this point, the focus was on simply taking photos and logging them, without badges.

The second possible site map for Scout, with the additional option to identify a plant by answering questions in the app.

A third possible site map for Scout. This one is the closest to the final organization, with badges but without the option to upload a photo from the user's gallery.

After creating the site map, this outline of pages included the information that needed to be on each page, which helped when it came to the sketches, below.

Sketches for the home page, exploring different ways to get the user to take a new plant photo as easily as possible. The "My Plants" page sketches explored different ways to indicate which plants had been discovered.

Sketches for different ways to lay out the plant detail pages, for both discovered and undiscovered plants.

These sketches explored the sequence through which a user would take a photo and log a new plant, and a little bit of the badges system.

Sketches for the badges system tried out different ways to indicate achievement status and display information on each detail page.

These sketches explored ways to help the user match their photo to possible plants that the app suggests. The middle row explored ways to lay out the detail pages for possible matches, and the bottom row began looking at the settings page.

Sketches for the continuation of the "For Parents" settings page, which was pretty straightforward and true to the final design.

Grayscale wireframes for the home page, "My Plants" page, and the sequence for adding a new plant.

Grayscale wireframes for the badges system and settings pages.

You may also like

Back to Top