DevelopHer Hackathon

DevelopHer Hackathon

DevelopHer Hackathon

Featuring design, information architecture, and userflow wireframes, implemented using Bootstap.

This weekend I had the opportunity to participate in the DevelopHer 2014 Hackathon, hosted by LinkedIn. I worked with three other ladies to create a tinder-inspired chatting app, with a goal of connecting people located in countries that are currently in conflict and who would otherwise never have a chance to meet.

The app is available for demo here: https://swipeapp.firebaseapp.com/
Our pitch video and live demo can be found here: http://youtu.be/gkVYq8NgDo0

I worked on the Front-End, UI/UX Design, Wireframe and Userflow, as well as the app description submission, below:
“What would life be like if we could break down social barriers and talk to people who would be considered our worst enemies on the street? SwipeChat challenges users to share their stories and engage with someone who they’ve never met with, and may be from a country their homeland is at war with. With an easy to use interface, SwipeChat allows users to log in with their facebook account and select a category they wish to discuss. After, the user swipes the different topics of that category — left for rejecting the topic and right for accepting the topic — and enters a chatroom with a stranger about the topic they both accepted. It is up to the users to decide whether to reveal their identity after chatting and possibly making a new friend.”

My team members and I worked on utilizing Firebase and Javascript to implement both the swiping feature, chat feature, and the facebook login, while also building static pages for the landing page, the categories page, and the reveal page using Bootstrap, HTML/CSS. All designs were done in Illustrator.

 

Here was our user flow (click to enlarge):
SwipeChat-wireframe-small

 

 

Here are some screenshots of the app in order of the user flow, along with our initial brainstorming idea:

SwipeChat -Landing Page SwipeChat - Category Select SwipeChat - Swipe Topics SwipeChat -Chatroom SwipeChat - Reveal SwipeChat - Ideal Sketch