UX/UI · Motion Design

Camera City - Case study

Tools
  • Figma
  • Rive
  • Illustrator

Overview

When designing a UX/UI solution for a camera-repair website, it was important to address the common pain points users experience. Customers often struggle with unclear pricing, limited service information, and poor communication about repair timelines. Confusing navigation or an outdated design can make essential information difficult to find, leading to frustration and lost business. By focusing on clarity, accessibility, and trust, the goal was to create a seamless experience that helps users submit a repair request with confidence.

Role

The Camera Repair Website is a project I designed entirely on my own, from initial research and ideation to the final UX/UI solution. To ensure consistency, I created a simple design system tailored to the project’s needs. Additionally, I prepared a camera illustration and animated it, adding a unique, engaging touch to the experience.

Mortgage experience interface presented with an architectural model

Research

I conducted user research with four participants, all passionate about photography – ranging from hobbyists to professional photographers. Each participant relied on dedicated camera equipment, providing valuable insights into their needs, frustrations, and expectations.

Key findings from the user interviews included:

  1. Users are tech-savvy and understand their equipment.
  2. Users expect a quick, reasonably accurate quote.
  3. Trust is essential when handing over valuable equipment.
  4. Users value fair pricing and high-quality repairs.

Design goals

  • Ease of navigation, quick access to the Estimate Form
  • Brand integrity, consistency
  • Simple but engaging design
  • Accessibility

Design system

To support the project, I created a simple design system in Figma, including a color palette, text styles, and essential UI components to ensure consistency and usability.

design system board

Features, services and form

To build trust with customers, I highlighted the company’s key offerings at the top of the page, such as a 3-month guarantee and free quotes, ensuring transparency and credibility.

User research revealed that photographers – both hobbyists and professionals – are familiar with their equipment and often seek repairs for specific camera parts or maintenance services. To address this, I created a clear and accessible list of available repair services, making it easy for users to find exactly what they need.

The design system’s components were used to create a clear, user-friendly form, allowing customers to easily submit repair requests and even upload a photo of the damaged part for better assessment.

design system board

Visual Delight – interactive animation

The camera illustration was created in Illustrator and animated in Rive. The animation responds as users scroll through the page, adding an engaging, interactive touch to the experience.

two animation states of a photo camera

Final design

The page was designed responsively to provide a smooth, optimized experience across devices, from desktop screens to mobile phones.

Screenshot of the whole page

More Projects

All projects