top of page
Phone Mockup.jpg

Vistek Website Redesign

A modern, user-centric redesign of a leading imaging retailer’s digital experience.

Overview

This is a self-initiated redesign of Vistek.ca, one of Canada’s most recognized photography and videography retailers. While the existing website offers a wide range of products and services, the overall experience feels dated and visually dense compared to modern e-commerce standards.

 

My goal was to explore how Vistek’s digital presence could be modernized through a more intuitive structure, simplified navigation, improved mobile usability, and a refreshed visual system. This concept redesign focuses on enhancing usability and supporting the needs of photographers, filmmakers, and content creators.

Problem Context

Vistek.ca is a cornerstone of the Canadian imaging industry, offering an unparalleled inventory of professional tools. However, the current digital experience suffers from a "Legacy Friction"—a disconnect between the high-value equipment being sold and the dated, high-effort interface used to acquire it.

​

The Core Challenge:  How do we modernize a complex e-commerce ecosystem to serve two distinct user behaviours—the Technical Audit (The Professional) and the Visual Discovery (The Scaling Creator)—without compromising the information density required for high-stakes decision-making?

​

The Objective: To redesign Vistek’s digital presence into a "Function-First" platform that clarifies the Buy vs. Rent journey, reduces cognitive load through improved Visual Hierarchy, and restores Brand Credibility through a minimalist, pro-grade aesthetic.

Competitive Benchmarking 

Market Analysis & Feature Gap Identification

  • Title 01

    Change the text and add your own content, including any information that is relevant to share. Then customize the font, size and scale to make it your own.

    Feature / Area
    Vistek
    Henry’s
    B&H Photo Video
    BorrowLenses
    Key Takeaway
    Navigation Structure
    Deep menu hierarchy with many nested categories
    Simpler menu layout with clearer grouping
    Structured mega-menu with predictable categories
    Category-focused navigation tailored to rentals
    Transition from a deep, fragmented hierarchy to a "Flat IA" that reduces clicks-to-product.
    Search Experience
    Basic search, limited predictive features
    Stronger filtering on search results
    Predictive search with suggestions & refinements
    Search designed specifically for rentals
    Implement predictive suggestions to bypass navigation friction for high-intent users.
    Filtering on PLP
    Limited options, varies by category
    Consistent filters across many categories
    Extensive filters, specs, and refinements
    Filters based on rental duration & gear type
    Introduce "Contextual Filtering"
    Product Listing Layout (PLP)
    Dense layout with small image thumbnails
    Cleaner layout and spacing
    Highly visual listing with consistent item cards
    Rental-focused card layout with clear dates/prices
    Improve spacing + card design for clarity
    Product Detail Page (PDP)
    Information-rich but visually heavy
    Cleaner spec presentation
    Excellent spec organization & visuals
    Clear rental terms & availability upfront
    Need hierarchy + better spacing
    Stock Visibility
    Shown but sometimes deeper in the flow
    Category-level availability
    Visible on listing & PDP clearly
    Live rental availability
    Earlier visibility improves confidence
    Mobile Experience
    Functional but tight spacing
    Generally smooth mobile layout
    Highly responsive & clean
    Optimized mobile rental flow
    Adopt a "Thumb-Zone" optimized layout to cater to on-set creators and mobile-first shoppers.
    Checkout Flow
    Short but visually outdated
    Straightforward
    Clean multi-step flow with strong guidance
    Real-time updates for rental cost/dates
    Reduce cognitive load by grouping shipping, payment, and trust signals into a clean, multi-step progress bar.
    Rental Experience
    Available but not clearly highlighted
    Mostly in-store
    Clear integration but not full rental-focused
    Purpose-built online rental system
    Streamline & clarify rental journey
    Visual Modernity
    Older design language
    More modern than Vistek
    Clean, bold, tech-forward UI
    Visual clarity with strong focus on utility
    Visual refresh will elevate brand feel

Key Strategic Insights

  • Information Architecture Friction: Vistek’s current site forces users into a "Recognition over Recall" trap. The deep menu nesting requires significant mental effort, likely leading to high user drop-off at the discovery phase.

  • The "Dual-Intent" Problem: Vistek serves two distinct business models—Sales and Rentals—within one UI. The current layout creates "Intent Confusion." A successful redesign must allow for a seamless toggle between these two paths without cluttering the Product Detail Page (PDP).

  • The "Credibility" Gap: There is a mismatch between Vistek's high-end inventory and its Visual Identity. In the professional imaging market, the interface is the salesperson. The current site lacks the Visual Hierarchy and modern "Editorial" feel that premium photographers and filmmakers expect when investing in professional equipment.​

Heuristic Audit & Usability Analysis

Heuristic Audit & Usability Analysis

Since this is a concept project, research relied on:

Heuristic Evaluation

An assessment using Nielsen’s usability principles revealed key friction points:

  • Aesthetic & Minimalist Design: Overcrowded screens and older styling.

  • Consistency: Visual hierarchy, spacing, and iconography vary between pages.

  • Recognition Over Recall: Too many menu choices create decision fatigue.

  • Error Prevention & Recovery: Forms lack strong validation cues.

Behavioral Hypotheses

An assessment using Nielsen’s usability principles revealed key friction points:

  • Users shopping for camera gear often compare multiple products and expect clearer filtering.

  • High-value purchases require strong trust signals, transparent pricing, and dependable interface clarity.

  • Mobile browsing is frequent among younger photographers and creators, making mobile-first design essential.

These insights shaped the personas and design decisions.

IMG_3377.PNG
IMG_3379.PNG

Users & Personas (Assumption-Based)

These personas represent typical Vistek users based on publicly observable behavior and general photography market trends.

Persona 1: Marcus, Senior Cinematographer

"I need absolute certainty that the gear I rent or buy will perform on a client set tomorrow."

​

Context:

  • Runs a small production house in Toronto. He doesn't "browse"—he audits gear for specific technical requirements (bitrates, lens mounts, payload capacities).

Behavioural Trigger:

  • A last-minute client booking requires a specific lighting rig and a backup body. He needs to toggle between buying a lens and renting a body in the same session.

The UX Hurdle:

  • Marcus is frustrated by "Visual Noise." He hates digging through lifestyle banners to find the "Technical Spec" tab. He needs a Streamlined Search and a Frictionless Rental Calendar.

​The Redesign Goal:

  • Provide a "Pro-Mode" interface where technical specs are prioritized and the rental/buy availability is transparent from the first click.

Persona 2: Chloe — Content Creator

"I’m ready to move past my smartphone, but I need a site that speaks my language and guides my investment."

​

Context:

  • A YouTuber/TikToker with a growing audience. She has a budget of $2,000 and is intimidated by the legacy, "clunky" feel of traditional camera retail sites.

Behavioural Trigger:

  • She wants to upgrade her audio and lighting but isn't sure which accessories are compatible with her current camera. She relies on Visual Discovery.

The UX Hurdle:

  • Chloe experiences Decision Paralysis. When she sees a list of 500 cables and 200 microphones without clear "Kit" suggestions or modern visual cues, she leaves the site to buy on Amazon.

​The Redesign Goal:

  • Create an Editorial-Style Layout with "Recommended Kits" and a clean, mobile-optimized navigation that feels as modern as the social platforms she creates for.

Scope & Responsibilities

As a solo designer, I led the full design process:

Research & Analysis

  • Competitor evaluation

  • Heuristic review of the existing site

  • Synthesis of UX opportunities

Information Architecture

  • Simplified navigation

  • Grouped categories more intuitively

Wireframing

  • Low-fidelity flows for homepage, listing, product, checkout, rental

UI Design

  • Refreshed visual language

  • New components, cards, spacing patterns

  • Clean, modern interface

Prototyping

  • High-fidelity interactive prototypes for desktop & mobile

Documentation

  • Organized insights and decisions into a full case study

Constraints

No Access to Internal Data

All insights are based on public site behaviour and standard UX patterns.
No backend systems or analytics were used.

Solo Designer

All research, IA, design, and prototyping were done independently.

Front-End Only

The redesign focuses on UI and UX—not backend systems like inventory or logistics.

Brand Integrity

The design uses a refreshed look while respecting Vistek’s brand identity.

UX Opportunities

banner.png

Homepage

  • Strong hero section

  • Modern minimal layout

  • Clear hierarchy of promotions and product categories

order revie.png

Navigation

  • Simplify and re-categorize for faster decision-making

  • Consolidate repetitive items

  • Introduce a more powerful search experience

iphone-16-pro-mockup-v1-front-view.png

Checkout

  • Cleaner form layout

  • Modern spacing

  • Improved trust cues (shipping info, badge icons, expectations)

  • Stronger responsive design

Product Listing Page (PLP)

  • Better visual rhythm

  • Improved filtering

  • Larger thumbnails and consistent cards

Product Detail Page (PDP)

  • ​Modular spec breakdown

  • Strong trust elements

  • Clear CTAs

Information Architecture (IA)

Wireframes

IMG_3429_edited.jpg

HiFi Prototype

Typography Scale

Font: Inter

28px/Bold (Used for main product titles)

20px/Medium (Used for categories)

16px/Regular (Primary descriptions)

12px/Bold Caps (Used for technical spec labels and badges)

H1 - Product Hero

H2 - Section Header

Body (Default)

Utility/Caption

HiFi Prototype

Home Page

The redesigned Home page establishes a clear value proposition for Vistek while reducing visual noise and cognitive load. The layout prioritizes product discovery, rentals, and trust signals, allowing users to quickly understand what Vistek offers and where to go next.

Key sections are intentionally structured to guide both first-time and returning users toward high-intent actions such as browsing categories, searching products, or exploring rental options

Product Detail Page —
Buy & Rent

The Product Detail Page was designed to clearly support two distinct user intents: purchasing and renting high-value equipment. Instead of mixing both actions within a single decision space, the experience separates buying and renting into dedicated views while maintaining consistent structure and content.

​

Core product information such as specifications, descriptions, and video reviews remains consistent across both views, ensuring familiarity while allowing users to switch between buy and rent without relearning the interface. Primary actions are clearly prioritized in each context, minimizing confusion and decision friction.

Checkout Flow-Buying

The checkout flow is designed to support high-value purchases by prioritizing transparency, flexibility, and reassurance. Each step progressively gathers information while clearly communicating costs, delivery options, and security cues. Guest checkout, multiple payment methods, and installment options reduce friction, while the final review and confirmation stages reinforce trust and prevent errors before and after purchase.

Checkout Flow-Renting

It uses a straightforward popup to collect basic info, followed by a detailed summary that shows exactly what you’re paying for, including dates and security deposits. By clearly explaining the rules for pickup and return, the process avoids confusion and makes customers feel secure. The final confirmation provides all the necessary next steps and extra support options, ensuring the user feels confident from start to finish.

Container-1.png
Shortcuts_ clipped.png
Container.png

Hamburger menu

Users can access a Shortcuts panel to quickly manage their profile, view rental and shopping histories, or find helpful resources. Key features of this experience include:

​

  • Detailed Order Tracking: Both rental and shopping order pages provide live status updates, such as "Out For Delivery" or "Return Due Soon," alongside visual timelines of the order's progress.

  • Comprehensive History: Users can filter through past transactions by date or status, seeing at a glance what is currently in their possession versus what has been returned or delivered.

  • Self-Service Management: The interface allows for easy actions like reporting equipment issues or downloading invoices directly from the order details.

  • Robust Account Control: The Account Settings page offers a centralized hub to manage multiple payment methods, saved addresses, and security preferences like two-factor authentication.

Rental History

Shopping History

Account Settings

Figma  Prototype

Click Here for interactive prototype.

Learnings & Reflections

This project taught me the critical importance of managing complexity in design while maintaining clarity.  Initially, I assumed that visual polish would be the primary factor in user satisfaction, but I quickly realized that well-structured information and transparent processes are even more crucial.

​

I faced challenges with prototyping, especially in determining the right information hierarchy and layout. Balancing what details to prioritize and how to present them effectively helped me understand the value of a cohesive design system. Early on, inconsistencies in colour tones, spacing, and typography created a fragmented experience. This highlighted the necessity of establishing a unified design language from the outset to ensure consistency and clarity.

​

Through this journey, I refined my ability to articulate and justify design decisions, always keeping the user’s needs and trust in focus. If I had access to real user analytics, I would prioritize validating the buy versus rent flow and the checkout experience to ensure a seamless and intuitive journey.

​

Ultimately, this project reinforced my commitment to honest and credible design. It taught me that effective design is not just about aesthetics but also about clear, thoughtful information architecture and user-centred decision-making.

bottom of page