Sales Resource Site Redesign UX + UI

With the input from the stakeholders, we have identified 3 core users that access various areas of MediaKit with various levels of frequency.

I began the process by analyzing what it is we are focused on learning, what and how to ask users, researching best practices and tools for surveys creation. At the end I’ve decided that Google forms would suffice for our need and have created the survey that was sent it out to about 500 users, with 98 recorded responses.

I found my findings informative — it has become obvious that the current version of the content organization was only partially working for the site visitors, as evident from the visuals below.

We’ve conducted an in-person card sort with several users in an effort to see how they would organize the content and got different results from each card sort, which gave me a direction but didn’t give me a clear answer.

Considering the amount of content and our resource limitations, we had to simplify basic categories and get rid of redundant content, i.e. sales decks, talking points, and the like. We wanted to see content-related logic of our users. To gain insight, we have conducted a digital card sort. We sent it out to over 500 users and have gotten 57 solid responses, all of them varied in quality of feedback.

Based on the feedback provided from the card sort, and in an effort not to overlook anything while dealing with limited scope of content during the card sort, I have catalogued all of the pages currently housed on MediaKit site.

In my research I have discovered that there were quite a few orphan pages, some were published, but not surfaced. Others were set to private view only.

Then I evaluated and categorized the content by its type. At that point for the sake of faster workflow I organized the content using the whiteboard and moved into Sketch to create a new Site Map based on its logical categories.

Once the site map has been approved by the stakeholders, we decided to tackle the page structure. Our first priority pages were the solutions pages. All of them are different and all varied by content. The primary concern for the stakeholders was the product knowledge for the sales staff — our users. The primary concern for our users was the ability to get to the documents they need in the most efficient way as well as the ability to order said solution. I do have to mention that there is a disconnect between how our end users utilize this website and how the stakeholders think it should be or is being used.
The stakeholders seemed to have been taken by surprise when they’ve learnt about said differences in perception.
I was given the list of the desired content on the page. With the requirements of both groups in mind, I organized the information logically in a digestible way. I chose to explore paper wireframes first, as they are easy and fast to produce.

I have organized the content based on our users desires of the documents and best practices/talking points to be available at the top of the page along with a CTA to order the solution.
Then I added the strategy and tactics below, followed by stats / graphs / infographics, product specs and production times, and a contact on the bottom.

For user testing, I have added some general content and some imagery, so the user could connect with the task better, without it being fully polished.

Even though originally I planned on having a built-in contact form to enable user to reach out to a subject matter expert, after some research it became clear that most people prefer to copy and paste the email address into the address bar themselves, which gives them a feeling of being in control and they are sure the email have reached the recipient. As opposed to having a button that launches an email app, which often is unexpected to the user.

In addition, there was an additional contact added, since each solution has a separate sales and fulfillment contacts.

To test my hypothesis and assumptions for the nav layout, taxonomy, content grouping and hierarchy, I’ve created 2 simple prototypes in Invision and have distributed the link to a few users requesting their feedback, around the following tasks.

To test the nav

1. From the Homepage on the Nav locate Solution 1 link and navigate to that page
2. On the Nav locate Marketing Strategy by Platform and navigate to that page
3. On the Nav locate Newsletter link

To test the Solution page

1. Order a solution
2. Discover additional Best Practices
3. Discover Internal Documents
4. Contact a Subject matter expert

In the feedback that I have gotten there were no concerns voiced on usability, naming conventions, and content organization. There were some abstract questions not related to the task, so I asked for clarification.

Since the user testing validated my assumptions and no concerns were raised. I have mocked up the page based on the wireframe. This mock was used in creation of various solution pages. The content for each solution differs, but the content architecture noted in the wireframe was to be followed.

Along with content re-organization, the site needed to employ better conventions to imply interactivity. I opted for using cards with images along with small description for each of the products, which made them look “clickable” according to our guerrilla user testing. The card then would lift up and have a drop shadow on hover.