Acoustic (formerly known as IBM Watson Marketing) is an independent cloud marketing platform that offers a suite of AI-powered products that help marketers “unleash their brilliance.” They are building a new brand in a crowded marketing technology space and needed a website that could help elevate them above the jargon and complexity associated with the industry. So they reached out to my team at Genuine.
Since Acoustic describes themselves as the company “bringing humanity back to marketing,” Genuine’s UX and design approach put marketers’ and IT professionals’ real needs at the center of the web experience. By asking questions throughout the site and driving to specific solutions — combinations of different products — that answered specific needs, we were able to show how Acoustic could easily help solve the problems these professionals faced.
As the UX Design Lead on the project, I supported our team of visual designers, developers, and business strategists when needed. As with any project, there were challenges. That is kind of the point. The best outcomes emerge from experienced and competent people bringing their ideas and talents to the table in pursuit of shared success. That's how to build something great.
Acoustic asked that Genuine use their own content and campaign solutions for the project, so we had to become experts in their CMS technology. Even so, I'm proud to say that with swift communication and seamless collaboration we were able to complete the entire project from start to finish in just under 6 months!
Our team's strategist worked closely with the client during the initial stage of the project to gather information on their existing customers and define other personas within their target audience. With this information, we were able to piece together documents detailing the different user types and their motivations on our site.
We then focused on jobs to be done, mapping out user flows for site visitors — whether they were simply perusing products or they needed to achieve one of many other tasks, such as contacting the Acoustic team or gaining login access to customer or partner-facing portals.
The team, as well as the client, were invited to review and comment on these documents while they were being formed. Once they were completed we used them as guidelines for the duration of the project.
At the beginning of the design phase, we collaborated with our strategist to come up with the site structure and get an accurate account of the information we will need to display and how much design effort will be required to display it.
Some of the methods we used:
I used page description documents (PDDs) before wire-framing to help us define page goals and structure. Team members provided feedback throughout the creation of these documents.
PDDs helped us to define:
I used Axure 9 to create wireframes and clickable prototypes for this project. Careful consideration was made to represent the functionality of many of the components included. This often meant adding elements with hover-state styling or dynamic panels which would change the display based on user interaction with the prototype. Doing so allowed our testers, as well as those on our team and our client's team, to have a more realistic feel for the desired functionality of the site.
Once wires were approved by the client, I would export the design screens to Google Docs and add annotations detailing each component's functionality. The wires with functional annotations would then be handed to the Graphic Designer and Developer as a reference for the remainder of the project.
The first, and most important, element in our design that we chose to focus on was site navigation. We began by prototyping a couple of different variations for the navigation. Before continuing with the rest of the site design, we did a round of user testing in order to reveal possible usability problems within our proposed navigation. We targeted two of our client's identified user personas and found six testers for each. Testers were asked to complete a series of tasks involving a common landing page and the main site navigation. Half of each testing group was presented with one design variation and the other half another. Doing this allowed us to gain more diverse insights into our designs without having to hire more testers.
The tests were conducted and recorded without a moderator on UserTesting.com. One of my fellow UXers at Genuine stepped in to help with reviewing the recordings and analyzing our findings, which we detailed in AirTable. Through these tests, we were able to identify some potential usability issues with our navigation and so I made the necessary improvements.
The high-fidelity design of this project was a team effort headed up by one of our fantastic graphic designers at Genuine. She immediately got to work as soon as our client approved any round of wireframes. We would collaborate often, which allowed me the opportunity to ensure that the designs would match the functionality and experience detailed in the wireframes. I continued this style of collaboration with our development team when designs were client-approved and they began to code out the templates.
We broke out our efforts into sprints that cascaded and overlapped. So at the same time that I was working on the third round of wires, our designer was working on the second round of hi-fi screens, and our development team was working on the code from round one. Working this way is what allowed us to put this site together so quickly and efficiently.
Recommended for creative teams
One document that helped us throughout the project is a component design library that I created to detail all of our common or unique components. Our designers and developers were able to use this library as a reference when they were unsure if some component code or designs were already accounted for.
Working together, we discussed each component to be included in new templates to conclude whether we already had a component that could be used or we would need to design and develop an entirely new one. I highly recommend creative teams use a similar document on any future projects.
After launching the redesigned site, Acoustic saw increases in traffic, engagement, and form submissions
We built a strong rapport with Acoustic’s enthusiastic CMO, who was eager to collaborate with Genuine on every aspect of design and development. But this partnership was more than a personality fit — we used the actual Acoustic Content Management solution along with Acoustic’s larger product suite to finish building out the site, delivering a platform with the potential to grow and evolve as Acoustic does.
Working with a CMS that was new to us presented difficulties, the most notable being that we were sometimes limited by the tech that was already in place on the Acoustic platform. This meant that we had to create elegant solutions adapted to the platform. I kept in touch with the members of our development team throughout the design process to ensure that the platform was able to accommodate each and every component, and with their help, all the pieces fit together.
A solid team really makes a big difference.
"From the start, Genuine brought all their key team to the table — the same team that worked through the project — and helped us build a partnership before we built a website." - Norman Gudagno, CMO, Acoustic
