Social Media App For Liviit

About the Client

After running a relatively simple 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 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.

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 devise 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 these design principles, we had to think about what we can do to apply them in use.

UX Challenges

The initial design of the app served the purpose of being used only on the desktop. There were many major features that needed to go onto the mobile app keeping in mind that the new design does not lose its touch. With so many features, one could only think of an app as a combination of multiple apps 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 with a good visual content.

UX Goal

To create a usage standard and logic in the way that the function of the app is 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. The user could also control and navigate their kids to what is the most important and block to what is not.

Main Features

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.

High-fidelity wireframes were later done to visualise and check the whole function of the app. This has given us a better view of the app functionality.

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 were 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 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.

Client Testimonial

The old Liviit was designed to be deliberately simple from a UX point of view. Going back 8+ years ago a responsive web app with Bootstrap and Rails was the way to go but times changed so quickly and mobile-first took over. The GeekyAnts team I think at the start of the Liviit 2.0 journey understood the general concept but as time has progressed they have learned more intimately the complexity of what is actually required. This to me has always been the missing link with my previous dev team.

• Understand the concept
• Appreciate what is required
• Streamline the design
• Communicate the value-add options
• Mutually agree on the solution (function by function, feature by feature)
• Deliver a much better end result that maintains simplicity but with more functionality.

In the words of Seth Grodin ‘knowing when to quit might be the best lesson you can learn’. I made the decision 18 months to quit the webapp forgoing lots of effort and of course money. I researched the mobile options, endless tech stacks, online tutorials and also who could help me deliver the solution. Thanks to NativeBase and all of your TechTalks. I chose GA and at this point in time I could not be more pleased.

Bird’s Eye View

• AWS S3
• Exchange Mail Server

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.