Community App for Kara & Nate— A UI/UX Design Case Study
A personal group project on designing a community app for the YouTube content creators — Kara and Nate
In this case study, I have described my process of designing a community app for Kara and Nate. In this project, we worked as a team, ideating, and brainstorming solutions to design an app that lets the Youtubers to interact with their community. This was a project that I had worked on as a part of the **10k Designers** Masterclass.
- Project Duration: 2 weeks (Sept. 2020)
- Platform: iOS
- Team: Devesh, Sahil, Shradha, Ansh, Shrey, Rama Krushna
🎫 Background
Kara and Nate are a couple from Nashville, Tennessee who started in January 2016 with a goal of traveling 100 countries by 2020. Make video blogs (vlogs) about their travel and have 1.78 million subscribers on their YouTube channel with around 740+ videos. They use different platforms for streaming their content, posting their blogs, and keeping in touch with the community members.
😣 Design Problem
Kara and Nate are travel vloggers who traveled across the globe as a part of their journey. As a part of their daily schedule, they have to travel, shoot, and edit videos for publishing. The majority of their travels are funded by Patreon Members, Course Sales, and YouTube ad revenues. They also post blogs on their website to attract viewers for their content. Since their profession depends on traveling, it is crucial for them to keep in touch with the community members and build a relation. Due to traveling, it becomes hectic to be focused on their daily tasks and be in touch with the community. This project was an approach at uniting different jobs they performed into a single platform.
🎯 Tackling Problem
With the problems in mind, we brainstormed and gathered solutions for solving the problem. Before starting wireframing, we had many team discussions to decide what solution(s) would work in this case. In a nutshell, the solutions that we decided on were:
Single App uniting the work of different platforms
In-app YouTube video player
Categorized content display
External links to Patreon site and Online courses
How might we build an interactive community platform for the YouTube content creators — Kara and Nate such that they do not have to switch to different platforms while interacting with their community?
❓ Who, What, and Why?
• Who are ‘Kara and Nate’?
A couple from Nashville, Tennessee who started in January 2016 with a goal of traveling 100 countries by 2020. Make video blogs (vlogs) about their travel and have 1.78 million subscribers on their YouTube channel with around 742 videos. The couple achieved their goal of traveling to 100 countries in February 2020. Now they are traveling within the United States and posting vlogs about it. Kara and NateHey, y’all! We are a husband and wife from Nashville, Tennessee traveling to 100 countries by 2020. It all started with…www.youtube.com
• What kind of content do they produce?
The video content that they produce for their channel is Semi-Formal, Informative, and Joyful. Apart from the videos, they also write blogs on travel hacks, credit cards, and their income, and have got their own Travel Hacking and Video Editing course hosted on teachable. They are also planning to start their own newsletter.
• Why are we creating the app?
Kara and Nate have a diversified audience from different walks of life. Currently, they have:
- A YouTube Channel for people to watch their videos and travel experiences
- A website where they post blogs related to travel hacks, credit cards, and income report
- A private FB group for Patreon members to interact with the community
It is difficult to keep track of different digital platforms and be productive while traveling. Moreover, some of these platforms are major contributors to their income.
The app is created with an idea to unify the purpose that is being served on different platforms, thereby increasing productivity without hampering their incomes.
💠 Addressing the Influential Criteria
After gathering basic information, we conducted research to address some of the major criteria that would influence the design and structure of the app.
👨🏻 Who are our Audience
From the research, we divided the target user group who will be using this app into three archetypes —
- Travelers: People who have already traveled and are traveling to various locations
- Travel Enthusiasts: People who have not traveled or have traveled to some nearby places only but are planning to travel in the future
- Casual Consumers: People who watch their videos or consume their content because they find it to be interesting and have no intentions of traveling
🔍 Other Findings
- Logo: Initials ‘K’ and ‘N’, and ‘&’ and illustration of a globe, with a cross formed by 2 airplanes
- Video Intros: Logo reveal on a coffee cup followed by episode number, country number, and location
- Income Sources (in decreasing order): a. Patreon b. Course Sales c. YouTube Revenue d. Affiliate Marketing e. Video Licensing
💡 Brainstorming & Prioritizing
Based on the research, we used the insights gained to prioritize features and decide on what to include and what not to include based on the MoSCoW framework.
🌍 The Sitemap
Having the features listed out, we discussed, decided, and iterated on how to distribute the content and features across different screens and what should be the flow of screens in the app taking into consideration different types of users.
🔨 Wireframing & Copywriting
Having decided the flow and distribution of content across screens, it was time to experiment and try out different layouts to see what fits. After multiple iterations and discussions, we came up with a set of wireframes that had proper layout fitting to serve the purpose of the app.
After the wireframes, we discussed the kind of language that should be used in the app. We decided to use semi-formal and joyful language so that it reflects their brand personality.
📱 Visual Design
Style Guide
- We decided on using Circular STD because of its minimal and modern design, which is what we wanted as the visual language of our app.
- From the multiple color palette that we decided on, we planned on using one with Brown, Beige, Green, and B&W colors. This was planned from the coffee mug that is used as a signature in their videos.
- Since it was planned, the app would have many images, so we were restricted to a limited color palette. And hence the majority of our visual design will be using B&W colors.
Onboarding
- While keeping in mind that our targeted users will be coming from Facebook, Youtube, and Patreon and taking into consideration that Kara and Nate, who travel frequently and have less time to manage the database, we decided to include 3 three options to signup in to the app.
- Also, keeping in mind that some users might hesitate to login without checking out the app, we included a “Continue as guest” option, which also had certain restrictions like commenting & liking on a video or a blog.
Home
Our main goal for the home screen was to keep the existing fans/users to be updated with the latest content while also help new users to discover content with personalized and curated playlists.
- The topmost carousel contains the latest content: recent vlogs and blogs, which take users directly to a video player or the blog page.
- Further, the content is organized via countries while showcasing the most-watched ones on the feed.
- By keeping personalized and curated content in mind, the users can also find the content similar to what they just watched or read.
Video Player
Exclusive Content
Our main goal behind the exclusive content screen was to have everything centralized in the app itself.
- As previously mentioned, a part of the users came from Patreon, which involved perks like exclusive monthly live Q&A and Behind the scenes.
- We observed a big flaw, which was to get these perks; users have to use Facebook groups for any exclusive interaction — in contrast, making Patreon act like nothing but a payment gateway for fans to support the creators.
- All the premium members were then allowed to access the live Q&As and the past live videos. Apart from that, users can also see behind-the-scenes.
- We also decided to include an early content section that gave the app an overhead over the existing youtube
Other Screens
Video feed & Country-wise content screen:-
- We decided to dedicate the video feed screen to provide the most personalized and curated content via various playlists and sections.
- Once the user selects the country-specific playlist, he will then be landed on the country-wise content screen, which further divides the content into more subsections and playlists related to the respective topics.
Blogs feed & blog screen:-
- The blog feed screen consists of two parts that are the category tabs, which also have badges to highlight the latest content.
- The second part is the discovery section, where content is then split into various filters such as the latest blogs, most viewed, and tending blogs.
- Once the user selects the specific blog card, the blog page is shown where the user can complete reading the article.
💻 Website Design
A website that communicates the value of the app
We chose to keep it simple and minimal. We browsed through many other similar websites and found some common design patterns.
Based on the gathered insights and inspiration we decided on adding the following to the website-
• Hero Image and CTAs at the top and bottom • Describing the purpose that the app serves • Frequently Asked Questions • Social Proof
Taking these into consideration, we designed the website for Kara and Nate that showcased the necessity of the app.
🎮 Prototyping
After making the visual design we moved on to make the prototype for the app. We used Figma for building the interactive prototype for the app.
🎁 Takeaways
- Solid research always forms the base of the project. Without proper research, everything falls apart.
- Collaboration is very much important. It gives room for more ideas and helps in taking collective design decisions.
- Design is not design without iteration. One needs to iterate multiple times and experiment to find out what works best.
- Communicate. What you think is not what others think, the intention of your decision might not be always clear to others. One has to communicate effectively to share their ideas.
- No one knows everything. One has to learn many new things every time he/she works on a new project.
That’s a wrap; I hope you found it insightful.
I thank **Abhinav Chhikara** for giving me this assignment providing valuable feedback as a part of the 10k Designers Masterclass.
Special thanks to **Rahul Bhosale **for providing helpful insights and feedback throughout the project.
