Yafex Studio
UX / UI Case Study · Marketing Website

DAILYLOOP
WEBSITE
EXPERIENCE

UX · UI · Research
Figma
3 Weeks
Responsive Website
2024
Scroll
00 — Project Overview

A marketing website built to turn visitors into users.

DailyLoop's mobile app delivers the core habit-tracking experience — but before anyone opens the app, they need a reason to download it. This project is the website that makes that case: a clear, fast, conversion-focused introduction to the product.

Where the app is built for daily interaction, the website has one job — turn a first impression into a download. Every section, message, and CTA was designed to move a visitor from "what is this?" to "I want this."

Marketing Website Conversion Design Landing Page UX Responsive Web Design System
5
Pages Designed
3
CTA Touchpoints
3wk
Timeline
Project Details
Role
UX Designer · UI Designer · Researcher
Tools
Figma
Platform
Responsive Marketing Website
Primary Color
#A8E100 — Growth & Progress
Typography
Raleway — Clean, modern, highly readable
Pages
Landing · Features · Download · About · Pricing
Key Sections
Hero · Features · Previews · Testimonials · FAQ · CTA
01 — Problem Definition

How Do You Sell
An Experience?

The app gives users a hands-on experience — they can feel how it works. The website has no such advantage. It has to earn trust and communicate value through structure, visuals, and words alone, in the first few seconds.

Background

DailyLoop is a habit-tracking mobile app designed to help users build better routines, stay consistent, and track progress over time. While the app delivers the core experience, users still need a clear and engaging way to discover the product before deciding to download it.

The Challenge

Unlike the app, where users interact directly with features, the website must translate that experience into content, visuals, and structured navigation — communicating value quickly without the benefit of hands-on use.

The Goal

Design a marketing website that clearly presents DailyLoop's core features, communicates its value, and encourages action — showcasing the product, building trust, and creating a smooth path from discovery to download.

01
Communicate value fast — visitors decide within seconds whether a product is worth exploring further.
02
Make the product feel real — screenshots and previews must do the work that hands-on interaction does inside the app.
03
Build trust before download — testimonials, polish, and clarity stand in for the confidence usually earned through usage.
04
Guide without overwhelming — repeated CTAs should feel like natural next steps, not pressure tactics.
02 — Research & Insights

Competitive
Analysis

To understand how strong product websites convert, I reviewed marketing sites from NordVPN, Headspace, Duolingo, and Calm — focusing on feature presentation, CTA placement, and trust-building elements.

Website Target Audience Strength Weakness Clear Hero Strong CTAs Previews Trust Signals
NordVPN logo
NordVPN
 Privacy users Strong trust and CTA strategy Limited emotional engagement ✓ ✓ ✕ ✓
Headspace logo
Headspace
 Wellness users Strong emotional connection Less feature depth ✓ ✕ ✓ ✓
Duolingo logo
Duolingo
 Language learners Clear product explanation Weaker trust-building ✓ ✓ ✓ ✕
Calm logo
Calm
 Wellness users Premium visual branding Less conversion-focused ✓ ✕ ✓ ✕
DL
DailyLoop ↗
 Habit-builders, productivity seekers Clear features + strong conversion design New entrant — establishing trust ✓ ✓ ✓ ✓
Key Insights From Research

Seconds, Not Minutes

Visitors make decisions quickly, so the product's value has to be obvious within the first few seconds of landing on the page.

Show, Don't Just Tell

Visual previews of the product communicate features faster and more convincingly than text alone — screens do the explaining.

Trust Closes The Gap

Testimonials, product highlights, and polish increase confidence before downloading — replacing trust that usage would normally build.

Marketing Strategy

Unlike the mobile app, the website's main goal isn't interaction — it's conversion. The experience needs to capture attention, build trust, and drive action, so the structure and content were planned around that shift from the start.

Research Focus

  • Feature presentation — how products explain their value clearly
  • Call-to-action placement — how visitors are guided toward sign-up or download
  • Trust-building — how testimonials, visuals, and social proof are used

Design Approach

  • A strong hero section communicates value immediately
  • Feature sections explain how the app works, with clear visuals
  • Product previews make the experience feel real and tangible
  • Testimonials build credibility before the ask
  • Download CTAs placed strategically across the page
03 — Define

Conversion
Goals

To support product discovery and improve conversion, the website was designed around six clear goals — each shaping a different part of the page structure and content.

Increase App Downloads

Create clear, repeated call-to-action points that encourage visitors to download the app.

Build User Trust

Use product previews, clear messaging, and testimonials to increase confidence in the product.

Explain Product Value

Present features and benefits simply, so visitors quickly understand how DailyLoop helps them.

Improve User Engagement

Create an engaging browsing experience that keeps visitors exploring the product and learning more.

Support Decision Making

Provide enough information, visuals, and context to help visitors make a confident download decision.

Strengthen Brand Identity

Carry DailyLoop's visual language from the app into the website for a consistent, recognizable brand.

Key Features Map

To support these goals, the website was designed around key sections that help visitors understand the product, build trust, and take action.

DailyLoop WebsiteKey Features Map
01 — Understand

Explain the Product

Hero SectionClear headline and value proposition that explains what DailyLoop does at a glance.
Feature HighlightsVisual breakdown of core habit-tracking features and how they work.
How It WorksStep-by-step flow showing the journey from sign-up to building habits.
02 — Trust

Build Confidence

App PreviewsReal product screenshots that show the interface and prove it's polished.
TestimonialsUser stories and reviews that build credibility and social proof.
Benefits & OutcomesTangible results that help visitors picture the value for themselves.
03 — Act

Drive Downloads

Primary CTARepeated download buttons placed at every key decision point.
App Store LinksDirect routes to iOS and Android stores to remove friction.
Final Call-to-ActionClosing section that reinforces the value and prompts the download.
04 — Website Structure

Information
Architecture

Sitemap

Content was organized into a clear hierarchy so visitors can move between product information, features, and download options without confusion.

LANDING PAGEWEBSITE ROOTHero SectionFeaturedSectionHow it WorksSpecialfeaturesPricing SectionTestimonialsFeatures PageHero SectionCreate HabitHabit DetailNotificationsTrackingCTAFAQDownload PageHero SectionPlatformAvailabilityApp UsabilityWhat You GetApp ScreenSocial ProofCTAFAQAbout PageHero SectionOrigin StoryApp SpecialityThe ProductAI CoachValuesWho Use ThisCTAFAQPricing PageChoose YourPlanFeatureComparisonWhy UpgradeCTAFAQWebsite rootPrimary pageSection / sub-screen

User Flow

The user flow maps how visitors move through the site — from discovering the product, to exploring features, to reaching the download action.

StartLanding PageScroll toSpecialFeatures PageAbout PageWant to KnowAbout AppScroll down toCTAPricing PageScroll to WhatYou GetDownload PageDownload TheAppFeatureComparisonEndStart / EndPage / SectionUser decisionAlternative path

Wireframes

Wireframes established layout, content placement, and structure before moving into visual design — validating flow and hierarchy early.

Website wireframes
Layout Decision

The content strategy delivers the right information at the right moment — introducing the product, explaining its value, building trust, and encouraging action.

STAGE 01

Capture Attention

  • Hero section communicates value immediately
  • Bold visuals introduce the product identity
→
STAGE 02

Build Interest

  • Feature sections explain benefits clearly
  • Product previews make the experience tangible
→
STAGE 03

Build Trust

  • Testimonials create social proof
  • FAQs reduce hesitation before download
→
STAGE 04

Drive Action

  • Download CTAs support conversion
  • Repeated touchpoints reduce friction
05 — UI Design

Visual
Design

The website's visual design was created to align with the DailyLoop app experience, keeping the product identity consistent across platforms — simple, clear, and built around a strong visual hierarchy.

01 — Color Palette

The website uses the same color palette as the mobile app to create a consistent product identity and a clear visual connection between platforms. The primary color remains Green (#A8E100) — growth, health, and progress.

#A8E100
Primary Green · Growth
#FFFFFF
Background
#000000
Neutral
#7AAA00
Green Dark
#BEF030
Green Light
#F5F7F2
Surface
02 — Typography

The website uses Raleway as its main typeface — clean, modern, and highly readable across devices. Bold headings paired with clear body text create strong hierarchy and easy scanning.

Font Name — Raleway
H1 — Raleway Ex Bold 84px
H2 · Raleway Ex Bold 50px
H2 — Raleway Ex Bold 50px
H3 · Raleway Bold 32px
H3 — Raleway Bold 32px
H4 · Raleway Ex Bold 28px
H4 — Raleway Ex Bold 28px
H5 · Raleway Bold 24px
H5 — Raleway Bold 24px
H6 · Raleway Bold 20px
H6 — Raleway Bold 20px
Title 1 · Raleway Semi Bold 18px
Title 1 — Raleway Semi Bold 18px
Body 1 · Raleway Bold 16px
Body 1 — Raleway Bold 16px
Body 2 · Raleway Medium 16px
Body 2 — Raleway Medium 16px
03 — UI Elements

A consistent set of UI components carried the visual language across the website — buttons, navigation, cards, and download CTAs — all built from the same design tokens as the app.

UI Elements
High-Fidelity Pages

5 Pages
Designed

The high-fidelity designs bring the website structure into a polished, conversion-focused experience — each page communicates DailyLoop's value clearly and guides visitors toward downloading the app.

Landing page design
01

Landing

Introduces DailyLoop and drives first impressions with clear messaging and strong CTAs.

Features page design
02

Features

Showcases the app's main features in a simple, easy-to-scan layout.

Download page design
03

Download

Provides quick access to app downloads with clear, focused action points.

About page design
04

About

Shares the product story and builds trust with visitors.

Pricing page design
05

Pricing

Presents plans and premium options in a clear, structured way.

Responsive Design

Built For Every
Screen

The website works seamlessly across desktop and mobile, adapting layout while preserving content hierarchy, readability, and CTA visibility.

Responsive design across devices
06 — Conversion Strategy

Designed To
Convert

Beyond visual design, every structural decision was made to reduce friction and guide visitors toward downloading the app — from CTA placement to trust signals to feature presentation.

3
CTA Placements
Hero, features, and final section
5
Pages Designed
Landing · Features · Download · About · Pricing
4
Trust Elements
Previews, testimonials, highlights & messaging
100%
Responsive
Consistent across desktop and mobile
CTA
Placement
Challenge
Visitors may be interested but lose momentum if the download action isn't immediately visible or easy to reach.
Strategy
CTAs were placed across high-attention areas — the hero, feature highlights, and final section — instead of relying on one download block.
Outcome
Multiple conversion points let users act whenever they're ready, reducing friction and increasing download opportunities.
Trust
Signals
Challenge
Before downloading, visitors need confidence that the product is reliable, useful, and worth their time.
Strategy
The site integrates social proof — testimonials, product previews, and clear messaging that show the interface and real feedback.
Outcome
Trust signals reduce uncertainty, strengthen credibility, and improve the likelihood of conversion.
Feature
Presentation
Challenge
Poorly explained or overly complex features can cause visitors to miss the product's value entirely.
Strategy
Features were broken into focused sections supported by visuals and short explanations — easy to scan, easy to understand.
Outcome
A clearer presentation helps visitors connect functionality with their needs, making the download decision easier.
07 — Final Outcome

A Website Built
To Convert

The final DailyLoop website delivers a clean, modern, conversion-focused experience that supports the mobile app by presenting its value clearly and persuasively. Structured content, strong visual hierarchy, and strategic CTAs create a smooth journey from discovery to download — strengthening the connection between the brand and its users.

5
Pages Designed
3
CTA Touchpoints
100%
Responsive
3wk
Timeline
Final Prototype · Desktop
Desktop
Experience
A clean and easy-to-navigate desktop design that presents DailyLoop's full marketing experience across all five pages.
Desktop prototype preview
View Full Prototype →
Final Prototype · Mobile
Mobile
Experience
A simple, on-the-go version for quick access — preserving hierarchy, readability, and CTA visibility on smaller screens.
Mobile prototype preview
View Full Prototype →
View Figma File →
YAFEX

Like What
You See?

Explore more work on my portfolio or get in touch — I'd love to collaborate on your next project.

← Back to Portfolio
© 2024 Yafex Studio · UI/UX Design
DailyLoop — Website Case Study · Case Study No.02