Designing a Social Platform for Divers from 0 to 1

Examining numerous popular apps from that period allowed us to identify patterns and trends. This provided valuable insights into which patterns to adopt, enabling exploration of unique interactions that would differentiate our products.

In order to establish a hierarchical relationship among our product touchpoints, I crafted information architecture (IA) sitemaps. These sitemaps helped conceptualize how our hardware product fits into the ecosystem of our social platform across both mobile app and responsive web interfaces.

While different dive certification agencies might use varying formats, the core elements remain similar: location, date, start time, depth, bottom time, dive profile, air consumption rate, visibility, notes, buddy, and instructor/divemaster’s name. However, in terms of personal preferences, there can be a wide range of information.

I led a brainstorming session involving dive experts, our designers, co-founders, and any divers within the company. Together, we compiled an exhaustive list of potential elements for our digital dive log and collectively assessed and voted on each one.

Building upon the dive log details we brainstormed and considering the information architecture I previously developed, I started creating low-fidelity wireframes (both on paper and digitally). These wireframes aimed to visualize the foundation and structure of our dive log interface and beyond.

To establish the app’s navigation and layout, I moved through cycles of wireframes, prototypes, and user testing.

Each set of wireframes transformed into prototypes, which were tested by dive experts, external divers, and colleagues. Insights from observations and feedback guided the iterative refinement of wireframes.

Interactive prototypes emphasized the app’s logical flow. Utilizing Axure RP, I crafted prototypes with conditional logic, variables, and functions, improving the app’s logic through user testing.

Around 15 wireframes and 20 prototypes were created using tools like Axure, Pixate (defunct), and InVision before the launch. This iterative process streamlined the dive log interface from five original pages to just two: the main page and the details page.

Using InVision, I quickly converted static screen interfaces into interactive prototypes for user testing, allowing us to evaluate the navigation. These prototypes typically only require an hour or two to set up, yet the insights gained from user testing prove to be immensely valuable for enhancing the app’s navigation.

I engaged and shared my design documentation with our development team at an early stage. While the design team was focused on research and conceptualization, the development team began to construct the environment.

Following that, we established the wireframe for the minimum viable product, ensuring our development team had sufficient time to develop the app before the impending deadline.

The visual design underwent gradual changes from its initial concept. Starting with a darker and more exhilarating aesthetic, internal discussions prompted a shift towards a balanced appeal that would suit both beginners and professional divers.

Time constraints before the launch limited our ability to deliberate extensively, leading us to opt for a balanced look of friendly and dynamic.

Following the launch, we dedicated our efforts to mood boards, surveys, and brainstorming, resulting in a lighter and friendlier appearance.

As mentioned, the dive log played a crucial role on the social platform. Initially, a high-fidelity prototype was constructed using Pixate, a software that is no longer available. The prototype below was recreated using ProtoPie.

By extracting the EXIF data from the diver’s underwater camera and syncing it with their COSMIQ dive computer data, the Deepblu app can seamlessly attach photos and videos to the dive profile, showing when and at what depth these media were captured. The graphical user interface for this feature was later granted a design patent by the United States Patent and Trademark Office.

As the launch date for the ADEX Expo drew near, the pressure was mounting. With investors joining virtually and other stakeholders gathered in the meeting room, I took the stage to present the app’s design and showcase the prototypes.

The company’s timely launch depended on the investors’ approval, adding to the immense pressure. Thankfully, the tense meeting concluded on a positive note.

Given the Design team’s role in shaping every customer interaction, we had a plethora of deliverables for the ADEX Expo company launch, extending beyond the app. With other design team members being just 2 months into the job, I took on the bulk of the workload.

This experience brought many firsts for me: taking charge of the design and launch of an app and hardware product, developing a website while learning how to code, and creating an exhibition booth from scratch.

Deepblu, along with its app and products, was officially launched on April 15, 2016, at the ADEX Expo. Despite the tight time constraints, the launch was an overall success. Colleagues who attended the dive expo in Singapore mentioned that the company received an enthusiastic reception from divers.

Since the launch, the team rapidly expanded from under 15 members to over 50 within 6 months. The team adopted the Agile Scrum method for product development, where I integrated the design thinking process and actively engaged in the daily scrum.

Over the course of my tenure, I led the design of 15 app updates. By leveraging product strategy, user feedback, and data insights, we improved the app’s visuals and features over time.

The web interface of the Deepblu dive log closely mirrors the app version. Over the course of 3 years, our senior UX/UI designer played a vital role in shaping a significant portion of the web platform, with our collaborative efforts yielding complementary results. As she transitioned to new pursuits in 2019, I seamlessly took up the responsibility of web design for the platform.

While Deepblu Discover primarily highlights dive logs, users have the freedom to post various types of content, including sharing links, text-only posts, media-only posts, tagging friends, and sharing locations. Ensuring a straightforward posting experience was essential to encourage user-generated content.

Over time, we expanded the range of compatible dive computers for the platform and enabled the reposting of third-party dive logs on Deepblu.

The concept behind the user profile on Deepblu was to highlight and celebrate each diver’s accomplishments. We introduced features like a diver’s map, unlockable location badges, and unique dive statistics such as the deepest dive depth.

During my time, the platform attracted over 80,000 divers. Despite the journey’s ups and downs, seeing users enjoy the platform I helped build was truly rewarding. Some of Deepblu’s dedicated users posted almost every day.