Oceanify App ADV132 - Shinga Yoshimine & Mai Truong

"Only we humans make waste that nature can’t digest"

Background

RipCurl

Rip Curl was founded in 1969 by Doug "Claw" Warbrick and Brian "Sing Ding" Singer in Torquay, Australia. The words "Rip Curl" have been evolving in the last decades to meet the spirit of surfing and the choices of the brand's clients.

Our mission

Our mission is to create a platform where people can motivate each other to protect the ocean and beach, aligning with the value that RipCurl follows.

Overview

Oceanify is a social mobile app that motivates people to support their local community in regard to ocean sustainability in any way possible. The goal is to encourage people to take action whenever and wherever they are and educate them on the issue. By joining Oceanify, anyone can find a way to help protect the ocean even if they cannot physically visit the beach or coast.

Some of the main features on this app are letting users find events taking place nearby and generate outdoor and indoor events. Aside from that, we created the Oceanify community where users can share their activities, photos and articles, and engage with others.

The Development of Oceanify - Wireframes and Style Guide

Sketch

LO-FI Wireframes

Color Palette & Typography

We used blue as the primary color since our app is ocean and beach themed. Then we decided to use orange and yellow as accent colors because those colors are often associated with passion and encouragement. Plus, we thought they could be interpreted as the sun shining on the ocean. As to the text color, we avoided using pitch black which is #000000 because it can be discomfortable for users to read it if a chunk of words and paragraphs are all in pure black. Instead, we used dark gray which is #444444.

Button & Icon Ideas

To make everything consistent, we made sure that all icons look similar in terms of whether the corner of icons is rounded or sharp, and such. We ended up using rounded corner icons and buttons because they are easier on the eyes.

Name and Logo

We wanted to give our app a unique name because we wouldn't want it to get buried in other existing apps in search engines if we were actually to launch it but we also wanted to make it easy for users to guess what this app is about at first glance. This is how we came up with "Oceanify." Regarding the logo's typography, we used shrikhand whose letter is wavy so that it can be interpreted with the ocean wave.

User Journey

Our primary functions of the app are searching and creating events, so we took extra precaution when we developed those functions. Moreover, the user flow also presents all steps of secondary functions such as social page, news page, and notifications.

HI-FI Wireframes

Boarding

We wanted to make the app more unique and interactive, so we created the swipe function. You can swipe left to see a smooth transition that leads you to the log-in page.

Log-in

Given four options, you have the ultimate flexibility to log in to our app. You can log in with your email, Gmail account, and Facebook or skip the process and dive into the main screen as a guest.

Sign-up

No one wants a complex registration process, so we made it as simple as possible.

Welcome

If you sign up for your account, you will be welcomed with these animated screens that give you a brief overview of the app. You can also skip to the main page if you like.

Main Page and Event Description

On the main page, you see where you are located and a few featured events nearby. You can change your location to see what kind of events are happening in the distance as well. At the bottom of the screen, you can search events by categories, such as outdoor, indoor, online, and beach cleanup. The description of each event tells you what the event is about, who the host is, and the date, time, and location. If you find the event you want to join, all you have to do is click the "Join" button. Then it will be automatically added to your calendar within the app. If you want to save the event, just click the heart button.

Find an Event

You can easily explore what is going on right around you by utilizing a map as visual navigation.

Create an Event

On the create an event page, you can add a hero image to enhance content. Then you have to decide where it will take place, type the event name, add the time and date, and write a description. Once you are done creating your event, it will be automatically added to your calendar within the app.

Calendar

The calendar tells you when events you are registered for are going to happen. You can also check the ones you saved.

Social

The social media page allows you to share their activities and events with your followers and helps create the Oceanify community. You can post your opinions and thoughts on this page instead of using other social platforms such as Facebook, Instagram, and Tiktok. That's how this app encourages you to focus on ocean-related topics. We combined the feature from LinkedIn with the one from Instagram simply because we wanted to make the app professional but make it more fun and interactive in a way at the same time.

News and Notifications

Aside from events, you can read news and information worldwide on the news page. Oceanify is a trustworthy source to assist you in improving your knowledge about ocean issues. It also provides live streaming to show you the current situation of the ocean and beach around you. The notification function is necessary to remind you of new activities, which builds habits.

Prototype

Prototyping in Figma

Video

Mockup

Play with Our Prototype!

Thank you✨🌊

Appreciate

Credits:

Created with images by Andrea Izzotti - "striped Dolphins while jumping in the deep blue sea" • DisobeyArt - "Surfers couple waiting for the high waves on beach" • Drobot Dean - "Young pretty girl using mobile phone" • thatinchan - "The team of website designers with the ux ui system are writing programs and laying the layer to determine the display style with the ux ui system within the front of the smartphone." • Syda Productions - "app design, technology and business concept - web designer or developer with sketches and laptop computer working on user interface at office" • NAMPIX - "Development application designer working at office."