UI/UX CASE STUDY of a landing page optimized for conversions

My role: UX/UI designer
Teammates: Daria Samsakova (Lead UX/UI Designer), Alexander Nikiforov (Senior UX/UI Designer), Konstantin Mykhailiuk (Junior UX/UI Designer)
PROBLEM
Лендинг Пейдж - это было сердце именно этого бизнеса. Мы гнали трафик на лендинги, собирали данные. И от дизайна зависило какое количество трафика превратиться в лидов. Их можно быстро создавать и тестировать новые продукты. Афилиейт Маркет перенасыщен предложениями и нашему клиенту нужно было забрать максимальную часть рынка. C помощью отстройки от конкурентов и качественную и дешевую конвертацию в лидов.
SOLUTION

У нас было две задачи. Первая: Сделать редизайн существующих лендингов, отстроиться от конкурентов благодаря визуалу и получить большее количество клиентов. Вторая задача - создать такой конструктор, что бы в коллаборации с инженерами генегировать сайты за 2 недели для новых продуктов и тестировать их. Поэтому, мы должны были найти и использовать Only use elements, which are easy-to-create during the development part and it's possible to code within a couple of hours.
Благодаря быстрому и дешевому тестированию гипотез, клиент мог бы быстро найти те ниши, которые работают.

PROCESS
Persona
We are the leading firm by delivering quality and value. Our professionals have more than 5 years of experiences.
Rough sketches
Our managers are always ready to answer your questions. You can call us at the weekends and at night.
Exploration and mockups
Our company works according to the principle of individual approach to every client.
UI Design
I am studying business at the University of North London, Manchester Business School
PERSONA
Wireframes
Это этап зарисовывать блоки, из которых сайты будут состоять. Моей задачей было создать такую систему, такую библиотеку блоков, что бы любой продукт можно было как собрать как конструктор.
Most important elements of a successful landing page:

  • Have only one and clear conversion goal (e.g. getting a new user)
  • Make sure every element of your page supports this conversion goal.
  • There is one CTA (call-to-action) button always visible, so the user can decide any time to use it.
  • Provide social validation in the form of testimonials or customer stories.
  • Break up long content with subheading, bullets and formatting to make it easier to read.
Before
• low contrast, accessibility issues
• overall lack of color and brand confidence
• very few CTAs, most of which do not stand out
After
• high-contrast, accessible, clear information hierarchy
• warm and relatable imagery, humans & lifestyle
• enticing CTAs that match the content
Before / After
We practice most common directions of yoga, which help to get peace and harmony with your body
Wireframes
Это этап зарисовывать блоки, из которых сайты будут состоять. Моей задачей было создать такую систему, такую библиотеку блоков, что бы любой продукт можно было как собрать как конструктор.
Landing Pages
Структура всегда была похожа. Первый блок - обязательно с формой и кнопкой.. Второй - информация о продукте, третий - ингридиенты. Обязательно - отзывы, как социальная валидация, а так же, блок до/после. Практически на каждом экране - CPA button. In case the user is not convinced right away and need more information before using the CTA button, there is a permanent 'Rush my Order' CTA button visible in the fixed positioned navigation bar. This way a CTA option is always visible during scrolling and discovering the content of the landing page.
Blocks
Таким образом мы справились с задачей. Мы получили шаблоны, которые было легко передавать инженерам они были с единой сеткой, похожими фукциями. Ниже несколько примеров.
Deliverables
Все сайты мы так же делали в версиях: Десктоп, Таблет, Мобильная. Так же были страницы Checkout, Поп апы, Гайд лайн и т.д. Но все это у меня не сохранилось. Основной моей задачей были как раз создание всех версий и дополнительных страниц.
Takeaways

This challenge was an excellent opportunity to think more deeply about landing pages and experiment with different decisions that go into such details as the placement of the CTA buttons.

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