Meta, 2023
Digital
Twin
Marine
Web redesign
Project Overview
Digital Twin Marine is a startup company that hired Elevate Agency to help them enhance their online presence. Being one of the only companies that offers drone scanning of boats to be used in the training and commercial industry, they had trouble advertising themselves. Specifically focusing on their website, they lacked consistency and visual branding. My team worked on the website redesign, social media branding, and event planning. I was the product designer of the team.
💭 It was very rewarding to work in an agency where we needed to dive into a completely new space and company for every client. I learned how to work in a fast-paced environment and quickly assess feedback.
My role
👩💻Product designer 📼 Prototyper
📝 UX Researcher 🎨 Art director
My impact
-
Redesigned the company's branding
-
Created end-to-end flow of the entire company's website
-
Audited website and provided actionable feedback to eng team on how fast improvements on language and UX.
-
Drove technical conversations to define the feasibility of the MVP design and framed post-MVP milestone after the company's time with Elevate Agency
Problem Statement
How might we advertise Digital Twin marine to yatch owners and capture their essence through their new branding
The Research
I was asked to annotate as I navigated the website to find what could be improved in terms of UX/UI design. These were my key findings:
-
Confusing home page. At first I saw both ‘About us’ and ‘Services’, I thought that was the information provided on those sections, but as I clicked I realized there’s more useful information. This was quickly clarified with the ‘Learn More’ button in ‘Services’. To avoid confusion and increase the engagement, it might be good to add a ‘Learn More’ that directs you to the page on ‘Services’
-
‘Request Demo’ button can only be found in the home page so whenever a potential client is deeper into the website, they need to go back to the home page. For easier user interaction, this button can be added to the ‘Services’ page. → As I was writing this, I realized the button is on the header of the website, but didn’t notice because as you scroll down, the header disappears. To avoid this confusion to the users, the header can be pinned so the user can still have easy access to that information.
The Solution
After careful revision of the website and multiple meetings with my team, our next game move was to create a strategy plan for the website that included the following points:
-
Storytelling through website (how to approach this by copywriting)
-
Why you should use this product
-
“Don’t do it yourself, we can do it” approach
-
General idea that its cheaper than you would think
-
Advertise it as affordable, but not too flashy about price
-
-
How it can benefit the customer
-
If you’ve never used this tech before, it can teach you what it is, why it’s important, etc.
-
Make the customer special
-
-
Navigation: (Apple user interaction model of scrolling down and filtering information as you go)
-
Menu (horizontal view: yachting and commercial)
-
Home
-
Services
-
Portfolio
-
About Us
-
FAQ
-
Contact
-
Buttons:
-
Login
-
Request Demo
-
-
Navigation: when you hover over ‘services’, commercial and yachting appears, but when you click on it there is a separate site
Separate site: brief explanation of both services with visuals (layout from Sky Futures: franchise)
The Creation
After planning what would go on each screen, it was time to work on the wireframes (my favorite part of the process!) For the website, there were many layouts that could work, so I made sure I showed all of them to the client and my team to come to a group decision for the best format.
once we discussed our best options for each window, it was time to deliver a higher fidelity mock...
