Личный кабинет Мой отчет

Возникшие проблемы:

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

Я обратил свое внимание и на логотип. Старая версия не совсем отражает деятельность компании, и есть большая вероятность того, что он не впишется в новую версию личного кабинета. Клиент полностью согласился с моим видением этого момента и составил ТЗ для разработки логотипа.

Ход работы

1. Разработка логотипа

Старая версия логотипа:

После внимательного изучения ТЗ, я приступил к разработке логотипа. Мне не хотелось делать что-то стандартное, например: калькуляторы, знаки плюса и минуса и т. д. Подобных логотипов много.
Я сконцентрировался на создании аббревиатуры компании как знака и просто знака без использования аббревиатуры. Цветовую гамму выбрал достаточно лаконичную. Акцентный цвет синий, а вспомогательные цвета черный и серый. При разработке сразу учитывалось то, как лого и цвета будут выглядеть в дизайне самого личного кабинета.

В итоге заказчику было предложено пять вариантов:

Я сразу показал как логотип может выглядеть на носителях и к каждому варианту создал паттерн. Данный паттерн можно использовать при разработке фирменного стиля.

Заказчик выбрал вариант ниже и остался доволен.

2. Разработка структуры сайта

Перед тем, как приступить к дизайну личного кабинета, я разработал структуру. Были учтены пожелания заказчика. По сути, структура осталась примерно такая же, как и в старой версии личного кабинета. Но были проработаны моменты, которые мешали пользователю находить путь к нужной ему информации. Заказчик жаловался, что клиенты часто звонили ему, для того чтобы узнать, как выполнить тот или иной шаг.

Пример:

В разделе “Заявки”, при оформлении новой заявки во втором шаге, пользователь не понимал, что тут есть табы и каждый раз звонил и спрашивал: “Что делать дальше?”.

При разработке структуры было принято решение данные табы сделать более явными, выделить их.

Несмотря на то, что это структура, уже тут видны табы. Пользователю будет понятно, что на кнопки можно нажать.

Также были добавлены новые разделы.

Ниже представлены несколько страниц, на стадии разработки структуры.

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

3. Создание дизайна сервиса

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

Цвета уже были определены.

Первым делом я сделал дизайн главной страницы. На данном этапе продумываются общие стилистические особенности, которые будут прослеживаться во всем проекте. Это тени под плашками, форма кнопки, состояние кнопки при наведении, цвет и форма иконок, и т. д. Также я показал как может выглядеть выпадающие меню.
Акцентный цвет синий. Им выделены кликабельные объекты.

Данный вариант был отправлен заказчику. Он ему очень понравился, поэтому я приступил к разработке внутренних страниц.

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

Например, в разделе оплаты есть вкладка “Безналичная оплата”. Здесь пользователь может отследить счета, которые он оформлял ранее. Этот момент выполнен в виде таблицы. В каждой строке есть возможность провалиться в отдельный счет и посмотреть детали. В старой версии сервиса это было обозначено знаком “многоточие” и клиенты не понимали, что на это можно нажать.

Я решил эту проблему следующим образом. Во-первых, была сделана кнопка. Во-вторых, вместо многоточия сделана стрелка. Это дает понять пользователю, что при нажатии он провалится в отдельную страницу счета.

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

4. Адаптив страниц

Только после того, когда все было полностью утверждено, я приступил к отрисовке адаптива страниц. Было продумано, как элементы будут перестраиваться при открытии на разных носителях.

Например, возьмем главную страницу.

Мы видим, что меню у нас ушло в “гамбургер”. При нажатии на этот знак, откроется меню поверх контента. Раздел пополнить теперь выглядит как цена. Он кликабелен. Личный кабинет отражен просто знаком. Блоки в контентной части ушли друг под друга. Были продуманы размеры элементов, расстояния между элементами, их положение при перестройке под разные размеры экрана. Все это учитывается для того, чтобы страница комфортно отображалась на любых девайсах, а клиенту было удобно пользоваться сервисом.
Адаптив страниц был отправлен заказчику. Проект был утвержден.

Итог

Проект был выполнен за 30 дней, что полностью соответствует указанным срокам в договоре.
Своевременно вносились все правки.
Заказчик на выходе получил логотип, дизайн сервиса и его адаптив.

Клиент остался полностью доволен выполненным проектом.