UNiCASE

The critical point in the renewal process was to have the designers, and all the people involved participate in the UI/UX review meetings and branding discussions. The participants included the CEO, lead engineer, sales team leader, product designer, and graphic designer. The reason for this was to avoid having a biased perspective and to be able to identify more specific issues and create a core brand image by having as wide a range of participants as possible.

リニューアルにおいて大事にしたポイントは、UI/UX検討会やブランディングの打合せに、デザイナーのみならず、関係者全員に参加して頂きました。参加者は、代表取締役、リードエンジニア、営業チームリーダー、プロダクトデザイナー、グラフィックデザイナーです。これは偏った視点のみで検討することを避ける為、なるべく広範囲で検討することで、より具体的な課題抽出、コアなブランドイメージを描くことができる為でした。

At the beginning of the project, the UNiCASE brand image was vague. Still, to make it more concrete, we had each party submit a brand image analysis sheet, analyzed the idea the service had, and searched for keywords. As a result, the keywords for UNiCASE were "SOPHISTICATED" and "COMFORTABLE."

From there, everyone involved created a mood board that embodied these keywords. Creating a visual image made it easier to imagine what UNiCASE is all about. It became easier to imagine the design direction for all creative work by clarifying the brand image, including web design and in-store POP display.

プロジェクト当初は、漠然としていたUNiCASEブランドイメージをより具体化する為、ブランドイメージ分析シートを各関係者から提出してもらい、サービスが持つイメージを分析し、キーワードを探っていきました。結果、UNiCASEのキーワードは、「SOPHISTICATED 洗練された」と「COMFORTABLE 心地のよい」が導き出されました。

そこから、関係者全員で、これらのキーワードを具現化したムードボードを作成しました。ビジュアルにすることで、より「UNiCASE」らしさをイメージしやすくなり、ブランドイメージを明確にすることで、ウェブデザイン、店舗でのポスターなどすべてのクリエィティブにおけるデザインディレクションのイメージがしやすくなりました。

A good brand experience is reinforced through consistency. Inconsistent branding is not memorable and can reduce trust.

Before the renewal, the EC site and the POP and signage design for the stores had different styles and were inconsistent. The design tone was different for each designer in charge, and the visual communication was uneven throughout. Therefore, we created a style guide to ensure consistent communication even when the designer in charge changes, and we made sure to set rules for the production.

It was necessary to set rules only for the general framework and leave room for design innovation. If we put too many rules for the creative design process, the design expression would be limited.

良質なブランド体験は、一貫性を通して強化されます。一貫性のないブランディングは印象に残りづらく、信頼度も下げてしまう恐れもあります。

リニューアル前の、ECサイトと、店舗向けのPOPやサインなどのクリエィティブは、それぞれスタイルがバラバラで一貫性に欠けるものでした。担当デザイナー毎にデザインのトーンが違い、全体にビジュアルコミニュケーションにムラがありました。そこでスタイルガイドを作成し、担当者が変わっても一貫したコミュニケーションを保てるように、制作物のルール化を徹底していきました。

工夫した点は、あまりにもクリエィティブのデザインプロセスをルール化してしまうと、デザインの表現が限定されてしまうので、媒体によっては、大枠のみをルール化し、デザインの工夫が出来る余白を設けることも必要でした。

Before the renewal, the site was too SEO-conscious and had too much information. To appeal to the millennial generation, which prefers visual communication, we created a layout with more visuals, adjusted the text volume, and tightened the margins. Since a complete renewal of all pages at once would take a lot of time and effort, we divided the renewal into phases, starting with the high-impact top page, product list, product details, and cart transition. We implemented micro-interactions such as detailed animations, a heart lights up in red when the favorite button is pressed, and a badge that appears on the cart after an item is added to the cart.

リニューアル前は、SEOを意識しすぎた情報過多のサイト構成となっていました。ビジュアルからの情報を好むミレニアム世代に向け、ビジュアル多め、文字ボリュームは調整、余白をしっかり持たせたレイアウトで構成していきました。すべてのページを一括でフルリニューアルを目指すと相当な時間と労力がかかる為に、フェーズ分けで、インパクトの大きいTOP、商品一覧、商品詳細、カート遷移から、リニューアルいたしました。他、細かなアニメーション、お気に入りボタンを押すと、ハートが赤く点灯、カートに商品が追加された後は、カートにバッジ表示させるなどの、マイクロインタラクションも並走して実装していきました。