Raymond Griffin

Oyster Savings App

A SAVINGS APP CONCEPT CASE STUDY - INTELECTUAL PROPERTY OF RAYMOND GRIFFIN STUDIOS, LLC

Oyster is a savings app concept that allows the user to more fully utilize their savings account by dividing the funds into categories--known as pearls within the app. As new funds are added to the account , the app automatically assigns the funds into different pearls based on the percentage or amount set by the user. Once a pearl is ready to be harvested it notifies the user. Users can add, freeze, or delete pearls at any time, and can set the pearls up as permanent pearls with no set goal (like an emergency fund), or as regular pearls with set cap amounts.

The Challenge

SINCE MOST SAVINGS ACCOUNTS DO NOT INCLUDE ANY ORGANIZATIONAL STRUCTURE, USERS HAVE NO IDEA WHAT THEY ARE ACTUALLY SAVING FOR, NOR HOW TO ADEQUATELY UTILIZE THEIR SAVINGS ACCOUNT

Savings has always been this mysterious lump sum of money that none of us really know what it is we are saving for. From a young age each of us has been adding pennies into our piggy bank or mason jar while telling ourselves and others that we are "saving money." As we grew older and had more cash flow, the jar became a loose change jar for our extra change and didn't really serve any purpose, other than as a place to store money. Since our piggy banks and loose change jars had no order or structure, we under-utilized them and only put money into them as an after thought. Most of us treat our savings account in the same way. Without having any structure in our savings account for items we are saving up for, we only use our savings account as a place for extra cash and an emergency fund.

My Approach

RETHINK HOW SAVINGS ACCOUNTS ARE UTILIZED BY CONCEPTUALIZING AN APP THAT ALLOWS USERS TO SAVE UP FOR FUTURE EXPENSES IN AN ORGANIZED WAY

Since society has taught us that going into debt is the preferred method to acquiring wealth, the idea of actually saving up for something without going into debt has taken a significant back burner in our spending habits. In creating this savings app, I wanted users to have an easy way to categorize and use their savings account to save up for future expenses.

Originally, I envisioned that users could connect their savings account to the app, so that each time money was added to the account the appropriate categorization would automatically happen within the app. To create a simpler starting point, I decided that the app would work much like a budgeting app, where the user would manually update the total amount in their savings each time a deposit was made in their actual savings account.

App Concept Theme

SELECTING A CONCEPT THEME WAS A FOUNDATIONAL STEP TO THE ENTIRE BRAND AND EXPERIENCE OF THE APP

In brainstorming ideas for what the concept theme of the app should be, I came up with the following list:

Most of the ideas on this list focused on an aspect of a savings fund, but were incomplete in the full idea. The idea of an oyster hit all the savings checkboxes perfectly: Oysters have strong shells and are secure from external attacks; Oysters safely and securely hold their valuables within; and Pearls within an oyster take very little initial effort to start, but experience growth and an increase of value over time.

Deciding on Colors

AFTER DECIDING THE THEME OF THE APP, I WANTED THE COLORS TO BUILD UPON BOTH THE THEME (OYSTER AND PEARLS), AND THE PURPOSE OF THE APP (FINANCIAL APP)

For this app I selected 4 main accent colors to use in various settings and 4 shades of grey to serve as the background colors. The first primary color for the app is Sea Foam Green (which is the same as Mint Green). Green is often associated with finances and financial apps which helps it fit psychologically into the financial world. The Sea Foam shade of green comes directly from the waves of the ocean. The second primary color chosen was Coral Pink. This is a natural color in the ocean as well. Coral Pink and Sea Foam Green would serve as the main accent colors. Sandy Beach Gold was chosen as the color to signify the Oyster Gold premium paid accounts. Lastly, the Icy Blue color was selected to signify a frozen pearl that currently did not have any funds being added to it.

*The iceberg, green waves, and pink coral images below are from Pixabay and require no attribution. The gold sand image is from Pexels photographer: Jonathan Borba.

Designing the Logo

OYSTER AND PEARL LOGO DESIGN IDEAS

I sketched out a variety of different logo designs. Below are my top oyster and pearl designs:

Ultimately I decided on the last design as I thought the shape represented an oyster the best, and I liked how it was open and showed off the pearl inside. This design also helped showcase the concept of making savings accounts more transparent in nature, so that the user can easily see the "pearls" they are saving up for, and get excited about harvesting them. The oyster in the design represents the savings account, while the pearl itself represents the item or items the user is saving up for.

Key Features of the App

AS I THOUGHT THROUGH HOW THE APP WOULD FUNCTION I CREATED THIS LIST OF KEY FEATURES

1. Allow the user to set up their own account and set up their default permanent pearl .

2. Allow the user to add up to 5 regular pearls in addition to their default permanent pearl. Allow them to edit the details of each pearl. Users cannot take away funds from a pearl once they have been added. Instead they can freeze a pearl by stopping future funds from being added to it. Pearls can be harvested once they hit their goal (this amount can be changed). Pearls can also be destroyed if they are no longer of interest to the user.

3. Automatically divide new funds amongst the current pearls based on the set amount or percentage assigned to each pearl. Add any excess amount not accounted for into the default pearl.

4. Easily view all the pearls currently in the Oyster farm at a glance on the home page.

5. See graphically the timeline of each pearl in the pearl details (when it was created, the amount of funds added with each date, if it was frozen and for how long, and when it is ready to be harvested).

6. Offer pro tips on the home page to help users harvest their pearls quicker.

7. Notify the user when a pearl is ready to be harvested. Harvested pearls are automatically archived into the harvested pearl section.

8. Oyster Gold is where users can sign up for a monthly subscription account (paid annually). The 3 tiers inside Oyster Gold are Bronze Pearls, Silver Pearls, and Gold Pearls. A regular free account allows the user to have 1 permanent pearl and 5 regular pearls. Paying for the Bronze Pearls subscription account gives the user access to 3 permanent pearls and 10 regular pearls. The Silver Pearls subscription allows the user to create 10 permanent pearls and 25 regular pearls. The Gold Pearls subscription gives the user access to an unlimited amount of permanent and regular pearls.

Wireframing the App

AS I WIREFRAMED THE APP, I NOT ONLY THOUGHT ABOUT THE DESIGN AND LAYOUT OF THE APP BUT WHAT I WANTED THE APP TO ACCOMPLISH. THIS HELPED GUIDE THE WIREFRAMING PROCESS.

I made sure to incorporate the key features, listed above, that I wanted to have in the app.

Splash Screens

FOR APP SECURITY, THE FOLLOWING SPLASH SCREENS APPEAR WHEN YOU INITIALLY OPEN THE THE APP OR COME BACK TO THE APP AFTER BEING IN ANOTHER APP

The first screen on the left appears every time you open the app. This is the loading screen. Then, depending on whether you are logged in already, the PIN screen appears next or the default login screen appears.

Account Setup

AS PART OF THE ACCOUNT SETUP, THE USER SETS UP THEIR DEFAULT PERMANENT PEARL

After setting up the default permanent pearl, the app goes to the home screen (pictured in the middle below). The user can then set up 5 regular pearls. To set up additional permanent pearls and to set up more than 5 regular pearls, a user will need to pay for a Oyster Gold account.

Menu and Oyster Farm

ONCE AN ACCOUNT IS SET UP WITH VARIOUS PEARLS AND HAS PEARLS READY TO HARVEST THERE IS MORE DEPTH TO THE OYSTER FARM HOME PAGE

The three screens below showcase the Menu, which slides in from the left when tapped on, the Home page Oyster Farm, and the Pro Tips area, which slides in from the right when the user clicks on the white pearl icon (located in the top right corner of the Oyster Farm page). The home page shown below showcases what a paid account would look like with more than one permanent pearl.

Once pearls have hit their harvest goal they appear at the top of the oyster farm with a "Harvest Pearl" button. Tapping this button makes a pop up appear to tell the user to transfer the amount from their savings into their checking to be able to purchase the item. Once the user taps "Harvest," the goal amount is automatically subtracted from the savings total, and the pearl is archived into the Harvested Pearls page. (If the app was connected with an actual savings account, it would allow the user to transfer funds directly within the app from their savings account into their checking account).

Pearl Details

THE IMAGES BELOW FEATURE THE NORMAL AND FROZEN PEARL DETAIL SCREENS

An important part of the detail screens is the ability to easily slide screens left and right between different pearl details. The navigation at the top showcases a max of 5 pearls at a time on the screen. As the user slides the screen to the left more pearl names appear if there are more than 5. If there are less than 5 pearls, the navigation evenly distributes the pearls across the page.

The pearl details page highlights graphically the growth of the pearl on a yearly basis. A user can slide the graph to the right to see the previous year (if applicable). The dotted green line (or white, if frozen) on the graph represents the pearl goal. Users can also see and edit the pearl details, freeze or unfreeze the pearl, see the history of the pearl , and destroy the pearl (if it is not the default pearl).

Dashboards

THE FOLLOWING IMAGES SHOWCASE THE FROZEN DASHBOARD, THE HARVESTED PEARLS DASHBOARD, AND THE DETAILS OF A HARVESTED PERMANENT PEARL

The Frozen Dashboard shows all the pearls currently frozen. To unfreeze a pearl, a user can swipe left or right on the pearl. Tapping on the pearl card shows the details for the pearl (as highlighted above). The Harvested Dashboard shows all the pearls that have been harvested. Tapping on a regular pearl shows the details of the pearl (as shown above).

Since a permanent pearl can be harvested multiple times, it displays a different detail screen than a regular pearl (shown below in pink). The graph area of this screen shows a bar graph of each time the pearl was harvested throughout the year and the amount harvested. The circle graph shows how many times the pearl has been harvested since it's creation. The harvest history area highlights each harvest transaction.