Social Media App For Liviit

Project Type

Design and development

Industry

Media And Entertainment

Tech Stack

About the Client

After running a relatively simpler web-app for 8+ years, Matt Robertson, the founder of Liviit, decided to switch gears and bridge the gap that was created by the shift in the technological paradigm and the rise of mobile. A visionary man with a plan, Matt set out with the tedious task of looking for the perfect technology to shift on and the perfect team to help him with it. Liviit was originally designed to assist people in their day to day lives by streamlining their daily activities in their busy schedules. With just a functional web-app that featured 'Private Hubs' & 'Community Networks' and futuristic ideas, Matt wanted to build a Mobile App for his concept.

First Steps

Following an extensive research on mobile options, online tutorials, which led him to Tech-Talks held at GeekyAnts and his purchase of NativeBase Starter Kit Pro, Matt reached out to GeekyAnts on May 5th, 2018 with the hope of a solution. He explained his vision of producing Liviit 2.0 on mobile and put forward a list of requirements that would help him achieve his goal.

After a quick discussion with the Business Development Team, Matt successfully hired GeekyAnts to make his dream a reality with a team of two React Native engineers and one Laravel engineer for backend development. Initially, Matt wanted to follow a fixed timeline with a fixed cost plan but understanding the scope and benefits of sprint-wise Agile, he quickly followed and agreed to it.

The only thing left to do now was to get to work.

OUR APPROACH

A structured end-to-end approach ensuring smooth execution from planning to delivery. Each phase is designed to optimize efficiency, user experience, and product quality.

Key Points:

Keeping the project of building a social media platform in mind, the initial strategy was to introduce a fixed timeline model, which then transformed into a time and material model considering the scope and benefits.Focus on user-centric design and scalable development
Considering an upgrade from RoR, the choice of tech stack for this project was React Native, given the sheer versatility of the framework, with AWS S3 and Exchange Server in the backend.
We implemented wireframes to understand user journey and derive the most efficient experience, while using the latest design systems, as per the client's demands.
The first milestone marked the completion on UI, followed by a user management system, a linked accounts feature, hubs management, to-do's management and a feed management module.
With over 3 years of development, the project is still ongoing with new improvements and features being implemented regularly.

Strategy Analysis Planning UI/UX Development Testing Delivery

Team On-Call

Faiz Ahmed was the designated lead for this project. Armed with a team, he proceeded to execute the first step of the plan, understanding the requirement from a technical perspective. The first step was to decide the tech stack for the project and devising methods to achieve different features of the web-app into mobile. With a quick discussion and with the team’s expertise, React Native was finalised as the framework on which the app would be built, Laravel was selected for backend APIs, MariaDB for database, CentOS for server and AWS S3 for centralized file storage.

Concept

Liviit’s concept is to define the need of people being driven away by the concept of social media. What fascinated us to work on the project was the perfect solution that has been in need for many of us.

As a user, we often run into unnecessary content or the content not advisable for our kids. Liviit aims to provide a safe platform where we do things based on only what we need. We brainstormed together and created our own principles: Guide Your Users, Consistency, Efficiency. By looking at this design principles, we had to think about what we can do to apply them in use.

UX Goal

To create a usage standard and logic in the way that the function of the app are implied upon the usage of devices. The main features of the app will sit right on the screen ensuring that the users are not missing them out. User could also control and navigate their kids to what is the most important and block to what is not.

UX Challenges

The initial design of the app served the purpose of being used only on the desktop. There were many major features which needed go onto the mobile app keeping in mind that the new design does not loose its touch. With so many features, one could only think of an app like a combination of multiple app into one. We have been struggling with the notion of having a uniform usability unity across the platform. Not only the function but the design also had to go well along a good visual content.

Brainstorming and Wireframes

This process was carried out to understand the complete flow of the app and to clearly define all the main functions of it, before proceeding to high fidelity wireframes.

Colour Pallet

The primary colour of the app was chosen by the client and had to complement the rest of the colour scheme in such a way that it either created a contrast of colours or blended with them.

UI Screens

The design of the app was structured with all the components that was made throughout the design stage. The principle of the design was human centred to maximise the potential of the app.

The Execution

With everything set in place and an agile method to supplement communication and workflow processes, the team wasted no time and got on top of the task at hand. The plan was to deliver every major release at an interval of 2 weeks.

The first week would be well spent into crafting an impeccable UI and reliable API’s and the second week would be dedicated to integrating the two and testing the end result rigorously, before presenting it to the client. Post that, feedbacks from the client were to be taken and work would continue till the project was satisfactory to the client. In all, there were 6 milestones in between the initiation and successful completion of the project. Each milestone covered a major chunk of the overall application and was delivered on time, without exceptions. The first milestone covered User Management, followed by Linked Accounts Management, Hubs Management, To-do’s Management, Vaults Management and finally Feeds Management.

Requirements

The GeekyAnts team would take up the responsibility to create the Front-End of the app with the Liviit team taking up the task of QA and testing. There were six milestones that were decided for the application development cycle.

Overcoming Challenges

The Agile system helped keep Matt in the loop of everything that went on with the project. Every small detail was conveyed and the constant back and forth communication was vital for this project’s success. One of the major challenges faced by the team was to understand exactly what Matt wanted his app to look and function like. Since this was a COPPA compliant project, another challenge was to define roles and permission for each and every type of member, but these obstacles were overcome with the solution oriented approach taken by the team towards the problem and Matt’s patience to explain his ideas in vivid detail.

In bird's eye view

AWS S3
Exchange Mail Server

Testimonial by the Client

As Seth Godin said, “Knowing when to quit might be the best lesson you can learn.” About 18 months ago, I made the tough decision to step away from the web app, despite the time and money invested. I explored mobile options, evaluated tech stacks, and searched for the right partner. Thanks to NativeBase and their TechTalks, I chose GeekyAnts—and today, I couldn’t be more satisfied with that decision.

Liviit

Case Studies.