Dedicated App for Andrew Schulz’s community
In this UI/UX Case study, I’ll be sharing the detailed process and the reasoning behind the design decision that we took to design an app for Content Creator Andrew Schulz.
Background
Andrew Schulz is starting a dedicated platform for his community outside of YouTube, which will be like one hub of everything related to his content, updates, products, and topics around his channel.
As a team of designers, we need to design the app and a one-page website (landing page) that communicates the value of the app to people.
Deliverables
- An app for Andrew Schulz’s community
- A one-page website design that communicates the value of the app
- Supplementary assets: app icon, app name, app store screenshots, website fav-icon, website meta image
- A Notion doc that documents our process and outputs
Our Process
We took the exploratory pathfinding approach rather than just going with the most obvious ones. So, we actually went into a lot of iterations before coming up with the final output.
Initial brainstorming and Research
Before even thinking about the problem space we needed to understand the mental model of what their entire universe looks like? So, we progressed ahead and researched around questions like-
We collected lots of screenshots, links, data, comments, and much more to gain insights about the Andrew Schulz and the community.
Here are some of the main links-
- His story- A twitter thread
- How Andrew Schulz Became One of the World’s Most Standup Comedians
- Andrew Schulz’s Website
- Andrew’s Social Media handles- Instagram, Youtube, Twitter,
- Podcasts- The Brilliant Idiots, Andrew Schulz’s Flagrant 2 with Akaash Singh
Andrew Schulz was the most-viewed stand-up comedian on YouTube in both 2018 and 2019, averaging over four million views per week.
2020 his popularity still kept skyrocketing-because of the late-night style monologues he began uploading online when the COVID-19 pandemic started.
Made very deliberate decisions to turn his luck around in the wake of repeated rejections from large networks.
Content variety:
What kind of content does the Creator put out?
- Free YouTube Specials
When Schulz’s self-funded one-hour special was also turned down by networks (that had always been skeptical of giving him a deal), he decided to release it on his YouTube channel for free — but not before a serious edit. - Ditching the hour (4:4:1)
He said he realized that most people start watching a comedy special, even enjoy it, but rarely finish the whole thing. So, he reasons, “I figured the hour was too long.” Schulz’s 4:4:1 clocks in at just under 17 minutes and won him rave reviews. - Roast central (Crowd Work Special)
“Schulz started honing his improv. Because learning to roast the crowd meant new content every night. He’d film every show. Sometimes 7 in one weekend. Hoping to get one electric clip for YouTube.” - “100 ways of discovering me.”
2018–19, Schulz uploaded over 100 bits of comedy. - Always unfiltered
By treating YouTube as his network, Schulz was able to sidestep the public perception problem that ‘watering down jokes’ can have for comedians.
Channels on YouTube:
His playlists on YouTube:
Data around his main content i.e YouTube-
(12/06/2020 to 12/09/2020)
Few more questions in mind, around which we brainstormed-
- Why would people come to his app?
- To access all of his content at a single place organized very well, Right? - What can be his business goals around making this app?
- People can book tickets for his shows directly from here? I think this can be the right approach - How would we make users feel special about the app other than just organized content? That AHA! Feature?? what can that be?
Detailed research
(Feel free to have a zoomed-in view of our research)
While researching we found a huge list of gaps around which the app solution can be designed but we had prioritized the features to be included within the app in order to address the most important problems/gaps.
We used MoSCoW Method of Prioritization in order to come up with the most important features to be added in the app.
The most important problem space that we found with strong validations were-
- The audience wants to see the exclusive content, behind the scenes and want to engage with each other on a single platform, and want to be updated with Andrew’s content.
- They want to directly engage with Andrew and they love to get roasted by him on his shows and due to the pandemic, this kind of interaction became way lesser.
- Many people were not able to know about the upcoming shows and the current booking experience is not good.
Competitive Analysis
We explored various apps to observe the user flow, visual direction they follow for the features we decided to add in the app.
After this, we divided the work again to come up with Information Architecture and Wireframes, of the specific flows.
Information Architecture and Wireframing
Now that we knew, what to do? At this stage, we figure out How to do it?
We came up with the Information Architecture for various flows and paper wireframes for the specific flows as well.
Information Architecture is an important stage because now here we figure out what all content/information should be included in the actual screens.
During wireframing, we attempt to give some visual structure to the information we have, it’s like a skeleton for our final designs, so we tried a lot of different layouts for even similar screens to come up with the most suitable solutions.
Branding and visual direction
- During the research phase, we found out that red color is being used at various places in Andrew’s content for example- his YouTube cover, profile picture, thumbnail for podcasts.
- Also, we took inspiration from dim-lit comedy clubs to make a dark theme for the app.
- These design decisions also match the personality of the Andrew, that is he is bold, raw and, confident.
- We used Sf Pro Text as our font, as it has variable weights and works well in different sizes and also it is quite impactful which goes well with our visual direction.
But as mentioned earlier, we did a lot of exploration before coming up with the final decision of each stage. So here’s our brainstorming around the visual direction-
Visual design
I will walk you through each flow one by one explaining the design decision we took
Onboarding
We picked up the inspiration of the splash screen from Andrew’s YouTube profile picture so that it creates that familiarity for his fans.
Our goals for onboarding were -
- Making it as simple and frictionless as possible
- Not overwhelming the users with features upfront, but to show them features as they go.
- Showing the value of the product up front, so it increases the psyche of the user.
- Making users feel more special, by greeting them with their name.
- We have given two options to signup in the app-
Using Patreon-
- We took into account the existing members who have already paid for the Andrew’s Patreon community and decided to give them all the premium benefits for free in the app till their Patreon membership ends.
- This would give the audience an external motivation to switch to the platform as everything related to Andrew would shift to this platform eventually.
- Also from our research, we found the different benefits for the Patreon members and came up with a new set of premium benefits on the new platform, which would also help people shift from Patreon to the app.
Google/email-
- People who are not a part of the Patreon community have the option to sign up using email.
- To make the process of new signups frictionless, we have used Magic link, these are used for tasks such as email confirmation and make the login experience super smooth, without the user thinking of creating a password.
- To make the experience even more personalized, we welcomed the user by mentioning their name.
Feed
Goals of designing the feed
We wanted to make sure that the users feel up to date with Andrew’s content and that they can engage easily with each other and Andrew.
Feed details-
- This is the main screen on you as the user lands on after the on-boarding.
- It is a scroll-able list of feed including a variety of content including videos, images, memes, etc. posted by Team Andrew
- It also serves as a platform where Andrew can update his fans on what he is up to.
- To give some updates mostly about the upcoming shows, launches etc. we went ahead with 2 column layout which are non-interactive for users and are meant to be informative.
- We decided to go with a 2 column layout because it creates a visual break in the normal posts and informative posts(usually less in number) and also this layout helps the user to consume more information on the single screen without scrolling.
- People can like, share, comment on the posts.
- Liked posts can be seen later as well as a collection in the profile sidebar menu
- The feed automatically gets updated with the most recent posts on top.
Online live show
The live comedy show interface is inspired by stand up comedy shows.
Our goals for designing the Live show feature were-
- To make it user friendly
- To show relevant system status such as the number of people watching the live session.
- Making users feel more engaged and to create an environment to match the actual live show
- When the user taps on the live icon on the bottom navigation menu, they see the screen with the next upcoming on app live show, along with a scroll-able list previous roasts as well.
- Free members of the app can not watch the weekly lives conducted by Andrew, so they have an option to book the seats for the front row which are limited to a maximum of 20 seats/show as of now. But they can see the previous roasts one week after when they are conducted.
- All the premium members of the app can watch the weekly live show, but to get on the front row to directly interact with Andrew they need to buy the Front row tickets as well.
We thought of doing this to increase the number of monthly subscriptions on the app.
Here, the first thing we did was to get the essence of the offline live show -
Match between system and the real world
- We tried to make the same kind of visual architecture to make it feel more organic and natural, as digital experiences should align with the real-world experiences it helps users build mental models for the platform easily.
- Here the bottom hierarchy is for the Front Row attendees and at the top stands Andrew on the stage. Just like it is on the offline show.
- Andrew can pin people on to the stage, so that they appear on the stage with Andrew for long interactions. He can pin any person on the screen from the Front Row.
Bookings flow
- This was one of the major problems we needed to solve as it was a very high cognitive load task earlier to book the tickets for his shows.
- Earlier user had to go to Andrew’s website to see the dates of his shows, and when clicked upon the buy ticket link, the user would we directed to a new website of the event organizers or the website of the venue.
- So every time you as a user click on different buy tickets link, you will be directed to a different website to buy the tickets.
So it was not at all organized and with every extra click user makes to complete a certain task, more the drop-off rate!
1. Tour shows/offline shows
Design thinking around designing Booking experience
We wanted to make a super smooth booking experience along with a personalized experience.
We figured out all the information that would be relevant to user while booking tickets-
- We decided to have the upcoming next show as the biggest card on the top and other shows according to the dates as a list of small cards.
- We added all the information that would be helpful to the user for booking the tickets.
User freedom is taken into consideration and therefore we added an option to add the particular event to the calendar so that users can be notified accordingly.
- We also added the option to like or share the details of an event.
- Clear distinction between available seats, reserved seats, and seats selected by the current user ( in red )
- Added reviews and Terms and Conditions upfront to make sure the user has all the information that they need to book the tickets.
2. On App Live Shows Bookings
- For booking tickets for the Front row for live show, we decided to make ‘selecting the seats experience’ more premium and personalized by adding the pictures of the people who have already booked the seats.
- On clicking the confirm seats, the user is shown the next screen where they can see the booking summary with the option to proceed with payments.
- Users can see all the bookings made in the profile tab.
Profile Tab
The profile tab includes all the options to make user’s life easier.
- You as a user can see all the liked posts and events.
- Option to see your membership details.
- We also added an option “Your bookings” where users can go and see all the previous bookings made from the app.
Notifications
- We used the Notification Center type of model for showing notifications.
- It is a type of notification model where all types of notifications lands in a single place regardless of their source.
- We used this model because there are various sources of Notifications and they do not originate from a particular source in the information Architecture.
What type of notifications will you receive?
- Notifications of live show when they are about to start.
- You will also be notified of the upcoming shows in/near your city.
- Some feed-related notifications if someone likes your comment, replies to your comment etc.
- Notification of new exclusive content posted on the feed and much more.
All right folks that’s a wrap walking you through our design process.
Make sure to check out our detailed visual design-
We also designed a website that communicates the value of the app.
Link to Complete Figma design file
Learning and Insights
I would like to thank Abhinav Chhikara to give us this team assignment and mentoring us as a part of the 10k Designers Masterclass.
I also thank Paritosh and Abheyraj Singh for helping us bring clarity in our process and giving their critique and feedback.
Team members contribution-
I did the Onboarding, Whole bookings flow, notifications, and documented the whole process and wrote this case study explaining the design decision we took.
Natansh did the Profile tabs for the user.
Iqbal and Simran were responsible for designing the feed feature in the app.
Rohan and Rajesh designed the live streaming feature for the app.
