Клиент
Diamond Club — это закрытый профессиональный нетворкинг-клуб для разработчиков и издателей видеоигр. Участники клуба могут получать бесплатные билеты и купоны на мероприятия, участвовать в нетворкинг-встречах, митапах и других регулярных отраслевых мероприятиях. Чтобы зарегистрироваться на какое-либо событие, участники оставляют заявку на сайте клуба.
Проблема
Информация о возможностях для участников клуба публиковалась на сайте клуба. Однако у пользователей не было места, где можно посмотреть всю информацию о доступных им привилегиях: купонах, купленных билетах и регистрациях на мероприятия.
Задачи
Разработали личный кабинет члена Diamond Club, в том числе:
Как мы работали
Аналитика и прототипирование
Проанализировали уже имеющиеся процессы и разработали систему новых взаимодействий. Спроектировали структуру личного кабинета, сценарии пользователей, логику входа в сервис, алгоритм регистрации и авторизации, структуру других функций и выводимых данных в личном кабинете. На основе этого разработали прототипы экранов сервиса.
Сценарий пользователя сервиса получился таким:
1. Авторизация
2. Просмотр доступных привилегий
3. Запись на интересующее мероприятие клуба
4. Просмотр статуса заявки
Дизайн
Интерфейс личного кабинета отрисовали в соответствии с UI-китом заказчика — использовали уже утверждённые цвета, шрифты, кнопки и состояния элементов. Соблюдали пропорции, цветовую гамму, контрастность и читаемость текста, внимательно следили за простотой и удобством использования сервиса.
По прототипам создали дизайн-макеты всех экранов личного кабинета для десктопной версии, а затем адаптировали их под форматы планшета и мобильного устройства.
Разработка
В соответствии с техническим заданием и готовыми дизайн-макетами начали разработку сервиса. Пользовательский интерфейс создали с помощью TypeScript.
Все данные, необходимые для работы сервиса, хранятся в специально создаваемой заказчиком базе данных под управлением СУБД MySQL. Взаимодействие фронтенд-сервиса и СУБД настроили через GraphQL API.
При разработке первой версии личного кабинета реализовали следующую структуру функций:
Результат
Мы разработали первую версию личного кабинета Diamond Club. Для удобства пользователей сервис поддерживается всеми браузерами и устройствами, а для навигации по интерфейсу есть возможность использовать клавиатуру.
Технологии
GraphQL, React, TypeScript, Miro, Figma.