-
Staytuned Website renewal
Webdesign / UI Design
Staytuned ウェブサイトデザインリニューアル
Background
I was responsible for working out the redesign and user experience enhancements with the director for 'stay tuned', a hotel booking website operated for a client. This involved conducting a thorough analysis to identify issues with the existing site, and then designing a new improved interface and user flow to improve overall usability.
Website: https://staytuned.asia/ja
The challenge
The key challenge in this redesign project was striking the right balance between preserving the core tone and brand identity of the existing 'stay tuned' hotel booking website, while still making significant improvements to the overall user experience and visual appeal. The goal was to enhance overall usability that also includes a seamless experience to connect the existing third party booking system without drastically altering the established look and feel that users were familiar with.
The approach
To tackle this redesign project, we took a comprehensive, user-centered approach. This began with an extensive research phase, where I personally booked and experienced stays at various hotels on the 'stay tuned' platform to gain first-hand insights. We then held a collaborative workshop with the client to identify both the pain points and positive aspects of the existing site. From there, we defined a clear visual concept and direction for the redesign, before moving into the wireframing and moodboarding stages. Finally, developed a robust design system to ensure a smooth and consistent implementation during the website development process.
The results
The final outcome was a website redesign that accurately reflected the staytuned’s brand image. By staying true to the established design concept, we were able to deliver a significantly enhanced user experience with improved usability across the entire platform. This led to increased engagement that closely aligned with the client's objectives.
Director: Kikuchi Risa
Designer: Joycelyn Kwong
背景
クライアントが運営されているホテル予約サイト「stay tuned」のリデザインとユーザーエクスペリエンスの向上をディレクターと共に担当しました。既存サイトの問題点を洗い出すため分析を行い、インターフェース改善とユーザーフローの設計をすることで全体的にユーザビリティとコンバージョン率を向上させることを目的としています。
課題
既存の「stay tuned」ホテル予約サイトの中核となるトーンとブランド・アイデンティティを維持しつつ、全体的なユーザー・エクスペリエンスとビジュアル・アピールを大幅に改善するという、適切なバランスを取ることでした。プロジェクトのゴールとしてトーンマナーを大幅に変えるではなく、既存のサードパーティ予約システムとのシームレスな接続を含む全体的なユーザビリティを高めることでした。
アプローチ
まず、自分自身が「stay tuned」プラットフォームでホテルを予約・宿泊し、直接インサイトを得るという段階からスタートしました。その後、クライアントと共同でワークショップを開催し、既存サイトのペインポイントとポジティブな側面の両方を洗い出しました。そこから、明確なビジュアルコンセプトとリデザインの方向性を定義し、ワイヤーフレームとムードボード、実際のデザインプロセスの段階へ進みました。
結果
「stay tuned」のブランドイメージを正確に反映したウェブサイトを実現できました。決まったデザインコンセプトのもとに全体のユーザビリティを向上させ、大幅に強化されたユーザーエクスペリエンスを提供することができました。これによって、クライアントの目的に沿ったエンゲージメントの向上につながります。
Research process
リサーチ段階
Identifying issues
To gain a comprehensive understanding of the user experience, the project team - including myself, the director, and the client representatives - participated in a facilitated online workshop. During this session, we extracted and evaluated a wide range of issues, pain points, and positive aspects observed throughout the entire hotel booking and accommodation process, from searching to booking the hotel to checking out of the hotel.
ベンチマーク企業の情報設計の良い点を分析し、それらのデザイン要素を取り入れていくことが重要だと考えました。そこで、ベンチマーク企業のデザイン特徴をしっかりとピックアップし、クライアントの意向に沿いつつも、ユーザビリティと視覚的魅力を高めた新しいデザイン案を提案することができました。
Concept making
コンセプト定義
1) Competitor Analysis
Recognizing the importance of building on best practices, we conducted a thorough analysis of the information design and user experience of relevant benchmark companies. By identifying the positive design elements and features employed by these competitors, we were able to selectively incorporate them into our proposed solution. This allowed us to put forward a new design that not only aligned with the client's strategic vision, but also significantly enhanced overall usability and visual appeal for the end users.
ベンチマーク企業の情報設計の良い点を分析し、それらのデザイン要素を取り入れていくことが重要だと考えました。そこで、ベンチマーク企業のデザイン特徴をしっかりとピックアップし、クライアントの意向に沿いつつも、ユーザビリティと視覚的魅力を高めた新しいデザイン案を提案することができました。
2) Defining what staytuned is all about
We extracted keywords from the wording used on the existing site and the atmosphere of the photos, refine what staytuned is about and held a meeting to check if it is aligned with the client’s vision.
既存のサイトで使われている文言や写真の雰囲気からキーワードを抽出し、クライアントとの認識合わせを行いました
3) Defining・Proposing concept
With the brand elements defined, we developed the visual design by curating the color palettes, fonts, and tonalities. From this, we crafted a cohesive design concept and established two key design guidelines, which then informed a comprehensive set of design rules to govern the website's visuals and user interface.
ブランドエレメントの定義を踏まえ、カラーパレット、フォント、色調を選択し、ビジュアルデザインを検討しました。そこから決まったデザインコンセプトにもと、2つの主要なデザイン・ガイドラインを設定しました。ガイドラインを土台として、ウェブサイトの一貫したビジュアルとユーザーエクスペリエンスを実現するための包括的なデザインルールを策定しました。
Actual making
制作段階
Before / After
改善前 / 改善後
The previous website design featured a dull, serious aesthetic that failed to reflect the hotel's desired lifestyle positioning. The user experience was also hindered by navigation challenges and insufficient content. Through the redesign, we prioritized improving the information architecture, strengthening the core navigation, and injecting greater vibrancy and warmth into the visuals. This included incorporating more lifestyle-focused imagery with people, as well as adopting a brighter color palette - enhancements that better aligned the website with the hotel's brand image and conveyed a sense of inviting hospitality.
Website: https://staytuned.asia/ja
以前のウェブサイトは真面目な印象が強く、ホテルのライフスタイル志向のブランドイメージと合っていませんでした。また、ナビゲーションや誘導の課題やコンテンツ不足により、ユーザーエクスペリエンスの改善が必要でした。リデザインでは、情報アーキテクチャの改善とコアナビゲーションの強化に取り組みました。さらに、ビジュアルには活気と温かみを加え、ライフスタイルイメージの人物写真や明るいカラーパレットを採用することで、ホテルのブランドイメージをより反映したウェブサイトを実現できました。
