Nautical Conditions & Sea Metrics Mobile App [Sealoc]
Mobile / Desktop / Maps / Data Visualization / UX Reseearch / Dashboards UI / UX
Sealoc's scope is to enable pro users to access metrics on multiple depth levels. The audiences included fishermen, fish farming experts, and even skippers on the mediterrenean region. The solution included a mobile app and a desktop web view. The mobile app should take advantage of modern mobile technologies like location-based services and notifications. The business required a subscription-based paywall with few metrics available on the free tier and more advanced on paid.
Respecting Design thinking principles I begin by understanding the main audiences the product addresses. Being lucky the team had already done a great job with third-party marketing services on having a clear business direction and monetization model.
Based on that I coordinated workshops to transform the marketing personas into UX personas. This assisted the team in better understanding how the users interact with those kinds of apps. Affecting also every part of the design process [for example the amount of information density we need to consider in the UI Design phase]
Next step is to understand how existing competition deals with the same user's problem.
Respecting Jakob's UX Law I start by getting inspired by them and try to improve the areas that are weak. It's amazing how many things a designer can learn by respecting and studying not only pleasing but also low on aesthetic solutions.
Jacob's Law:"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."
The outcome was shared in workshops and this study enabled the product team to prioritize features and tasks on the backlog accordingly. Moreover assisted in positioning better the product's market fit due to fine-tuning features the competition was weak and the engineering team could deliver.
Information architecture for data visualization projects usually involves two stages. First is the "System IA" which addresses which element lives in the hierarchy of the product. The second is "Data IA" which refers on how the metrics "nest" metrics inside them -- dictating the data visualization strategy early on. That part of the IA on complex and data-heavy products is integral. This was also true for Sealoc and that was the strategy behind the information architecture deliverable.
User flows and Wireframes
I combined the outcomes of previous steps to make assumptions and set up the workshops with the product team to iteratively come up with lean user flows for each use case.
While the user flows were devoid of graphical elements the wireframes brought a certain amount of design and were a bit more detailed. This was because some decisions on how to visualize some data and some interactions in the app should be taken early on.
UI Design was delivered with a robust design system enabling the app to be scaled on mobile or desktop. Special consideration was given to aesthetics, users often perceive improved aesthetics with usability, as a result, high-quality pixel-perfect handoff was shared with developers.
Prototyping in Figma was used to align the team and engage the developers on the micro-interactions needed to spice up the app and improve the overall end users' experience. Every interaction -- especially those around data visualization and information consumption in progressive UI schemes was documented.
Colors in data visualization are integral. Colors should assist the user to understand faster and better the information shown. In this case, highly saturated colors were used because research showed the mobile app would be outdoors, with a high degree of the sun. Less saturated colors would not be effective enough for outdoor's usage.
Information Density & whitespace
Research showed that our end users being more professionals than casual, expressed the need to see more metrics in less space. That led to a design with less whitespace and higher information density, which was tested by users who enjoyed it.
Accessibility compliance greatly affected the outcome, respecting WCAG 2.0 in interactions, fonts, and contrast.
Paywall & Onboarding
Paywall design is super important because part of the monetization model would come from user subscriptions. Thus paywall was tested with sets of users to verify its effectiveness. The paywall was designed as part of the user flow. We decided to tease the user with data blurred out to stimulate further interest and subscription.
Impact & Reception
Stakeholders were thrilled with the design outcome and users who tested the app shared positive reviews. This project is currently under development. I learned a lot about data visualization, charts, and heat maps.
I grew my design knowledge of how users interact with digital map products, by testing and observing. I expanded my design skills in delivering an appropriate amount of information without causing overwhelmingness to the user.
Being also a member of a cross-functional team I further increased my communication skills.