PRODUCT PAGE REDESIGN
Knife Shapes
MY CONTRIBUTIONS
User Interface Design
Prototyping
TOOLS
Figma
About KNIFE Toronto
KNIFE Toronto is a destination for the finest knives, cookware, and coffee accessories in Canada. For 15 years, KNIFE has been sharpening knives, sharing the love of Japanese craftsmanship, and building lifelong friendships. With their sole store in Toronto, customers who can’t visit rely on their website for guidance.
Background
The Shapes page is the only place on KNIFE’s website where users can learn about different knife shapes. It is also the only place where users can shop for specific knife shapes. Once a user clicks the “EXPLORE” button to shop for a specific shape, they are brought to the Product page.
Tip: Click on photos to enlarge them
SHAPES PAGE
PRODUCT PAGE
The Problem
After landing on the Product page, the only way to view other knife shapes is through the search bar. If a user doesn’t know or remember a shape’s name, they have to navigate back to the Shapes page. This flow makes shopping for different knife shapes disorienting and involves excessive back-and-forth between pages.
SHAPES PAGE
PRODUCT PAGE
I saw an opportunity to consolidate the two pages into one while leveraging the existing layout. Through the redesigned interface, both novice and experienced users are able to find and compare products intuitively.
The Redesign
Some of the improvements I made to the original design include:
Hierarchy: Emphasizing key details while showing more content
Density: Better use of space and relevant product data
Navigation: Making information easier to locate and digest
Slices of the selection
The core UI components of this redesign are a horizontal scroll menu and product navigation bar. Both components enable users to preview and understand the breadth of the selection at a glance.
The scroll menu was designed to prioritize visual harmony and readability. Users are able to easily skim through and retain key differences between knives as each section boasts individuality through prominent photos, strong text hierarchy, and varying product details.
SCROLL MENU
The product navigation bar supports intuitive interaction by using a red underline to indicate active selections. It sticks to the top of the page during scrolling, includes a left-hand dropdown menu for filters, and works in tandem with the product cards below, which update to reflect the selected category.
PRODUCT NAVIGATION BAR
The Design Process
TAKING SHAPE
The design process began with research, focusing on understanding the context of use, identifying target users, defining the problem, and exploring probable solutions.
CONCEPTS
A SHARP SNAPSHOT
Once I had identified solutions, I translated them into sketches of various layouts. Throughout the process, I focused on preserving the original page structure, as knives are uniquely suited to a horizontal layout. After several iterations, I narrowed the options down to three layouts that enabled users to learn, compare, and shop all on one page.
SKETCHES
LAYOUT #1
LAYOUT #2
LAYOUT #3
I ultimately chose to pursue layout #2 because it best preserved the rhythm of the original pages, with two distinct sections and navigation at the center. This layout also felt more balanced than the alternatives, which risked overwhelming users with too many product cards. Below is a breakdown of the content and structure for the chosen layout.
ANATOMY OF REDESIGN
During the mid-fidelity wireframing stage, I saw an opportunity to make the shape descriptions more scannable by separating the content into a subheading and concise description. I used the original Shapes page as a reference for capitalization, and applied varied text sizes and weights to establish a clear visual hierarchy and define the active state of UI components.
WIREFRAMES
MID-FIDELITY WIREFRAME
The next step was creating the high-fidelity wireframe. I began by extracting the font family and color palette from KNIFE’s website using CSS Viewer and a color picker tool. Assets such as the logo and product photos were pulled from KNIFE’s website.
TYPOGRAPHY
COLOR PALETTE
HIGH-FIDELITY WIREFRAME
What I Learned
Focus on clarity. I learned that outlining the problem from the beginning is extremely important for maintaining focus throughout the project. Having a clear, well-defined problem statement guides the decision-making process and ensures that design iterations and adjustments are aligned with solving the core issue.
Strive for pixel perfection but acknowledge that a design is never truly finished. I learned that spending too much time perfecting visual details early on can lead to significant delays. Prioritizing functionality and embracing an iterative process creates more opportunities for continuous refinement. Let the design see the light of day!
Next Steps
Usability testing. This involves gathering feedback from real users to evaluate the design's ease of use. Key aspects such as the scroll menu and product navigation bar will be tested to ensure they effectively meet user needs and behave as users expect.
Mobile Optimization. Adapt the design for mobile devices to ensure a responsive and consistent experience for users across smaller screen sizes.