Bonifire - Social Network
Bonifire is a social network concept that offers creatives a platform to share their works and WIP items, receive feedback and earn a reputation.
For the course "Interaction Design for Social Media" I was supposed to design a social network for creatives. The focus was clearly on the concept design. The goal was to find mechanisms to motivate people to contribute and interact while preventing negative aspects like spamming and low content quality. The central concept is that users give and receive feedback for their creative work to get feedback and improve. The motivation to give feedback is supported by reciprocity mechanisms and the opportunity to build reputation.
So after working out a concept, wireframes were created to show how the interface would look like. An optional part of the assignment was to provide high fidelity mockups to present the look & feel.
-
Wireframe of the user's news feed
-
Wireframe of a user submission thread with feedback
-
Wireframe of the challenge views
-
Wireframe of a user profile
-
Wireframe of the feedback request form
-
Mockup of a user submission thread
-
Mockup of a user submission thread
Features
- The system uses a point system with up and downvotes for contributions similar to reddit or StackOverflow. The system encourages upvoting good content instead of downvoting bad content.
- There are power users which can create challenges.
- Users who receive feedback are encouraged to return the favor (reciprocity).
- Users can set their points as a bounty to get feedback from users with high reputation.
- The profile can be used as a public indicator for expertise, like StackOverflow and GitHub profiles are used by programmers.
- Submissions get posted immediately if users gives feedbak to two other submissions. Otherwise they have to wait 24 hours.
Process

- Brainstorming and selecting an idea for the rough concept of the social network resulting in the concept of giving and receiving feedback to improve in one of the creative disciplines (music, photography, design)
- Feedback for concept from supervisor
- Creating personas and use cases
- Requirements and common problems of use cases, like user retention and content quality, were gathered. Afterwards those requirements were grouped and prioritized. Finally solutions were found and the requirements were re-iterated. (I made a small time lapse video of the session)
- All ideas were composed into a complete concept.
- Feedback for concept from supervisor was received and incorporated into the concept.
- Thumbnail sketches were drawn to have an overview of all screens and a rough layout
- Wireframes were created in Axure RP Pro and iterated to incorporate feedback. The wireframes ended up to include some high-fidelity components like content and pictures to communicate the concept better by showing examples.
- Finally, a high fidelity mockup for the thread screen was created in Photoshop to show the look and feel.
I used icons from The Noun Project: Camera, Feather designed by Jon Testa, Video Camera designed by Maurizio Pedrazzoli, Pinsel designed by Björn Andersson, Musik designed by Madebyelvis, Laptop designed by Steve Stomp, Speech Bubble designed by Thomas Le Bas, Star designed by Andy Fuchs, Trash Can designed by Herbert Spencer, Edit designed by Hugo Garduño, Like designed by Shmidt Sergey and pictures from Flickr: @Doug88888, Bastian Sander, Elvin, Matthew Smith, Janet Ramsden, Geraldine and Tambako The Jaguar