B2B | SaaS | 2023

Hyland

Hyland is a SaaS company that focuses on B2B Enterprise Content Management solutions. My primary goal was to enhance their web presence post-acquisition. I achieved this by restructuring the information architecture, creating a cohesive design, and improving the user experience throughout the buyer's journey.

ROLE & RESPONSIBILITIES

I was directly responsible for Workshops, Information Architecture, User flows, Wireframes, User Testing, and Development support.

TIMELINE

11 months

TOOLS

Miro, Figma, Usertesting.com

OVERVIEW

Finding content on the website was a major struggle for users due to the visual layout and confusing information architecture.

Buyers were unclear of Hyland’s capabilities post-brand acquisition, creating a disconnect as to what Hyland can do for their business.

How might we create connection and understanding for potential buyers post-brand acquisition?

Key Pain Points

30% of users found it difficult to find the information they need to make a decision

15% of users found insufficient content and resources on their website

30% of users found it difficult to understand Hylands capabilities and solution offerings

This project's research and discovery phases were completed a year before I joined the project. The strategy team completed User journeys and surveys, which established four key user groups during the buying journey on the .com site.

User profile

Business Executives

Visits Hyland.com to learn about their understanding of different business challenges. They visit the homepage and strategic thought leadership content.

IT Executives

Visits Hyland.com to seek shareable documentation, read case studies, and understand industry-specific benefits of the platform.

Business Leaders

Visits Hyland.com to understand capabilities to see if they can drive business value and compare Hyland to other vendors.

Developers/Sys Admin

Visits Hyland.com to ensure availability and user experience of developer documentation and access to demos.

WORKSHOPS & IA

After collaborating with the strategy team and uncovering the main pain points of users, I was prepared to lead a card-sorting workshop with stakeholders. Participants were broken up into groups six groups of four and asked to collaborate on a closed card sort. I then grouped the results in a spreadsheet to have a clear understanding of the results.

Areas of opportunity:

Reduce the number of options within the navigation to keep the user focused on the task at hand.
Utilize the footer for key links rather than duplicate the top navigation.
Consolidation of menu items and taxonomy changes.

Crafting the foundations for IA

Screenshot of card sorting workshop

Screenshot of synthesized data

I presented user flows to stakeholders to help them visually identify how primary user groups can achieve their goals with the suggested sitemap. User flows were selected based on major pain points such as “difficulty finding information”, “insufficient content and resources”, and “difficulty understanding solution offerings.”

Connecting the dots

The original state of Hyland’s navigation was overcrowded, with many links leading to dead ends. I used the data from the card sorting workshop to create a simplified experience for users to explore the website and find the most pertinent information to fulfill their goals while avoiding dead ends.

Simplifying the IA

Sitemap - scoped to do three levels of information architecture

Before

After

WIREFRAMES

Visualizing the users experience

After the approval of the sitemap, I then went on to create 100+ desktop and mobile mid-fidelity wireframes with the help of another designer. Before getting started, we set up a wireframe prioritization workshop with the client to decide which website areas were a priority based on the project’s scope and business needs.

Things we had to consider

We took a modular approach to the design, meaning that making future templates would be easier for the client.

We had to create only a few unique modules to limit the scope of our development team.

Our focus was to create an atomic system of modules that could be reused throughout the website. I created a naming convention and broke out each module along with annotations to support the development and visual design team.

What did we accomplish?:

A total of 70+ modules were created
Annotations were based on the module’s purpose, function, character count, and requirements.
This system allowed developers to easily access modules as they began the process of bringing the wireframes to life.

Development support

USER TESTING

After completing the initial wireframes, I set up user testing for pivotal flows during the buying journey. I developed the prototypes and completed two rounds of testing - one unmoderated and one moderated. In many tasks, users were given a set of scenarios that coincide with key moments within the buyer journey.

Goals:

Determine whether the current wireframes meet users’ needs and expectations
Determine the ease, or lack thereof, in completing tasks
Reveal areas of opportunity to improve the current designs

Does it work?

Parameters

Total of 11 participants across both tests

Ages: 23 - 52

Industries: Tech, Healthcare Finance, Education

Job Titles: System Admin, Business Executive, Developer, Department Head, Project Manager

Screen shot of remote moderated user testing

Overall, users responded well to the different flows on both mobile and desktop. After two rounds of user testing in both the wireframe and visual design phases, I indicated minor improvements that would help improve the integrity of the experience.

Iterations:

Adding micro animations around quizzes to reduce user error
Giving users the option to download and share reports
Updating the taxonomy within the main navigation to help users distinguish between “Over View of Capabilities” and “All Products”

How to make it better?

KEY FEATURES

Creating Value

One of the major pain points of users was their lack of understanding of Hyland’s product offerings and the potential savings that were available. We created two quizzes to aid users and to make the experience more interactive.