Who we are:

Delightment is a UX/UI design and branding studio in Tokyo.

ディライトメントは、UX/UIデザインとブランディングの会社です。クライアントのパートナーとして、顧客とのつながりを築くためのデザインをします。

CONTACT
サービス内容

​​We provide UX/UI services for websites & digital products, practical strategies, and branding services. Our process always starts with a human-centered perspective so we can approach business challenges empathically.

​​ウェブサイトとデジタル製品を対象としたUX/UIデザインを主軸として、ストラテジー、ブランディングの領域でスタートアップや企業をサポートしています。多様なビジネス課題を人間中心の観点から共感的にアプローチします。

360° Perspective
Case Study

ユニケース

UX/UI デザインとリブランディングデザイン

Brand ImageAnalysisProvided UX/UI Design and Rebranding Design.
Type of work
Client
view live site >

CCC Frontier's e-commerce site, UNiCASE, is one of Japan's largest smartphone accessory stores, with over 70,000 products from over 1,000 manufacturers. After seven years of operation, the structure and design of the e-commerce site had become complicated over time and no longer met the needs of the target users. To update the design and layout of the site, we reviewed UNiCASE's core brand image, re-identified the target users, and designed the UX/UI to match the insights.

株式会社CCCフロンティアの自社ECサイト「UNiCASE」は1000メーカー以上、約70,000点の品揃えのある、日本最大級のスマートフォンアクセサリー専門店です。7年運用してきた、ECサイトは、構成・デザインが、時間の経過と共に、複雑化し、ターゲットユーザーのニーズに合わなくなってきていました。そこで、デザインと構成をアップデートすべく、UNiCASEのコアブランドイメージの見直し、ターゲットユーザーの再認識を行い、インサイトに合わせたUX/UIデザインを担当させていただきました。

360°の観点

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

360° Perspective360° Perspective360° Perspective360° Perspective360° Perspective360° Perspective360° Perspective
ブランドイメージ分析

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」らしさをイメージしやすくなり、ブランドイメージを明確にすることで、ウェブデザイン、店舗でのポスターなどすべてのクリエィティブにおけるデザインディレクションのイメージがしやすくなりました。

Brand ImageAnalysisBrand ImageAnalysis
スタイルガイド

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

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

Style Guide
Style Guide
UX/UIデザイン

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、商品一覧、商品詳細、カート遷移から、リニューアルいたしました。他、細かなアニメーション、お気に入りボタンを押すと、ハートが赤く点灯、カートに商品が追加された後は、カートにバッジ表示させるなどの、マイクロインタラクションも並走して実装していきました。

UX/UI DesignUX/UI Design
UX/UI Design
結果

Maintain the number one
search result

122

%

Maintain the number one
search result

●The revenue achieved 122% of the pre-renewal year, and the conversion rate increased by 0.11%.
●The challenge with SEO for an e-commerce site is that it competes with major e-commerce sites such as Rakuten, Amazon, and ZOZOTOWN. Still, we achieved results such as maintaining the number one search result for "iPhone 11 case".

●収益はリニューアル前の年に対して122%を達成し、コンバージョン率は0.11%増加しました。
●ECサイトにおけるSEOは楽天、Amazon、ZOZOTOWNなど大手ECと競合となってしまうことが課題ですが、「iPhone11ケース」で検索結果1位を維持するなどの実績を獲得することができました。

ブログ