Materials Guide
WEBPAGE REDESIGN
User Interface Design
MY CONTRIBUTIONS
Prototyping
TOOLS
Figma
About Artworks3DP
Artworks3DP is a small business located in Toronto that provides expert 3D printing services. They offer a high level of personalization in their work and use state-of-the-art 3D printers to offer exceptional quality and durability.
Artworks3DP has a strong demand for personalized prints, with custom orders accounting for approximately 20% of total sales. These orders are typically submitted through a form on the website where customers must specify their preferred material and colors. To support informed decision-making, Artworks3DP offers a materials guide that helps customers choose the right options for bringing their ideas to life.
Background
Tip: Click on photos to enlarge them
CUSTOM ORDER OF A WORLD MAP
The Challenge
Artworks3DP wanted to refresh their Materials guide page to showcase the different color options they offer. However, not every material is available in multiple colors. The challenge was designing an interface that accommodates varying levels of detail for each material.
The Redesign
BEFORE AND AFTER
BEFORE
AFTER
In this redesign, I focused on creating experiences that would be loved by the people who use it. Most visitors to the Materials guide prioritize material type over color options - but that doesn’t mean there aren’t customers who prioritize both. My goal was to provide flexibility, guiding each user to the information they value most without compromising the experience for others.
Filament Details
The descriptions of 3D printing filaments at the top of the page serves as as legend for explaining technical details, while keeping practical content like common use cases within each product card to meet the needs of different customers. Information about material properties - available for ABS and ASA only - are also tucked away in this section but remains discoverable to those searching for it.
Product Cards
The product cards follow a uniform design structure that allows users to easily skim and compare materials side by side. The cards have three states: inactive, hover, and active. The product card for a material with no color options will always be in the inactive state. The product card for a material with color options will reveal a button while hovering. In the active state, users can view available color options. If a user selects a color, the card will update to show an enlarged color swatch, while remaining in the active state.
INACTIVE
HOVER
Prototype
ACTIVE
ACTIVE
The Design Process
Before approaching the design process, I spoke to the owner of Artworks3DP to gather insight into their customer base and their vision for the redesign of the Materials page.
RESEARCH
Key Insights
The Vision:
Show more material color options
Match the website’s dark theme
Create a professional experience
The research revealed that the type of customers who are requesting custom orders prioritize the type of material more than its color options. So, I sketched layouts that could accommodate large blocks of text for technical details about the materials. I also created product cards to house information like common use cases and color options.
SKETCHES
LAYOUT #1
LAYOUT #2
LAYOUT #3
I chose to pursue layout #3 because it best aligned with the target users’ priorities where information about materials is readily available and exploring color options remain optional.
SKETCHES OF PRODUCT CARD VARIANTS
Knowing the redesign would follow a dark theme, I tested and finalized text colors during the mid-fidelity stage. Although I do not have a lot of experience designing darker themes, I prioritized accessibility by ensuring sufficient contrast between text and backgrounds to meet WCAG standards.
WIREFRAMES
MID-FIDELITY WIREFRAME
MID-FIDELITY WIREFRAME OF PRODUCT CARDS
What I learned
Throughout this project, I learned the value of designing for users whose preferences differ from my own. By relying on research and real use cases, I was able to uncover needs I hadn’t previously considered. This shift in perspective helped me design with greater empathy and ultimately led to a more dynamic design solution.
Next Steps
Optimize the design for mobile platforms and work with Artworks3DP to implement the redesign.