HomeMy WorkMaterial Library
Material
Library
I designed a digital library for physical materials so that architects could keep working during the COVID-19 pandemic.
Image 1: Search results in the Material Library I designed on both desktop and mobile.
Overview
Project Description
I designed a digital library for physical materials so that architects could keep working during the COVID-19 pandemic.
About the Client
The client is a material library based in Doha, Qatar.
How Problems Were Identified
I worked with a materials researcher and a library director to identify problems. Problems were surfaced based on their research, the nature of their collection, user needs, and their institutional goals.
Timing
I worked on this project for 3 weeks.
Tools
Figma.
Deliverables
Project plan, architectural model, flow diagram, wireframes, interface designs, working prototype, invoice and payment processing.
Image 2: The client is based in Qatar, a rapidly growing country in the Middle East. Image Credit: Florian Wehde on Unsplash.
Project Structure
My Role, Responsibilities, and Skills
I was in charge of architecture and interface design. I worked with a material researcher to understand goals for the digital library and user needs. I presented final designs and a prototype to the library director. I helped with handoff of designs to developers.
The Team
Michael Walker, Product Designer
Abdul Rahman Anwar, Material Researcher
Amy Andres, Material Library Director
The Opportunity
Opportunity for Users
How might we help users evaluate the physical properties of materials using a digital interface? How might we help users find and discover materials?
Business Opportunity
How might we increase awareness of the breadth of the material library collection? How might we collect and leverage data about material views and usage?
Image 3: The client is a material library based in Doha, Qatar. This is a portion of their repository. Image credit: Raviv Cohen.
Process & Deliverables
1. Project Assessment
This was a freelance project. The client requested my services. We met to define project goals and go over previously conducted research on the purpose, function, and usage of material libraries.
2. Review of Requested Features
The client had created initial designs of key library features. I assessed these designs for usability and accessibility.
Image 4: Example of a flow diagram I created to show how different parts of the interface could be connected.
3. Establishing Platform Architecture
I created flow diagrams to showcase how library features could be connected and simplified in order to create a better use experience. I shared these diagrams with the client before moving on to design wireframes.
Image 5: Example of a wireframe I created to layout the visual interface of the Material Library. An underlying 12-column grid system (vertical bands) unifies designs and ensures they are responsive and can be built efficiently.
4. Wireframes
I designed wireframes of key product features and screens. I shared these wireframes with the client and made adjustments based on their goals for the library.
Image 6: Interface colors were chosen based on the National Flag of Qatar and a sandy pink glow that defines the region. Image Credit: Alexey Sergeev.
5. Interface Design
I created content-aware interface designs based on the wireframes I drafted. I refined interface elements as part of the design process.
Image 7: A preliminary prototype I made that uses an alternate visual design option from the final Material Library.
6. Prototyping
I created a functioning prototype of the material library to showcase different user journeys and features requested by the client.
7. Stakeholder Review
I presented my work to the Library Director, who expressed great satisfaction with the results. The presentation lasted for an hour and covered my background, process, all designs, and the prototype.
8. Developer Handoff
The project is complete. I am informally working to handoff designs to developers.
Problems Solved
Problem 1: Usability & Accesibility
Initial designs provided by the client did not fully consider usability or accessibility. I produced usable and accessible interfaces that met client objectives.
Problem 2: Extensibility
The client wanted to develop a digital interface but was still relying on a taxonomy developed for analog processes. I designed a flexible interface that can expand as they update their taxonomy.
Problem 3: Findability
Designs provided by the client focused primarily on discoverability. I provided insight about the importance of findability and delivered an interface that helps the user with both goals.
Images 8-9: Material detail page for a single item, on desktop and mobile. A task-focused architecture allows users to take action wherever they are in the interface by using features such as the action menu shown above (desktop, right).
Outcome 1: Usability & Accessibility
Problem
Initial designs provided by the client did not fully consider usability or accessibility. I produced usable and accessible interfaces that met client objectives.
Exploration
I evaluated initial designs provided by the client to better understand requested features. I used this information to map library architecture. I created new designs that were focused on tasks users needed to complete.
Solution
I used my experience in product design to optimize all features for usability and accessibility. I did this by creating interfaces that realize principles such as visibility, mapping, consistency, and affordance.
Images 10-11: Search results page in Images view, on desktop and mobile. Features such as filter menus are extensible and allow the client to edit underlying taxonomy as needed.
Outcome 2: Extensibility
Problem
The client wanted to develop a digital interface but was still relying on a taxonomy developed for analog processes. I designed a flexible interface that can expand as they update their taxonomy.
Exploration
Extensibility exists when something allows for the addition of new capabilities or functionality. Initial designs did not fully take extensibility into account.

I met with the client several times over the course of the project to understand their current state and desired state outcomes. I used wireframe designs to explain the importance of taxonomy and demonstrate that taxonomy used for in-person experiences may not translate to digital environments. I provided content-aware interface designs to demonstrate the kind of curation needed to develop a successful digital library.
Solution
I prioritized extensibility after several client meetings because I saw that the library was in the process of adapting its taxonomy for digital applications. The interface I designed is easy to update and works well whether tens or thousands of materials are catalogued. Final interface designs provide the client with a structure that can be used to test several taxonomy models.
Images 12-13: Search results in map view, on desktop and mobile. Use of a context-aware task bar on right allows users to see key details about a material before going to a material detail page.
Outcome 3: Findability
Problem
Designs provided by the client focused primarily on discoverability. I provided insight about the importance of findability and delivered an interface that helps the user with both goals.
Exploration
I created a flow diagram that provided a high-level overview of the user journey through the library interface. The flow diagram also showcased how different parts of the interface were connected. This exploration illustrated the need for findability features in addition to discovery features.
Solution
I created different views of search engine results pages and a context-aware task bar to help users find specific materials more easily and more quickly.
Images 14-15: Material Library homepage on desktop and mobile. The homepage acts as a showcase for individual items and featured collections.
Reflection
Project Status
This project is complete.
What I Learned
I gained more experience creating interfaces for physical objects (many of the interfaces I create are focused on the delivery of digital tools, information, and resources.) I also used the project as a chance to realize interface paradigms I explored in a corporate environment but had not had the chance to build.
What I Would Do Differently
If I did this project again I would ask the client to refine their taxonomy for digital environments before I created interface designs. That would allow me to create an interface that more accurately reflected the materials that are contained in the library.
Next Steps
This project is complete. I am informally helping with handoff of designs to developers.
“Trying to pull together cross-functional teams is like herding cats”
Quote from a client manager involved in the research process
Image and reference credits: Material Library icon belongs to the Qatar Foundation. Material photos from American Supply Paris. Client ideas from Abdul Rahman Anwar.