The PennyLoaf Bakery

Responsive website design for the PennyLoafBakery / UX/UI / Photoshop / 2017 October

penny-heroimage

Role

Responsive Website Design / UX/UI

Tools

Photoshop

Agency

The PennyLoaf Bakery
(school project)

"The PennyLoaf Bakery" ウェブサイトのリデザインを行いました。コンセプト、ターゲット設定、ペルソナ設定、スタイルガイドを含んだUXリサーチを行ったのち、デザインを制作しました。

pennyloafbakery-tablet-image

Brand Overview

"The PennyLoaf Bakery" はオーガニック素材を使用したナチュラル志向のパンを提供するパン屋です。パンの素材はすべて地元、ウィニペグの素材を使用しており、昔ながらの手法を使って焼き上げています。

brand-traits

Vision

わかりやすいサイト情報設計を行うことにより、既存カスタマーだけではなく、新規カスタマーを呼び込み、15%の売上増加をリデザインゴールとしました。

Persona

persona

Method

新規顧客を獲得するため、以下3つのこと、情報構造、文字階層、商品情報に着目してリデザインを行いました。また、リアルタイム情報(本日のオススメパン等)についてはインスタグラムやFacebookを利用し発信することとしました。

voice-tone
penny-mobile

The Concept

Problems

既存サイトにおいて、情報が整理されていない(ユーザー導線、情報ヒエラルキーが考慮されていない)ため、ユーザーにとって不親切な導線となっていました。バラバラに散らばっていた商品情報、ユーザー口コミ、イベント情報、ショップインフォをトップページにまとめることにより、情報の一覧性を高め、ユーザー導線を改善しました。

Plans

  • トップページコンテンツは、ナビゲーション、トップ画像、商品情報、最新ニュース、ショップインフォを記載し、情報の一覧性を高めることとしました。
  • 既存サイトでは、ギャラリーページにイメージ写真が掲載されているのみだったため、それぞれの商品情報を値段と共に掲載するページを新規に設け、商品の検索性を高めました。
penny-styleguide
penny-all-devices