UX/UI · Motion Design

Camera City - Case study

Tools
  • Figma
  • Rive
  • Illustrator

Overview

When designing a UX/UI solution for a camera repair shop website, it was important to address common pain points users might experience. Customers looking for repair services often struggle with unclear pricing, lack of service details and poor communication about repair timelines. A confusing navigation structure or outdated design can make it difficult for users to find essential information, leading to frustration and lost business. By focusing on clarity, accessibility, and trust-building elements, the goal is to create a seamless experience that guides users effortlessly to the placement of a repair order.

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.

The most important findings after conducting the user interviews:

  1. Users are tech-savvy and they know their equipment
  2. Getting a quote should be quick and pretty accurate
  3. Trusting the repair service with valuable equipment is important
  4. Fair pricing with good quality of repair

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 simple design system in Figma, including a color palette, text styles, and essential UI components for 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 made in illustrator and then animated in Rive. The animation activates dynamically as users scroll through the page, adding an engaging and interactive touch to the experience.

two animation states of a photo camera

Final design

The page was designed with responsiveness in mind, ensuring optimized experience across all devices, from desktop screens to mobile phones.

Screenshot of the whole page

More Projects

All projects