Group Fire

Apr 2016 - UX Design, UI Design

There are few places where you spend as much time as you do at the office. Our client saw this opportunity and invited us to bring our creative thinking in designing a solution that would help form communities  around fellow coworkers and also bring a fresh information channel for the whole organization. 

It happens more than often in big companies that you miss out on important information such as announcements, events or even birthdays. We've designed a mobile app that solves this problem by enabling you to post, chat, join events, groups, read announcements and much more, all this in the safe environment of your organization.  

section 13section 13

Wireframes

One of the most challenging part of the design process was finding a good solution on how to display different types of group content, such as posts, photos, files and members. Basically there was one big issue that we needed to address, where would we display this information to be well organized and at the same time make it easily accessible. 

During the process of testing different wireframe flows with a few subjects from our target market, we realized that we should pay more attention to the collaborative and practical aspect of this product. Meaning we needed to make it easy for users to navigate through photos, files and contacts of each group. 

So, we decided that making a less cluttered UI was not the goal for this product from start. But making it both a community enhancement product as well as practical tool for collaboration and sharing. 

wiremframe 2wiremframe 2

Authentication through SMS

Because the app will be used as a white label solution for more companies, the authentication should be designed to work efficiently for every organization, as a 2 factor process. The user enters the phone number, if the organization has the phone number on record, the user receives an SMS with a 4 digit pin code that he can use to sign into the app. 

Design

The overall design is atypical for a organization app, this was done with intent, having a user centered approach in mind. Because we wanted users to feel as they are in a comfortable environment, not far away from their favorite apps. 

section 111section 111

Because there were a lot of elements that we needed to add to the UI, we knew that making the design less cluttered will be a bit of a challenge. We've managed to balance this by using a bit of blue and red, combined with neutral colors, such as a white navigation and tab bar, that focuses the users attention more on the content and less on secondary UI elements. 

Join events

One of the most requested feature of the app was the ability to join events that were specific for the organization. With an admin side of the app, the community manager is able to create and track mostly any type of content that would be shown inside the app, such as events, announcements or groups. Events can either appear inside a specific group or in the main feed of the app.

Be a part of groups

You can request to join or be invited to join a group by the community manager. Post, create events, share photos, files and much more, all this within your group. 

Share your location

You can choose to share your location and see where your other fellow coworkers are. Useful for some organizations.  

Chat with others

In addition to other features, we've also designed an in app chat room where users can share messages, files or photos with their coworkers.

[unex_ce_button id="content_av4o7w9wo" button_text_color="#353535" button_font="custom_one" button_font_size="17px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="14px 40px 14px 40px" button_border_width="1px" button_border_color="#2d2d2d" button_border_radius="5px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#353535" button_border_hover_color="#353535" button_link="http://ponislab.com/projects/work/trippper-your-backpack-journal-3/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Next product[/ce_button]