Llama: Wellness Platform

/assets/img/works/myllama/banner.webp

Project Specifications

IndustryWellness Platform
TypeWeb & Mobile App
Clientmyllama.co
ServiceUI/UX, Prototype
Duration5 months
december
jan-march
april
TechsFigma
<>

MyLlama is a workplace wellness platform designed to support employee well-being and learning.

It includes an admin dashboard and an employee app, each built around clear user needs.

The dashboard helps admins manage programs and view engagement through simple, readable insights.

The employee app allows users to follow courses, complete tasks, track progress, and access a content library with quizzes, audio, video, and carousel formats.

It also provides personal insights to help users understand their engagement and growth.

The design focuses on clarity, calm visuals, and ease of use.

Challenges

Designing a calm and clear experience across learning, content, and insights

1. Managing Multiple Content Types in One Interface

Courses, tasks, media, and analytics needed to live in one app.
The challenge was to organize them without overwhelming the user.

2. Making Progress and Status Easy to Understand

Users needed to quickly know what they are working on and what comes next.
Progress indicators had to be clear, consistent, and easy to scan.

3. Presenting Insights in a Meaningful Way

Personal data and analysis had to feel supportive, not complex or intimidating.
The UI needed to simplify data into understandable patterns.

4. Maintaining Consistency Across Dashboard and App

Admins and employees use the platform differently.
The challenge was to keep a shared design language while meeting distinct user needs.

5. Designing for Focus and Wellbeing

As a wellness platform, the interface had to feel calm and intentional.
Visual noise and unnecessary complexity needed to be avoided.

Solution

Creating a clear, calm, and goal-oriented experience for everyday use

  • Content is structured into clear sections for courses, library, and insights to reduce cognitive load.
  • Progress, tasks, and milestones are surfaced with simple visuals to help users understand their current state.
  • Data and personal insights are translated into easy-to-read charts and summaries.
  • A consistent design system is used across the dashboard and employee app while adapting to different user needs.
  • Calm visuals, clear spacing, and focused screens help users stay engaged without feeling overwhelmed.

Styles

Dynamic Colors
/assets/img/works/myllama/dynamic_colors.svg
Web Elements
/assets/img/works/myllama/web_other_elements.svg
Mobile Elements
/assets/img/works/myllama/mobile_elements.svg

Dashboard Components

Data Visualization in Dashboard Design

Using varied chart types to make complex information easier to scan, compare, and understand.

Compares multiple metrics of a person
/assets/img/works/myllama/chart_1.svg
Shows emotional patterns over time at a glance.
/assets/img/works/myllama/chart_2.svg
Highlights participation of individual.
/assets/img/works/myllama/chart_3.svg
Visualizes consistency and presence across time.
/assets/img/works/myllama/chart_4.svg

Communicating Progress Through Design

Reducing ambiguity by visually differentiating progress, completion, and achievement states.

Shows what's currently in progress
/assets/img/works/myllama/progress_1.svg
Confirms completion and reflects outcomes
/assets/img/works/myllama/progress_2.svg
Highlights achievement and recognition
/assets/img/works/myllama/progress_3.svg

Visualizing the Learning Journey

A structured overview that helps users understand progress, phases, and what comes next.

/assets/img/works/myllama/roadmap.svg

App Components

Thoughtful Notification Design

Using visual priority and context to differentiate reminders, updates, and actions.

/assets/img/works/myllama/app_notification_elements.svg

Designing for Quick Recognition

Mapping colors to activities so users instantly understand context.

Colors
/assets/img/works/myllama/mobile_color_states.svg
Used in activity details
/assets/img/works/myllama/mobile_color_states1.svg
Used in activity List
/assets/img/works/myllama/mobile_color_states2.svg

Result

Dashboard

/assets/img/works/myllama/frame_web_10_home.svg
/assets/img/works/myllama/frame_web_201_employee.svg
/assets/img/works/myllama/frame_web_30_courses.svg
/assets/img/works/myllama/frame_web_301_course.svg
/assets/img/works/myllama/frame_web_302_course.svg
/assets/img/works/myllama/frame_web_303_course_members.svg
/assets/img/works/myllama/frame_web_10_home.svg
/assets/img/works/myllama/frame_web_201_employee.svg
/assets/img/works/myllama/frame_web_30_courses.svg
/assets/img/works/myllama/frame_web_301_course.svg
/assets/img/works/myllama/frame_web_302_course.svg
/assets/img/works/myllama/frame_web_303_course_members.svg
/assets/img/works/myllama/frame_web_10_home.svg
/assets/img/works/myllama/frame_web_201_employee.svg
/assets/img/works/myllama/frame_web_30_courses.svg
/assets/img/works/myllama/frame_web_301_course.svg
/assets/img/works/myllama/frame_web_302_course.svg
/assets/img/works/myllama/frame_web_303_course_members.svg
/assets/img/works/myllama/frame_web_10_home.svg
/assets/img/works/myllama/frame_web_30_courses.svg
/assets/img/works/myllama/frame_web_302_course.svg
/assets/img/works/myllama/frame_web_201_employee.svg
/assets/img/works/myllama/frame_web_301_course.svg
/assets/img/works/myllama/frame_web_303_course_members.svg

Employee app

/assets/img/works/myllama/frame_10_home.svg
/assets/img/works/myllama/frame_201_library_audio.svg
/assets/img/works/myllama/frame_203_library_cards.svg
/assets/img/works/myllama/frame_301_course.svg
/assets/img/works/myllama/frame_303_course_progress.svg
/assets/img/works/myllama/frame_40_account.svg
/assets/img/works/myllama/frame_701_quiz.svg
/assets/img/works/myllama/frame_703_quiz.svg
/assets/img/works/myllama/frame_20_library.svg
/assets/img/works/myllama/frame_202_library_video.svg
/assets/img/works/myllama/frame_30_learning.svg
/assets/img/works/myllama/frame_302_course.svg
/assets/img/works/myllama/frame_304_course_event.svg
/assets/img/works/myllama/frame_70_notification.svg
/assets/img/works/myllama/frame_702_quiz.svg
/assets/img/works/myllama/frame_10_home.svg
/assets/img/works/myllama/frame_202_library_video.svg
/assets/img/works/myllama/frame_301_course.svg
/assets/img/works/myllama/frame_304_course_event.svg
/assets/img/works/myllama/frame_701_quiz.svg
/assets/img/works/myllama/frame_20_library.svg
/assets/img/works/myllama/frame_203_library_cards.svg
/assets/img/works/myllama/frame_302_course.svg
/assets/img/works/myllama/frame_40_account.svg
/assets/img/works/myllama/frame_702_quiz.svg
/assets/img/works/myllama/frame_201_library_audio.svg
/assets/img/works/myllama/frame_30_learning.svg
/assets/img/works/myllama/frame_303_course_progress.svg
/assets/img/works/myllama/frame_70_notification.svg
/assets/img/works/myllama/frame_703_quiz.svg
/assets/img/works/myllama/frame_10_home.svg
/assets/img/works/myllama/frame_203_library_cards.svg
/assets/img/works/myllama/frame_303_course_progress.svg
/assets/img/works/myllama/frame_701_quiz.svg
/assets/img/works/myllama/frame_20_library.svg
/assets/img/works/myllama/frame_30_learning.svg
/assets/img/works/myllama/frame_304_course_event.svg
/assets/img/works/myllama/frame_702_quiz.svg
/assets/img/works/myllama/frame_201_library_audio.svg
/assets/img/works/myllama/frame_301_course.svg
/assets/img/works/myllama/frame_40_account.svg
/assets/img/works/myllama/frame_703_quiz.svg
/assets/img/works/myllama/frame_202_library_video.svg
/assets/img/works/myllama/frame_302_course.svg
/assets/img/works/myllama/frame_70_notification.svg
/assets/img/works/myllama/frame_10_home.svg
/assets/img/works/myllama/frame_30_learning.svg
/assets/img/works/myllama/frame_40_account.svg
/assets/img/works/myllama/frame_20_library.svg
/assets/img/works/myllama/frame_301_course.svg
/assets/img/works/myllama/frame_70_notification.svg
/assets/img/works/myllama/frame_201_library_audio.svg
/assets/img/works/myllama/frame_302_course.svg
/assets/img/works/myllama/frame_701_quiz.svg
/assets/img/works/myllama/frame_202_library_video.svg
/assets/img/works/myllama/frame_303_course_progress.svg
/assets/img/works/myllama/frame_702_quiz.svg
/assets/img/works/myllama/frame_203_library_cards.svg
/assets/img/works/myllama/frame_304_course_event.svg
/assets/img/works/myllama/frame_703_quiz.svg
MyLlama workplace wellness platform UI with employee learning app and admin dashboard