Disney English System.

― Web design / UX

Overview

ワールド・ファミリー株式会社様が販売している「ディズニーの英語システム」のウェブサイトリニューアルを行いました。「ディズニーの英語システム」は、英語の習得を目的とした乳児・幼児向けの英語教材です。大手代理店様と共同で制作を行い、アクセス解析等からUXの改善とサイト内の複数ページのリデザインを担当しました。具体的にリニューアルを行ったのは、TOPページ・プログラムページ・サイト内メディアです。それぞれSP/PC版をリデザインしました。

Date : ~2018/09(2 mo.) Team : Engineer 1 / Desginer 1 / 大手広告代理店
Type : Cliant Work Role : Web design / UX / Information Architecture

Challenge

商品のCV向上やサイトの規模が大きく情報が混沌としていることが課題でした。その為、ユーザーの分析に力を入れて行いました。また、サイト全体に新鮮さを出すことや、サイト内コンポーネントのユーザビリティを向上させる必要がありました。

Objectives

・アクセス解析 / ヒューリスティック分析から適切なWebsiteの構造を設計すること。
・ボタン等のコンポーネントをより視覚的にわかりやすいものにすること。
・インフォグラフィック等を使って、情報を視覚的にわかりやすくし、整理すること。

Process

Process

Process 1 : 現状サイトの分析

当サイトのリニューアルに向けて、UX改善とCV改善を最終目標とし、データ分析やデザインの主観的分析、そして競合分析を行いました。

具体的な分析手法例

アクセス解析 / ヒューリスティック分析 / 競合分析
改善を行うにあたり、以下の質問に集中して分析を行いました。(以下は一部です。)

Q, どんな属性の方が来訪しているか?
流入元解析 / 流入KW解析 / 回遊状況解析 / デモグラ解析 / デバイス解析
Q, 情報が適切に行き届いており、効果があるか?
ヒートマップ解析 / 直帰離脱状況解析 / 回遊ルート解析
Q, 対象ページ付近の動線や設計は適切か?
サイトマップ解析

これらの各解析データに基づき、改善に向けた仮設を設定しました。

大きく分けると、
①コンポーネントが画像ベースであり、ホバーやクリックによるインタラクションがない。
②ページの動線が複雑であり、ページ内の情報の構造やサイトマップ構造を見直す必要がある。
③自社メディアは滞在時間が長く情報も有益だが(アクセス解析より)、トップページ等からメディアに移動する動線がわかりにくい。

改善後、よりユーザーが自分自身でサイト内の回遊をスムーズにできる様なわかりやすい構造設計や動線にし、CV率を上げていけるようにします。

現状サイトとデザインの整合性を保つ

これらの課題に基づき改善を進めていくが、現状のサイトのすべてのページを変えるわけではないので、現状のイメージから大きく変わるようなことはできない。その為、現状のカラースキーム等を踏襲しながら、デザインとしての新鮮さを出すという方向性を取りました。

Process 2 : Wireframe

サイト分析の結果や仮説をもとに、ページ内情報の構造修正を話し合いました。カラムの修正やレイアウト修正、画面移動の動線の修正、横スクロール化するコンポーネント、ボタン等細かいところまで議論し課題を適切に解決できる構造とユーザビリティの実現を目指しました。

wireframe

Outcome : Final Design 

課題解決の為の構造提案のミーティングを繰り返した後、ワイヤーフレームから実際のデザインの工程に移ります。ビジュアルデザイン面では、現状サイトの雰囲気を崩さず、かつ新鮮さを持たせるデザインを心がけました。課題の一つであったコンポーネントのインタラクションのデザインを提案し、ユーザーが認識しやすいボタンデザインにしています。

Disney

PC - Top Page

Disney

PC - Program Page

Disney

PC - Owned Media Page

Outcome : Infographic

今回のプロジェクトの一環として、インフォグラフィクをデザインしてより情報を視覚的に見やすくするというものがありました。教材やクライアント様のリサーチを行い、既存の情報をもとにインフォグラフィクを制作しました。

Disney

Program Page - 語学習得過程の図

Disney

Top Page - 相乗効果を説明した図

Outcome : Mobile Design

アクセス解析からも、モバイルへの最適化は必須事項でした。今回のプロジェクトではモバイルファーストで全てのデザインを制作しています。

Disney
Project by Ryohei Ano.