Lunis Design Lab | Dubai Product Design Studio for Startups & Enterprises

Copy UI

eLearning UX UI Design platform

About project

Copy UI is a modern learning platform designed to help users develop practical skills in technology fields through structured courses, interactive lessons, and guided learning paths. The platform focuses on delivering a clear and engaging learning experience while simplifying course management for instructors and administrators.

The project included designing both the student-facing platform and a comprehensive admin system used to manage courses, lessons, users, payments, and analytics. The goal was to create a scalable product architecture capable of supporting growing course libraries, multiple instructors, and a large number of students.

The platform integrates features such as structured course modules, progress tracking, lesson navigation, and learning dashboards, ensuring users can easily follow learning paths and monitor their development.

On the administration side, the system enables efficient course creation, content organization, student management, and performance insights. Special attention was given to usability, scalability, and workflow efficiency to ensure that both learners and administrators can navigate the platform effortlessly.

Context

The demand for practical, skill-based education in technology continues to grow as more professionals transition into digital careers. However, many online learning platforms focus heavily on content delivery while overlooking the experience of navigating courses, tracking progress, and managing large learning libraries.

At the same time, course creators and platform administrators often struggle with fragmented tools for managing lessons, users, payments, and analytics. Content creation workflows are frequently complex, making it difficult to organize courses efficiently or scale a growing educational platform.

Copy UI was created to address both sides of this challenge by designing a platform that combines a structured learning experience for students with a powerful administration system for managing educational content and platform operations.

The goal was to create a unified ecosystem where users can easily discover courses, follow structured learning paths, and track their progress, while administrators can efficiently manage the platform through a scalable and intuitive system.

Scope & Objectives

The objective of the project was to design a complete learning ecosystem that combines a structured educational platform with the tools needed to manage and grow a digital learning product.

The scope included designing multiple components of the product experience, covering both the user-facing platform and the operational systems behind it.

The objective of the project was to design a complete learning ecosystem that combines a structured educational platform with the tools needed to manage and grow a digital learning product.

The scope included designing multiple components of the product experience, covering both the user-facing platform and the operational systems behind it.

The scope included designing two main environments:

The Learning Platform (Student Experience)

A user-facing interface where students can explore courses, follow structured lesson modules, track their learning progress, and navigate educational content in a clear and engaging way.

The Administration System (Platform Management)

A comprehensive admin interface designed to manage courses, lessons, users, and platform content. The system needed to support efficient content organization, structured course creation workflows, and clear visibility into user activity and platform performance.

Brand Identity & Social Media Presence

The project also included defining the visual identity of the platform, covering branding elements, color systems, typography, and visual guidelines to ensure a consistent experience across both the product interface and marketing materials. This visual foundation was extended to social media, where design templates and visual assets were created to support the platform’s growth and visibility while maintaining a coherent brand presence across digital channels.

Key objectives included

Creating a scalable platform architecture capable of supporting multiple courses and growing user bases

Designing intuitive course navigation and structured learning paths

Simplifying the content management process for administrators

Ensuring consistency between the student platform and the admin system

Designing workflows that support both learning engagement and efficient platform operations

Our role

The project involved defining the complete product experience for both the learning platform and the administrative system. The work covered the full design process, from early UX exploration and platform architecture to high-fidelity interface design and implementation preparation.

Designing workflows that support both learning engagement and efficient platform operations

Creating the administration platform used to manage courses, lessons, users, and platform content

Designing course creation workflows to simplify how instructors structure modules, lessons, and educational materials

Developing wireframes and interaction logic for both learning and management interfaces

Producing UX specifications and documentation to support development and ensure consistent implementation

Ensuring consistency between the student experience and the admin workflows

Designing the end-to-end learning experience, including course navigation, lesson structure, and progress tracking

Defining the brand identity, including typography, color system, and visual language applied across product and marketing materials

Creating design assets and templates for social media, ensuring a consistent visual presence.

Designing the visual system and UI components used across the entire platform

Collaborating with product managers and developers to align design decisions with technical feasibility and product goals

The goal was to create a cohesive platform where both learners and administrators can interact with the system efficiently while maintaining a clear and scalable product structure.

From Research Insights to Persona Definition

During the research phase, several patterns began to emerge regarding how beginners approach learning design skills and what challenges they face when navigating educational platforms. By analyzing discussions from learning communities, beginner design forums, and feedback from early-stage learners, a consistent set of frustrations, motivations, and behavioral patterns became visible. These insights helped define a representative learner profile that would guide the design of the platform.

Key Research Insights

Overwhelming amount of learning resources

Many beginners reported feeling lost due to the massive number of tutorials, tools, and courses available online. Without a clear starting point, learners often struggle to identify which resources are trustworthy or relevant.

Lack of practical learning guidance

Users frequently mentioned that tutorials explain tools but rarely demonstrate how those tools are applied in real-world projects.

Difficulty learning complex design tools

Many beginners struggle when first encountering professional design tools such as Figma or Adobe XD because tutorials often assume prior knowledge.

Low confidence when starting a new field

Early learners often experience imposter syndrome and compare their work to more experienced designers, which affects their motivation.

Limited time for learning

Students and early-career learners often balance studies, work, or internships, making it difficult to follow long or unstructured learning programs.

Synthesizing the Persona

Based on these patterns, a persona was created to represent the typical beginner entering the field of UX/UI design.

These insights were synthesized into the persona Mihai Cristea, a 21-year-old student with moderate technical experience who wants to learn UX/UI design but needs a clear, practical path to build skills and confidence.

Why This Persona Matters

The persona became a key reference throughout the design process. It helped ensure that the platform focused on:

Clear learning paths for beginners

Practical, project-based lessons

Simplified explanations of design tools

Structured course progression

Learning experiences that build confidence over time

By grounding the product decisions in real learner needs, the platform was designed to better support individuals who are just starting their journey in design.

Competitive Analysis

Due to time constraints during the early discovery phase, a rapid competitive analysis was conducted within a single day to better understand the current landscape of online learning platforms.

The goal was not to perform an exhaustive market study, but to quickly identify patterns, strengths, weaknesses, and opportunity areas that could inform the direction of the product.

The analysis focused on several well-known platforms operating in the online education space, including Coursera, Udemy, Skillshare, Kajabi, Teachable, and Thinkific. Each platform was reviewed from both a student experience perspective and a course management perspective, evaluating how learning content is structured, how users navigate courses, and how instructors manage educational material.

During the review process, key screens and flows were mapped and analyzed, highlighting areas where the platforms perform well as well as aspects where the learning experience could be improved. Particular attention was given to course discovery, lesson structure, learning progression, and the administrative workflows used to create and manage courses.

This rapid analysis helped identify opportunity areas for designing a platform that offers clearer learning paths, more intuitive course navigation, and a more cohesive experience between the learning interface and the administration system.
These insights informed the design decisions made throughout the project.

The findings revealed several recurring patterns across platforms. While many platforms provide large course libraries and strong content delivery systems, the learning experience often lacks structured guidance for beginners. In addition, administrative systems for course creation tend to prioritize functionality over usability, making content management more complex than necessary.

Most platforms prioritize content quantity over learning clarity

Many platforms offer massive course libraries, but the experience can feel overwhelming for beginners.

Without a clear learning path, users often struggle to understand where to start or what the next logical step should be.

Course ecosystems are often fragmented

Courses frequently exist as independent units rather than as part of a structured progression.
This forces learners to manually search for the next relevant course instead of following a guided learning journey.

Admin systems are functional but rarely intuitive

While platforms provide powerful course management tools, many admin environments are complex and operationally focused, making it harder for instructors to organize and scale their content efficiently.

Learning experiences are heavily focused on video consumption

Most platforms rely primarily on video-based lessons. While effective for delivering information, this approach often lacks interactive elements that help learners practice and apply new skills.

Branding and product experience are often disconnected

Many platforms invest heavily in marketing and brand presence, but once users enter the product, the visual identity and emotional tone become minimal and utilitarian.

Community and engagement features are limited

Even though learning can benefit from collaboration and discussion, many platforms offer only basic community interaction through comments or Q&A sections.

Beginners need guidance more than content

The biggest barrier for new learners is not the lack of resources, but the lack of structure. Clear learning paths, contextual explanations, and progressive skill-building are more valuable than simply providing more tutorials.

Design opportunities

Based on the competitive analysis, several opportunity areas were identified that could significantly improve the learning experience compared to existing platforms.

Clear learning paths instead of course marketplaces

Rather than presenting users with large course catalogs, the platform should guide learners through structured learning paths that progressively build skills. This helps beginners understand where to start and what to learn next.

A more intuitive course creation system

Most platforms provide powerful admin tools but often make course creation unnecessarily complex. Simplifying the workflow for creating modules, lessons, and course structures can make it easier for instructors to manage content efficiently.

Learning experiences that go beyond   video consumption

Instead of relying solely on video lessons, the platform should incorporate practical exercises, project-based learning, and interactive steps that encourage users to apply what they learn.

Strong connection between brand and product experience

Many learning platforms have strong marketing but weak product   identity. Creating a consistent visual system across the platform,   marketing materials, and social media can build a more recognizable   and engaging brand.

Better course navigation and progress visibility

Learners should clearly understand where they are in their learning journey. Designing clearer progress indicators, module navigation, and milestone achievements can help maintain motivation and engagement.

Scalable platform architecture for growing content libraries

The platform should be designed to support multiple courses, instructors, and learning paths while maintaining a clear structure that prevents the experience from becoming overwhelming.

A platform designed specifically for beginners

While many platforms target a broad audience, there is a strong opportunity to design an experience tailored specifically for beginners, focusing on clarity, guidance, and confidence-building.

Guided onboarding that reduces confusion

Many learning platforms overwhelm users in the first minutes with too many options and too little guidance. A more structured onboarding flow could help learners understand how the platform works, choose a starting point, and take the first meaningful step with confidence.

User flow

After defining the platform architecture and the main product opportunities, the next step was to map the complete user flow of the learning experience.

The goal was to understand how a learner moves through the platform from discovering a course to completing lessons and progressing through the learning path. Mapping this journey helped visualize the entire learning experience and ensured that each step supports clarity, motivation, and intuitive navigation.

The user flow focused on the core actions performed by learners, including course discovery, enrollment, lesson navigation, progress tracking, and course completion. By structuring the experience in this way, it became easier to identify potential friction points and ensure that users always understand what the next step in their learning journey is.

Beyond supporting design decisions, the user flow also played an important role in aligning the broader product team. It provided clarity for the Product Owner when structuring the product roadmap and defining feature priorities, while also helping developers understand the logical structure of the platform and design the technical architecture around real user journeys.

By visualizing the entire experience early in the process, the team could ensure that the platform was built around clear learning workflows rather than disconnected interface screens.

After defining the platform architecture and the main product opportunities, the next step was to map the complete user flow of the learning experience.

By visualizing the entire experience early in the process, the team could ensure that the platform was built around clear learning workflows rather than disconnected interface screens.

Exista un clasament general al sesiunii, sa poti “monitoriza” locul pe care te situezi fata de ceilalti UX Designers, pentru a ajunge pe locul 1!

Suuuuuuuperb!!

General Leaderboard

Special attention was given to simplifying navigation so that users always understand what step comes next in their learning journey.

Wireframes helped define how information such as lesson titles, progress indicators, and learning materials should be prioritized on each screen.

Early wireframes included gamification concepts such as progress milestones and completion indicators to help learners stay motivated while progressing through courses.

Wireframes

Designs

Style Guide

Administration System

Alongside the student-facing learning platform, a comprehensive administration system was designed to manage the operational side of the product.

The purpose of the admin interface was to give platform managers full control over the educational ecosystem, allowing them to create and manage courses, organize learning content, monitor student progress, and oversee platform activity.

While the student interface focused on delivering a clear and engaging learning experience, the administration system was built to support content scalability and efficient platform management.

Through the admin environment, users could:

Admin Wireframe

Before moving into visual design, the administration system was first explored through low-fidelity wireframes. The goal of this stage was to validate the functional structure of the platform and ensure that administrative workflows were intuitive and scalable.
Because the administration system handles complex operations such as user management, role assignment, course access control, and platform moderation, it was important to test the interaction logic before introducing visual design elements.

To encourage stakeholders to focus on functionality rather than aesthetics, the wireframes were intentionally presented in a neutral, greyed-out style. This approach reduced visual bias and helped reviewers concentrate on layout, usability, and interaction logic instead of subjective UI preferences such as colors or visual styling.

These wireframes were shared across the organization with product stakeholders, developers, and internal teams to validate how administrators would interact with the system.

By removing visual distractions, discussions naturally focused on:

This approach allowed the team to identify potential improvements early and refine the administrative workflows before moving into high-fidelity design.

What we validated

The wireframes were used to validate key administrative tasks such as:

Managing platform users

Assigning roles and permissions

Monitoring course progress and engagement

Moderating user activity

Handling payments and course access

Managing platform-level operations

This process ensured that the admin system remained efficient even when managing large numbers of users and courses.

UX Laws & Principles used

Hick’s Law

Information was grouped into manageable chunks to prevent overwhelming users when dealing with large datasets like user lists and platform statistics.

Fitt’s Law

Primary actions such as adding users, filtering data, or editing profiles were positioned in easily reachable areas to support fast interactions.

Jakob’s Law

Users expect administrative dashboards to behave similarly to other management systems they have used before. The layout and interaction patterns were designed to follow familiar dashboard conventions.

Error prevention

I used confirmation prompts alongside password confirmation for significant actions (e.g. deleting a card).

UI Design & Design exploration

Two visual directions were explored for the administration interface to evaluate hierarchy, readability, and usability in a data-heavy environment. Both layouts used the same structure and functionality but tested different visual treatments for navigation, contrast, and table readability.

After internal evaluation, the left version was selected because it provided:

The alternative version introduced more decorative elements, which slightly reduced clarity when working with large amounts of information.

Because the admin interface is primarily used for operational tasks, the final design prioritizes data clarity, scannability, and efficiency.

The alternative version introduced more decorative elements, which slightly reduced clarity when working with large amounts of information.

Because the admin interface is primarily used for operational tasks, the final design prioritizes data clarity, scannability, and efficiency.

Clearer visual hierarchy for scanning large datasets

Better contrast for progress indicators and status labels

Improved readability in dense tables

Stronger focus on operational actions such as filters and user management

UX Specs & IxD documentation

To support the development process, detailed UX specifications and interaction design annotations were created for key administrative screens.
These annotations helped translate the design into clear functional requirements, ensuring that developers could understand not only how the interface looks, but also how it should behave in different scenarios.
Each screen included contextual notes explaining interactions, system logic, and expected behavior for various UI elements such as tables, filters, hover states, sorting logic, and sidebar interactions.
The goal of this documentation was to reduce ambiguity during implementation and ensure that the final product matched the intended user experience.

Through these UX specs, developers were able to clearly understand:

interaction behaviors and UI states
system responses to user actions
sorting and data display logic
hover interactions and contextual feedback
navigation behavior and sidebar functionality
This approach improved collaboration between design and engineering by providing a shared reference for how the interface should function, making the implementation process more predictable and consistent.

To support the development process, detailed UX specifications and interaction design annotations were created for key administrative screens.

These annotations helped translate the design into clear functional requirements, ensuring that developers could understand not only how the interface looks, but also how it should behave in different scenarios.

Each screen included contextual notes explaining interactions, system logic, and expected behavior for various UI elements such as tables, filters, hover states, sorting logic, and sidebar interactions.

The goal of this documentation was to reduce ambiguity during implementation and ensure that the final product matched the intended user experience.

Through these UX specs, developers were able to clearly understand:

interaction behaviors and UI states
system responses to user actions
sorting and data display logic
hover interactions and contextual feedback
navigation behavior and sidebar functionality
This approach improved collaboration between design and engineering by providing a shared reference for how the interface should function, making the implementation process more predictable and consistent.

Social Media

I was responsible for the entire social media and marketing process for Copy UI, from filming and photography to content creation.
This included editing videos, editing photos, and designing posts, stories, and videos for social media platforms.
My work aimed to enhance engagement and visibility, ensuring the brand’s message resonated with the target audience.

I was responsible for the entire social media and marketing process for Copy UI, from filming and photography to content creation.

This included editing videos, editing photos, and designing posts, stories, and videos for social media platforms.

My work aimed to enhance engagement and visibility, ensuring the brand’s message resonated with the target audience.