Designing a cohort marketplace — UI/UX Case Study
In this case study, I’ll take you through my journey of designing a cohort marketplace and some interesting insights.
Background Context
As a member of 10kdesigners cohort-3, we were assigned to design a masterclass app of any particular niche.
Our goal as the UI/UX designer for this startup is to design the Onboarding, Browse Products, Product Details and Checkout flows for the mobile app.
For this project, I took help from our fellow mentors, conducted an online survey, and focused on building a coherent design for this app. Let’s start.
❄️It happened. One fine day…
While surfing on Facebook, I came across this post.
It got me into thinking.
What If?
We design a cohort-masterclass marketplace where users can search and enroll for Cohort Based Courses.
What if there are other better cohorts out there, but you don’t know it.
What if you are interested in a cohort but your schedule doesn’t match up?
Okay beta, par yeh Cohort hai kya?
- A cohort is a community-based time-bounded learning platform where learners are guided by an expert in that field.
- Cohort makes use of different social platforms like Discord, WhatsApp, Zoom for communicating with each other.
😅Interested? Confused about what exactly is cohort-based classes? How they differ from Online courses?
This infographic will help you gain a basic understanding of what Massive Open Online Courses and Cohort Based Courses are.
Laying down
Before I even start with a project, I had to make sure that my vision was right. For that, I started with some research and conducted a survey.
Why survey?
- Understanding issues that people run into while selecting a cohort.
- Understanding the pros — cons and overall effectiveness of the cohort from users POV.
- Figuring out how one gets familiarized with the cohort, building an experience over it.
- The reason behind why people are not enrolling for a cohort is mainly closed down to 3 reasons:-
1. People are not fully aware of how cohort actually works.
2. Most of the survey members are in the age group of 18–28. They already have a fixed schedule that doesn’t match up with the cohort.
3. Unaware of cohort’s teaching structure. - Good Retention Rate → Number of people who attended a cohort is low (~10%). Still, 90% of those would recommend it to their friends and think of it as the best way of learning. Can help us incentivize as a referral system.
- Talking to friends n family and social media ads play a huge role (>82%) in how one gets familiarized with the cohort. Word of Mouth publicity.
- More than 60% of people show interest in the “Fine-Arts” field.
Competitive Analysis
Now that I was sure about the purpose of my app, I started with some competitive analysis.Competitive analysis helps us with the current trends followed by the industry.
Apps and websites I used for competitive analysis:-
- Nasacademy → course detail section, payment section
- Proko → search and filter section
- Section4 → information architecture
- Skillshare → Explore section
Also, Unacademy and Coursera for UI references.
Things I was looking for:-
- What kinda vibe do these apps create.
- How the IA caters to these experiences.
- How searching works and targets multiple niches.
- How the payment section works.
- How are they building trust with users?
P.S. All the analyses and implementations are discussed in their respective sections.
Also, here are a few of the UX articles I read for this assignment:
🎩Ideation
- Features like live interaction and feedback are cores of a cohort. Dedicated platforms are needed. So this app will only work as a marketplace.
- Designing a mobile app. But why? In a world full of influencers and brand sites, designing a one-stop destination for all the cohorts brings freedom. Freedom of Choice, Trust and Convenience.
- Creative Art demands feedback and practice, which is the core of a cohort program. So, let’s design a fine art cohort marketplace.
- Make sure people understand how the app works and what they are getting through these cohorts.
Explore cohorts → Pay for the one you are interested in → Get the invitation link → Done💡
🪢Information Architecture
In my spare time, I sketch portraits. But before we start sketching, we draw guidelines. These guidelines help us with proportions and the overall feel of that sketch.
Similarly, IA is used as a guideline for our design, where logic and flow can be laid down before working on actual screens.
P.S. There can be minor changes in the structure, but the flow remains the same.
Wireframes
Ahh finally, you will be seeing something around the app…brace for some weird rectangles and squares.
Paper wireframes also helped me with brainstorming design decisions.
🎨Setting the Vibe
Design matters, setting a tone for our app brings up a character to our design. And as I had total control over my project. This is what I was going forward with,
- Flat Design → feels clear and effortless. Goes well with contrast color scheme.
- Single Font → challenging, but recently I have observed many apps with single font system.
Onboarding Process
The purpose of the onboarding is Feature Promotion. As 24 out of 41 people were ill-educated about cohorts. So I planned for,
What the app & cohort offers and leading users with its benefits
- For commercial apps, users are more focused on the products and contents. So it’s wise to add CTA for Explore, providing an escape hatch for users through guest login.
- Users can start with a guest session. Log-in will get reintroduced once you are ready to pay for a cohort.
- A limited number of onboarding screens, followed by the ability to skip them altogether.
- Initially, I dropped Mobile Login. But through readings, I realized it’s more convenient for users as they don’t need to remember a password.
Sizable users prefer mobile over social login. - Being clear with error messages and not leaving users guessing.
Hate those “Your username or Password is wrong”
Explore Section
Explore Section acts as a home screen for this app, a place where you can easily navigate through all the cohort programs.
Resisting the Urge
As a designer, we want to build products that can work on all fronts.
But in doing so, sometimes we lose its essence. Sometimes the overall usability gets affected.
“63% of test participants abandoned their mobile browsing sessions, solely due to preventable usability issues” — Baymard Institute’s UX Research on Mobile eCommerce
So the Key is…Keeping it simple and taking notes on its usability.
Three questions users ask when they are exploring
- “Where am I?”
- “How did I get here?”
- “How I get to [x]?”
What I did…
- Ensuring users where they are in the site hierarchy by adding header to the page. Making it easy to follow and get a broader scope when necessary.
- Nudge users with Anchor Bias by including copies such as registration end date and a limited number of enrollments in Info card.
- added category that will list down cohorts based on the user’s search preferences → similar to Spotify’s Based on your recent listening section
- used Attention Bias by adding a Featured section at the top, as it’s the first section that the user is likely to see and explore.
Course Detail Section
A detail section has plentiful information, which is hard to articulate easily.
One possible solution is to leverage existing mental models, which creates a sense of inclusiveness for the users. In this case, people are most familiar with AppStore and e-commerce apps.
So how can I…
- Help them quickly ponder upon which course to choose.
- Help them choose a cohort that fits best in their interest.
- make use of existing mental models to create a sense of familiarity.
What I did…
- used scenario mapping to figure out the content on the “course overview” section, a convenient feature for users to determine whether they are available for the cohort.
- Added individual rating slots which can describe the strength and weaknesses of that cohort.
- used Nasacademy, Proko, and Appstore’s hierarchy for creating course section models.
- used Skillshare and Unacademy mental model for Instructor section.
- Nudge users by adding “EMI available” and “Registration ends” over the payment bar.
- About Instructor page has a brief overview of that instructor, which can also help users determine its credibility.
Payment Section
Payment flow consist of Adding Payment Method, Review Section, and Checkout.
17% of users abandon the payment section because they don’t trust the site with credit card information.
- placed thought-out messaging upfront to help build trust with users.
- added Scanning card feature to reduce inconvenience, as we already have our cards with us.
- Giving users the option to save payment methods. This comes in handy if they are into multiple transactions.
For online businesses, checkout is an integral part of the selling process.
957 out of 4560 (21%) users abandon their checkout process for being complicated or taking time. — Baymard Institute
- Reviewed IA for checkout flow:
Reviewing your payments/adding promo code → Selecting a Payment Method (Checkout) → Buy. - Emphasis on the copy of the text. And reassured users with the amount die payable to reduce abandonment.
- Most checkout flows have a disclaimer section, right when they are about to pay.
🔎Search Section
Search works best when the user has a brief idea of what they are looking for.
If there is no result to show, the user ends up on a dead-end. So I thought of adding relevant search results for a search term.
- There can be people with the same name but with different expertise. Adding a category subtext can help resolve this.
- Added Duration filters which can list down based on the time for which the cohort will exist. And timing filter, which can filter out the time slots based on your availability.
🎓Learnings
- Being true to oneself and with your process is key for a good designer.
- Being a designer is much more than design, it’s about how you see things and what you make out of them. This is how I came up with blue and orange as a theme for this project.
- Writing a case study is a daunting task, reviewing your case studies through people from different fields is one way of writing a good case study.
- Usability beats Interfaces. First, provide a seamless flow then work around the look and feel.
🔮Greatness From Small Beginnings
Through this case study, I would like to mention my friends n family, colleagues, survey members, mentors specially Yugandhar Bhamare, Zainab Delawala and Ritwik Sinha, for guiding and helping me throughout the project.
Special mention to Abhinav Chhikara for building 10kdesigners and helping me become a part of this community.
Which in turn helped me to come up with this idea.💫
Thank You for Reading.
If you loved the case study, do drop a clap!
If you are into design, games, sketches, sports, or are interested in building things, feel free to reach out to me on Twitter or LinkedIn for a healthy conversation!
I’m currently open to opportunities as a Product Designer as well!
