StoryBytes
Tool for Journalists
UX Research + UX Design + Creative Direction
Challenge
Our journalism and design class challenged our team to make a storytelling tool for journalists using GIFs. We wanted to find a more efficient way for media companies to share the news across their social media platforms.
Location
Northwestern University Medill School of Journalism
Tools
Adobe XD, Adobe Premiere, Adobe Photoshop
Team
Naeem Patel
Developer
Idrees Kamal
Developer
Emily Chaiet
Content Strategy
Justine Banbury
UX design/research
Market Research
1. Shareable Across Platforms
GIFs are not platform locked, and the same GIF is capable of being posted across all social media accounts (Instagram , Facebook, Twitter, iMessage, WeChat, LinkedIn..)
2. Versatile Usage
GIFs are typically associated with popular culture and memes, but some news organizations use them in a serious and informative way
3. Helpful Explaining Complicated Topics
News organizations use explanatory GIFs to animate complicated topics, and provide GIFs as visual elements to data-heavy news-stories
We also needed to look at our competitors. We wanted to know if there were other tools out there that had the same idea, and if there were, how could we improve them?
What services are other social media editing applications offering and how are they formatted?
Competitive Analysis
We conducted a competitive analysis to get as much information about the field as possible. Some key insights:
-
Most applications create GIFs which are oriented around pop culture or memes, not news stories
-
Most applications fail to provide any framework for creating original GIFs
-
Some competitors provide users with the opportunity to directly post their GIFs to their social media accounts
We talked to writers, social media editors, and industry professionals with the goal of wanting to learn as much as possible about their experiences in the industry. We were looking to learn about their needs, motivations and pain points in order to better understand how our tool might fit into the industry.
Key insights:
1. Keep It Short and Sweet
The industry has shifted away from long form journalism. Editors are encouraging keeping content as short as possible by using concise language and minimal context
2. Using Multiple Platforms Takes Time
All social media platforms have different structures, and editors take a lot of time to create unique content for each framework
3. Video Content is King
A link is not a sufficient way to promote a news product, and most journalists include a caption or multimedia for context to their article
Define
It was important to combine all of our interviews and define our user. We created two different personas, a social media editor and a journalist, who we envisioned using our product. Their personalities, motivations, work process and frustrations all inform our design decisions.
Personas
All of our research helped us craft a How Might We question:
How might we use GIFs to help create a more shareable product for social media editors to use to that they can engage a larger audience for their news publication?
Develop
Sketches sketches sketches sketches sketches sketches...
Our initial challenge while sketching was to find the balance between having too many guidelines that the user feels constricted or not having enough explanation and the user is confused.
Our initial idea was to create a sentence structure which would help the user break down their news story into 5 key questions.
1. Who is this news story about?
2. What is happening?
3. When did all of this happen?
4. Where did the news story take place?
5. Why is it important to the audience?
These 5 universal questions would allow our application to create a news GIF from the user's information.
3 cups
Flour
A sentence which prompts users to break down their news story into 5 captions
Slides to add a photo to each caption
Text boxes which disappear as the user begins typing
1½ cups
Butter
An option to easily share the GIF to social media with one click
These sketches led us to our first iteration of mockups, which we used to show how an example news story could turn into a GIF.
Usability Testing
We needed to see if our designs made any sense to the people who would be using them. We conducted usability tests and watched how our participants interacted with our initial screens. We got some valuable feedback to keep in mind before moving onto our next design stage.
1. Caption-Photo Confusion
Users had trouble understanding the transition from adding text and adding photos. They needed a simplified version which felt more natural.
2. Unclear Slide Structure
Users were getting confused how the slides were broken down. We needed to be more clear what each slide was meant to be.
3. Needing More Context
Some users were confused with the wording of our 5W questions. We needed to provide more context for the users to know how to fill in their captions.
The Process
The goal of this class project was to come up with an original solution to this challenge and create a working application. I followed my traditional process for this challenge and worked my way through the double diamond framework:
-
Discover
-
Define
-
Develop
-
Deliver
Discover
The initial challenge was learning as much as we could about GIFs. We wanted to research how different media companies and tech platforms were using this form of multimedia.
How are GIFs currently used in a professional setting?
We categorized the GIFs we found and got insights into how the topic influences the usage of GIFs as well as how the usage differs depending on the platform:
Employee at the
Chicago Sun Times
-----------
-----------
"
"
Employee at the
New York Times
User Interviews
"
"
High Fidelity Prototype Screens
Home Page
Users are provided context for what a possible GIF news story might look like when they enter their application and are able to see their past projects in one place
First Slide
Users are provided leading questions which help them know what information they should put on each slide.
Adding Photos
After the user writes their first caption they can add a corresponding photo to each slide.
Summary Page
Users are able to see a preview of their GIF before creating and sharing the file to their social media
Deliver
High Fidelity Prototype
Users will be able to turn their breaking news story into an informative GIF, a storytelling tool they can share across all their social media platforms. Using a 5 slide structure, user will create an easily digestible story structure to share any type of breaking news.
Takeaways
1. Patience Patience Patience
When we first started this project we had no idea what kind of tool we would be making. We spent weeks researching the competitive landscape and talking to people in the industry and I couldn't help but get frustrated with how slow the process was. Without solid ideas and sketches I felt like we were wasting our time.
This project taught me the importance of diligent research and patience with the process. As designers, we have to be comfortable in uncertain spaces, and learn to enjoy the process of being confused until everything finally comes together.
2. No Ego, Amigo
We went through so many iterations on this project that every team member had at least one instance where their ideas were completely shut down. Even after I would pitch an idea and the group liked it, there were many times where we would try it out and find flaws in the logic.
The challenges in this project taught me how to constantly find flaws in my own ideas. I have to let go of my ego during the design process, and look for problems with my own ideas to find the best possible solutions.
Next Steps
Ultimately, the goal is to have a working application which our group in Northwestern's KnightLab class can pitch to real publications. Our first two quarters working on this project gave us enough time to design and begin developing the back-end software for our ideas. We are currently working on finishing up the functional product.