Inspiration

Reimagining a SaaS platform

4 min read
Erica Ehrlich
  •  Oct 26, 2016
Link copied to clipboard

Conductor launched as a search engine optimization (SEO) platform in 2010. In the 6 years since, we’ve grown to tackle so much more than enterprise SEO for marketers.

Our Searchlight platform encompasses SEO, content strategy, competitive intelligence, and paid search optimization. Our customers—brands like Citibank, FedEx, Birchbox, and JustFab—have asked for numerous enhancements, adding to the volume and complexity of functionality.

But let’s go back a few months. On a Friday afternoon, I flopped into my desk chair, weary from deliberating where to add a link to a new feature in Searchlight’s navigation. Nearby, I could hear a colleague speaking with a customer over the phone. The customer asked, “I know we covered this in training, but where is that report we talked about?”

“Think about the first impression your platform makes.”

Twitter Logo

That’s when it hit me: We needed to step back to consider Conductor’s experience holistically. What kind of first impression were we making? Could our customers intuitively find and understand all the new technology we created? Was the navigation supporting our users in the best possible way?

We needed to re-evaluate the platform’s information architecture (IA) and navigation.

Does your design keep pace with the speed of product innovation?

It’s a challenge many SaaS platforms face. Your product has changed almost unrecognizably since launch—your technology has evolved, and your customers have multiplied and evolved, too. You can’t put your finger on the moment it all changed, but it’s night and day when you look at it from a distance.

That’s exactly what happened to us.

Conductor Searchlight, before the redesign

I’d like to share how we created and executed a plan to reimagine our product’s experience to evolve the platform while respecting our existing and loyal users.

Signs it’s time for a platform redesign

It might be time to take a look at your IA and navigation if you notice that:

  • During usability tests for other features, users struggle to find items in the navigation
  • Users spend a lot of time navigating to complete a common or key flow. Imagine an ecommerce site where you couldn’t get directly to your shopping cart from every product page—not good.
  • Users contact Support with questions about where to find things
  • Where to find important screens or functionality is a focus of the onboarding or training experiences
  • It’s challenging to find a natural home in the existing organizational structure of the navigation for a new screen or feature
  • You need to add another section or item into the navigation but there’s no room for it
  • The site or application map documentation isn’t up to date

Planning your redesign strategy

The signs can indicate problems with how content is organized, the navigation’s interaction design, scalability, or a combination thereof. To ensure due diligence in all areas, we decided to focus on 3 aspects of navigation independently but in parallel: information architecture, interaction design, and visual look and feel. We’d converge these 3 separate design tracks later on.

Assessing the status quo: Learn from current user behavior

Before designing, analyze the current experienceTwitter Logo to identify aspects to preserve, eliminate, add, and improve.

We created an up-to-date site map, then dove into an analysis of the current platform, leveraging observational research, user feedback, and usability testing in order to answer for each design track:

  • What was working well?
  • What were the usability issues?
  • What was missing?
  • Were there specific flows that could be improved?

Crafting your design goals

Our design team always defines project goals that are distinct from user stories. They’re used to help make decisions during the design process and vet a design’s effectiveness. For a redesign, goals help ensure new designs aren’t just different, but better experiences.

“Use design goals to make mindful choices and vet a design’s effectiveness.”

Twitter Logo

Our overall goal was to make the robust platform feel simple. But how? Armed with our earlier assessment, we identified goals that all designs in each track would be evaluated against:

  1. Organize the platform’s IA to align with an existing mental model of our users
  2. Create one consistent, unchanging navigation menu that contains all of the platform’s content and clearly indicates to the user where they are in the platform. Eliminate separate navigation experiences in sub-sections.
  3. Conductor Searchlight Site Map before the redesign.
  4. Remove all extraneous or distracting elements such as icons without utility
  5. Provide affordances and set clear expectations in the interaction design
  6. Minimize clicks to get between screens, particularly for most common workflows
  7. Number of clicks to get to a workspace.
  8. Define and apply a new visual look and feel for Conductor Searchlight
  9. Create a scalable, future-proofed system. Section names should remain relevant and the menu’s design won’t limit the number of items it can contain.

Discovering the right information architecture: Speak to users

Speaking directly with users is the best way to identify their mental modelsTwitter Logo and understand how they seek out information. Recognize their differences, but also look for similarities.

To identify possible organizational strategies, we began simply with our site map and a whiteboard to conduct a content inventory, listing for each screen ways that could be used to categorize it. However, a great IA is structured around how people seek out informationTwitter Logo, so we needed to get inside the heads of our customers.

The product and design team had been conducting multi-hour interviews with customers to determine their motivations, needs, and challenges. We wanted to better understand how they fit into the digital marketing ecosystem of their organization and spent their days beyond Searchlight.

“Structure your IA around how people seek out information.”

Twitter Logo

Digital marketing, particularly organic content marketing, is a young, fast-growing industry that’s still evolving. As a result, we were struggling to identify patterns based on organizational structure, how responsibilities were assigned to individuals, and even aspects of organic marketing. Capturing the differences in a few key personas seemed nearly impossible.

Yet interview after interview, a similarity far greater than their differences emerged. Yes, the role of an SEO strategist or content marketer varied greatly across organizations, and yes, they were are all using different tools, investing different amounts of time, and performing marketing activities for different reasons. But they were all performing the same activities.

We created a prototype organizing screens under imperative sentences representing these “Digital Marketing Activities,” such as “Measure Visibility” and “Investigate Competition.” The usability test results were remarkable. Users with expertise in only one or 2 particular activities understood what the rest of the platform could offer, and users with deep knowledge of the existing platform easily reoriented themselves in this new structure. We’d merged the best-in-class activities learned from our customers into the IA as a workflow.

The IA was successfully vetted against the design goals by considering: Will these sections continue to be relevant as the industry evolves? Will it work for future screens we may not have thought of yet?

Designing the navigation’s interaction

Don’t pull any old pattern off the shelfTwitter Logo—explore or create interactions that make sense for how people want to interact with your site or application.

We explored 2 very different approaches to the interaction. One was a hidden menu—its biggest asset was opening up valuable screen real estate for our users who want to consume a lot of data at once. It failed in testing because of the frequency with which users switch screens; the extra step to expose the menu (even on hover) proved cumbersome.

“You don’t have to change everything in a redesign.”

Twitter Logo

The other approach, a horizontal menu, felt more familiar to the existing experience. We improved its efficiency by keeping it visible on screen when scrolling down, allowing the user to move through a flow without having to scroll back to the top of the screen. The lesson here is don’t change everything! Some features can simply be tweaked to improve, rather than be drastically changed.Twitter Logo

Prototypes: Hidden menu (left) versus horizontal menu (right).

Finding a visual identity

Design goals are immensely helpful for getting alignment on visual design, too. Leverage mood boards in place of the written word.

This project was an opportunity for us to align Searchlight’s visual styling with who Conductor is today. As I mentioned earlier, the design team crafts goals in order to focus the process and vet designs. We chose to leverage mood boards in order to do that for the visual design. We took a research-based approach to define this identity too. We asked stakeholders questions such as, “If Conductor were a physical space, what would it be?” and we drafted 8 distinct mood boards based on the interviews.

We then conducted a focus group-style sessions. We asked individuals to describe each mood board in their own words and rank them based on how much or little they “felt” like Conductor. We used the findings to synthesize a unified mood board that now acts as our guiding light for all Searchlight visual design. In review sessions, designers and non-designers alike can better discuss whether a new visual design “feels” like Conductor.

Conductor Searchlight’s mood board.

Converging the tracks: Look for last-minute opportunities

When combining separate tracks of a project, re-evaluate the merged concept.Twitter Logo A sum is greater than its parts, and there may be unforeseen problems—or even more improvements to be made.

With due diligence completed, the new IA and navigation interaction design were combined in a new prototype. While we created a visual design inspired by the mood board, we conducted additional user testing. Seeing everything together, we noticed the navigation’s horizontal layout supported our left-to-right digital marker workflow very well. We spotted an opportunity to add section descriptions into the menus to aid in learnability.

The reimagined platform: A new IA and navigation experience

Conductor Searchlight’s new navigation, with an open-section menu.

Conductor Searchlight’s new site map.

Late on this Friday afternoon, I’m excitedly working on some new screens and I know exactly where they’ll go in the navigation. Nearby, a colleague is speaking with a customer over the phone, and they are not discussing navigation. Our customers can focus entirely on creating compelling content, increasing traffic, and getting higher organic marketing ROI because the new experience seamlessly supports their activities.

When we first entertained the idea of redesigning the IA and navigation, it felt like we were entering uncharted waters. Taking a methodical, user-centered, and research-based approach helped us create a re-imagined experience that feels “simple” to new and existing users alike.

Read more Design Teardowns

Collaborate in real time on a digital whiteboard