Yuliia Yaroshenko

Let's work together

Fabian Camera

Making camera shopping easier through smarter product discovery, gear compatibility, and trustworthy reviews.

Overview

Problem

Camera shoppers find it difficult to choose equipment that fits their needs, making the buying process overwhelming and time-consuming.

Goal

Design a user-friendly e-commerce website that makes the process of choosing and buying camera equipment easier for users, while also supporting business goals.

Solution

Fabian Camera mobile category page prompting shoppers who already own gear to find compatible products Fabian Camera product page with a kit builder and review summary Fabian Camera product comparison screen with highlighted differences
Project in Figma

Step 1: User Research

2 interviews 6 questionnaire responses 4 competitors Secondary Research

Research Outcomes

Camera shoppers find it difficult to choose equipment that fits their needs, making the buying process overwhelming and time-consuming.

  1. Existing gear influences purchases

    Photographers consider compatibility, familiarity, and the cost of switching camera systems.

    Design opportunity: Help users find products compatible with their current equipment.

  2. Confidence requires more than specifications

    Both interview participants valued real-world opinions and professional reviews.

    Design opportunity: Consolidate customer and independent expert reviews on product pages.

  3. Different users need different guidance

    Beginners may benefit from simpler explanations, while experienced photographers prefer detailed information and independent research.

    Design opportunity: Offer optional guided discovery alongside traditional browsing.

  4. Price and value affect decisions most

    Research suggested that discounts, relevant accessories, and expert support could make specialist retailers more attractive.

    Design opportunity: Explore customizable camera kits with bundle discounts.

Personas

To summarize the research findings I've created 3 user personas — beginner, enthusiastic and professional photographers. Here is one of them.

Portrait of Sofia, a professional photographer

Sofia — professional photographer

“I want to save money so I can buy lenses too”

About

  • 27
  • Warsaw, Poland
  • Has experience in buying cameras
  • A photographer with 3 years experience
  • Has a partner
  • Bachelor's degree

Biggest Problems

  • Overwhelming research
  • Limited Budget

User Need Statement

  • Sofia, an experienced photographer upgrading her gear, needs to reduce the personal effort of gathering and cross-checking trustworthy opinions from scattered sources, in order to make her decision without carrying the entire research burden herself.
  • Sofia needs to feel that what she pays reflects genuine value, not just a retailer's brand reputation, in order to trust that spending more — or paying less — is actually the right trade-off for her.

Step 2: Wireframes

Mid-fidelity wireframes

Features

Research helped me get to know users and their needs. Based on gathered knowledge I came up with 5 features for Fabian Camera e-commerce.

Your gear — Compatibility Finder

Users can select their existing camera or lenses and discover compatible products.

Purpose: Reduce uncertainty when upgrading or expanding an existing camera system.

Category page with a “Find Compatible Products” prompt for shoppers who already own gear Screen asking which gear the shopper already owns, with a search field for cameras or lenses Selected Canon RF lens confirmed as identified, with a “Find Compatible Products” button

Your Kit — Camera Bundles

Customers can combine cameras with compatible lenses and accessories to build a discounted kit.

Purpose: Simplify accessory selection while offering additional purchasing value.

Product page with “Choose Your Kit” bundle options and a photographer review summary

Aggregated Reviews

Product pages bring together customer feedback and independent professional reviews, including videos.

Purpose: Make product research more convenient and support informed decisions.

Product page listing owner reviews, professional reviews, and video reviews together

Help Me Choose — Guided Discovery

An optional questionnaire suggests cameras based on the user's budget, photography goals, and preferences.

Purpose: Help less-experienced shoppers narrow down their options without relying entirely on technical specifications.

Guided discovery questionnaire asking about the shopper's budget Guided discovery results suggesting cameras that match the shopper's answers

Product Comparison

Side-by-side comparisons highlight technical differences and equipment compatibility, supported by contextual explanations.

Purpose: Make complex product information easier to evaluate.

Side-by-side camera comparison table with compatibility notes

Step 3: Usability Testing

Changing the design

Users were tasked with selecting and purchasing a camera on the website, while also providing commentary on their actions. Based on the information gathered, I decided to modify certain aspects of the design. Here are the changes.

Confusing Menu Icons

Removed
Menu screen with icon-only camera categories and a “Click to see an explanation” hint
Added
Redesigned menu screen with labelled camera categories and a “Browse by purpose” entry

Missing User Data Information

Removed
Account screen without any indication of the signed-in user's details
Added
Account screen showing the signed-in user's name and contact details

Incomplete Account Management

Added
Account dashboard with saved addresses and payment methods
Added
Account order history with delivery status
Added
Account settings with notification and communication preferences

Step 4: UI

Design System Hi-fidelity wireframes

Design System

After changing the design to better meet users' needs, I started working on a custom design system. I didn't use any preset kits because I wanted to learn how to build tokens and components myself. I created several of them and started assembling the high-fidelity screens.

Typography

Montserrat

AA123

Open Sans

AA123

Colors

  • primary 500 AAA 7.94 #6b4a2f
  • black AAA 21.00 #000000
  • white AAA 18.87 #ffffff

Accessibility Considerations

I consider readable typography, clear hierarchy, responsive layouts and visible states. Next validation will cover color contrast, keyboard navigation, and component behavior.

Going Forward

Possible measurement instruments

  • Time to create a shortlist
  • Confidence choosing compatible equipment
  • Compatibility errors
  • Quiz completion and comparison usage
  • Add-to-cart intent

Potential features

  • Camera rentals
  • Used cameras
  • Photography courses and events
  • A photography community

Fabian Camera taught me how to turn research into real design decisions. It was the project where I learned to trust the design thinking process — understand the problem first, test ideas, and let user needs shape the final experience.