rocean companion app
The Rocean is a startup company that makes a water purifier that attaches to a user’s water system and purifies the water, flavors it, and adds carbonation. This design exercise was for a companion app to make the Rocean even more useful.
Role: Lead designer.
Timeline: 5 days.
Context: Coursework
Motivation: I designed this companion app to make the Rocean even more useful. I wanted to ensure that the app highlighted the upscale nature of the device.
I researched the product and its goals, created a moodboard, drew wireframes, created low-fidelity wireframes, then designed high-fidelity wireframes.
Tools: Figma, Adobe Photoshop, Adobe Illustrator
this is the rocean one.
This device delivers flavored, filtered, and carbonated water. I designed a companion app.
Moodboard.
I wanted to convey the physical presence of the rocean one by making the app in the nuemorphic style.
paper sketching
I wanted to make sure that each of my screens made sense. I find it quickest and fastest to sketch by hand first.
Very low-fidelity wireframes
I did not have a lot of time to wireframe on the computer, so I made some quick and rough wireframes to help finalize the general layout.
high-fidelity mockups
I chose to make the app extremely navigable with the four main functions at the bottom easy to move between at any moment. The four main sections are home, drink mixer, environmental impact, and shopping. On the side bar, if users own more than one Rocean, they can be added to a local network and each one can be viewed by selecting it from the list. In this way, users can easily monitor their Rocean One’s easily. The dashboard on the home screen is very glanceable to understand the status’ of the various aspects of the device. If a user taps any of those cards, they will see an expanded view with more details.
On the drink mixer page, users can customize their flavors and carbonation levels then either save the flavor as a preset, pour it immediately, or send it to a friend as a drink recommendation.
The environmental page tells users how many single use plastic bottles they saved from ending up in landfills as well as a few other metrics to help contextualize their impact.
The shop function allows users to select from all the flavors as well as components like the CO2 cartridge and filter as well as see the trending flavors and combinations nationally, to help inspire them to try out new combinations.
Welcome Screen.
This is the first screen users will see when opening the app. The background is a video that will fill the frame with water and bubbles will drift in front of the logo.
Home Screen.
This is the landing page in the app. Users can see their currently-loaded flavor pods as well as the life left in each one. Users can pour their currently-loaded flavors or tap and slide their finger on the background swoosh colors to alter the ratio of the two flavors. If a user wants to see more information about any of the cards with statuses on them, they can tap it and expand to see more information.
Home Screen with sidebar.
This is the home screen with the side bar activated. Users click the hamburger menu and this sidebar pops up. Users can access their accounts of select from a list of their Roceans to monitor those different devices from the same app.
Strawberry flavor.
This is the screen that pops up when the user clicks on the flavor card on the home screen. Here, users see an image of their flavor as well as expanded information about when the flavor will run out. In addition, users can select from a few ordering options to have the flavor a second time. Or, if the user would like to mix the flavor differently, they can click Make a mix and go to the mixing screen
water quality information.
This is the screen that pops up when the user clicks on the filter life card on the home screen. Here, users can see the rates of common contaminants in their water which is represented on a spectrum out of the acceptable limit. The more full the bar is, the more dangerous the water is. Below that, users can see how well each of their Rocean devices is performing at cleaning the water. Beneath that, users can order new filters when their current ones are at the end of their lives. Lastly, users can see how their water quality compares to nearby measured water quality sites to see the benefits of the Rocean.
flavor mixing screens.
These series of screens are where the user can mix their flavors to create unique and unforgettable drinks. The slider on the left mixes the ratio between the top flavor and the bottom flavor. Users can change the flavor by clicking the little edit button on the top left. When they do, the middle screen is shown where users can select the top and bottom flavors. If a user selects a flavor that they do not have installed, then the right screen error message pops up. Users are still free to mix flavors they do not have, but they cannot dispense them. Instead, users can save the flavor as a preset or send it to a friend to try out.
environmental impact.
This screen highlights the positive environmental impact of the Rocean over single use plastic bottles. It boldly projects the number of single use plastic bottles that were saved from the landfill with the Rocean. The app further expands on the environmental impact of those bottles through different specific impacts such as CO2 or the bodies of water that would have been impacted by those bottles. These metrics are tied to the user’s location and how their region handles bottles of water (i.e., recycling or different waste management processes).
shopping.
The left screen is the main shopping screen. Here, users can search for flavors, see recommended flavors for them, all flavors, and good combinations of flavors to inspire their drink mixing. The right screen is the trending flavors screen. Users toggle to this screen using the toggle at the top of the screen. The trending screen shows you what is popular now and recommends different flavors and combinations.