GreenKeep App

Phase 1- User Personas and Screen Planning

I began mapping out the screens of the GreenKeep app by referencing user personas: I based the content and features of each screen in this app on what would best solve the users' problems, and then outlined how these screens would be connected in the overall navigation of the app.

The user personas that I referenced are shown above, along with an initial outline of the information architecture of the GreenKeep app. This initial outline shows each screen of the app, what features each screen will have, as well as how these screens are connected through the app's navigation system.

Phase 2- Rapid Prototypes and Wireframes

After I outlined the screens of the GreenKeep app along with their features, I created rapid prototypes of the apps' screens. I created sketches on paper to plan the layout and visual design of each screen, as well as the appearance of the app's features. In this stage, navigations from screen to screen, methods of accessing screen content (such as clicking buttons, swiping, and horizontal scrolling), and ease of locating relevant information were all considered to plan screen concepts that would make this app prototype easy and enjoyable to use.

Next, I then translated these rapid prototype sketches into wireframes: these further outlined what content the GreenKeep apps' screens would contain, and specified more clearly the sizes of features such as buttons, images, the logo area, and the bottom navigation bar. While the original concept for the GreenKeep app featured a 3-button navigation system with the app logo serving as a home page button, this concept was revised in these wireframes to be a 4-button navigation system with a "Home" button included.

Phase 3-Idea Generation and Branding:

In determining the visual branding elements of the GreenKeep app, I began by brainstorming thumbnail sketches of what would become the GreenKeep logo. After considering several ideas, I selected the combined heart, water and leaf concept for the GreenKeep logo and app icon, as it visually embodies all three elements of plants, water, and care.

The brainstormed list of possible app names is also shown above: similarly to the GreenKeep logo, I chose the name 'GreenKeep' after considering several other name possibilities for the app. GreenKeep references two aspects of the app's purpose: 'Green' is a clear reference to plants, and 'Keep' is a reference to the goal of keeping houseplants as healthy as possible.

Also, the visual UI elements of the GreenKeep App are shown above- these include the type ramp for headers, sub-headings, medium and small text, as well as the main app UI colors, styles of buttons, and photo styles.

Phase 4- Rough Draft of Prototype:

When I completed the rapid prototype sketches of the app's screens, I translated these into a rough draft of the app prototype using Adobe XD. These rough drafts of the apps' screens combine the layouts and planned features from the previous wireframes with the visual UI elements (such as color palettes and photos) of the GreenKeep App branding.

In this rough draft stage, I added a few additional features and pages to make the app even easier to use: these include the option to browse plants in the plant library by letter, and 'Plant Names by Letter' pages, with listed plants in the Plant Library that begin with the same letter. Also, to simplify the layout of the Account page, I moved the 'Edit Account Info' and 'Edit Notifications' options on to their own pages, that are accessible through secondary buttons.

Phase 5- Final GreenKeep App Prototype:

In the final stage of the apps' prototype design, the design of some features were updated to make this app prototype even easier to use: for instance, I changed the color of the plant watering reminder buttons to a darker shade of blue to give these more contrast, and I added a 'Back' button to the second Reminder page.