A UI/UX Design Case Study -Masterclass to Learn Digital Arts.

This project is a part of 10kdesigners assignment to create an ed-tech product — DesignCraft, A Masterclass app to learn Digital Arts .

Published in

Muzli - Design Inspiration

17 min readApr 25, 2022

In this case study, I have described my process of creating an ed-tech app for an online masterclass on digital art. This project is a part of an assignment at my cohort based masterclass — 10k designers.

Prototype

Let’s cut the crap out and jump into the visuals …

🌳 Background

As a member of 10kdesigners C-4, we were assigned to design a masterclass app of any particular niche.The project can be for any new startup or an existing one.

After juggling through many topics, I came up with the idea of designing a masterclass app to learn digital arts.

❓ Problem Statement

How edtech operates now adays — This is how ed-tech platforms operates

During the time of covid 19, we have seen the trend of virtual meet-ups. People have started to adapt to the new way of socialising and learning new skills. The trend of learning skills online is going to increase in the coming days. Giving this a thought , I came up with a case study to create an online ed-tech platform for digital art masterclass.

🔮How it all started ?

Hey wait! but before diving in into the case study , let me tell you how I ended up choosing digital art as my niche.

At the announcement of the assignment, we were given a choice to choose our own niches and I was pretty sure that it’s going to be related to arts and culture this time. I always had a soft corner for creative arts and this time I didn’t refrain from going at it.

I buckled up to search for everything that I could find in art and culture. While I was googling through, I came across something interesting called ‘Digital Art’ which was trending all around Instagram.

NFTS in trend — An increase in demand for Art and Artists

Being an art lover, a self taught sketch artist ,and an aspiring product designer I decided to curate both and came up with an idea of digging deep into digital art.

👬 Target Audience

People from age group between 18- 40 can learn Digital art. It is for people who want to pursue it professionally and find a way to earn from it. It can be particularly for auctioning it as an NFT upskilling for a job.It can help them find a way to explore a new era of CrypoArt and become CrptoArtists

Also for those who want to learn it as their side hustle and showcase their work.

🌱 Research

🔎 Secondary Research

In my quest of secondary research I tried to understand more about digital arts and where it stands in existing the education platforms.

Digital Art is an artistic work or practice that uses digital technology as part of the creative or presentation process .It is said to be an art of contemporary.

🎨 Types of Digital Arts

⚛️Comparative analysis

I also went through other existing platforms which offer online courses. I tried analyzing the pros and cons of these platforms to understand how I could solve the problems existing in ed-tech apps.

🥲 Problems I identified after my secondary research

After the secondary research, I was able to identify few problems that I could work on finding the solution for.

Beginner/Intermediate /Advanced levels-The courses are oddly distributed between these levels creating lot of confusion among students which course to study.
Software and hardware at discounted price — People face difficulties in finding the resources i.e. the tools and software required to learn the course. For eg . : if I need a design pad — link to the website.
Provide offline access — Full time access for the course is required to find it whenever I need.
Let them explore app before asking for payment details — Some apps require you to fill your credit/debit card details before any trail classes/courses or before even letting them explore the options.
Lack of motivation to continue- Courses are often left in between or they take longer time to get completed due to procrastination.
Lack of self assessment — Courses often lack self assessment tests or live interaction with the tutor.
Lack of Engagement — Courses often lack engagement and discussion of members in the app.
Monetizing the art — The courses are only teaching how to become an artist but they do not tell how and where to find the resources to earn from those skills. They should be made aware about the market of NFTS and other ways to monetize.

🍥 Common Design Patterns observed

I browsed through different apps in this niche and found the following common design patterns:

👉 Downloadable video lectures

👉Provides social proof and syllabus of course content.

👉Provide one or a few lessons free or provide a free trial of 7 days or 1 month

👉Mandatory fees payment.

👉Payments are either for annual subscriptions or individual courses.

👉Skippable onboarding.

👉Provide recommendations.

Jakob’s law states : Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

🔮Primary Research

I went further to take few interviews and surveys to identify what problems users were facing in the existing apps and what they had to add-on, as a new idea which would help in better user experiences .

(Here is the link to check all the questions asked in the survey )

⌛️Survey Results

🔑 Key Findings

What can be done ?

Courses from Beginner to Advanced level.It can be a long term course for a 1 month or longer.
Course should teach to earn money.The app can add section to teach about NFTs. The course can also include other ways to earn from their art.
The discussion forum like community can also be provided to the users to keep them motivated to continue and discuss new opportunities among themselves.
The course can provide software access and send tools
if needed (like — wacom) to their students or can provide them
links to buy those.
The instructors should conduct live classes to resolve their doubts
People wanted limited access to the course since they might end up delaying it or leaving it in between, so limited access would encourage them to finish the course on time. Although there can be a download option to watch it offline or anytime. The students should be able to set reminders in the app.
Trial classes to be provided before they enrol to the course OR can pay once in app then access all courses (like netflix) . Users can be provided with some free courses in both options.
To provide motivation they can be handed over certification after every course and their work can be displayed in the app. Also the whole experience can be gamified and users can be provided badges and Ranks.
Apart from assignments, projects and assessment tests that should obviously be provided to the students. There can be a room for further
gamification via challenges or championships and a prize (like : Digicoins, or money) can be awarded to increase engagement.

Why an App ??

Nowadays , mobile is one thing which is readily available to everyone .So it becomes very handy for the users to learn in an app rather than going for the web version.

Also, like a website, apps too might require internet connectivity to perform most tasks, but here’s the difference: an app can still offer basic content and functionality to users in offline mode .

🏗 Information Architecture

Based on my research and findings, I was able to figure out how the workflow and architecture of my product would look like.

I have created the user flow to map the user journey across the app.

🖼 Wireframe

Before Starting out ,it was necessary to layout the wireframes in lo-fidelity and high-fidelity. It helped me visualise in a better way.

Branding

For branding , I went with the emotions my brand was trying to convey to the user. This is very important to find a connect with our target users as well.

I wanted it to be engaging, playful and informative at the same time.

I came up with a simple logo design which is a combination of a pen and a paper plane. It symbolises creativity , imagination and desire to succeed after iterating ,failing and pixelating to be better .

🗺 Style Guide

Colors

I chose to go with dark theme for my platform. Since users will spend most of their time staring at the system, it could become harmful to the eyes if I went with light theme. Also dark theme helps user to stay focused on the content. Therefore, I went with black for the background.

The platform focuses on education in digital arts. Purple symbolises art, imagination and wisdom, pink symbolises creativity . Therefore , I went ahead with purple and pink gradient.

Primary colours : Black, Purple, Pink.

Icons

I selected “heroicons” for icons.

TypeScale

For fonts, I went ahead with “Source Sans Pro” . I chose this font because it contained good amount of weight variations which provided flexibility to create typescale.

Since the app is unavoidably text heavy, This font is also simple and easy to read .

🌈 Visual Design

😍 Onboarding — App Walkthrough

Before jumping into the app’s features, it is crucial to show what the app has to offer. The onboarding workflow is necessary specially for new users to get an experience of what they are signing up for.

For the onboarding process , I decided to highlight the main features and offerings which makes it unique and different from existing platforms.

For my main highlights :

👉 You have the opportunity to learn from the best mentors of the industry.

👉The app provides the user with community based learning to build their networking.

👉You can experience live interactions (thats where other platforms are lagging behind — to fill the gap of communication between students and teachers.)

👉The app will have wide range of digital art categories to choose from.

👉With learning you also have the opportunity to earn badges and rewards.

The onboarding process will not be necessary for the returning users , there I included a CTA to “Get Started” and skip the process of onboarding and directly jump into Login/Signup Screen.

🔏 SignUp/Login Screen

After Clicking on “Get Started” CTA, the user has the option to either login or Signup.

Login Screen: For the returning users, they can login from their mail ,phone number or their apple Ids.

Mail ID : When the user logs in through mail id, they need to enter their mail address and password. The user can click on the “Forgot password” link if their password don’t match.

The user is always warned by an error state if they enter wrong password or email Id.

Phone number: The user can enter their phone number and login. An OTP for verification will be sent to their phone.

Gmail/Facebook : I included an option to login from their existing gmail/facebook accounts. In this option the app can easily verify the user’s legitimacy .

Signup Screen: For new users who don’t have an account, they can Signup from their mail, phone number or their apple Ids.

As the user types in password ,strength indicator also shows how strong their password is. The strength is indicated by green ,yellow and red colours.
As the user completes signup, they have to choose categories they are interested in.
Initially before the user chooses any category of interest ,the CTA to proceed is disabled. The chosen category later displays in the ‘recommended course’ section in the home screen.

🏠 Home Page

I divided the home screen display in two different ways. One is for the new users and other display is for the returning users.

Watch Live Interaction : For both type of users , they are first greeted with their names. This makes them feel more engaged in the product.

The red sign of “LIVE” tries to grab the users attention.
I included some data points here to show users number of people interested in the event . This helps them decide better for their decisions.
Users can also scroll through other live interactions.

von restorff effect : Also called Isolation effect ,is the tendency to recall something that stands out in a group and afford it more weighting than its peers.I highlighted live interaction sections and Popular instructors sections to make them stand apart.

Recommended Courses : The recommended courses depends upon the category the user is most interested in to learn. This will help them find their preferred course easily.

Trending Courses : I added a section for trending courses to excite and let users explore courses other than their interest. These are courses in which most users are interested.

Explore Categories : User can choose courses from the category they want to learn.

Courses on NFT : As there is increase of demand in awareness about NFT and web3 space. It was crucial to add a separate section for users to get expertise on NFT.

Learn and Earn : I added this section for the users to give them an option to go for yearly based subscription to unlock all the courses instead of paying for them individually.

Popular Instructors : Since it’s a masterclass app, Users will definitely want to learn from instructor of their choice.

Featured NFTs : I added this section to promote talent in the platform and create an opportunity for users to find a way to earn as well. Users can display their NFTs here and by clicking on the art, they get directed to the secondary platform.

Returning Users — Continue Learning :

A returning user may have already taken up a course, so when they return, they can easily start. from where they left. It also shows the percentage of course already completed.
User can quickly open the last course they were learning by clicking on the card.

🌟 Streak and Notification

This feature also shows different displays for both new users and returning users.

Streak encourages the user to continue through the lesson and acts as a visual motivator.

New Users : Initially for new users(who haven’t set up their daily goal), there will be no streak . When the user clicks on the streak icon, a popup opens to motivate users to take up a challenge.
Returning Users : For users who already have a streak going on, the icon will display the number of streaks completed for a week.When the user clicks on the streak icon, the popup appears which clearly shows the number of days you continued or missed it.
User can click on the link to Set Goal and set the time in minutes or hours- per day.

Notification : When the user receives any notification, the icon displays a small indication to attract the attention of the user to open it.

🔎 Search and Filter

I did not want the search to be placed at the top of the home page. I wanted users to explore the existing options before jumping into search.At the same time search feature was an important feature for my app, so I decided to add the search at the bottom navigation bar.

New Users : The search bar shows trending searches just after the search bar, followed by, Searching with categories, Popular courses, Popular instructors and featured NFTs .

Returning Users : For the users who already searched something, a section gets added for the recent searches. Users can easily click on existing search and find the results.

Search Screens for new and returning users

The search feature has an Auto-suggestion mechanism which helps in auto-filling the users searches, before they complete typing.
After the user types in search, the search matches with the search keyword with their list of active courses, instructors, live sessions and lessons .
Based on the search, user is provided with the list of items with number of results found.
The user can also filter or sort the results according to their requirement. The courses, lessons or live sessions can also be marked as their favourites.
Empty State : If the user reaches an endpoint where no results are found, the screen provide a message, as to why they cannot find any results. They are provided with similar search results instead so that they find alternatives.

Never leave a user directionless.

👨‍🎓 Course Details and instructors

Before the user chooses to subscribe for the course, they are provided with course details and data points to help them take decisions. The course also shows the preview of how experience of subscribing to the course would feel like.

Users can also check out the instructor details and follow them in the community .
Users are provided with options for similar courses at the end in case they want to explore more.
Users can also access two lessons before they take the subscription.
Get the Subscription CTA : Before users selects the CTA, they are assured with the money back guarantee and being as transparent and upfront as possible about the platform.

💰Checkout payment

After the user is sure about the course they want to take, the payment process begins.

User clicks on the Get subscription CTA and finally is shown the payment amount. Here they are provided with a second option to “Get an yearly subscription” and unlock all courses.
Otherwise, if the user continues to the course payment, more details are shown. They can use the coins in their wallet, apply to coupon code and also get an access to the software on demand.
Accordion is used to show payment mode so that users are not bombarded with too much information. They decide first and then take action.
After the Payment is successful, the payment success state is shown with an icon (Picture Superiority Effect : the phenomenon in which pictures and images are more likely to be remembered than words).
The user is provided with main CTA to start learning or continue to explore for more.

👩‍🎓 Courses enrolled

After enrolling for the course successfully all the lessons, discussions and resources are unlocked for the users. Users can also download the lessons or save them in their favorites.

Users can also take quizzes and get into live interactions to evaluate them better.

Quizzes and Live interactions in courses enrolled

👊 Community

This section is the community section which helps users to build their network, showcase their work and follow instructors.

This section is further divided into Discussions and Featured arts.
The plus icon is always displayed in the left corner to add your NFTs or post discussions.
The community also features weekly challenges to add more engagement among the users.

📗 Library

User can navigate to the Library tab to check the history of their views and favourites.

This section is divided into four parts : Purchases, Favourites, Downloads and Recently Watched.
Purchases : This section shows the courses purchased by the user. They also see the CTA to get an yearly subscription.
Favourites : Users can mark courses, lessons and instructors as their favourites. Users can also filter the categories according to the section.
Recently Watched : This section is the history of watched courses, live interactions and lessons. The history is displayed on the basis of days.
Downloads : The downloaded lessons and courses in the course section is displayed here in this section for the users to easily access them.
Empty State : The user may not have any favourite list (or any other) in this section. In that case a message of empty list is displayed and also a CTA to provide them with next action item.

👩 Profile

At the left corner of the bottom navigation, the user has their profile section.

User name which can also be edited, image, email address, their current rank and number of coins earned in their wallet is displayed here.
Streaks : All the weekly streaks completed by the user is shown here .User can view all by clicking on “All Streaks”.
It also displays the number of hours and courses completed in a chart .
Users can view all the arts submitted by them in the courses they have taken up.
Invite friends (Referral): It makes easier for people to refer/invite or recommend each other, for example with (optional) referral codes on sign up. Those that were referred by others will already trust your application a lot more than those who weren’t.

Gamification ensures that the user is rewarded with a sense of achievement that motivates them to return to the app and enjoy using it longer.

I tried inculcating gamification in this app by providing users with badges and rank.

The Rank and digicoins are earned by the quizzes and participation in weekly challenges.
Users are also awarded with badges when they achieve the required target.

Figma file

Please feel free to jump into my figma file for a look into my detailed work.

You can also go through this Behance link to take a closer at all the screens.

And that’s a Wrap !! Thank you for reading folks…

Special thanks to Jogabrata Jena and Zainab Delawala for their valuable feedbacks and mentorship. I would like to thank Abhinav Chhikara and his team for giving me this opportunity to work on this problem statement.

Currently I am looking for roles as a Product Designer.

Please feel free to reach out for any project queries, feedbacks or any new opportunities for me that we can discuss.

Till then let’s catch up on my LinkedIn and my Portfolio to stalk my other activities and future projects I am up to.

Also, do check out my other Case Study : Smart Investment Championship event by Finin — a UI/UX case study.

Hope you liked my work. If you did, please do hit that clap button.

PS : You can give up to 50 claps !! Don’t think much, just keep ssssmashhh-ing that clap button …😉