In this case study I will walk you through my entire process of designing a dedicated online photography platform for Two Mann studios (My favorite photography studio!!!)

Note : I am not linked in anyway with Two Mann studios, this is a personal assignment done as a part of 10k designers

🖼 Background

Photography is one of the fast-emerging fields and this pattern is observed across the globe, mainly after many leading smartphones are coming up with high standard cameras with a lot of cutting edge features, it is pushing many individuals towards clicking pictures and posting them on various social media.

In many parts of India, photographers form small communities locally and go for regular photo walks to learn from each other and also to click pictures around. But soon after COVID has hit this world, things have changed, the meetings have turned online and this has increased the culture of online communities. Now, the photographer’s communities are not just local but are also international due to the proliferation of online communication mediums. This trend has allowed photographers to collaborate on various social media platforms to critique each other’s works and share knowledge.

Two Mann is one such online community on Facebook that has gathered more than 21 thousand photographers in their private community, they conduct regular photography workshops, critique sessions, short assignments/activities, etc.

I am personally a huge fan of their work and as a product designer with a great passion for photography, I thought to intersect my interests and build something efficient for Two Mann Studios.

🥅 My Goal

My goal is to make a dedicated platform for Two Mann studios where people can take courses, attend live sessions, participate in forums, post their work and get critiques, etc.

The reason to build a dedicated platform is that Two Mann is a highly regarded and reputed brand across the world, they have a very unique vision and narrative with which they can grow more strong & remain flexible in engaging with their audience.

🔍 Research

When building a dedicated platform for an established brand it is imperative to study them fully so as to understand their goals, vision, narrative, etc.

I went on to study in detail their interest in building an in-person cohort called “Two Mann U” which is an amazingly curated program to transform the way you look at the world so as to get a new perspective towards everything, their beliefs are very unique and that is what makes them stand out

Check the page of Two Mann U for more information about their vision

I also went a step ahead and subscribed to their email list which helps me to understand their brand tone, this gives me a better understanding of their vibe

After learning some good insights about Two Mann, it is now time to understand how other online platforms in general create content and engage their audience. So, I went ahead and studied various platforms which are also outside the niche of photography so as to get a better understanding of everything.

After looking at various platforms to observe patterns, some points which I think are important to consider when creating a new online platform

• A proper onboarding to make the user aware of all of its features
• A flexible subscription plan
• Ability to easily discover courses
• To clearly understand if a certain course is right for us
• A forum to get the sense of community
• Social proof about the course
• Emphasis on teacher, value, and background of the teacher
• Proof of course completion

✨ Ideation

Since this is a personal project and there are no restrictions I thought to make a full-fledged application with all the possible features that can lead to the best online platform experience.

• Photography is a very vast field and people look to learn various skills which might fall under different genres of photography. Ex: fashion, food, portraits, weddings, etc. I thought to prioritize genres of photography so as to make the discoverability of the courses easy.
• The home feed shall be curated and personalized based on trends and user search patterns so that discovery is relevant
• The platform shall have recorded courses and guest masterclass
• The course page shall include an overview of the course (enrollments, Avg. rating, level of course, watch time, number of downloads, and lessons) so that it is easier to decide if the course is for you
• Dedicated Forum section for each course to get critiques and comments
• Dedicated teacher profile with portfolio/social media handles, course list, and ability to follow them so as to bring a sense of connection with them
• Ability to download course for offline viewing

After drafting important ideas from research I have redone some research to check interaction patterns as I am building a whole new platform from scratch

🧠 Information Architecture

This is the most exciting part which takes a good time to build logic. I firstly write down all my ideas and then process what elements could further add value to the ideas, I then thought of preparing an exhaustive information architecture that will give me a clear understanding of what elements to include and how to categorize and settle hierarchy

👀 Wireframing

To the most exciting phase, this is the first step for me to turn the concepts into reality. I do some rough sketches initially and then mostly do the larger part on Figma. In this phase my goal is not just to create screen concepts but also to finalize on copywriting as the logic and flow of the application shall be sorted in this phase.

🔥 Final Design

And finally, the most vibrant phase of design is where I try to make the information much more accessible by the use of brand colors, images, effects, etc. These things add depth to the overall design and will make designs more intuitive for the user

In this part of the case study I am going to justify why certain decisions were taken and how will they help users

Onboarding Screens

Some points that I have considered for designing onboarding screens

“Prioritize and display important features”

• I made the list of important features and then ranked them, so that I only display top ranked features on the onboarding screens
• Then, I made segregation of features based on what would be important for a new user. After ranking, I segregated those based on category and chose one screen from each category that would clearly describe the whole
• In this case, I have displayed the screens that talk about “How can I browse courses” “How to use the forum” “Course tracking and progress” “Completion certificate” “Live session access”

Home Screen of an Unsubscribed User

In the home screen of the unsubscribed user, I prioritized the most-watched content so that users can explore top courses with which they understand the value of the course and might feel like subscribing. At the same time, I included banners to subscribe to the platform.

Course Screen for an Unsubscribed user

Allowing the user to watch the trailer and overview of courses so that the user can evaluate the value. Prioritizing CTAs related to the subscription so as to turn visitors into leads

Subscription Flow Screens

Home Screen of Subscribed User

For a subscribed user the home screen is much more curated and personalized, the initial section of the screen is given to continue watching so that we are prioritizing the user to finish the course that they have started. The later part of the screen suggests courses from topics, teachers that are followed by the user which makes the discovery of course very easy.

Live Now Screens

One of the features that I prioritized in the live session is the materials/slides shared by the speaker need to be highlighted in order to access them at any point in time. At the same time, a full-fledged section for live chat has been added so as to have a seamless chatting experience.

Search and Filter Screens

one of the main points that I have kept in mind when ideating search screens is that discovery should be easy. That’s why I have prioritized top searches on the idle search screen, Whereas in the screen where the user searches a keyword, I have added some sub-searches to search for a keyword within a category (genre, teacher) which makes the discovery even faster.

Course Page : Lessons

When designing the course page I considered 2 states of the same. The first is when the user is opening the course for the first time: In this scenario, there needs to be a clear overview of that course and an easy way to see the lessons and materials linked to that course. Hence I prioritized these two features on this screen. Second, when the user is getting back to the enrolled course page: this page shall include course progress and also indicate completion status for lessons that are fully done.

Course Page : About

In the about section of the course page, I prioritized clear elaboration of learnings, topics covered (tags), teacher info, Class ratings, students’ work. All this information will allow users to deeply view the course and decision making to enroll in this course gets easier

Course Page : Forums

The forum section needs to give flexibility for the student to post comments, reviews, doubts, etc. it shall also allow the teachers to comment and then the teacher reply automatically gets highlighted

Topics & Genre Page

Users can explore topics & genres deeply from the topic/Genre tags, these pages will feature a clear explanation of the topic/genre in theory and will display related classes. The page also features a follow button so that when users follow they get suggestions related to that topic/genre on the home screen

Teacher & Guest Profile

A dedicated profile screens for teachers and guests so that searching content related to them is direct, Users can schedule reminders for live sessions or bookmark/browse courses by them. Users are also provided the option to follow them so as to get recommendations, notifications related to them

My Course & My Profile Page

My course page needs to help users find their bookmarks, downloads, and follow up on currently pursuing courses, these options will add flexibility for users to access data easily

My profile page will feature some profile settings and most importantly features completed courses list from where users can access course specific dashboards

Course Completion & Certificate

Once the user finishes the course, I have prioritized a modal screen to attract attention and direct the user towards the course dashboard, in this dashboard, the user can access the course completion certificate and most importantly add ratings and reviews for the course which will help the platform collect data for course overview ratings.

📚 Overall Learnings

This is the first time experience for me to dwell into the space of online educational platform. It was exciting to learn about user patterns and behaviors in this education space. Some learnings that I had throughout :

• Users like to have a personalized home screen with which course discovery is much more faster and easier
• A quick overview of course is much needed for the user to decide if it the right course for them
• Users look for learning outcomes, detailed reviews hence I have prioritized features such as students work, learnings which would motivate the user to take that course
• In live sessions access to materials is an important aspect hence I added a special space for materials
• It is effective to build an online bond with teachers, hence I designed the “follow” flow so as to bring that connection with the teachers.
• Dynamic search will help user discover courses much faster. I have added a search with category so that user can easily search his keyword in a specific category
• Topic wise exploration is imperative as it gives user more flexibility to learn. Hence, I have made dedicated pages for each genre/topic so that user get a chance to explore topics individually and also browse classes under those topics
• Encouraging and incentivizing would encourage certain users. Hence, I have added a certificate option in the course dashboard.

🙏 Thank you !