How we used
Machine
Learning
to personalize
CX for Social Media App

Introducing Karavan- A social network for collective experiences

What are we if not our stories? It is our stories, experiences and memories that capture the true essence of our existence. But in today’s digital landscape, the nature of storytelling has changed.

Due to the wide expanse of technology, we do not really communicate, we share. We leverage the power of social media and document our lives to the world, one recording at a time.

The growing trend of documenting a visual journey, capturing the picture perfect moment eventually leads to missing out experiences in real time.

  • Country Canada
  • Service Mobile development,UI/UX Design
  • Industry Social Media, Lifestyle
  • Share
The Problem Today, the fear of missing out is real. According to a report by the UK's Royal Society for Public Health (RSPH), social media accounts for growing discontent and fuels issues like anxiety and depression. Documenting a perfect life somehow leads to a compare and despair attitude.

Karavan exactly addresses this growing dissatisfaction. Karavan is an experience network and a collective media platform which makes sure you’re living in the present, enjoying as you document. It captures rawness, spontaneity, togetherness and weaves your little moments into a movie format which you can share and cherish with your loved ones.

Karavan makes sure you don’t miss out on key moments. It buckets a user’s video recordings in chronological order, combines various clips together using Machine Learning and transitions it into an episodic journey. All you have to do is press publish and share your experiences with the world.

click to play on boarding
video

Project Scope & Timeline

We initiated the process in March 2019 with a Product Discovery workshop, performed strategic analysis and UX
Design to solidify the Information Architecture and handed off UI Designs to our dev team who developed the app by
August.

Project scope & timeline for Appinventiv

We decided to test the water and opted for a Soft Launch in September at The Impact Music Festival that takes place in the US and Canada. Upon testing the app with real time users in the Music Festival, we received a ton of positive reviews and invaluable insights.

What’s next for Karavan? A global launch where it carves a niche!

When the client came to us, the idea behind their app sparked our interest. We understood what they were trying to achieve, what set them apart and what challenges they were facing. They came to us equipped with research conducted by the research team in Vancouver. We had to analyse the data, refine it into insights, and bring to life the idea with our engineering and next-gen designs.
- Chirag Bharadwaj, Product Manager

Project Challenges

To materialise what is visualised isn’t as easy. We had a couple of challenges to take care of. And we took every challenge that came our way as an opportunity to provide the app users a delightful experience.

With Karavan, we wanted to bring people together. And that did not entail sharing your own video or story with the world. We wanted people to really connect and be a part of the togetherness. So, we decided to roll out a feature that combined video clips from a multitude of app users into a single karavan documenting a shared journey.

Finding the right tech stack

The aforementioned idea was visionary but our client had his doubts if it was possible. We jumped right in and leveraged the power of Machine Learning to conquer this challenge.

Defining machine learning algorithms

With effective brainstorming sessions, we agreed on factors like picture quality, bad lighting, viewing duration, jerky movements, contrast ratio etc can form the foundation for ML to sort good & bad clips.

Handling concurrency pressure

We don’t just build apps, we scale startups. Scalability was a challenge but we ensured the app can hold 30,000 concurrent upload requests at any given point. This was our core API.

Defining gamification strategy

An app onboarding process plays an instrumental role in turning new users into long-term active loyalists. And incorporating game design into the Karavan experience was our key strategy to keep users engaged.

Kicking off the project with a product discovery workshop

Though our client came equipped with some user research, we knew it was ideal to conduct a Product Discovery Workshop to identify any bottlenecks that may hamper our development process.

We initiated our journey in March 2019 and began with a 3 day workshop.

Product discovery workshop in session. Our discussion focused on narrowing down the voice of the user
DAY 1
We commenced the Discovery Workshop with Lightning Talks. In a stipulated time, the client captured the vision and intent behind the product and conveyed the key information to the cross-functional team. It was essential that everyone in the team was onboard with the view of the stakeholder on questions that set the scope of the project. Only then we could find the "voice of the user"
  • On the very first day of the discovery workshop, we established the core values of the product, studied User Personas and defined the unique selling point of the app.

  • To make sure our end users do not identify us as another social media app, we had to set the tone. Karavan is a social experience app. We identified the app’s key functionality and focussed on what set it apart from Instagram.

    Instagram is a self centered app where personal photos take centre stage. Recent studies reveal that Instagram has negative effects on young people’s mental health.

    Karavan was designed with the sole premise to counter all these issues and create a network where experience and sharing is seamless.

  • We studied the competitive landscape (Instagram, Snapchat, Tik Tok) and analysed key metrics to understand the product-market fit.

DAY 2
We followed a HEART approach to assess the project under the following key metrics.
  • Happiness
  • Engagement
  • Adoption
  • Retention
  • Task completion
  • We embarked on the second day by deciding the core values of the application. Ascertaining the core values refined the idea and provided clarity about the vision of the product.

    We arrived at the conclusion that the product emphasizes ideas over showoff, we care about values, we prize novelty and experience and the product that we have envisioned creates a safe place for contradictory opinions over set boundaries.

  • At the start of Day 2, we provided sticky notes to all our participants and asked them to capture any challenges that they come across into a ‘How Might We’ statement. It helped us a great deal in understanding the key challenges and unraveling new insights.

    Here a couple of How Might We’s that really paved the way for developing the app:

    HMW (how might we) detect
    inappropriate videos using Machine
    Learning?
    HMW enable users to find ideas to create content on?
    HMW prevent our app from clickbait?
    HMW decide the right algorithm for
    feed?
    HMW define categories for karavan?
  • Rolling out too many features at one go can be overwhelming for end users. So, we went through a huge pile of data and for the sake of MVP conducted an Affinity Mapping.

    Dot Voting helped us in quickly organizing the previously generated How Might We notes and clubbing potential features into modules, like Explore and Create.

DAY 3
To identify new opportunities, we let our creative juices flowing. We observed the seemingly mundane and came up with ways to create something extraordinary. Day 3 was all about visualizing potential ideas and generating paper sketches.
  • We conducted Empathy Mapping to visualise user’s needs and to gain deeper insights on what excites them to take action. We were determined to craft an experience that offered maximum user retention along with successful onboarding.

  • After developing a comprehensive understanding of the product market fit, Our Design Strategists conducted exercises like paper prototyping and pencil sketches to gain more clarity and map out ideas.

    Output of day 3 were paper sketches like these that helped us clear our minds & visualize features

Analysis & UX Design

The Product Discovery Workshop was a huge success. It helped our client understand the nuances around the product and gather insights that would have a tremendous impact on the app’s success.

In April, we jump started the project with strategic analysis and designed collective experiences that were delightful for the end users.

Click and interact with
invision prototype
  • By the end of the workshop, our Creative Lead had moved through large amounts of data and charted out a well defined Product Feature document. We usually start with the overall vision of the product and follow a top-down method. This makes tying product goals with the relative feature an easy task. It outlines how the end user interacts with the key functionality and helps visualize what that would look like.

  • In this phase, we also solidified the previously designed Information Architecture map. We arrived at how the content would be organized to ease out navigation process for the end users and provide them everything without any big effort.

  • Scrutinizing users’ needs, expectations and limitations in the Discovery workshop empowered our Designers to customise interactions. At Appinventiv, we view human interaction with a digital product holistically.

  • Wireframing played a fundamental role in structuring the product early on. We targeted usability, efficiency and did not lose sight of our customers, at any given point. By creating wireframes in Invision and Adobe XD, we were able to rapidly generate feedback from our clients and iterate accordingly.

UI Design

After settling down on wireframes that provided a clear understanding of the product design, we crafted intuitive and immersive user interfaces in the month of May.

Moodboarding was a powerful tool to enhance communication with clients on matters concerning the visual vibe of the product. We were able to gauge the emotions expected from the product, capture references and provide a visual guide to clients as per their unique needs.

Our moodboarding exercise helped us determine the color palette we would like to associate ourselves with. It also helped us determine the visual tone for the app before we took our product to the design table.

Next we brainstormed on the Brand logo and form, and decided the official colors that associate well with the brand. We narrowed down on blue, yellow and turquoise since it is gender neutral, much like our app and appeals to a mass audience.

primary pallette
Cornflower Blue
Hex
#046bee
RGBA
97,149,237
CMYK
0,0,0,50
Turquoise Blue
Hex
#56e0ea
RGB
86, 224, 234
CMYK
63, 4, 0, 8
EXTENDED PALLETTE
gray
Hex
#808080
RGBA
128, 128, 128
CMYK
0, 0, 0, 50
Polar
Hex
#e9f6fa
RGBA
233, 246, 250
CMYK
7, 2, 0, 2
Bright Sun
Hex
#ffd63b
RGBA
255, 214, 59
CMYK
7, 2, 0, 2
Carnation
Hex
#fe5164
RGBA
255, 81, 100
CMYK
0, 68, 61, 0
We settled for "Cornflower blue" as our primary color. Blue is also symbolic for trust. We strive to create a brand which is trustworthy, fully ensuring your data is safe with us.

Our next step was to build a design system - a single source of truth for all the elements that will allow our designers to design, realize and develop a product. It evolved continuously with our product as we received more and more feedback.

We harnessed the power of Adobe XD to create design system for this project. Components and creative cloud proved instrumental in making sure that the document acted as a living styleguide for consistent design shown below

Development & Testing

Karavan was a big project, and we began the development journey in June. Our leading experts formed a cross-functional team to deliver what was duly promised. The Product Manager ensured everything was aligned from the very beginning. Our tech expertise included 2 iOS Developers, 2 Android Developers, 2 Backend developers , 3 Devops Engineers, an R&D and ML team.

To build a cutting-edge app, our Dev team used an array of technologies and frameworks.

Frontend
  • iOS
  • Xcode version: 10.3, Swift version: 5.0
  • Alamofire, Kingfisher, Instabug, Google maps,
  • Realm Swift, Giphy Core SDK, AVFoundation,
  • UIKit, Contacts, Messages UI, Photos
  • Android
  • Android Studio 3.5, Kotlin 1.3.41, Android X,
  • Retrofit, Google services v.4.2, Firebase crash
  • analytics version 17.0.0, FFMPEG
Machine Learning
  • Python version 3.7.X, Anaconda distribution, Bottle framework 0.12.X,
  • FFMPEG, Logistic Regression Algorithm, pydub(0.23.1) ,moviepy (1.0.0)
  • Database : PostgreSQL, Media/ File Storage = S3
Backend
  • Python version = 3.6, Distribution of Python = Anaconda, Framework = Bottle
  • Primary DB = PostgreSQL, Secondary DB = Elasticsearch, Session Management
  • & Fast access data = Redis, Media/File Storage = AWS S3, Version Control
  • System = Gitlab 5:46 PM

Good talks make good projects.
Talk to us in person

Appinventiv didn't make tall promises. They just delivered. They understood my perspective and constraints and produced a bang-on product. Loved working with them and would recommend without any second thoughts.

Reggie Grey
CEO, H3 Enterprises
Send me a copy of NDA
3 + 2 =