oneTank
Role: Lead UX Designer
Project Type: Client-facing, group work, website
Client: oneTank, small startup
Duration: 4 weeks
Link to Prototype
Overview
oneTank designs ballast water treatment systems for small ocean-going vessels. The experience to purchase such a system is complex and opaque, wasting companies’ resources while losing customers who need to meet mandatory maritime regulations. To address this, oneTank’s website was redesigned to simplify the purchasing process and provide a platform where users can transparently learn about the product and showcase their advantage in a competitive market.
Goals
1. Construct the website to match the sales process
2. Accommodate additional content categories including:
Sections to tell oneTank’s story
Technical specifications
Account management
E-commerce
oneTank designs ballast water treatment systems for small ocean-going vessels. The experience to purchase such a system is complex and opaque, wasting companies’ resources while losing customers who need to meet mandatory maritime regulations. To address this, oneTank’s website was redesigned to simplify the purchasing process and provide a platform where users can transparently learn about the product and showcase their advantage in a competitive market.
Goals
1. Construct the website to match the sales process
2. Accommodate additional content categories including:
Mid-fidelity prototype
01_Empathize
Understanding what’s at stake and the user’s needs & contextsWhy should we care?
With maritime transport representing 80% of global trade, 10B tons of ballast water are transported annually, bringing along with it 7000 marine species daily all across the world. Ballast water treatment systems contribute to cleaner waters by allowing it to be treated and removed without damaging the ecosystem. As a new competitor in a market that’s expected to reach $117B by 2025, a redesigned website would help oneTank stand out by showcasing their simple and more affordable option on a platform that reflects their values. It’s also an opportunity for oneTank to fulfill their mission and business goals of higher user conversion and an enhanced digital experience.
Maritime transport represents 80% of global trade, 10B tons of ballast water are transported annually, bringing along with it 7000 marine species daily all across the world.
Website Audit
Currently, the homepage only provides information about the company and the team, rather than detailed information about the product that would help users make better purchasing decisions. There are opportunities for the informational architecture to effectively communicate oneTank’s values and product features.
Currently, the homepage only provides information about the company and the team, rather than detailed information about the product that would help users make better purchasing decisions. There are opportunities for the informational architecture to effectively communicate oneTank’s values and product features.
The homepage needs to draw users in because it’s the first interaction users have with the company and product.
Key Factors
Based on 8 interviews and market research, we found the following to be the most influential factors when purchasing a ballast water treatment system:
Transparency
Users need information laid out as clearly as possible.
Trust
Users need to be confident in the product through affirming its reliability.
Relevance
Users want information relevant to their needs. A boat vessel owner will want different information from an engineer.
We conducted a use case workshop with oneTank to clarify and align on an expected flow a user would take when purchasing a ballast water treatment system. Not being familiar with the industry, this was a useful exercise in trying to understand our user’s mental models and provide a design framework on which to build on.
02_Define
Determining the problem and scoping down the challengeWhat was the problem?
Based on oneTank’s current business model, it was apparent that the product would primarily serve vessel owners. However, the main concern was what would motivate users to choose oneTank over other competitors in the market?
The opportunity lies with the current market’s lack of product transparency and sales hurdles the typical customer for ballast water treatment systems experiences. This led to the development of the following problem statement:
Based on oneTank’s current business model, it was apparent that the product would primarily serve vessel owners. However, the main concern was what would motivate users to choose oneTank over other competitors in the market?
The opportunity lies with the current market’s lack of product transparency and sales hurdles the typical customer for ballast water treatment systems experiences. This led to the development of the following problem statement:
What would motivate users to choose oneTank over other competitors in the market?
Vessel owners need a straightforward way to purchase ballast water treatment systems online because the current marketplace lacks the transparency required to address their vessel’s needs.
03_Ideate
Generating and testing potential solutions
Now that we had a better understanding of our user's concerns, we were ready to identify potential solutions. We approached the initial wireframes based on the main sections the clients suggested as an initial exploration.
Landing Page
To share oneTank’s story and encourage them to pre-order the product
To share oneTank’s story and encourage them to pre-order the product
Features Page
To convey oneTank as the best solution for small vessel owners
To convey oneTank as the best solution for small vessel owners
Pre-ordering
To create a simpler and more transparent pre-order process
To create a simpler and more transparent pre-order process
Account Management
To serve the need for users to take account of orders and maintaining communication with the company
To serve the need for users to take account of orders and maintaining communication with the company
Building Confidence
At this point, we wanted feedback on the concept, and decided to interview 6 potential users.
It was clear that trust and transparency remained important factors for users, wanting to temper any anxieties that come with making such a capital investment.
There were opportunities to increase the affordance of the wireframe including: adding navigation anchors to remind users what page they are on at all times, having explicit copy to describe CTAs to reduce navigation confusion, and re-ordering some of the sections within the landing page to prioritize what users find more important.
At this point, we wanted feedback on the concept, and decided to interview 6 potential users.
It was clear that trust and transparency remained important factors for users, wanting to temper any anxieties that come with making such a capital investment.
There were opportunities to increase the affordance of the wireframe including: adding navigation anchors to remind users what page they are on at all times, having explicit copy to describe CTAs to reduce navigation confusion, and re-ordering some of the sections within the landing page to prioritize what users find more important.
Customers want to visualize themselves using the product and to build trust with the product through rigorous validation. Users want to temper any anxieties that come with making such a capital investment.
Mapping a Solution
In order to develop a more cohesive flow among the sections of oneTank’s website, a site map was developed to construct the overall narrative and composition. The decision to create 5 main branches was based on the following feedback:
FAQ
We decided to include a FAQ page to clarify any lasting questions buyers may have.
In order to develop a more cohesive flow among the sections of oneTank’s website, a site map was developed to construct the overall narrative and composition. The decision to create 5 main branches was based on the following feedback:
About
Users validated that it was appropriate to separate this page from others. They also suggested that case stories would fit more in this section than the Features section because it dives deeper into the company’s story.Features
Though the landing page provides broad overviews of oneTank’s value proposition, users’ preferred a separate page that would go into more detail of the features. Users who purchase ballast water treatment systems often look for the detailed technical specs before making a decision to buy.FAQ
We decided to include a FAQ page to clarify any lasting questions buyers may have.Reserve
Given that a primary goal is for users to purchase a product, including a separate page where people can make transactions was appropriate.Sign-up
Our clients expressed interest in including an account management section. We expanded on this idea by incentivizing users to create an account to get important updates and specs about the product and the ability to manage their payment and contact information.
04_Deliver
Prototyping the solution and investigating opportunitiesThe structure was set. Based on feedback that users would likely not purchase anything of such high capital impact via mobile, we developed a solution on a desktop interface.
Check out the prototype
Check out the prototype
05_Outcomes
Key takeaways from user testing
We were ready to conduct usability tests with 6 potential users in the marine industry to gather insights on ways to improve this iteration.
We were happy to learn that the clarity of the new website’s structure and overall ease of navigation projected a sense of trust and novelty that users enjoyed and were eager to adopt.
We were happy to learn that the clarity of the new website’s structure and overall ease of navigation projected a sense of trust and novelty that users enjoyed and were eager to adopt.
The key takeaway was that clear and easy navigation is the most influential experience when users were assessing the success and efficacy of oneTank’s website. As result, the new website projected a sense of trust and novelty that users enjoyed and were eager to adopt.
Recommendations
The test results helped us deduce the following questions most pressing to oneTank’s users and offer recommendations to address them. See our full annotated wireframes for more specs.
How do we make the cost of the deposit and overall product more transparent and clear?
Though 100% of our users were able to complete a purchase, we wanted to address feedback on how to make the upfront costs even more transparent. We removed the drop-down menu for prices, and replaced it with copy clarifying that users would only be paying for the deposit first. We opted for a sidebar interface and emphasized that the user would only be paying for the deposit, and not the full price of the system.
How do we design the features page to make it more accessible?
33% of our users failed to find type approvals and specs, so we included navigable anchor points and visual cues to suggest interaction and direction. This also helped reduce navigation fatigue.
Project Takeaways
The UX process can elucidate and prioritize unforeseen business opportunities.
Conducting user research and usability tests and reporting back to oneTank was a productive opportunity to share insights and provide clear and actionable directions for the company. Questions asked during these meetings can elicit potential growth opportunities to address.
Conducting user research and usability tests and reporting back to oneTank was a productive opportunity to share insights and provide clear and actionable directions for the company. Questions asked during these meetings can elicit potential growth opportunities to address.
Timeblocking is effective while doing remote work.
This entire project was conducted during the COVID-19 pandemic, and was done completely remotely. Working on a rigorously planned schedule everyday was helpful with minimizing distractions at home while keeping the goal and objectives in mind for the client.
This entire project was conducted during the COVID-19 pandemic, and was done completely remotely. Working on a rigorously planned schedule everyday was helpful with minimizing distractions at home while keeping the goal and objectives in mind for the client.
Plan productive activities during client meetings.
Workshops with clear agendas and planned activities to further develop the research and design were an effective and productive way to include the clients in the process. Including clients in key points during the design process is an interactive way to ensure product alignment.
Workshops with clear agendas and planned activities to further develop the research and design were an effective and productive way to include the clients in the process. Including clients in key points during the design process is an interactive way to ensure product alignment.
