---
publishYear: 2016
name: Билетик
title: Интерфейс приложения для покупки авиабилетов
excerpt: Спроектировали интерфейс мобильного приложения для iOS и обновили интерфейс сервиса по продаже авиабилетов.
context: |
  [Билетик.Аэро](https://www.biletik.aero/) — сервис по поиску, бронированию и онлайн-продаже дешевых авиабилетов.
logo:
  src: ~/assets/images/portfolio/biletik/logo.svg
  alt: Билетик • Логотип
  link: https://www.biletik.aero/
image: ~/assets/images/portfolio/biletik/main.png
imageAlt: Собака Павлова • Билетик • Интерфейс приложения для покупки авиабилетов
thumbnail:
  src: ~/assets/images/portfolio/cards/biletik.svg
  alt: Собака Павлова • Билетик • Интерфейс приложения для покупки авиабилетов

tags:
  - log
  - redesign
  - new-features
  - mass
  - mob
relatedPages:
  - text: |
      ### Вам нужен интерфейс?
      #### Заказать дизайн
      Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru) 
      #### Что мы можем сделать?
      [Прототип интерфейса](/services/prototype), как в этом кейсе. [UX-дизайн под ключ](/services/ux-design), [редизайн интерфейса](/services/redesign), [продуктовые исследования](/services/research) и [многое другое](/services).
    collection: services
    page: prototype
  - collection: services
    page: research
  - text: |
      ### Наша экспертиза
      368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
      ### Статьи об интерфейсах для транспорта
    collection: post
    page: city-transport-design
  - collection: post
    page: logistics-design
  - collection: post
    page: osago
  - collection: post
    page: rzd-consult

relatedPages2:
  - text: |
      ### Похожие проекты
    collection: portfolio
    page: sindbad
  - collection: portfolio
    page: russpass
  - collection: portfolio
    page: viking-line

outcome:
  title: Некоторые цифры
  numbers:
    - title: Написали
      number: 50 страниц
      text: отчета о UX-аудите сайта
    - title: Нарисовали
      number: '> 40 экранов'
      text: веб- и мобильной версии сайта
    - title: Собрали
      number: '> 60 экранов'
      text: мобильного приложения для iOS

result:
  - text: Покажем из рук в руки и расскажем ещё больше
    link: 'mailto:we@sobakapav.ru'
budget: 545 000 ₽
time: '1 месяц'

review:
  text: |
    Спасибо за чудесный проект, который мы сделали совместно с вами. Нас все устроило и было выполнено вами на великолепном уровне.
  person: Андрей Каймачников
  position: генеральный директор

metadata:
  canonical: https://sobakapav.ru/portfolio/biletik
  title: UX-дизайн • Интерфейс приложения для покупки авиабилетов
  description: 'Спроектировали интерфейс мобильного приложения для iOS и обновили интерфейс сервиса по продаже авиабилетов'
  robots:
    index: true
    follow: true
  openGraph:
    site_name: Собака Павлова
    images:
      - url: '~/assets/images/portfolio/biletik/badge.png'
        width: 1200
        height: 630
    type: website
---

import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';

<TOC>
  [Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Аналитика](#anchor3) • [Дизайн](#anchor4) •
  [Презентация](#anchor5) • [Результат](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>

## <a name="anchor1" />Бизнес-задача

Привести устаревшие интерфейсы в соответствие с отраслевыми стандартами.

<a href="/images/portfolio/biletik/1-1.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/1.png)
</a>
_Главная_

<div class="flex gap-2 flex-wrap">
  {' '}
  <Image
    src="~/assets/images/portfolio/biletik/11.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
  <Image
    src="~/assets/images/portfolio/biletik/12.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
  <Image
    src="~/assets/images/portfolio/biletik/13.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
  <Image
    src="~/assets/images/portfolio/biletik/14.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
</div>
_Мобильное приложение_

## <a name="anchor2" />Дизайн-задача

1. Провести UX-аудит сайта, мобильной версии и мобильного приложения Билетик.Аэро

После аудита заказчик вернулся с новыми дизайн-задачами:

2. Сделать редизайн, опираясь на результаты аудита.
3. Спроектировать мобильное приложение для iOS.

<a href="/images/portfolio/biletik/3-1.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/3.png)
</a>
_Поиск билета_

<a href="/images/portfolio/biletik/7.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/7.png)
</a>
_Покупка билета_

<div class="flex gap-2 flex-wrap">
  {' '}
  <Image
    src="~/assets/images/portfolio/biletik/15.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
  <Image
    src="~/assets/images/portfolio/biletik/16.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
</div>
_Мобильное приложение_

## <a name="anchor3" />Результат

### UX-аудит

Провели UX-аудит и пользовательское тестирование сайта, мобильной версии и мобильного приложения.

<a href="/images/portfolio/biletik/31.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/31.png)
</a>
_Фрагмент отчета об аудите_

Тестировали четыре сценария:

1. Перелет туда и обратно. Фокус на выборе и оформлении простого перелета.
2. Сложный перелет. Фокус на выборе сложного перелета и поиске информации.
3. Сложный перелет с детьми. Фокусы: удобство, минимальное время перелета, стыковка без смены аэропорта, подбор хорошей авиакомпании, заказ дополнительных сервисов.
4. Заказ билета для другого человека. ("Секретарь покупает билеты для начальства").

<a href="/images/portfolio/biletik/32.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/32.png)
</a>
_Фрагмент отчета об аудите_

Подготовили пятидесятистраничный отчет о тестировании, подробно описав результаты и рекомендации.

### Редизайн сайта

Спроектировали веб- и мобильную версию сайта. Нарисовали более сорока экранов в общей сложности.

<a href="/images/portfolio/biletik/2.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/2.png)
</a>
_Поиск билета_

<a href="/images/portfolio/biletik/4.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/4.png)
</a>
_Оформление билета_

<a href="/images/portfolio/biletik/5.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/5.png)
</a>
<a href="/images/portfolio/biletik/6.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/6.png)
</a>
_Тарифы_

<a href="/images/portfolio/biletik/4.png" target="_blank">
  ![Интерфейс приложения для покупки авиабилетов | SobakaPav.ru](~/assets/images/portfolio/biletik/4.png)
</a>
_Выбор времени перелета_

<div class="flex gap-2 flex-wrap">
  {' '}
  <Image
    src="~/assets/images/portfolio/biletik/9.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
  <Image
    src="~/assets/images/portfolio/biletik/10.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />{' '}
</div>
_Мобильная версия_

### Мобильное приложение для iOS

Спроектировали более шестидесяти экранов мобильного приложения. Передали макеты в разработку.

<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/17.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/18.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/19.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/20.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/21.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/22.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/23.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/24.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/25.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/26.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/27.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/28.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>
<div class="flex gap-2 flex-wrap">
  <Image
    src="~/assets/images/portfolio/biletik/29.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
  <Image
    src="~/assets/images/portfolio/biletik/30.png"
    alt="Интерфейс приложения для покупки авиабилетов"
    class="min-w-72 grow shrink basis-0"
  />
</div>

## <a name="anchor4" />