Level 3: Round and around we go!
Working in a team of 3 UX Designers, the project brief entailed designing new feature onto an existing site. The design was based off business research and user research. Personas were created to showcase the journey of performing a certain task. The prototype was then tested by users along with iterations.
Disclaimer: This was a class project in learning about the methodologies of UX Design. And has no affiliation with any of the websites mentioned.
Brief
CLIENT: Giphy — database and search engine that allows users to search for and share animated GIF files
PROJECT DURATION: 9 Days
TARGET DEVICE: Desktop web app
OPPORTUNITY: To create a new functionality that allows users to make their own animated GIFs.
Process
Research
BUSINESS ANALYSIS
We wanted a better understanding of the business by looking at user goals and business goals of three of our competitors.
Here were some findings:
- Giphy has a very unique niche in growing its Artists community
- Tumblr has many means of making revenue without affecting the way the community creates their content
- Imgur has a strong community that share through images
- Gfycat provides a better means of faster web viewing
The takeaway from these findings is that the objective for GIPHY is to grow the user base.
FEATURE ANALYSIS
We looked at four online GIF creating websites to see what the best features are in creating a GIF.
The findings were that each website offered different functionality:
- Make-a-GIF had simple functionality with limited options unless you sign up for PRO
- Imgflip provided lots of functionality however had uploading limits when creating a GIF
- Gifyt had a great UI and was very unique with the main task of using youtube links to create gifs
- Gifmaker provided lots functionality however was difficult to follow with no clear instructions on how to navigate the site
SCREEN FLOWS
HEURISTIC ANALYSIS
The Nelson heuristic analysis provided deeper meaning and understanding of what kind of GIF-makers to create for the prototype. The websites that had simplistic layout and easy to follow allowed a very positive experience for the user with minor issues. Make-a-gif provided limited options unless the user paid for PRO account. Gifyt was great in that it was very task orientated focusing on youtube link for gif creation. However the site had minor issues with the caption not being in the right location once the image was ready to be shared. Imgflip provided more freedom to create, however was limited by the quality unless user paid for PRO account. Gifmaker had the most issues. It was very difficult to navigate through the site. When trying to create gifs some functionality lead to error prompts or offered no feedback, so it seemed like the site was not working.
This provided great insight for best practices for the GIF creating prototype. And the issue to avoid by providing only what is necessary with the task at hand.
CEO INTERVIEW
We had the pleasure to conduct an interview with Alex Chung to get a better understand of the Giphy brand and business goals of the company.
SURVEY & INTERVIEWS
A survey of 10 questions was sent out to get a better understanding of people who created GIFs. 68 responded with 14 possible contenders for the interview. 6 interviews were conducted.
Here were some insights from the interviews:
“I get ideas for GIFs from TV, movies and shows.”
“I wish that there was a way to make that perfect GIF for every situation.”
“I like creating my own original content for GIFs but it requires a lot of time…”
Analysis
PERSONAS
Affinity mapping all the research lead to the creation of our personas.
Each persona had different level of experience with creating GIFs. Lisa is an expert, Sally is a Novice, and Jacob is an intermediate.
A second affinity mapping was performed to validate the personas and to see what features are needed for the GIF-maker.
From the prioritization of our features, the three main areas that our GIF-Maker needed attention for the creation of our wireframes were:
- Uploading Page
- Editing Page (Basic & Advance Functionality)
- Sharing Page
Sketching & Ideation
Low fidelity sketches were created from the three areas of focus for the GIF-Maker.
Testing & Iteration
Our Prototype went through 3 iterations. Here were some of the changes at each step:
FIRST ITERATION (3 Testers)
- Creating more distinction of the upload button when logging in
- Changing the browsing screen as tester were confused by the icons
SECOND ITERATION (8 Testers)
- Some elements were revised for consistency
- Last screen redesigned to promote sign-up
- Some buttons were renamed to clarify language
THIRD ITERATION (3 Testers)
- Share page needed to be redesigned (Next Steps)
WIREFRAMES
GIF-MAKER
STORYTELLING
CUSTOMIZATION OF CONTENT
Prototype
INTERACTIVE PROTOTYPE
Lisa was really excited when the Supreme passed same sex marriage in all states on June 26th. She wanted to express her feelings of this news and what better way than creating personalized GIF! It is a powerful way to start a conversation.
Next Steps
SHORT TERM:
- More testing in order to understand the best way to promote advantages of signing up
- Test the proposed storytelling feature and user profile customization
- Fix filtering: remove repetitive/duplicate GIFs
LONG TERM:
- An opportunity to engage professional GIF-makers. A set of advanced GIF-editing features may be designed if it adds value to the business
REFLECTION:
I really liked how we were able to continue to apply and build on the lessons we have learned from in class. We were armed with an arsenal of tools with all each phase of the project. It was also very exciting to finally work in a team as this allowed more creativity.
Some key takeaways in working with team:
- Establish ground rules early so everyone is on the same page
- Openly communicate any issues or concerns
- Be patient and know that everyone has a different approach
