Mockups/Prototypes of service catalog page and individual services

[briand44]

Story

As a web team, we would like to put together some mockups of a service catalog and a service/infocenter page to get feedback and to help determine how we should structure this.

Additional Information

Some information from previous conversations is available on the epic https://github.com/uiowa/uiowa/issues/6009

Some things that came up in conversations with our ITS partners:

• Would like to have search/filtering capabilities
  • Way to filter based on an audience (faculty, staff, students, etc.) - ITS folks will provide the list of audiences
  • They categorize services
  • Way to search just services based on title, any synonyms (icon vs canvas), description
• Currently there are a lot of services so listing all of these may be overwhelming.
  • Could potentially display featured services and allow searching/filtering all services.
  • Possibly something like https://uihc.org/services.
• I believe I recall them mentioning that not all services/infocenters would exist in the service catalog?
• Alerts, news articles, support articles, all have a relationship to services

Existing site links:

Service catalog https://its.uiowa.edu/all-services-and-software

Manual pages for audience based services https://its.uiowa.edu/it-services-students https://its.uiowa.edu/it-services-staff https://its.uiowa.edu/faculty https://its.uiowa.edu/researchers https://its.uiowa.edu/it-professionals https://its.uiowa.edu/guests

Infocenter/Service https://its.uiowa.edu/office365

Proposed Solution

• [x] Mockup/Prototype of a service catalog
• [x] Mockup/Prototype of a service/infocenter page
• [ ] Share mockups with ITS partners and get feedback

[briand44]

I've updated the IS with links to service catalog related pages and a infocenter/service. Let me know if there are additional things I can do that would be useful.

[joewhitsitt]

I am not getting what I expect out of this... https://sandbox.prod.drupal.uiowa.edu/all-services-and-software

Can I just put together a proof of concept "mockup" instead and put it in DEV?

[bspeare]

@joewhitsitt that could be faster!

[joewhitsitt]

Realized ITS didn't have a split yet so I trudged forward with a faux view in LB. https://sandbox.prod.drupal.uiowa.edu/all-services-and-software

Looks like they already started the feature bit here: https://its.prod.drupal.uiowa.edu/all-services-and-software

[e-marie-w]

Service/infocenter mockup I've been working on: https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365. I'm working with the assumption we want all existing content, just not in tabs this time.

[joewhitsitt]

just glanced. @e-marie-w, can you change the alert text if you plan to keep it up top? "0792201- Chemistry Building - Renovate Common Areas"

[joewhitsitt]

I've made some tweaks to https://sandbox.prod.drupal.uiowa.edu/all-services-and-software and I am ready to receive feedback from the team before sending this off to the customers.

[bspeare]

I'd like to look at both and propose some changes in some replicated pages.

[e-marie-w]

I spent a small amount of time working on a mockup for a service with less content and an alert: https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-adobe-acrobat-pro. But I think we should stick with the earlier mockup, I can add a relevant alert if we think that should be a part of it.

[bspeare]

I made a copy of Marie's mockup and tried to simplify the content structure down a bit. There is so much content on some of these pages because the D7 content strategy was to split everything into tabs, however, in this mockup I think we could propose restructuring it a bit and make it easier for users to scan: https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365-copy.

[bspeare]

I cloned https://sandbox.prod.drupal.uiowa.edu/all-services-and-software and tried to create the landing page approach that was discussed in EoD yesterday:

• Landing page to search services and highlight featured services: https://sandbox.prod.drupal.uiowa.edu/all-services-and-software-copy
  • Use our generic search block
  • Like the uihc page, allows focus to be on simple search action while highlighting featured services.
• Results page: https://sandbox.prod.drupal.uiowa.edu/results-page
  • Perhaps we could group by letter here as a combo search/a-z list? :)

For https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365-copy

• Moved the quick links into the "Overview" card in the sidebar
• Added pagers for the accordions. The pager is probably the best way to cut down on the overwhelming amount of choices available on some of these service pages.
• Added a couple news items in the sidebar

[bspeare]

We have a few mockups for these pages. Can we decide which ones we plan on presenting before we meet today?

Service center:

Service center:

• https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365-copy
• https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365

Services and software

One page:

• https://sandbox.prod.drupal.uiowa.edu/all-services-and-software

Landing page with dedicated results page:

• https://sandbox.prod.drupal.uiowa.edu/all-services-and-software-copy
• https://sandbox.prod.drupal.uiowa.edu/results-page

[joewhitsitt]

Can we decide which ones we plan on presenting before we meet today?

I'd be fine with running with your mockups @bspeare and just have the others on hand in case the conversation goes in a different direction.

If alerts are to be of similar importance this time around for certain services, I personally wouldn't have current status or planned alerts hidden away. "As an Office365 user, I want to see right away if the service is down/degraded similar to other services I use like Github and Acquia." I do think though there are several other services where alerts don't play as big of a role, so it would be nice to offer a "alerts lite" where the other content is prioritized.

[e-marie-w]

I'm also good with using @bspeare's mockups.

[bspeare]

@joewhitsitt if the conversation does go in a different direction maybe we just listen to the feedback and come back with another iteration on the designs?

[bspeare]

I've updated the mockups based on the feedback from yesterday.

Catalog page: https://sandbox.prod.drupal.uiowa.edu/all-services-and-software-copy

• Added "View all services" button under search
• Added equal amount of featured services

Service center: https://sandbox.prod.drupal.uiowa.edu/its-serviceinfocenter-mockup-office-365-copy

• Removed alerts section
• Moved current alert status and link to alerts page to "Overview" section.
• Adjusted pager count to not be so long.
• Added empty news and events sections in the sidebar.

Did I miss anything?

[bspeare]

I emailed out the mockup links this morning.

[briand44]

Feedback from Adrienne/ITS:

O365 page: Looks great. We like it a lot. Though this doesn’t work for the O365 landing page because it’s so massive, it works well for the other ~200 services. I think we should move forward with this and we’ll plan on doing something different for this one-off, bigger service. Prefer the option w/o accordions. Questions: I like the look of the support articles that aren’t in accordions, especially when the number of support articles is a manageable number (<15ish). It doesn’t force users to click on an option to hunt for the support they need—they can see all the options at a glance. But for services that have a LOT of support articles (like the email info center), what might that look like in terms of displaying all the support articles? This info center isn’t the norm, but we do have a few that have 20-30+ support articles. Would we display them all? Ideally, we would work on our end to reduce the amount of support articles, but that has been a difficult conversation with some groups and it’s hard to control the spread with our distributed author model. Some info centers have specific contact info. Where could that live?

Services page: Looks great. Huge improvement over what we currently have. We would plan to put our top, most used services under Featured. I think it makes most sense for this to be image-free like you have it now.

Services results page: When we originally talked about our All Services and Software page, we indicated that our current page is difficult to use because it’s so big and there are too many options. This design with the search at the top and dropdowns to drill down to relevant services plus excluding the AKA names addresses this issue.

The one thing that gives me pause is the pagination. If we’re only showing 10 services per page, I imagine it would be difficult to find a service in the middle of the alphabet. Arguably, users would use the search or faceted search options. However, if they didn’t know exactly what they were looking for or what category it was in, this might be difficult. It feels like it’s missing the A-Z jump links. Or a way to scan all of the options? I don’t have any good solutions or suggestions, but wanted to provide this feedback.

Question: We sometimes link directly to a ‘category page’ (example category here). If a category was chosen from the dropdown, would it adjust the URL so that we could use it? (sometime we post these links in social media or from other pages). It doesn’t need to be a pretty URL.

[bspeare]

Here are some remaining tasks we might want to add to the mockup based on the feedback:

• [x] Add A-Z filter menu for filtering per letter on https://sandbox.prod.drupal.uiowa.edu/services?
• [x] Add contact information area to the preferred mockup: https://sandbox.prod.drupal.uiowa.edu/its-service-office-365-mockup
• [ ] Are we outputting the "Category" tag anywhere on https://sandbox.prod.drupal.uiowa.edu/its-service-office-365-mockup?