In this case study, I have described my process of designing an ed-tech app — Scribld Creative. In this project, I built a style guide and designed for edge cases while solving user needs. This was a project that I had worked on as a part of the 10k Designers Masterclass.
How might we design a seamless and hassle-free online learning experience for people who want to learn Creative Arts?
With the outbreak of the COVID 19 pandemic, almost everyone in the world was staying indoors. There had been a huge rise in the number of Zoom meet-ups and Live streams. People were looking for new ways to socialize online- whether that’s to meet their friends or to meet new people. Under this situation, it was predictable that for the next few months the “events” were going to be conducted outline. With this in mind, the startup — Scribld Creative aimed at creating a digital platform where people can pursue their interests and learn more in the field of Creative Arts.
Scribld Creative is a media and ed-tech startup which aims at educating people in the field of Creative Arts. The motto of the startup is to create a shared understanding among people through creative art. The startup is planning to get professionals from various domains of creative art — ranging from cinematography to design to fine arts. The professionals will be spread across various locations throughout the country and they aim at reaching an Indian audience (in initial stages) of self-motivated people who are interested to learn new things in the creative field. They are planning to launch the product as early as possible so that they can reach a larger audience due to COVID 19 scenario (where people who have more leisure time are interested in learning more).
The secondary research that I conducted in order to understand the methodologies and features adopted by apps in this domain suggested that having an app in the initial stages has the following benefits -
→ Users can watch wherever and whenever they feel comfortable
→ Videos can be downloaded and watched later
→ It is easy to keep a track of progress made
→ Navigation is simpler as compared to a desktop website
The startup is focusing on Indian people based in urban areas who are mostly students, working professionals, or homemakers from age groups between 14 years and 40 years, having a decent income and a decent way of living.
I conducted some secondary research on understanding the domain. The main findings from the research were:
Creative Arts can be defined as a range of activities and practices that enhance the creative and imaginative skills of a person.
Different types of creative art are:
→ Fine Arts
→ Design
→ Music
→ Drama
→ Crafts
→ Dance
→ Cinematics
→ Photography
In order to understand the user needs, I had some informal discussions with my friends to are into the field of Creative Arts or are pursuing Creative Arts. The main findings from this were:
→ Watching tutorial videos are helpful in short-term but not effective in the long run
→ Even though existing platforms provide room for assignment and discussion but they don’t induce motivation in the mind of most of the learners
→ Tasks that do not have a deadline are going to continue forever.
→ The best way to learn anything in this niche is by following the ‘Learn-Implement-Feedback-Improve’ loop
I browsed through different apps in this niche and found out the following common design patterns:
→ Course-specific discussion forum
→ Downloadable video lectures
→ Provide social proof and syllabus of course content
→ Provide one(or a few) lessons for free
→ Mandatory fees payment
→ Skippable onboarding
→ Provide recommended viewing
→ Payments are either Subscription-based or Course-based
After conducting the research and analyzing the information gained throughout the process, I enlisted the major pain points that the users are facing. The major pain points were:
→ Lack of motivation
→ Inability to complete the assignments
→ No proper feedback is received
→ Even if the feedback is received, it is only once
→ Platforms lack engagement, very few discussions in the forum
→ Forget what they have learned after a few days
Based on the insights gained from primary and secondary research, I ideated the teaching curriculum and methods for the startup.
→ Pre-recorded lectures on generalized topics
→ Live lectures for important topics (with available recordings)Fixed course curriculum
→ Live interactive sessions
→ Open-ended assignments with feedback from instructors
→ Lifetime access to course content
→ Limited-time period for course completion
Learning is a continuous process. In order to make the most out of the platform, it is essential to make learning a habit. I designed the flow following Fogg’s behavioral model which states that
Behaviour = Motivation + Ability + Prompt
Before proceeding to build the sitemap and the wireframes, I ideated and prioritized features for the app. The features were:
→ Calendar to show the scheduled live events
→ Virtual points to encourage the user to enroll in more courses
→ In-course discussion forum
→ Cohort based learning
→ Active interaction with instructors and colleagues
→ OTP based Mobile number login (primary)
→ Downloadable Course Content
→ Pay for the course only
Taking the features I ideated and insights gained from research into account, I built the sitemap for the app.
I iterated on the wireframes for the app to come up with layouts that serve the essential features of those pages without hampering the user experience. After making rough sketches, I moved to Figma where I iterated with several different layouts for the screens as well as screen components.
I explored different logo symbol and wordmarks for the startup. After some explorations, I chose one that represented the idea of Scribld Creative — Every idea starts with a scribble. It follows a path from imperfection to perfection.
From the wireframes, I chose a few crucial screens and experimented with different color combinations and typeface combinations.
→ Since it is an educational app and users will spend more time staring at the screen, I decided on making the UI in the dark mode so that there are no eye strains and users can use the app for a longer time.
→ For the colors, I choose the primary color to be ‘Purple’ as it gives a creative and inventive vibe. Darker shades of purple were used for dark backgrounds. ‘White’ served as a neutral color for the texts and other necessary elements
→ I iterated in different font combinations before settling for ‘DM Sans’ as the heading font and ‘Inter’ as the body font. DM Sans was chosen as it gave a non-serious and friendly vibe and Inter was used due to its clean and modern ligatures.
→ I planned on using consistent icons with smooth corners so that they match with the personality of the product
→ I used an illustration library for the illustrations. The chosen library had illustrations that depicted the niche Creative Arts and were more user-friendly.
Since in this project, I had planned on designing for edge cases soI started building a component library through an iterative approach. Throughout the project, the major components were added to the library.
I iterated different layouts and used the component library to fasten the process. Then I designed different screens(taking into consideration the edge cases as well) for the app. I iterated and improved upon the visual designs based on the numerous feedbacks that I received.
Onboarding
Simple and Interactive onboarding for user delight. Added animations in the onboarding flow to reduce drop-off and grab users' attention to sign up for the product.
Sign Up/Login using Mobile Number
→ OTP based sign up and login using a mobile number as it is a common sign up flow in the Indian context. This 3-step reduces time and allows for smooth signup/login.
→ Sign up and login through email for users who are more tech-oriented and familiar with emails. This process is short and fast to maximize user retention.
App Walkthrough
Simple and minimal walkthrough showing the essential features of the app to the first time users.
Home
Generalized home screen for first-time users and personalized home screen for returning and regular users to maximize user retention. Home screen contents are in descending order of priority. Course List screen shows courses under a particular topic.
Search and Calendar
→ Search page to easily browse courses and instructors across various categories. Categories in the default state of the search page make it easier to browse courses across a particular domain.
→ Calendar to keep track of live classes and be alert.
Course and Instructor Details
Provides details and information about the course and instructors. Also, has a free preview of certain videos of a course and the FAQs.
Enrolled Courses
Shows enrolled courses and also has downloaded course section if the user wants to watch the videos later.
Checkout
Easy checkout flow to allow users to enroll for a course.
Notifications and Account
→ Get notified and not miss any change in schedule or any other important detail.
→ Get detailed feedback from mentors and improve upon the works.
→ Keep a track of learnings and achievements throughout different courses. Also, can change app settings and refer a friend from here.
Designing for Edge Cases
After building the main flow, I designed the edge cases for different screens taking into account the possible use cases.
After completing the visual design, I prototyped the app in Figma.
There major learnings for me during this assignment were:
→ Creative Arts can’t be learned through traditional methods of watching tutorials. Practice and feedback are much needed.
→ I understood the importance of iterating for real needs. There 100 possible ways to design a screen, but only a few of them will work. Iterating gives an idea of what are those layouts would work and which one should fit for my product.
→ Designing for edge cases. How to take into consideration different edge cases while designing a product.
→ Using constraints to design responsive screens.