Inline actions microinteraction
One of the most relevant issues is that content is not reliable, and users have difficulties knowing which content is good and which not (up to date, duplicated, broken links, …).
Obviously this refers to content quality, but we figured out a couple of thing we could do in the UI to improve this content quality.
We added a rating system for content, so that users may rate which content is relevant and which of them is not. We’ll also provide them a way to report if the link to the material is broken, and with so we expect that the overall quality improves.
Obviously this refers to content quality, but we figured out a couple of thing we could do in the UI to improve this content quality.
We added a rating system for content, so that users may rate which content is relevant and which of them is not. We’ll also provide them a way to report if the link to the material is broken, and with so we expect that the overall quality improves.
The action model + Microinteractions
Some areas had been historically relegated to secondary spots. Our research revealed that all of them were really important for sales representatives, and so we decided to promote them to the Main navigation bar.
The Hot topics section
Most users access the portal looking for everything the company has about a specific topic, like “Give me everything we have about Security”. And the portal wasn’t providing a solution for this type of access.
So we created a new section called “Hot topics”, that solves specifically this point. In this section users may find eveything the company has about the 8 most relevant topics.
So we created a new section called “Hot topics”, that solves specifically this point. In this section users may find eveything the company has about the 8 most relevant topics.
Important things on top
Search results page with refinement filters and infinite scroll
The search results page enables now users to see as many results as needed (infinite scroll), and to refine the search with all the attributes and metadata related to every type of result.
Search autocomplete behavior in the hero section of all pages
Search has been promoted to the most relevant spaces in the UI. The Hero section for all the main areas landing pages now contain a big searchbox that allows users to search for content in the whole portal or in the selected context.
We’ve also added an autocomplete behavior - that may display the most relevant results of every content type that match with the search - to simplify and speed up access to content.
We’ve also added an autocomplete behavior - that may display the most relevant results of every content type that match with the search - to simplify and speed up access to content.
Fostering Search & Filter
We want users to (use) search (and not to navigate)
We set a major design principle according to research, metrics and the solution concept:
Search was the first option for most of the users, and will be the most important way of accessing information and content in the new portal.
The Information architecture has been redefined, but it still is a complex structure, and considering it the main way to access content would be risky. Instead, we decided to foster Search as the main way to get to content, and to keep the classic navigation as a search fallback and providing a structured way to access it (we also get a plus of people learning the new architecture).
The Information architecture has been redefined, but it still is a complex structure, and considering it the main way to access content would be risky. Instead, we decided to foster Search as the main way to get to content, and to keep the classic navigation as a search fallback and providing a structured way to access it (we also get a plus of people learning the new architecture).
Design - the solution
Inline actions microinteraction
One of the most relevant issues is that content is not reliable, and users have difficulties knowing which content is good and which not (up to date, duplicated, broken links, …).
Obviously this refers to content quality, but we figured out a couple of thing we could do in the UI to improve this content quality.
We added a rating system for content, so that users may rate which content is relevant and which of them is not. We’ll also provide them a way to report if the link to the material is broken, and with so we expect that the overall quality improves.
Obviously this refers to content quality, but we figured out a couple of thing we could do in the UI to improve this content quality.
We added a rating system for content, so that users may rate which content is relevant and which of them is not. We’ll also provide them a way to report if the link to the material is broken, and with so we expect that the overall quality improves.
The action model + Microinteractions
We like to expose the design to some stress before the development starts, and for the portal we built an amazing test.
HP hosts several events every year, and most of our target users attend them. It sounded like a great spot to put the design to test, but… it was not the environment to set up a classis usability test. So we decided to dress a classic usability first-click test as a challenge contest.
We set up a spot in a crowded area of the event, deployed a first-click test (using Optimal Workshop) in several laptops, and dressed it all up like if it was a TV contest, where users were asked to complete a bunch of challenges (the tasks) with the portal.
HP hosts several events every year, and most of our target users attend them. It sounded like a great spot to put the design to test, but… it was not the environment to set up a classis usability test. So we decided to dress a classic usability first-click test as a challenge contest.
We set up a spot in a crowded area of the event, deployed a first-click test (using Optimal Workshop) in several laptops, and dressed it all up like if it was a TV contest, where users were asked to complete a bunch of challenges (the tasks) with the portal.
The Hot topics section
At the end of the test, we gave them a random 3-number combination, and led them to a safe box. If their number opened the safe they won a prize. Otherwise… they got some chocolate.
And that’s it… Up to 102 users took the test, and we had plenty of results to refine our design and proceed to development.
And that’s it… Up to 102 users took the test, and we had plenty of results to refine our design and proceed to development.
Let’s test it!
Sketching the solution concept
The selected ideas were sketched with Invision Freehand, and set to test. All of the sketches included the navigation model, navigation alternatives, search & filter patterns, and the defined information architecture.
Building the concept
Lightning talks about the portal
Crazy 8s
Crazy 8s results
We ran a short version of a design sprint with 2 designers, a business stakeholder, and a solution architect. It included lightning talks, Crazy 8, voting & decision, sketching and validation.
The sprint
• The information architecture does not match with their mental model or even company standards
• Search is useless because refining the search with additional filters is not available
• There’s outdated content and duplicated content and people don’t know which is the good one
• Search is useless because refining the search with additional filters is not available
• There’s outdated content and duplicated content and people don’t know which is the good one
There were 3 causes of people getting lost in the portal and not finding the content they’re looking for:
“People must be able to find what they’re looking for”
The challenge
Most frequent searches
Most visited pages
The current portal had only a few performance, traffic and usage metrics. We took a look to most visited pages and most frequent searches, but revealed no relevant insights (apart from low usage).
Metrics
We soon realized that one of the main causes of “people not finding content” was that the information architecture (or content hierarchy) wasn’t matching sales reps mental model.
So we arranged some classic closed card sortings (one per role) to figure out what could be a good structure to start up with.
So we arranged some classic closed card sortings (one per role) to figure out what could be a good structure to start up with.
With the card sorting results and stakeholders knowledge we built what we thought would be a good approach for information architecture of the different portal areas.
Though, to make sure it worked we decided to test it out with a classic Tree test (using OptimalWorkshop again). Results were good enough to keep the model (with some fine tuning).
Though, to make sure it worked we decided to test it out with a classic Tree test (using OptimalWorkshop again). Results were good enough to keep the model (with some fine tuning).
Understanding navigation
Main usage scenarios
Negative aspects
Positive aspects
Sales staff is not able to find the content they need in the portal and, when they do, in many cases it’s not up to date.
The interviews included Design Thinking, Innovation Games, and Manual thinking activities. Afterwards, all of the qualitative insights were double checked with a massive survey that responded up to 350 Sales Staff representatives.
• Which are the main usage scenarios for each role/profile
• Get qualitative insights about positive and negative aspects
• Get a perception of hoy the current system is perceived
• Get qualitative insights about positive and negative aspects
• Get a perception of hoy the current system is perceived
Up to 25 individual and group interviews were conducted with users from all regions (EMEA, AMS, and APJ) withe the three goals in mind:
Design thinking sessions & surveys
Research & insights
The portal is intended to be the ‘single source of truth’ for all sales reps. They should get there all the information about the selling process, assets, document templates, contracts, and so on.
If the portal is not being used, it means that the’re getting information and assets from somewhere else that may be not up to date, incomplete, misleading, or even wrong.
If the portal is not being used, it means that the’re getting information and assets from somewhere else that may be not up to date, incomplete, misleading, or even wrong.
“The current portal is not being used as much as we’d expect. And that’s a problem, because it should be their main access to updated content and assets.”
The kickoff