UX/UI Case study

MarineStartUp*

mobile application

* The real logo and the name of the company had been temporary removed/blured due to the terms of the contract
Designer:
Evgeniya Baranova
Company:
Lionvix Ltd.

About project

In January 2022, a team approached me with a request to design a mobile app. Their goal was to market their brand and make it a game changer in their segment. It was an ambitious and engaging task.
SCOPE OF WORK
Mobile app
iOS 16 (Apple)
TIMELINE
Jan ‘22 -> Jun ‘22
TEAM
Project Manager
Marketologist
Product Owner
UX/UI Designer

The problems to solve

1.Difficult mooring
It can be challenging to locate and reserve short and long-term berths. There is no centralized resource for information in UK, and prices are available upon request. Additionally, waiting lists may be necessary for popular locations.
2.Bad user experience
Difficult communication with marinas over the phone, extended confirmation times, and a lack of websites with relevant contacts and details make it challenging to plan boating trips.
3.Costs
High boat maintenance costs, unclear pricing, and limited service accessibility create challenges for boat owners.

The brand strategy

  1. Become a dominant player in the industry by making MarineStartUp the go-to brand for yachting.
  2. Make the boat market more accessible by simplifying the process of purchasing, upkeeping, and selling boats.

  3. Revise market conditions by developing an electronic ecosystem and eliminating unclear pricing strategies.

The key values

The project goals

  1. Launch an application that will initiate the establishment of a clientele for yacht services. Enhance the user experience (UX) and simplify the process for beginners to enter the industry.
  2. Make the yacht market more standardized and transparent;
  3. Start earning commissions from sales of in-app services.

The interface should reflect

Simplicity, convenience, functionality, romanticism, adventure

Competitive analysis

We extensively researched successful mobile apps in the yacht market, with a focus on visual design, interface, services, and features offered. To gain a better understanding of the global market, we also analyzed the offerings of direct competitors worldwide regardless of location.

Indirect competitors

We also evaluated indirect competitors, referring to applications that people use in addition to our own to solve their problems. We assessed their versatility and convenience and determined whether there is an opportunity to create a superior tool.
They offer precise and comprehensive guidance on navigation, ports, berths, gas stations, and other infrastructure. Users can easily locate and contact relevant contacts via phone or radio. However, it is important to note that this service cannot replace the convenience and function of online booking and parameter-based marina searches.

Key research takeaways

No competitors here in UK
no direct competitors in our location
Availability - key feature
providing the opportunity to see the availability of marina seats is a business advantage
Book & Pay  - must have
the ability to book and pay - an advantage
We can make it better
ability to improve and optimize the search process

User research

The target audience

MarineStartUp will provide a platform for participants in the yacht market to interact. Therefore, the app's target audience will be:
1. Boat owners, as well as renters, regardless of experience level
2. Marinas, as well as service providers and equipment sellers in the future.
To create a business process that considers everyone's needs, we researched UK boaters and marinas.

Personas (UK Boaters)

Based on the results of extensive market research in the UK and analysis of our app's target audience through open sources such as blogs, thematic forums in social networks, special publications, and statistics, we have identified three personas. These personas help us better understand our users' behavior, pain points, and areas of opportunity. During the design sessions with our client, we conducted an analysis for each persona to determine their actions and uncover ways that our business can provide solutions to their needs.
The results were regrouped, depending on the goals and the user:
• Short-term parking (finding a marina to book in advance)
• Short-term mooring (finding a marina urgently on-site)
• Long-term rental (in advance)
• Search for a marina by a foreigner
Possibilities presented by the business have been sorted and ranked. Conclusions have been reached from the resulting graph regarding the high-priority tasks for the application, including its set of functions and features.

User research (UK Marinas)

Research description

We have analyzed existing internet resources for marinas in the UK and discovered that:
• There is no centralized information source for all marinas.
• Comparing marinas and making decisions about booking and prices is difficult due to lack of options.
• Publicly available booking conditions are rare.
• There is no search function for services.
Moreover, we contacted the marinas and acquired firsthand insights directly from them.
– The internal booking system
The number of available berths is not known in real-time. Typically, an employee conducts a round of the marina at 10 a.m. and records the available berths; occasionally, this process is repeated later in the day. However, this is not a real-time process. To secure a visitor berth quickly, it is advisable to call a few hours or days in advance. Reservations are made only through requests, which can take some time.
– Visitor berths typically cost around $2-$3 per meter. Booking through a mobile app is the most convenient option.
Annual berthing costs in the neighborhood of £600-700 per meter. That amounts to over £6,000 for a 10-meter motor yacht. It's difficult to imagine users paying such an amount via a mobile app. If the payment is limited to the deposit through the app, the user journey will be interrupted, and thus, the app will not offer a solution to the problem.
– User experience
Many marinas promptly answered our calls during business hours from 9am to 5pm, while a few had answering machines with a 30-60 second delay.

Research conclusions

The competitors still haven't addressed the issue.
Info services do not provide adequate information for decision-making and booking.
MarineStartUp aims to develop a mobile app that will facilitate booking and consolidate information on all marinas in the UK
This problem could be solved in two ways:
1) Integration with marinas booking systems is not possible as we discovered they do not exist.
2) In order to have a mobile application that displays availability and allows for booking, we will need to create our own marina management system. Although this option is costly and demands additional efforts from the business-side to partner with others, it is necessary.
As a result, we decided to create a web-based service that allows for interaction with marinas through a shared database, making it an integral platform for booking in the UK.

Service map draft (and its entities)

Based on co-design sessions with the client and analysis of data from user research, we created a service map that outlines the necessary components. The service needs to process marina reservations, and will include both a web and mobile application for user convenience. The diagram displays key entities that will be utilized.
Then a service blueprint was created which illustrates the user's journey from searching a marina to leaving a service review. The blueprint outlines the interaction between the marina, the user, and the data processing system during key stages such as registration, search, booking, payment, and review. The information architecture of the service and the complete user flow of the mobile application, whose interface will be the primary focus in the future, were developed based on this blueprint.

Mob App user flow

To design application screens effectively, it's crucial to visualize the entire user journey, including all relevant conditions and entity relationships. This artifact is immensely valuable to the team at all stages of product launch.  Here's a snapshot of the user flow.

Wireframes

The next significant step involved wireframing all the screens of the application and synchronizing with the customer regarding ideas and approaches. To avoid overloading the presentation, I will not showcase all of the wireframing here.

Moodboard

Throughout the design process, it's crucial to align ideas with the customer and establish an approximate color scheme and mood. This will aid in developing a design concept for the future product.

Style guide

The MarineStartUp brand has its own style guide, but we selected colors and fonts for the app that fit seamlessly into the interface and aligned with the brand's philosophy.

User registration section

This section is crucial for creating a positive first impression of the service, and we strive to make registration as efficient and effortless as possible. Therefore, we have included social media and mobile phones as the most preferred, secure, and widely used registration options.

Search section

After signing up, users are directed to the main page, which we added to achieve several goals. Firstly, it immerses users in the brand's feeling. Secondly, it introduces the application's features before they dive into the search. Lastly, it creates a platform for the service's further growth. While the main page could have been omitted, we included it based on the project's objectives.
When the search box is activated, the background animates into a map while a dropdown window opens, revealing a list of marinas by name and location. The map displays two types of marinas: filled pins for partner marinas that can be booked, and light pins for marinas displayed for informational purposes. The search is organized in a way that requires the user to fill out several data categories, including location, berth type, mooring dates, and boat parameters for pricing.

Map style

The technical capabilities enable us to customize the appearance of the integrated map service. Therefore, we seized this significant opportunity to create a distinctive and memorable design.

Search results section

The search results are displayed as a dropdown list or on the map when the window is dropped down. Filter the results by clicking on the filter icon, and also apply additional filters and sort the list as desired.

Marina presentation

There are two marina types available on the app: bookable marinas with access to availability and marinas that are listed solely for informational purposes and require berth requests through the email client. Businesses can determine the value of the latter type of marinas.
The marina page displays all the pertinent information such as technical specifications, weather reports, and available services, along with reviews from previous users. These crucial details could significantly impact the user's decision-making process.
From a design perspective, the challenge was to effectively convey the technical information with brevity. This is particularly important as the numbers included provide crucial details to boaters, such as the ability for their vessel to enter the marina and the available entry times.

Booking and payment section

The booking process should be straightforward, allowing users to easily review and modify the data, including the boat selection and dates. Furthermore, users should have the option to go back to a previous step if needed. The subsequent booking page displays comprehensive details of the confirmed reservation, offering valuable information like the marina's contact details and cancellation policy.
After payment, the booking details are gathered in the "My Bookings" section with the corresponding status. Additional correspondence with the marina team will be visible in the "Inbox" segment (refer to below).

Profile section

All user-entered search information can be reviewed and modified in the "User Profile" section. Additionally, notifications settings can be managed, units of measurement can be changed, offline map download statuses can be viewed, and saved marinas can be browsed in the "Favorite Marinas" section.  This information is organized according to iOS guidelines and is easily understandable to users, facilitating more efficient information retrieval and system interaction.

Key project outcomes

1.Tailored approach
During market, competitor, and user research, we gained numerous insights which ultimately influenced the application's user flow, visual design and overall functionality.
2. The result gained
We have developed a mobile app as a key component of the system for managing availability and reservations of marina berths. The application fully achieves the goals and objectives of the project and is customized to meet the specific needs of the target audience.
3.Client's vision
The design sessions have yielded a comprehensive vision for the client's product and its future launch and evolution.

Thanks for watching!