SPARKLE

How to create own Social Instant Chat

Story behind

The smartphone can be a great time killer while waiting for a bus or a friend. You can dive into a game or scroll Facebook newsfeed. Sparkle Chat aims to transform time killing into time spending by preserving the fun and bringing new connections.

Here you can find public chats going on nearby or at your exact location and join them. Turning strangers into neighbors can bring a lot of benefits after all.

Sparkle Chat is super easy to join and dive in. You can login via Facebook to find a party nearby or a lunch buddy. Sparkle lets you create as many chats as you want and keep in touch with people you liked for as long as you are interested in.

The client came to us with only an idea to connect people nearby with a chat when they need to kill time. We grew this idea into something bigger, a social network where you can easily turn strangers into neighbors.

0

development
hours

1
2
3
4
5
6

Lobby

use cases

Since the main purpose of Sparkle Chat is to socialize with strangers we created a Lobby. This is the first screen user encounters after login.

Lobby displays all chats within a set radius around the user. The radius is set upon chat creation and grants access (becomes visible) for those who are inside its range.

Each of chat units contains:

1 Name of the chat.

2 Author's avatar and name.

3 Cover as a graphical representation of topics that is discussed inside the chat.

4 Emoji that represents author's mood.

5 Set radius to display the approximate location of chat participants.

6 Number of participants and posts inside the chat.

While browsing Lobby user can see new chats appear instantly on the screen with no need to refresh the page. This way we made sure that users won't miss new opportunities to socialize. In addition, we've integrated endless scroll instead of pagination thus we improved page loading speed and UX as a whole.

NEW CHAT CREATION

use cases

In order to encourage users to be more active, we've created a straightforward posting screen where they can start a new chat in a few clicks. Moreover, we do not limit users from deleting chats they have created previously, so they can end the conversation at any time.

5 fields are filled in seconds:

Photo: You can either snap a picture of something around or upload from your camera roll.

Set of smileys: This is your mood. We offer a rich set of emojis, but it's up to you whether to fill this field or leave it blank.

Subject field where you can set topic for a future conversation: question, request or an invitation to the party.

Location is an optional field in case you are interested in targeting specific audience and discovering your location. Or you can leave it blank and stay completely anonymous.

Radius of chat's coverage. This option sets the range, within which chat will be available to users.

Notifications

use cases

According to the latest UX surveys, people are annoyed with numerous notifications they receive. In some cases, such obtrusiveness may become a stop factor and lead to the application removal. Hence we dedicated a separate settings screen to manage Sparkle's notifications.

Unseen or disabled notifications are collected on "Notifications" page inside the app.

Wireframes

The development process starts with wireframes design. At this phase, we define navigation routes and app's major screens, so we could direct users to the most important features of Sparkle Chat.

Those are Posting and Lobby. Hence we ensured that these stand-out features appear on the first screen.

Report and Comment functions are tied to swipe event. This way users are not encouraged to use chats for trolling and flame wars. However, these functions can be used to flag offensive or malicious content.

NOTE: According to Apple Guidelines, apps with user-generated content or social networking services must include report or block mechanism. Otherwise, the application will be banned from submission to Apple Store.

After a full set of wireframes was created we moved to the designing phase of Sparkle Chat development.

Development

We took the Scrum method of Agile software development with 1-week sprints.

Before each milestone, we had a meeting to go through the upcoming sprint, in order to ensure that each team member understood how the feature should work, to discuss how much time it should take and what were the expected results.

Our Quality Assurance team performed testing at the end of each development sprint. After QA we passed test version to the client for an Acceptance Test and then moved to the next milestone.

By moving this way we came to final delivery of Sparkle Chat and its submission to Apple Store in short time.

Technologies

iOS
We've developed the iOS version of Sparkle Chat first. That gave us a 1 billion user base from start.

Language:

  • Swift 2.2

Frameworks:

  • Core data
  • branch
  • Helpshift

sdks:

  • Facebook sdk
  • FacebookSDK
    The framework used to add Facebook's authorization and share options.
  • Shopify mobile sdk

Libs:

  • Pbj video player
  • Flanimated image
  • socket.io
Web Socket Connection
Is a two-sided communication protocol over TCP connection that lets browser and server side communicate to one another. Web Socket connection facilitates the real-time data transfer from and to the server.
Web Socket
connection
REST Backend API Requests
It is an architectural approach to the communication process between client and server side. REST simplifies the communication between two sides and gives space to scale server and add new features to the app with no worries about client side.
REST
Backend API
Requests
PUSH
Notifications
AWS
Amazon Web Services is a set of cloud-computing services the can be used instead of creating your own physical server infrastructure. AWS provides a cheaper and well-developed computing infrastructure for hosting the server side of websites and apps.
Elastic Compute Cloud
One of Amazon Web Services that gives in rent virtual computers to run applications. Elastic Compute cloud provides the option to change the geographical location of instances depending on the location of its users in order to reduce the latency of application.
Elastic computed cloud

Real time delivery

Language:
  • javascript
Runtime environment:
  • node.js

Backend

Language:
  • php 5.6
Framework:
  • Yii2
Massaging Broker
RabbitMQ is open source massage software that accepts stores and forwards messages. Solid and straightforward.
Messaging broker
rabbitmq
relation database service
MySql 5.6
Apple Push
Notification
Service

Color scheme

The color scheme for UI was determined by logo's palette. However, we wanted to enrich the color scheme to get closer to the metaphor of fire.

We took decision to go with gradients but to make it still and "eye-friendly'. Shadows of orange and yellow were set as main colors for the gradient.

The background color was set to white to make it comfortable for reading. (According to physiology research, a white background is the best for eyesight so we stuck to it.)

As well as fire can't burn without an oxygen we selected a blue as a complementary color to contrast with the orange theme and white background. This way we could drive user's attention to action buttons.

FEATURES & ACHIEVEMENTS

Huge boost in app downloads starting from the first days of app release.

Only positive feedbacks on the functionality of the application.

We've continued the development upon app release and added new features to meet user's feedback.

Instant
messenger

Facebook
signup

Push
notifications

Photo
sharing

Geolocation

Emoji
library

FEEDBACK

Order Similar Project

Just contact us and we will do the rest!