Surfaced, an End to End Application
Overview
Client: Surfaced, a dive log app with social media features
My Role: Principal Designer, UX/UI Specialist, I worked with and received a lot of feedback from four other scuba divers of varying skill level.
Summary: Since the invention of the self-contained-underwater-breathing-apparatus, or SCUBA, the technology and skills have become more accessible and now over 6 million divers have been certified worldwide. Dive site knowledge is currently found only in dive shops and charters from the dive guides and other divers. There are some divers who share details from their dives on common social media platforms, but those platforms excel more at providing photo and video content. All divers keep records of their dives in their dive log, which is typically not shareable on the many apps available or via the physical paper log. There is a need for a simple way to log and share information and content from a dive on a single platform.
Goal: Design an app that is primarily a dive log, to include map details as well as saving photo and video content
Process: Research - Define - Design - Testing & Iteration
Introduction
At the end of every dive a diver logs the details of their dive. This allows divers to keep track of what they have seen, where they have been, and how long they have been underwater. The original paper log books are set up to record the basic details to include date, location, visibility, temperatures, weights used, start and end psi, start and end times, depths, length of dive, comments to include the narrative of the dive, buddy/divemaster, and dive shop stamps if applicable. The paper log books and the apps created for logging a dive do not have an easy way to log a dive, include photos and videos, and then share the entire dive or parts of it on a social media feed.
This mobile app will be a dive log for divers who like to record their dives, take photos and videos while diving, and share content with a network. Divers who log their dives consistently, and like to share the content from their dives or their entire dive log will be able to take advantage of this app. It was necessary to solve this problem to make it easier for divers to log their dives on the go, otherwise many dives go unlogged. An app that is primarily a dive log that can allow a user to share entire logs or individual content would allow a user to log and share dive details quickly, which would make it more likely that users would log and share their dives. This project took roughly 80 hours to complete and I was the end-to-end UX/UI and product designer for the project.
Research
Quick Take
-
There are many apps to log a dive, but most are not focused on logging the dive.
-
Social media platforms exclusively for divers tend to be more about the social media than about logging and sharing dive information.
-
Divers need a quick, mobile, and waterproof way to log their dives.
“I need a dive log that will not disappear if it falls off the boat or gets too wet.”
I began the research phase with an analysis of six different types of dive log apps as well as an in depth look at the traditional paper log book. I made accounts and walked through the process of logging a dive on all apps selected. Although there are plenty of dive log apps there are not many which combine the social media aspect of sharing your dives and dive info with a network of friends or followers.The Dive+ app has this combination, but only allows divers to share photos or videos and not necessarily their dive log. An app that is primarily a dive log with social features will be unique in the market of dive related apps. The following are the main takeaways from studying the apps and log book:
-
The design should avoid overuse of blue and dark gray as these colors are heavily used in other apps and make the page very dark.
-
Map functions, photo, and video capable digital dive logs are not common, there should be an interest in these features.
-
The focus should be on the dive log and then add social media functions to enhance that experience.
-
The design should make the landing page the list of logged dives rather than making the landing page a social feed as this may overwhelm and distract the user from their purpose of logging a dive.
-
The Design should keep the user experience of logging a dive as close to the process of using a paper dive log, but with the increased convenience and usability of a mobile device.
After researching existing logs I conducted interviews remotely and in person with other divers. I made sure to interview a range of divers as far as experience goes to find what could make a dive log and social media app more useful to beginners as well as more experienced divers. The interviews developed the following main points:
-
Users want to log their dives, but they want a faster, easier, more accessible, and water-proof way to log them.
-
Users want to be able to save content created on their dive as part of their dive logs.
-
Users would like to share their dive logs and content to social media, but they want a community that cares, and to be able to control what is shared. Most other social media platforms are too generally used for the target audience to easily find the users shared content.
-
Users have a difficult experience networking and building a community of divers on common social media apps or keeping track of new dive buddies they meet as they get lost among the rest of their followers on social media.
-
Users have to dig a lot to find dive locations and good information on different shops and centers.
The analysis and interviews found that users would like to be able to log and share their dives, but there is no easy and quick way to do so. Scuba divers are always on the move, and on the water, making a lot of paper dive logs difficult to work with as they do not want to ruin or lose them. Also, writing on paper on a moving boat is difficult. With the immediate challenges it is always easier to procrastinate logging a dive until you are in a dry not moving environment, but then divers may forget key details or to log the dive altogether. A mobile app is a perfect solution, as even on the boat divers tend to have their mobile devices with them, and it is much more feasible to type on a moving boat than it is to write on paper. Overall, making the logging process faster and more user friendly will only help users who have a challenge with logging their dives.
Define
Quick Take
-
The app will need to be usable for a range of divers at different skill levels and appeal to a range of divers at different social media levels, those who want to share everything, and those who only want to share with their direct community.
-
Site map, user flow, and task flow emphasized the need for a dive log app with social media features, rather than a social media app that lets the user log dives.
After conducting interviews with users, I created two personas to help keep the range of dive experience among the targeted users in focus. The least experienced target user is a new open-water-diver who needs the dive log process to be fast and simple as they do not know any big or confusing dive terms. The more experienced diver is certified as a rescue diver who wants to be able to keep all details and content in one place. Although the more experienced diver has a network of dive buddies, this diver will tend not to share their dives on common social media platforms as they do not believe enough of their following will care about what is being posted to make it worth it. Keeping this range of personas in mind will help to create an app that will help all levels of divers.
With the personas in mind I created a basic map of the app. I tried to keep the features and pages limited as users will not want to dig through too many pages. The landing page will be the list of logged dives comprising the dive log, with a way to log a new dive. From the “log a dive” page users will be able to share the entire dive or only parts of it. There will be another page for users to track their upcoming dive trips. The “social feed” will show content from divers that have connected with the user. The “account/profile” will show the user's posts, and allow the user to view their list of dive buddies.
A task flow and user flow were also created, and in the process of creating these I found how crucial focusing on the dive log part of the project will be. Opening an app to a social feed will be an immediate distraction which can cause the user to easily forget what they are opening the app to do. Making the landing page the dive log will ensure the user is immediately on task to log their new dive. Although the social features are important, divers need to log their dives otherwise they will have difficulty in leveling up their certification as divers need to present a dive log to prove they have the necessary background should they choose to certify at the next level of diving.
Design
Quick Take
-
Sketches and wireframes of app pages created to emphasize logging a dive, and then add the social media features around that log.
-
Logo and style designed to reflect being underwater.
-
Icon set designed using elements from dive culture.
-
Three iterations created before testing commenced on the third iteration.
I sketched multiple layouts for the screens for the dive log, log a dive, dive trips, account/profile, social feed, and a shared dive. I selected the sketches that were the least cluttered to develop into mid-fidelity wireframes. The app will be capturing and displaying a lot of information and the design needs to be as open as possible to not distract or overwhelm the user. The layout for the Log a Dive page I decided to develop further is split into sections- Dive Conditions, Gear, Comments, Photos/Videos/Verification Signature/Stamps. The different sections which will make it easier to select what the diver would like to share further on or keep private. The input fields will be organized to lead the diver through their dive and list information in the order they will have it available.
Following the design laid out in the sketches I created mid-fidelity wireframes for ten screens as follows: Dive Log, Log a New Dive, individual Logged Dive, Share a Dive, an individual Shared Dive, an individual Shared Photo, Dive Trips, Social Feed, and the Diver Profile with the Posts tab and the Dive Buddies tab. With these screens the users can complete the task flow of creating a log, sharing it, and viewing it on their profile. My biggest focus during this step in the project was to ensure the success of the Log a Dive screen. With that wireframe built it was easier to build the other screens to compliment that style as the priority is to allow the app to function as a dive log, and then allow the other features to fall into place around it.
With the wireframes ready to move into high-fidelity iterations, I decided to shift into the logo and branding side of the project. I began by selecting a primary color for the app. The blue color that I selected is from photos taken while diving and is the blue color commonly seen when looking off in the distance underwater and the visibility ends.
I began to design logos reminiscent of diving by creating variations of the dive flag, a location marker with a mask and regulator, and a thumbs up which commonly used as the signal to return to the surface. After running through initial logo ideas I decided to settle on a name for the app. Of the dive-related names I came up with I selected “Surfaced”. When a diver has completed their underwater activity they surface, meaning they swim back up to the surface to end their dive. Once surfaced a diver is expected to log their dive immediately to ensure nothing is forgotten. Once I selected the name, I went back to the logos I had created, and I created another logo based off of the iterations that consisted of a mask and regulator where the letter “S” looks like an air hose feeding into the regulator, which is the device that allows a diver to draw air from their tank and breathe underwater. I used this logo in the first couple of high fidelity wireframes before determining it was too thin for the user to notice. I then stood a letter “S” upright and put a dive mask on it. I created several iterations of various fonts before settling on one that was the right boldness to match a more defined dive mask. Users who reviewed the logo all stated they recognized the letter “S” and the dive mask and understood this to be an app geared towards divers.
A five icon set was created for the bottom navigation to guide users to the five different categories within the app: the dive log, logging a dive, social feed, dive trips, and the diver social profile. For the social media features I created a design similar to the international dive hand signal for “excellent” to use as an icon for the like button.
With a primary color, name, logo, and icon set ready to go I decided it was time to push into creating the high fidelity wireframes and prototype. I created three iterations of the app screens before building the prototype in Figma.
Although I met the goal of using white space in the original iteration the page was very heavy in white and a single color of blue. As a result a lot of elements blended into each other making it difficult to distinguish between input fields and buttons. Spacing also needed to be improved as the screens, especially the key “log a dive” screen seemed very cluttered and overwhelming at first glance. In the second iteration I increased the use of white space, used orange buttons and increased button size, made all text a darker gray, and removed the blue boxes from the dive log thumbnails.
The orange color used for the buttons ended up being too jarring and was then replaced with a brown color to see if a more neutral tone would work with the primary blue color, in addition to making the text larger.
Testing & Iteration
Quick Take
-
Less buttons made the UI easier to follow in the process of logging a dive.
-
Style of input fields and other buttons changed to distinguish the two.
-
The “Share a Dive” page was revised to better match the appearance of the final post.
-
Spacing on the pages was increased to distinguish between posts.
“I like the focus
on logging a dive, I might actually get more of them logged if I use this!”
Having completed several iterations of the high fidelity wireframes, the app was ready for prototype testing. I conducted tests using the figma app on mobile devices and conducted user testing remotely and in person. All users were able to complete the tasks of logging a dive and sharing it within five minutes. They all stated that the app was very easy to navigate and the experience was extremely intuitive as they were all divers and the process was as familiar as opening a paper log book. Based off of user feedback the following changes were made:
The “Add” and “Edit” buttons were unnecessary on “log a dive” and were removed as edit icons on the input field will suffice and save space. This also prevents the user from getting confused about which button is primary action vs. secondary or tertiary action buttons.
Input fields on “log a dive” looked out of place and too much like buttons, so a blue outline rather than a filled in box was used.
Buttons were changed to a different color, as the brown color is not going well with the blue. Several colors were considered before a deeper blue and an aqua green were selected as they were analogous colors to the primary blue color and provided a good balance between contrast and compliment to the primary blue I had selected.
The “share a dive” page needed to be revised as it does not seem to make sense to the users and they felt like they were jumping around. The caption input field was moved to the top as the captions appear at the top throughout the rest of the app. Sharing options were all aligned and separated to allow the user to share their entire dive log or pieces of their dive log, and just an individual photo. All shared items are derived from the dive log without actually making any changes to the dive log.
The “social page” had spacing revised as users stated it was too scrunched. I decreased spacing between text and icons all pertaining to the same post, and increased the spacing between the posts to try to better convey the grouping of different items. I did not want to try to use boxes or lines to differentiate between posts as I wanted to keep the design as open and uncluttered as possible while still providing all the necessary content.
Conclusion
Trying to build a log that would be useful to a full range of dive certifications seemed daunting, but divers are always trained to remember their basics, and this app was built to help divers focus on the basic details of their dive experiences. This taught me that even with something as technical as diving, an easy and quick process can be developed that will improve the overall experience of the user.
I especially enjoyed creating the logo, branding, and icons for this project. Keeping all designs in theme with diving presented a unique challenge that I was happy to rise to. Although it is common to use a lot of dark colors and blues for underwater theming I found it very satisfying to find a different way to capture and present the content and create an interface to allow the user to do so.
Next steps for the Surfaced app would be to develop the dive charter side of the app where those who are certifying and organizing dives can communicate with their community of divers. In addition to marking a single location where a dive took place users should be able to mark the route they took underwater and link their photo and video content to specific locations on the map. Although this detailed mapping feature would be more time consuming, those who choose to take advantage of it and share that mapped content could help to track the appearance of dive sites around the world over time, essentially a crowd sourced “street-view” but underwater.
I was initially reluctant to begin work on a dive log app as I noticed the market seemed saturated with apps geared towards divers. I decided to pursue this project as many of my dive buddies had tried different apps but they all wanted something different. The Surfaced app is a social dive log created by a diver, with input from other divers, for all divers.
