Cohesity

Cohesity, a leader in data center and cloud management, needed a website to clarify their technical solutions and outline their platform.

LEAD DESIGNER
user experience | information architecture | wireframes

1
INFORMATION ARCHITECTURE / SITEMAP

The information architecture was redesigned to accomplish the following: show visitors the detail they want, generate leads, and indicate Cohesity’s shift from a hardware company to a software company. The types of users were also kept in mind. It was crucial to ensure that all users would be able to use the site effectively - from tech gurus, concerned with hyperconverged secondary data storage, to operations folks, who are driving business efficiency.

Current Sitemap (for old site)

Sitemap before the redesign.

Redesigned Sitemap

Typically, sitemaps only include actual pages. However, in this case, non-pages were included to help the client understand how sections were being categorized. Non-pages were indicated by a icon of a page with a red strikethrough.

SITEMAP

The first step was to build out Cohesity’s current sitemap to account for all pages and analyze the structure of their site.

Next up was the new, redesigned sitemap. The new sitemap was restructured to generate leads and instill Cohesity’s focus of being a software company as opposed to a hardware company.

Click the arrows to compare the old sitemap vs. the new sitemap.

NAVIGATION AND DROP DOWNS

The navigation consists of a utility menu on the top right and a standard left-aligned main menu.

The utility provides easy access to resources, partners, and support, as well as search and a main call to action button (CTA). This was a research-based decision; data analytics revealed that users often seek out these items. Blog was also included as Cohesity planned to publish content more frequently.

The order of items in the main nav was strategically decided. ‘What We Do’ was placed first to put Cohesity’s vision and expertise at the forefront. Providing users with a clear company story was a top goal.

2
WIREFRAMES

Wireframing was the next major task after the sitemap and navigation were approved. I examined the current site page-by-page to determine which pages had similar content and could potentially have similar page structures. From there, I created a list consisting of 30 templates.

Various wireframes

I created a variety of components that displayed main points on page load and detail points on either hover or click. This helped to ensure that the most important bits of information were displayed clearly and concisely, enhanced legibility and information digestibility for users and cut down on page length.

Homepage wireframe

The flow of the homepage narrative is color-coded and outlined to the left of the wireframe. Notes for each blade and specific components are outlined to the right of the page. The main goals for the homepage were to introduce Cohesity as a leader in their niche market, provide validation as to why they are a leader and clearly outline what their solutions and product offerings are in a manner that was not too technical.

Innovation wireframe

Cohesity needed a page to highlight its innovative platform and its benefits in comparison to older, conventional methods. I created an “Innovation” page for this purpose.

Other top priorities were governance, consistency & scalability throughout the website. To accomplish this, I created a number of design components that could be reused on various pages. I also ensured that these elements could be easily manipulated in the event that content needed to be added or removed.

Screen Shot 2019-06-20 at 10.38.04 PM.png

Screen Shot 2019-06-20 at 10.41.29 PM.png

Screen Shot 2019-06-20 at 10.57.09 PM.png

3
DESIGN

Utilizing an agile process allowed this large scale project to move more quickly. Wireframes and design were tackled concurrently. Throughout the project I was simultaneously tasked with creating new wireframes, editing previous wireframes, handing off approved wireframes to the visual design team and reviewing visual designs to ensure that UX priorities such as key functionalities and page structures were being honored.

Comparison Slider

Here is a look of the comparison slider on page load. The user can click the bar and drag it left or right. The infographic changes upon drag so that the user can easily compare the differences between Cohesity’s innovative storage methods as opposed to older, conventional methods.

Comparison Slider 2

When the bar is positioned all the way to the right, the infographic illustrates how Cohesity has innovated & vastly simplified storage methods.

Comparison Slider 3

When the bar is positioned all the way to the left, the infographic illustrates how complicated and inefficient conventional storage methods are.

4
DEVELOPMENT

In keeping with the agile process, each page design was handed off to development upon approval. My QA efforts included checking that interactions were functioning properly and serving their primary purpose.

Cohesity

Cohesity

Cohesity, a leader in data center and cloud management, needed a website to clarify their technical solutions and outline their platform.

1INFORMATION ARCHITECTURE / SITEMAP

2WIREFRAMES

3DESIGN

4DEVELOPMENT

1
INFORMATION ARCHITECTURE / SITEMAP

2
WIREFRAMES

3
DESIGN

4
DEVELOPMENT