Saildrone
Saildrone embarked on a multi-purpose mission: giving their old website a facelift, rebranding themselves as a data service company, and investing in web technology that's easy to maintain internally to cut down on development debt. Our job? To revamp and build everything from their brand book to a sophisticated marketing site. They envisioned a site that's responsive, user-friendly, and scalable, with a design that encapsulates the cutting-edge essence of their services.
Getting to know Saildrone
Saildrone was repositioning itself as a company that sells data obtained from missions undertaken by their Saildrone vehicles. Their groundbreaking technology is not only exciting but also visually distinctive. They wanted a user-friendly website experience for visitors that showcases this revolutionary technology and clearly presents their data service model.
The Challenges
The major challenge we had to address with the Saildrone site was how to create a website that speaks directly to the needs and interests of three very distinct vertical industries while simultaneously maintaining a cohesive and consistent design language across the site. Additionally, they wanted a web technology that they could easily maintain and update in-house, as well as a navigation design and user flow that were intuitive and user-friendly to help generate leads.
Brand strategy
Our mandate included developing the Saildrone Brand book to ensure there was a consistent design language and cohesion to the brand strategy. We needed to focus on creating a brand that leveraged the unique look of Saildrone’s technology while maintaining an elegant design reflective of their leading-edge status. To this end, research would be essential to ensuring we targeted the primary verticals appropriately and effectively.
Web strategy
It was vital that the web strategy centered on a refined design that not only showcased Saildrone’s position as a leader in their industry but also provided a seamless user experience that facilitated lead generation. This included sleek visuals, animated explanatory images, clear navigation, and clean design.
Empathy maps
We hosted an in-depth empathy mapping session with key client-facing players at Saildrone to help develop our understanding of who their users are and reveal their needs, wants, goals and pain points. These empathy maps are vital to help us build accurate and holistic persona profiles, which then guide us on how to create a website that speaks directly to them. This was especially critical for Saildrone, as they had three unique persona profiles with very different requirements.
Persona posters
The research feedback generated detailed, three-dimensional user personas. Transforming the research into visually appealing posters, replete with critical user information, serves multiple purposes. It acts as a roadmap for us to design a website that caters to the persona, keeping it at the forefront of our minds during the design process to ensure we are always on point. Additionally, the posters serve as an important marketing aid for the Saildrone team to use in other media channels.
User stories
Constructing user stories was the next step after identifying our user personas. Essentially, user stories serve as a means to assess what the personas aim to achieve when visiting a website. By using these user stories as our reference, we ensured that the tasks users were likely to want to accomplish could be streamlined
Brand guide
Saildrone’s brand guide is an invaluable tool for marketing across all media channels. It becomes the marketing team’s single source of truth and helps unify the brand, providing consistency and enhancing brand identity. Beyond informing the website design, the brand guide serves as a time-saving resource for the Saildrone marketing team, ensuring all members are in sync.
Wireframes
Creating wireframes goes hand in hand with writing copy for key pages, offering a quick and accurate way to establish page content. They also provide a 'sneak peek' visual of what the content on the site might be while still allowing for an organic evolution of the design. Once we established during the review process that Saildrone was happy with the wireframes, we transitioned into the design phase.
Website designs
Central to the design was the fine balance between creating a website with a consistent design language while at the same time differentiating it visually to target the three primary vertical industries. A unified UI experience was established through consistent headings, buttons, and layout, while thoughtfully chosen visuals and complementary color schemes were selected to target the different audiences specifically. As the topic was quite technical, we kept the design clean and as unobtrusive as possible, with scannable content.
Client-First and best practices
The web strategy for Saildrone centered around following best practices, which include prioritizing the users’ needs and building those solutions into the design process, structuring the website so that it could be maintained and updated easily in-house by the Saildrone team, and establishing a unified visitor experience through consistent design and seamless user flow.
Training & hand-off
After completing the design and development phase, we convened with Saildrone to deliver thorough training and handoff. This involved conducting recorded one-to-one training sessions with the Saildrone team, covering topics such as the client-first approach, utilizing the Webflow CMS, and leveraging unique collections within the project.
Etiam ut metus vitae urna aliquet auctor. Suspendisse potenti. Integer bibendum mi nec ligula cursus, non laoreet velit gravida.Fusce tincidunt sem in justo gravida, non congue mi scelerisque. Aenean suscipit quam non sem viverra, a facilisis dolor interdum.
Donec convallis, purus at vestibulum consectetur, erat nunc bibendum nulla, a dignissim nulla dolor vel est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut justo sit amet orci condimentum fermentum. Etiam ac velit massa. Nullam ut ante id arcu congue venenatis. Integer vel tincidunt nunc.
Etiam ut metus vitae urna aliquet auctor. Suspendisse potenti. Integer bibendum mi nec ligula cursus, non laoreet velit gravida.Fusce tincidunt sem in justo gravida, non congue mi scelerisque. Aenean suscipit quam non sem viverra, a facilisis dolor interdum.
Donec convallis, purus at vestibulum consectetur, erat nunc bibendum nulla, a dignissim nulla dolor vel est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut justo sit amet orci condimentum fermentum. Etiam ac velit massa. Nullam ut ante id arcu congue venenatis. Integer vel tincidunt nunc.
Etiam ut metus vitae urna aliquet auctor. Suspendisse potenti. Integer bibendum mi nec ligula cursus, non laoreet velit gravida.Fusce tincidunt sem in justo gravida, non congue mi scelerisque. Aenean suscipit quam non sem viverra, a facilisis dolor interdum.
Donec convallis, purus at vestibulum consectetur, erat nunc bibendum nulla, a dignissim nulla dolor vel est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut justo sit amet orci condimentum fermentum. Etiam ac velit massa. Nullam ut ante id arcu congue venenatis. Integer vel tincidunt nunc.
Etiam ut metus vitae urna aliquet auctor. Suspendisse potenti. Integer bibendum mi nec ligula cursus, non laoreet velit gravida.Fusce tincidunt sem in justo gravida, non congue mi scelerisque. Aenean suscipit quam non sem viverra, a facilisis dolor interdum.
Donec convallis, purus at vestibulum consectetur, erat nunc bibendum nulla, a dignissim nulla dolor vel est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut justo sit amet orci condimentum fermentum. Etiam ac velit massa. Nullam ut ante id arcu congue venenatis. Integer vel tincidunt nunc.
Etiam ut metus vitae urna aliquet auctor. Suspendisse potenti. Integer bibendum mi nec ligula cursus, non laoreet velit gravida.Fusce tincidunt sem in justo gravida, non congue mi scelerisque. Aenean suscipit quam non sem viverra, a facilisis dolor interdum.
Donec convallis, purus at vestibulum consectetur, erat nunc bibendum nulla, a dignissim nulla dolor vel est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut justo sit amet orci condimentum fermentum. Etiam ac velit massa. Nullam ut ante id arcu congue venenatis. Integer vel tincidunt nunc.