Scene 1
Understanding the problem
Current Issues
Social media was created to connect with people, share information and spread awareness. Today, social media boasts of millions of users across the world. While the positives have been many, the negatives are catching up too.
When it comes to important information or news, traditional media is now a joke. Social media was touted to replace traditional media with quality content. However, that has not been the case. Social media is mostly filled with memes, jokes, fake news, hate speeches, trolls, etc. From a personal point of view, I feel social media has lost its credibility of providing quality information.
Memes, Jokes, Sponsored
Content
Legitimacy of information
shared
Generic and redundant
content
No platform to talk about
local issues
Overview of the current issues
Target User
“ As a user I want to stay updated on any stories, events, emergencies or any petitions rolling around. I should be also allowed to share the same”
Occupation
Graduate Student
Background
Ron Weasley is a Computer Science graduate currently studying at Steven’s institute of Technology. He is an Artificial Intelligence enthusiast and wants to give back to society. In his free time, Ron, like any other 24 year old, browses social media
Frustrations
Despite being active on social media, Ron often misses out on events happening around him. He also complains about the amount of hate speech and fake news that starts trending on social media. He wished there were more sensible posts on social media.
“ This application should differ in content shared but not differ much in UI. Reason behind this is I don’t want to spend time in getting used to UI and navigation controls”
Background
Sara Parkar is a climate activist based out of New Jersey. She spent most of her time in school by participating in volunteering work. Since then, she has devoted most of her time leading an NGO that actively works on the ongoing climate change crisis.
Frustrations
Sara’s biggest gripe with social media is that important information regarding emergencies and sociological stories get pushed down in the pile of spicy news. Not a tech savvy person, Sara gets frustrated if an app is too complicated to use.
Scene 2
Brainstorming the solutions
Setting Goals
Engaging UI
“As far as the customer is concerned, the interface is the product.” - Jef Raskin
Fresh structure
We wanted to provide the users with a fresh structure that helps in distinguishing our product from the competition
Quality content
Main focus of this platform is to provide genuine and informative content. Formulating a way to control that was a major decision
First Draft
Low-fidelity wireframes
We constructed some "paper prototypes" to denote the flow:
Landing & login page ➝ Home Screen ➝ Add story
Landing & login page ➝ Home Screen ➝ View story
Landing & login page ➝ Home Screen ➝ FAQs
Low fidelity prototypes to show a general flow and UI components of the website
Scene 3
First reviews
The crowd
We showed our prototypes to a small group of 15 people consisting of friends and family members to get their feedback on our product. Here is what we found out from the survey
15
People consisting of friends and family
What worked?
- Acceptance and appreciation of the concept
- Good amount of content type to choose from
- Social media like reactions to content and ability to comment
- Option to report fake content and having a low threshold for removing them
What didn't?
- Tile based layout isn’t attractive and will take time getting used to
- Should differentiate content with different colors
- Provide quick access to emergency contacts
- A more Twitter-like feed would be easier on the eyes and will make the platform more attractive
Scene 4
Plotting the comeback
Rectifying mistakes
After getting the feedback, it was time to hit the drawing board again and think of ways to improve our product. The main goal was to not completely drift from our original idea.
We decided to tweak some design elements and decided to create high fidelity prototypes, since we were confident that our decisions would be welcomed.
It was a gamble, but since time was running out, we decided to take a shot and it was probably the best decision we made during the whole project.
Quick decision making
With time being a major factor, we decided to take the gamble with designing the high-fidelity prototypes.
I was in charge of doing this entirely. I thought to myself, that this is the best and the only chance to show my skills as well as win over the people with an attractive and easy to use prototype.
My primary and only tool was Sketch. I decided on a color scheme for each content type and visually imagined how the final product should work. This helped me immensely in designing the whole product.
Engaging sub-text
We decided to fall back to a familiar scroll-based structure for our content to make it look more “social-media-like”
Call to action button
We decided to fall back to a familiar scroll-based structure for our content to make it look more “social-media-like”
Scroll structure
We decided to fall back to a familiar scroll-based structure for our content to make it look more “social-media-like”
Quick contacts
Very few of our users actually preferred to click their way through to emergency contacts. We decided to bring them to each page.
Colors
With a variety of content type, we decided to use distinct colors that would not only make the platform more attractive, but easily understandable for the users to distinguish between post types.
Common form elements for all
Since we were having 4 different categories of posts, we wanted to keep the base structure of the form consistent and add only relevant fields as per the type of post.
Events
Create events that are likely to create an impact and may go unheard on a traditional social media website. Control the date/time and no. of entries.
CTA - Register
Register for events with a click of a single button
Emergencies
Post about urgent requirements, reliefs, donations, etc using emergencies
CTA - Mark as important
Marking emergencies as interested will make them appear on top of other posts to gain more priority. Use comments to further provide details.
Petitions
Create petitions and try to bring a positive change in the world with the help of others. Control the no. of signatures required for a successful petition.
CTA - Pledge support
Sign petitions with a click of a button and contribute to a greater cause
Stories
Post unheard stories that traditional media would not cover and make people aware about them. Can also post anonymously to avoid hate crimes.
Like
Basic ability to like a post. This was done to give the app a familiar social media look
Fake
To report fake content. More fake reactions would lead people to not share it further
Spam
For content like memes, jokes, etc. so that people develop a more serious posting culture
Hate speech
This is done to alert people that a person is trying to promote hate speech
Monitor posts
Posts with reaction to view scores of over 40% are displayed here. Admin can review and remove posts he finds inappropriate. User would be given a warning. 3 warnings would ban a user.
Showing credibility
We wanted to keep this application as moderated as possible and to give the users a sense of integrity.
Scene 5
Pack-up
Reactions
The gamble paid off. The new design was met with positive responses and was approved by our professor too. Viraj and I developed the whole website together. He did the backend and I did the entire front-end development.
It feels good to see your design come to life. My experience in front-end development made it possible to bring 90% of the project to life. Despite the tight time constraints, I feel this was a big achievement, considering I was the only one doing front end.
A small demo of the live version can be found on this link:
https://youtu.be/tiDd9nVLbbAReflection
Despite getting off to a bit of a rough start, we managed to come through. A little more research and a better user story at the start would have smoothened the process.
A bigger, and a more design focussed team would have taken this project a notch above. Nevertheless, it gave me an opportunity to take the load and gauge my own abilities.
Learnings
- Led the entire process of ideation, planning, design, and front-end development.
- This was my first design project.
- Learnt a lot about user-centered design, research, and feedback.
