Clear Fasting App
Course Tab

Since June 2022, I’ve been working as a student employee at Whisp Internet GmbH, the company behind the intermittent fasting app Clear and a UX/UI design agency. One of my main projects for Clear was designing the Courses tab, which features a collection of short online courses on health topics like weight loss.

Industry

Health, Fitness

Company

Whisp Internet GmbH

Product

Clear

Role

UX/UI Design

Business Model

B2C mobile App

Challenge

This project focuses on designing and developing a user-friendly Course Tab for the mobile application Clear. The tab will allow users to seamlessly browse, engage with, and complete educational courses. The primary goal is to create an engaging learning journey that leverages modern UX patterns, such as Instagram-style short video stories, while providing clear progress tracking and easy navigation.

Key Objectives

  • Provide an intuitive and modern learning experience that is visually appealing and easy to use.

  • Foster engagement through micro-content formats like Stories.

  • Simplify navigation between courses, lessons, and progress tracking.

  • Increase user satisfaction and retention by offering a clear sense of accomplishment.

  • Provide an intuitive and modern learning experience that is visually appealing and easy to use.

  • Foster engagement through micro-content formats like Stories.

  • Simplify navigation between courses, lessons, and progress tracking.

  • Increase user satisfaction and retention by offering a clear sense of accomplishment.

  • Provide an intuitive and modern learning experience that is visually appealing and easy to use.

  • Foster engagement through micro-content formats like Stories.

  • Simplify navigation between courses, lessons, and progress tracking.

  • Increase user satisfaction and retention by offering a clear sense of accomplishment.

User Flow Diagram

A well-designed user flow ensures that users can easily access, navigate, and complete courses without friction. By incorporating familiar interfaces like Story-style videos and intuitive progress tracking, the flow reduces cognitive load and maximizes engagement.

Wireframing

Wireframing lays the groundwork for intuitive design and efficient development. It helps translate user flow concepts into tangible, visual representations, ensuring alignment between functionality and user needs.

Course Tab

Course Tab


Specific Course with Session Overview

Session with Content Stories

Story View

Story View


Success Completion Screen

Final Designs

Polished Designs: Elevating User Engagement Through a Modern and Intuitive Learning Experience

Key Learnings

  • Familiar UX Patterns Boost Engagement:
    Using Instagram-style Stories improved engagement and delivered content in digestible chunks.


  • Transparent Monetization:
    Free introductory sessions built trust and encouraged course purchases.


  • Progress Tracking Motivates Users:
    Progress indicators and visuals kept users engaged and goal-oriented.


  • Personalization Creates Satisfaction:
    Personalized feedback (“Well done, Cindy!”) rewarded user achievements.


  • Structured and Flexible Learning:
    Expert profiles and versatile features tailored the user journey.


  • Clear Call-to-Actions:
    Bold, clear buttons like “Complete Session” simplified navigation.

  • Familiar UX Patterns Boost Engagement:
    Using Instagram-style Stories improved engagement and delivered content in digestible chunks.


  • Transparent Monetization:
    Free introductory sessions built trust and encouraged course purchases.


  • Progress Tracking Motivates Users:
    Progress indicators and visuals kept users engaged and goal-oriented.


  • Personalization Creates Satisfaction:
    Personalized feedback (“Well done, Cindy!”) rewarded user achievements.


  • Structured and Flexible Learning:
    Expert profiles and versatile features tailored the user journey.


  • Clear Call-to-Actions:
    Bold, clear buttons like “Complete Session” simplified navigation.

  • Familiar UX Patterns Boost Engagement:
    Using Instagram-style Stories improved engagement and delivered content in digestible chunks.


  • Transparent Monetization:
    Free introductory sessions built trust and encouraged course purchases.


  • Progress Tracking Motivates Users:
    Progress indicators and visuals kept users engaged and goal-oriented.


  • Personalization Creates Satisfaction:
    Personalized feedback (“Well done, Cindy!”) rewarded user achievements.


  • Structured and Flexible Learning:
    Expert profiles and versatile features tailored the user journey.


  • Clear Call-to-Actions:
    Bold, clear buttons like “Complete Session” simplified navigation.

Lets create great Products

I am currently searching for a full time position as a UX Designer.
You can contact me at:

anneruemmler.design@gmail.com

Lets create great Products

I am currently searching for a full time position as a UX Designer.
You can contact me at:

anneruemmler.design@gmail.com

Lets create great Products

I am currently searching for a full time position as a UX Designer.
You can contact me at:

anneruemmler.design@gmail.com