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.