UX/UI Designer
Instructure Resource Center
A collection of blogs, videos, case studies, research, infographics, ebooks, and webinars. All made accessible on the website through a user friendly layout.
01 of 6
How this began: Uberflip
When I began my work at Instructure, we were currently using a platform known as Uberflip to manage all our content resources. This platform allowed us to control where we placed resources on the website in a fairly easy manner. I became quite proficient with Uberflip and was the main point of contact in the company for any Uberflip needs. Sadly, due to problems with the initial set up the platform never reached its full potential and its contract was not renewed. Long story short, we needed a new resource center.
02
New Resource Center Content Migration
The next step was to move our 2000+ resources on to Drupal, our in-house CMS built by our web team. Because of short deadlines and needing to get a solution up fast, the new resource center had to adhere to a few rules for this migration. It had to follow a similar layout as Uberflip and the data present on each resource item had to be the same in Drupal. This limited our options for innovation since any changes would cause problems with the content export/import. Regardless of the parameters, I was able to create a quick design that checked all the boxes and the migration was a success. Next step was to research how visitors used our resource center and start making some much needed updates.
03
Discoveries and Pain Points
I started my research using Microsoft Clarity for heat maps, Google Analytics to track where a user travels, and Useberry for target audience user testing. After analyzing and testing quite a large amount of data, I was able to discover some very helpful findings.
​
-
The most common first interaction was filtering to a specific segment.
-
Roughly 90% of users did not read a resource tiles description.
-
The resources in our headers are rarely engaged with.
-
A resource only search bar is needed since a large number of visitors used our global search for this purpose, which is not ideal.
04
Testing New Designs
Once I established a good hypothesis about what the new resource center needed to be, I began testing new designs that met the criteria. These designs had to adhere to our brand guidelines, be accessible, address all the previous designs' pain points, and all in an attractive user friendly experience. I used the testing tool Useberry to run multiple rounds of user testing with our target audience. Here are some key findings.
​
-
Users preferred seeing all the filter options at once, versus opening up drop downs to see options.
-
The addition of a resource specific search bar was highly desired.
-
​ A drop shadow card style was preferred over no card.
-
Tile descriptions will not be missed.
-
Header content was split down the middle. Half preferred a smaller header that allowed you to view the listed resources quickly, and the other half wanted to see highlighted resources even though it pushed the listed resources below the fold.
​
All of this helped me refine and iterate the design to two high fidelity prototypes I could share with the project stakeholders.
05
Two Final Versions
After multiple rounds of testing and feedback I was able to create two designs that had proven to accomplish what we had set out to do. These were sent to the stakeholders for review and a final decision.
Version 1 (left) focused on a large search bar with quick links that would allow you to get to segmented content easily. The listed content was the main focus and this design encouraged users to find the resources they were looking for.
​
Version 2 (right) encourages users to engage with our highlighted content we are wanting to promote. This design pushes the listed content a bit further down the page but has user friendly filters that help a visitor find what they are looking for.
06
And The Winner is... Version 2!
The stakeholders have spoken and the decision was made to move forward with Version 2. This project was a great example of data driven decision making since testing and feedback was a huge part of almost every step. As of Q3 2024 this project is in development and will be made live at the beginning of Q4 2024.
