Social Networks & Live Video Chat Sparkle

How to create own instant social chat

About Sparkle

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.

Our Expertise

Mobile App Development

Scope

Discovery phase
Product development
Maintenance
QA

Vertical

Social Network

Key results

600+ development hours

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

See what Altamira can do for you

Get in touch

The Challenge

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.

The Solution

Use cases

Lobby

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:

Name of the chat
Author’s avatar and name
Cover as a graphical representation of topics that is discussed inside the chat
Emoji that represents author’s mood
Set radius to display the approximate location of chat participants
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 socialise. In addition, we’ve integrated endless scroll instead of pagination thus we improved page loading speed and UX as a whole.

New chat creation

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.

Navigation

A simple sidebar that allows users to navigate through Sparkle Chat with ease.

A few extra options under your fingertips:

Notification settings in order not to miss new posts and chats within your range.
The option to log in under a new profile and make a fresh start.
Facebook sharing lets you reach new people and invite them to join your chat. This option encourages users to share Sparkle Chat with friends and therefore boosts penetration rate as long as we tend to download apps that were suggested by our friends.

Notifications

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.

Strive for excellence with Altamira

Join our community of successful customers, whom we helped to build and grow their businesses.

Get in touch

The Result

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.

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

Logo evolution

An idea that stands behind the application is “gathering sparks to ignite a fire”. Therefore we suggested a character logo so that users could identify themselves with those sparkles. This mascot also fits app’s first naming suggested by the client – “Fire chats”.

We started with black and white variations first in order to focus on graphics and not distract our client with colors.

Our client liked several options and we moved to the colored version. It didn’t take long to create a color pallet.

The associations were clear (fire, flame, match, flash, glow) as well as the colors behind them: red, orange, yellow, white, blue.

Colours

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

Fantastic working with team as usual. Really impressive work both from the development team, design team, and project managers. Super happy with the work of Altamira, especially in terms of quickly understanding our needs and transforming them into a product - we will definitely work with them again.
Ankit Desai

Case Studies