رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

صفحهٔ معرفی خدمت

وضعیت: پیش‌نویس

صفحهٔ هر حوزهٔ خدمت (و هر محصول مثل SOS و ScaleLab) همین ترتیب را دارد. هر بخش به یک پرسش خواننده پاسخ می‌دهد؛ اگر بخشی پاسخ تازه‌ای ندارد، حذفش کنید.

ترتیب بخش پرسش خواننده
۱ سربرگ این چیست و برای من چه می‌کند؟
۲ مساله آیا مسالهٔ من را می‌فهمند؟
۳ روش چطور کار می‌کنند؟
۴ نتیجه و گواه آیا جواب داده است؟
۵ دعوت قدم بعدی چیست؟

۱. سربرگ

Section titled “۱. سربرگ”

حوزهٔ خدمت در برچسب بالا، و عنوان، نتیجه را برای مشتری می‌گوید. زمینه سرمه‌ای با موج در نیمهٔ پایین؛ یک دکمهٔ اصلی.

استراتژی کسب‌وکار و آینده‌نگری

استراتژی‌ای که در جلسهٔ هیئت‌مدیره نمی‌ماند

با تیم شما مسیر سه سال آینده را می‌سازیم و تا اجرای قدم‌های اول کنارتان می‌مانیم.

درخواست جلسهٔ اول نمونه‌کارها 
<section class="hq-hero hq-hero--dark" style="inline-size:100%">
  <img class="hq-hero__media" src="/dist/brand/graphics/wave.svg" alt="" />
  <div class="hq-hero__body">
    <p class="hq-hero__eyebrow">استراتژی کسب‌وکار و آینده‌نگری</p>
    <h1 class="hq-hero__title">استراتژی‌ای که در جلسهٔ هیئت‌مدیره نمی‌ماند</h1>
    <p class="hq-hero__lead">با تیم شما مسیر سه سال آینده را می‌سازیم و تا اجرای قدم‌های اول کنارتان می‌مانیم.</p>
    <div class="hq-hero__actions">
      <a class="hq-button" href="#">درخواست جلسهٔ اول</a>
      <a class="hq-button hq-button--ghost" href="#">نمونه‌کارها</a>
    </div>
  </div>
</section>

۲. مساله

Section titled “۲. مساله”

سه کارت با زمینهٔ surface-alt، هرکدام یک نشانه. با زبان مشتری بنویسید، نه با اصطلاح مشاوره.

سه نشانه که استراتژی شما به بازنگری نیاز دارد

اگر یکی از این‌ها آشناست، احتمالاً مساله برنامه نیست، جهت است.

رشد کند شده

فروش هنوز بالا می‌رود، اما هر سال کندتر و با هزینهٔ بیشتر.

اولویت‌ها پراکنده‌اند

هر واحد برنامهٔ خودش را دارد و منابع میان همه تقسیم می‌شود.

بازار عوض شده

رقیب تازه، مشتری تازه یا قاعدهٔ تازه؛ و مدل کسب‌وکار همان قبلی است.

<section class="hq-section" style="inline-size:100%">
  <div class="hq-section__head">
    <h2 class="hq-section__title">سه نشانه که استراتژی شما به بازنگری نیاز دارد</h2>
    <p class="hq-section__lead">اگر یکی از این‌ها آشناست، احتمالاً مساله برنامه نیست، جهت است.</p>
  </div>
  <div class="hq-cards">
    <article class="hq-card hq-card--tint"><span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4.67,28l6.39-12,7.3,6.49a2,2,0,0,0,1.7.47,2,2,0,0,0,1.42-1.07L27,10.9,25.18,10,19.69,21l-7.3-6.49A2,2,0,0,0,10.71,14a2,2,0,0,0-1.42,1L4,25V2H2V28a2,2,0,0,0,2,2H30V28Z"/></svg></span><h3 class="hq-card__title">رشد کند شده</h3><p class="hq-card__body">فروش هنوز بالا می‌رود، اما هر سال کندتر و با هزینهٔ بیشتر.</p></article>
    <article class="hq-card hq-card--tint"><span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M6 13 6 7.414 15 16.414 15 28 17 28 17 16.414 26 7.414 26 13 28 13 28 4 19 4 19 6 24.586 6 16 14.586 7.414 6 13 6 13 4 4 4 4 13 6 13z"/></svg></span><h3 class="hq-card__title">اولویت‌ها پراکنده‌اند</h3><p class="hq-card__body">هر واحد برنامهٔ خودش را دارد و منابع میان همه تقسیم می‌شود.</p></article>
    <article class="hq-card hq-card--tint"><span class="hq-card__icon"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2Zm5,3.1055a12.0136,12.0136,0,0,1,2.9158,1.8994L23.5034,8H21ZM13.3784,27.7026A11.9761,11.9761,0,0,1,8.1157,6.9761L9.4648,9h3.3423l-1.5,4H7.2793L5.8967,17.1475,8.4648,21h5l1.4319,2.1475ZM16,28c-.2034,0-.4016-.02-.6025-.03l1.3967-4.19a1.9876,1.9876,0,0,0-.2334-1.7412l-1.4319-2.1475A1.9962,1.9962,0,0,0,13.4648,19h-3.93L8.1033,16.8525,8.7207,15H11v2h2V14.1812l2.9363-7.83-1.8726-.7022L13.5571,7H10.5352L9.728,5.7891A11.7941,11.7941,0,0,1,19,4.395V8a2.0025,2.0025,0,0,0,2,2h2.5857A1.9865,1.9865,0,0,0,25,9.4141l.1406-.1407.2818-.68A11.9813,11.9813,0,0,1,27.3,12H22.5986a1.9927,1.9927,0,0,0-1.9719,1.665L20.03,17.1064a1.99,1.99,0,0,0,.991,2.086l2.1647,1.4638,1.4585,3.646A11.9577,11.9577,0,0,1,16,28Zm8.8145-8.6563L22.1,17.5088l-.1-.06L22.5986,14h5.2207a11.743,11.743,0,0,1-1.7441,8.4951Z"/></svg></span><h3 class="hq-card__title">بازار عوض شده</h3><p class="hq-card__body">رقیب تازه، مشتری تازه یا قاعدهٔ تازه؛ و مدل کسب‌وکار همان قبلی است.</p></article>
  </div>
</section>

۳. روش

Section titled “۳. روش”

چهار گام 4D همیشه با همین نام‌ها و همین ترتیب، به شکل فرایند. توضیح هر گام برای همین خدمت نوشته می‌شود.

روش کار: چهار گام 4D

  1. کشفگفت‌وگو با مدیران، داده و بازار
  2. طراحیگزینه‌ها و انتخاب مسیر با تیم شما
  3. تحویلنقشهٔ راه، بودجه و شاخص‌ها
  4. استقرارهمراهی در شش ماه اول اجرا
<section class="hq-section" style="inline-size:100%">
  <div class="hq-section__head">
    <h2 class="hq-section__title">روش کار: چهار گام 4D</h2>
  </div>
  <ol class="hq-process">
    <li class="hq-process__step"><strong>کشف</strong><span>گفت‌وگو با مدیران، داده و بازار</span></li>
    <li class="hq-process__step"><strong>طراحی</strong><span>گزینه‌ها و انتخاب مسیر با تیم شما</span></li>
    <li class="hq-process__step"><strong>تحویل</strong><span>نقشهٔ راه، بودجه و شاخص‌ها</span></li>
    <li class="hq-process__step"><strong>استقرار</strong><span>همراهی در شش ماه اول اجرا</span></li>
  </ol>
</section>

۴. نتیجه و گواه

Section titled “۴. نتیجه و گواه”

عدد واقعی از پروژهٔ واقعی، با اجازهٔ مشتری. یک عدد با accent، بقیه با ink. نقل‌قول کوتاه با نقش گوینده؛ نام مشتری فقط با رضایت او.

نتیجه در یک پروژهٔ نمونه

۲۳٪
رشد حاشیهٔ سود
در دو سال اول اجرا
۳
بازار تازه
به جای هفت ایدهٔ پراکنده
۱۲
هفته
از اولین جلسه تا نقشهٔ راه

برای اولین بار همهٔ مدیران یک جهت را می‌دیدند.

مدیرعاملتولیدکنندهٔ پوشاک
<section class="hq-section" style="inline-size:100%">
  <div class="hq-section__head"><h2 class="hq-section__title">نتیجه در یک پروژهٔ نمونه</h2></div>
  <div class="hq-cards">
    <div class="hq-stat hq-stat--accent"><div class="hq-stat__value">۲۳٪</div><div class="hq-stat__label">رشد حاشیهٔ سود</div><div class="hq-stat__note">در دو سال اول اجرا</div></div>
    <div class="hq-stat hq-stat--ink"><div class="hq-stat__value">۳</div><div class="hq-stat__label">بازار تازه</div><div class="hq-stat__note">به جای هفت ایدهٔ پراکنده</div></div>
    <div class="hq-stat hq-stat--ink"><div class="hq-stat__value">۱۲</div><div class="hq-stat__label">هفته</div><div class="hq-stat__note">از اولین جلسه تا نقشهٔ راه</div></div>
  </div>
  <blockquote class="hq-quote"><p class="hq-quote__text">برای اولین بار همهٔ مدیران یک جهت را می‌دیدند.</p><footer class="hq-quote__by"><span class="hq-quote__name">مدیرعامل</span><span class="hq-quote__role">تولیدکنندهٔ پوشاک</span></footer></blockquote>
</section>

۵. دعوت

Section titled “۵. دعوت”

جملهٔ دعوت برند، «برای تحول آماده‌اید؟»، روی زمینهٔ سرمه‌ای و یک دکمه.

برای تحول آماده‌اید؟

جلسهٔ اول رایگان است و یک ساعت طول می‌کشد.

درخواست جلسه
<section class="hq-hero hq-hero--dark hq-hero--center" style="inline-size:100%">
  <div class="hq-hero__body">
    <h2 class="hq-hero__title hq-hero__title--sm">برای تحول آماده‌اید؟</h2>
    <p class="hq-hero__lead">جلسهٔ اول رایگان است و یک ساعت طول می‌کشد.</p>
    <div class="hq-hero__actions"><a class="hq-button" href="#">درخواست جلسه</a></div>
  </div>
</section>
انجام بدهعنوان سربرگ نتیجه را می‌گوید: «استراتژی‌ای که در جلسهٔ هیئت‌مدیره نمی‌ماند».
انجام ندهعنوان سربرگ فقط نام خدمت است: «خدمات استراتژی»؛ و سه دکمهٔ اصلی کنار هم.