Resource Library

Cape Fear Resource Directory.jpg

 Goals

  • The customer has a lot of resource media that needs to be accessed from their newly designed website

  • Customer would like to cut back the time in which it takes in building webpages for this content. It should be easily updated and managed

Strategy

In order to begin the wireframing process, we needed to begin by taking inventory of all the asset types and categories. By conducting a brainstorming (research session) with the customer, we were able to categorize all the information into 4 resource “types”

  1. PDFs

  2. Articles

  3. Videos

  4. Audio/Podcasts

All resources can also be broken down into categories or “topics”. Since each resource could potentially exist in multiple topics, classification fields would be used to contain this information.

Wireframes

Starting out with lo-fidelity wireframes enabled us to understand the structure of this new directory and how it is searched before spending too much time focusing on visual design details.

Prototypes

After the prototypes were approved, we were able to move on to the next stage in the design process and mockup prototypes. I used AdobeXD for this stage.

Lister View with Search Filters

Detail View