Time:-
24 hours
Research:-
6 hours
Design:-
6 hours
Role:-
Product Designer, UX/ UI Designer,
User Experience Researcher
Year:- 2016
Prompt
Technology has opened up new mediums for artists to be creative. Social media such as Instagram, Flickr, YouTube has opened up opportunities for artists to express their creativity through videos and photographs. But all of these platforms lack the ability to create and share Graphics Interchange Format (GIF). I want to build a platform that will allow users to create Graphics Interchange Format (GIF) and share with their audience in this platform.
Research
My initial thoughts and questions to supplement my research:
•Who is my target audience?
•What does a system consist of?
•Where can I draw inspiration from?
•Clean and minimal Design
•What is the problem?
•What could be the potential solutions?
• Who is my competitor?
• What are their strengths?
•What are my competitors' weaknesses?
•What are the areas of opportunities?
•How can I address the issues my competitors failed to address?
Interviewing creatives, visual artists, and content creators
I wanted to understand what GIF artists would like to see on a platform to create and share GIFs. I also wanted to design a system that would encourage non-artists to try the medium of creating GIFs to express their creativity. Therefore I started my research app so the system can be designed to meet their expectation.
My questionnaires:-
•What are some of the social media platforms you use to share your arts/contents?
•What are your biggest frustrations with these platforms?
•Is your creativity being limited by technology? If so, how?
•What is your opinion?
•What would you like to see in the design system?
Responses I've received:-
" If there was an app that would let me create GIFs with my phone and share it with my friends and family, it would be amazing"
— Crystal Ng
" There are websites that have millions of GIFs but nobody can tell who is the original creator of these GIFs. The artists are not being credited for their works"
— Samuel Gordon
" I want to use a platform that will let me build a portfolio using GIFs I've created"
— Valery Mejia
Identifying Pain Points:-
No Platform:- As of this moment, there are no application that supports GIFs.
Complication:- To create a GIF, users have to use video edition software to convert videos and export them to their desktop. This whole process can be eliminated by integrating a converter in the app that will save videos as GIFs.
Persona
User Personas created to summarize the user scenarios:-
Valery Mejia (Content Creator)
Valery is a collage artist. She makes collages by mixing different photos together. She does not have access to any editing software so she makes all her collages manually by cutting out photos from magazine.
Motivation
Valery is motivated by cherry blossom in spring. She loves how beautiful New York City is during the spring.
Frustration
Valery's biggest frustration is her work being used by others without her permission.
Samuel Gordon (Videographer)
Samuel is a graphic design student. He is always experimenting with new mediums to create arts.
Motivation
Samuel is motivated by silent films. He loves grainy videos and vintage films.
Frustration
Samuel's biggest frustration not being able to reach the right audience to share his works with.
Nancy Cortez (Dancer/Vlogger)
Nancy is a dancer. She loves telling stories. Her greatest mission life is to bring joy and excitement to people's lives through her work.
Motivation
Nancy is motivated by her drive to succeed in life. She wants to become a professional dancer.
Frustration
Nancy's biggest frustration redundancy. She suffers from ADHD. She has hard time staying focus and getting things done which requires her to work for a long period.
Competitive Analysis
Based on my target group’s feedback I wanted to study the other social media’s that offer similar services to their users. I wanted to understand what is it their strengths and weaknesses to gather inspiration from their strengths.
Instagram:- Instagram is an American photo and video sharing social networking service.
Strength:- Instagram allows its users to share their photos and videos with their massive community.
Weakness:- Confusing Algorithm. Doesn't give exposure to new creatives. GIFs not supported
Vimeo:- Vimeo is a video hosting, sharing, and services platform headquartered in that focuses on the delivery of high-definition video across a range of devices.
Strength:- Vimeo allows its users to share high-quality videos and use the platform as a platform to showcase their works
Weakness:- Not build to create an audience. Limitation of uploading videos. Premium quality requires users to make payments.
GIPHY:- GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs, reaction GIFs, unique GIFs, and more
Strength:- GIPHY has a massive library of GIFs. It is open to everyone to upload and share GIFs.
Weakness:- Not a social media platform. Not a creator-centered platform. No method of interaction between the audience and creators.
Design Consideration
•Convert video to GIFs:- This feature will eliminate the need of converting videos to GIFs using any 3rd party application or desktop software
•Convert multiple photos into GIFs:- This feature will allow users to upload photos from their phone and create stop motion and time-lapse GIFs
•Accessibility:- would allow everyone to use and benefit from this design system equally. Voice assistance feature has been considered to make the system inclusive for everyone.
•No Notifications:- Social media addiction can cause to harm to users' mental health. With keeping that in mind, I want to design a system that would not have the notification system. This can prevent users from getting addicted to the platform and lead a healthier lifestyle. .
Using guidelines helps me design better systems. Below are ADA-compliant web design standards.
•Contrast Ratio
•Don’t Rely on Color
•Label Forms Clearly
•Provide Feedback for Errors and Omissions
•No Mouse, No Problem
•Keep Navigation Consistent
•Simple Headings and Spacing
•Design for Different Devices, Views, and Screens
•Offer Alternatives for Consuming Media
•Give Users Control
Solution
GifRaf is a design system for a social media app that will provide users with a platform to create and share 5-10 seconds gifs. GIF stands for Graphics Interchange Format which converts videos into multiple photos where the videos are converted into a lossless file without any sound.
GifRaf will create a platform for the next generation of artists and creatives to explore their creativity in a completely new format .
The best GIFs of the week will be picked out by the Gifraf team and shared with the GifRaf's community universally to encourage new creators to create using this platform.
Information Architecture
Task Flow
User Scenarios
Persona 1
Let's bring Nancy back into the picture and see how she will interact with GifRaf based on her needs. Nancy loves making videos and creating content to tell her story. But she hates the process of editing videos. Her computer is slow which causes her computer to crash multiple times just to complete a simple task such as converting a few seconds of video into a GIF. With GifRaf, she can quickly convert her video and upload it to share with her audience
Persona 2
Samuel wants to make a stop motion video. He takes a bunch of pictures using his phone and then uploads them onto the GifRaf app and clicks on the Stop motion option. The app automatically stitches all the pictures together and uploads them as a GIF.
Sketches
In this stage of development, I write down random ideas and concepts that will be added to create the app and make it usable to its maximum capacity. After completing this stage, I picked out the ideas and outlines that will be used on the app and design the interface of the app using Adobe InDesign.
Wireframe
In the second stage, I outlined the logo design and transferred the main concept and look of the app to the computer using InDesign. This stage of design only gives us a rough idea of how things will look in the skeleton of design. Upon completing this stage, we can move on to the detailed look and design of the app and design the prototype of the app using Adobe XD.
High Fidelity mock-ups
login
home
home content
profile
profile zoomed
post fullscreen
search page
staff's pick
camera
Prototype
User Flow
This User flow shows how a creator can go to her profile to view her previously uploaded GIFs.
Usability Testing
Participants were asked to share their thoughts as they tested the prototype.
Some of the things that they have mentioned were:-
•It would be nice to add videos and photos alongside GIFs
•The app should have the option to add stories that can disappear after 24 hours of sharing
•A clear method to submit content to GifRaf team for "Staff's Picks" consideration
•Two different profile for audience and creators
Conclusion
Summary:-
The key features of the app include:-
•Creating a platform to upload GIFs
•Add multiples photos to create a stop-motion GIF
•Create a social media platform where creators can interact with their audience.
Challenges:-
•One of my main focus was to create a design system that is aware of mental health and social media addiction and prevent users from getting addicted to the app. In order to achieve that I eliminated the system of notification in the app.
Improvements:-
•Currently, GIFs are a format without sound. I would spend more time designing a format where GIFs can be created with sound. This will be a revolutionary step that will possibly create a completely new format of moving pictures.
•There is always more to research and space for improvement. I want to speak to more creators and users to get their opinion. I want to gather more data by interviewing more creator.