Hyland Community web and mobile re-design

Hyland Software is the developer of the enterprise content management and process management software suite called OnBase. 

Applications of the suite are used in healthcare, financial institutions, insurance, government, higher education and manufacturing.
I was a User Interface and User Experience Designer and reported to the Product Manager. 

Worked closely with the team of developers and spent a lot of time in our usability lab to monitor the testing processes alongside our User Experience Manager. 

Developed UI mockups and prototypes that clearly illustrated how the Community website functions for our team. Created graphic elements, such as badges, menus, tabs and widgets.

Conducted layout adjustments based on user feedback.
Hyland Community website had grown organically on Telligent Community platform to provide modern community applications such as forums, blogs, wikis, ideation, media galleries, and calendars. 

The website needed a visual refresh and greater flexibility for its content. We had to recreate the "local" and "global" navigation systems to improve the content findability by users. A top priority was for everyone to have access regardless of ability, context, or situation. 

We wanted to boost user engagement with gamification methods to create a feeling of achievements by users. 
The largest challenge going into this project for our team was scope, so we had to be incredibly resourceful with where we focused our time.

With that in mind, we agreed the priority was to focus on forums, the global (site-wide) navigation system and the local navigation systems which allow users to explore the immediate area.
We met with the head of technical support department and some of our employees that were highly engaged with the Community website. 

The purpose of the meeting was to discuss the problems they were facing while interacting with the Community website and took notes on what they had to say to improve the website.
Hyland's technical support department is a vital element of the Community website. We wanted to create a better experience for them to improve the quality of customer support. 

The team was often buried in support tickets and live chats, answering the same questions over and over again, it was incredibly frustrating. 

We decided to dedicate a library of information (Knowledge Base) in the website about our products and services.

Negative feedback was often ignored. They were conscious of our hierarchical system’s order, believing that it was not working perfectly. 

The goal was to recreate the organization, labeling and navigation systems to optimize the search engine. 

We wanted to create a more controlled environment with the potential to not only solve problems, but strengthen relationships.
Deep understanding of a target audience is fundamental to creating an exceptional platform. 

Personas helped our team find the answer to one of our most important questions, “Who are we designing for?” Empathy was our core value. We wanted to identify and gain a perspective similar to our end user's. 

We conducted a series of usability testing sessions in our lab to observe real users interacting with the Community website and mobile. 

Users were asked to complete a few tasks, while being observed by our UX Manager and myself. We wanted to see where they encounter problems and experience confusion. 

Performed a few card sorting sessions to redesign our information architecture systems. 

The goal was to help users find information fast by focusing on organizing, structuring, and labeling content in an effective and sustainable way. 

I created High-fidelity prototypes in order to gain more meaningful feedback. We had a solid understanding of what to build and started testing our prototypes with our real users right away. 

We checked the accessibility of our design using the axe chrome extension. We found 17 violations that we needed to solve on the forum page alone. We were able to fix them in a few days.
We used Morae for our usability testing sessions. We had it set up in the lab to observe the users in person or remotely. 

Each user had a few tasks with instructions to complete and we captured audio and on-screen activities for further studies. 
The goal of usability testing was to identify any usability problems with our design. We monitored our users to learn how fast and easy they accomplish tasks. 

We ran many testing sessions and, as a result, found some interesting facts about our design. While some results were anticipated a few which ended up surprising us!

Users had issues with their profile settings. They could not find the edit button easily. So on the next sprint, we made the edit button noticeable both on desktop and mobile. 

The bell icon in the top right corner of the website changed color from white to orange with new notifications. However, we found out that users did not notice it. Therefor we decided to change the design by keeping the bell icon white and adding a red circle with the number of pending notifications.

Users had a lot of problems finding information. We had to ask them to move on to the next task. Next step was to completely re-design the information architecture and fix the search engine.
We found out that participants who had low vision could find it difficult to read text from a background color with low contrast. 

Users with low visual acuity or color blindness had a hard time understanding our content that was not labeled, and they often seemed lost using forms with placeholder text as labels. 

We noticed that users who used screen readers navigate through forms using the tab key, therefore any non-labeled text, as placeholder text was usually skipped over. 

In order to fix the accessibility issues, we labeled all of our form fields inside and outside of the placeholders and used WebAIM to check our foreground and background color contrast with web accessibility in mind. 
We ran a closed card sorting session to identify what sections of the Community website were accessed most often and least often. 

Used Optimal Workshop for the card sorting sessions by involving Hyland customers from various business areas that were occasionally interacting with the Community website. 

We knew that the new navigation system should present the structure of the hierarchy in a clear and consistent manner. Our users needed to know the current location so we created a breadcrumb menu. 

Tried to prioritize content in a way that worked for the widest possible group of users. 

Ran an open card sorting session with OptimalSort to figure out our categories. For this session we invited the head of technical support and our highly engaged developers with the Community website. 

I created information architecture site maps and dendrogram diagrams to present the results to the stakeholders.

Presented a systematic hierarchical view and clustering of the Community website with sitemaps and dendrogram diagrams to create our prototypes for testing. I used Adobe XD to create high fidelity mockups.
In order to improve the quality of the Community website, we had to find a way to keep our users engaged. We decided to create badges that users could earn reaching milestones or completing courses. 

User engagement improved dramatically right after we launched the badges. They made the users feel important and skilled and since they were visible on public profiles, we started seeing more visitors among our employees and Hyland customers. 
Even though we asked users direct questions, they usually didn't reveal what they actually thought. They were either too nice to tell us or just wanted to finish the testing sessions as fast as they could to get on with their lives. 

So we used our intuition to understand what they really meant. Monitoring them live helped us a lot to see their moves.

We learned to appreciate any feedback, positive and negative!