Tribe Social

A social app about helping people create and maintain social circles

Market Research

Low fidelity Wire-frames

Wire-frames

Low fidelity Prototype

High fidelity Prototype

Site-map

Progressive Enhancement

Where

London, United Kingdom

What

Native Mobile App

Role

Designer Researcher

Quick Summary

Tribe Social is a social media based around creating and maintaining real friendship circles by bringing people with similar interests and a close location together.

The app also focuses away from the trying to have as many followers or friends as possible to focus on real and close friends.

The Problem

I felt that one of the largest problems at the moment is loneliness. While we live in an incredibly connected world more and more people are feeling lonely and less connected to the people near them.

Challenges

Create an intuitive and simple to use UI that can accommodate the many functions needed.
Create a cohesive interface for familiar and unfamiliar users.
To make the application fun and engaging to use.

The Goal

I believe that while in many ways technology can be the problem it can also be the solution. I felt that it would be great to design an app that can help create and maintain social groups that are real and useful in the real world.

Concept generation

I decided to layout the initial groundwork for the app concept and the things I wanted it to have.

An app for social good

To design an app that combats loneliness by:

Bringing like-minded local people together.
Assisting users in finding potential friendships.
Letting users organise social events.
Focusing towards group building.

Essential features

Social circles are to be small and not focused around getting as many followers as possible.
User accounts are real and on full display there is to be no anonymity.
Users can find potential candidates and vote if they can join.
This app is about brining people together so that they can then after hangout in real life.
A new tribe is created the moment two individuals are connected.
Users can be part of multiple groups.
The app is to focus on location, bringing people that live nearby together so that they can go to events together.
Users within tribes are to be a simular age.
Not for users under the age of 18.

Screens needed

After coming up with the initial idea for the project I needed to list all the features I wanted the application to have. Based on the initial ground work I decided that I needed:

A tribe selection screen (as users can have more than one tribe).
A main tribe home interface with a central chat.
Events pages.
A calender to view upcoming events.
Pages for finding users to add to the tribe.
A user account screen that others may see.
A live map that can show the user where other members of the tribe currently are and which indicates potential events and thier locations.
Direct messaging.

I wanted the design to be consistent, intuitive and easy to use.

I knew that the application needed many different screens for the many different functions and features. The main challenge therefore was how I would allow the user to navigate between them, figuring out what needed to be a separate screen and what could be combined together on the same page.

Sitemap

Low fidelity wire-frames

I created paper wire-frames to get a quick idea on how the pages are to be layed out, I used this method so I could create many frames in a short amount of time.

Wire-frames

From the paper wire-frames I created low-fidelity wire-frames in figma as a way of creating a closer representation of the final product.

Low Fidelity Prototyping

I linked the screens together to create a usable prototype that can be interacted with. This way I can test the concept and find any potential issues with the navigation.

High-fidelity UI Design

once the initial flow was complete, I started by creating a couple of the main screens of the app. I started by defining the fonts and colours.

Colour palette

Accent, primary, secondary, tertiary, background

#E39B0D

#2E2E2E

#53BAE5

#A4A4A4

#55A947

#EF5656

#F1F1F1

Font

Plus Jakarta Sans

Regular, Medium, Bold

AaBbCcDdEeFfGgHh

Logo

High fidelity mock-up

I created high fidelity mockups of the screens showing them as they should with all the colours, pictures and fonts that would be used on the final product.

High fidelity prototype

After designing the high-fidelity mockups I linked the screens togher to create a usable prototype that accuratly depicts the final product.

While the prototype closely resembles the final product I feel that more screens will be needed but felt that many were not necessary for the moment.

Figma Prototype

Website site-map

Site-map for the website version of Tribes.

Progressive Enhancement

When creating the website version of Tribe I immediately focused on getting all the features to work on a larger screen so users can easily transfer from one screen to the next. From the mobile app to the mobile browser to the tablet and to the desktop the design remains consistent. However I do feel that the desktop version could be improved and changed to make better use of the additional space.

Impact

I have had many positive responses from my peers about my project and the concept of it. I am very confident that this type of app is highly needed especially among the younger generations. Loneliness is a very big problem and only seems to be getting worse.

What I've learned

I learned a lot about designing for different screen sizes and the importance of taking the user flow and the icon design into account. Especially upscaling from mobile to web. I also learned the importance of a good sticker sheet or asset panel, I very much underestimated the scale of the app that I was designing so I found how important it is to use an asset panel when designing many screens as if you want to change something about the design later on you don't have to do it for every instance.

Next Steps

I would like to continue to develop the design of both the mobile and website version as I feel that there are many improvements that can be made.
I would like to polish the overall visual design to make it more aesthetically pleasing.
The website version needs to be improved and changed to be more accommodating to the larger size.