At the end of our design studio we aligned on a few potential s…
Tyler Burton
UX Designer
Product Designer
UI Designer
Happs is an early stage startup with the goal of disrupting the way live news is produced and distributed. It leverages a global network of contributors, independent journalists, who can livestream from the Happs mobile app at any time. Story ideas and potential contributors are sourced from a "virtual newsroom" and Happs producers work to bring these stories to life. Initially, Happs leveraged Slack as a temporary solution for this newsroom, but as their community grew they eventually needed to design and build a bespoke product for this specific purpose.
Company
Happs
June 2019 - March 2020
Contribution
Lead Product Designer
Team
Head of Product
2 Full Stack Engineers
2 Research Interns
4 Broadcast Producers
My role
I led all design efforts on the project including discovery, ideation, design, prototyping and user testing.
The challenge
Happs had already established a growing community of passionate contributors that were regularly pitching story ideas via Slack. We first needed to extract insights from this community in order to understand what was working and what additional features were lacking. We wanted our community to transition into this new product as smoothly as possible and start collaborating with our production team on quality stories.
Problem Statements
Contributors are not effectively using the Slack community to contribute to the development of stories, causing the quality of our broadcasts to suffer.
Broadcast producers are struggling to find the best stories. They also lack the right tools to develop the stories they select for broadcast.
How might we...
...build a bespoke virtual newsroom solution?
...smoothly transition our community from Slack?
...improve the story pitch process for the contributor?
...surface the most interesting and relevant stories to our producers to be considered for broadcast?
...make it easier for people to explain Happs to other potential users??
Discovery
Research Methodology
We aligned on a qualitative approach to better understand the wants and needs of our Slack community and identify pain points as well as potential solutions for our product.
12 interviews with very active users
8 interviews with new or somewhat new users
2 Happs producers were interviewed various times throughout round 1
Research analysis
Three key insights emerged during our research that led us to three opportunity areas worth exploring:
Key Insight #1 - New users are unclear about how to start participating.
There is somewhat of a learning curve to the Happs process, new users of the Slack community don’t know where to start or how they fit into the overall equation.
“I love what Happs mission, but the Slack community is just overwhelming to me. I’ve used it before for work, but I’m really not sure what you guys want me to do in there.”
Adam Lucente, Freelance journalist based in Iraq
Key Insight #2 - The majority of users expressed a desire to establish a personal identity within the community.
The biggest reason for users wanting a social identity on Happs is to showcase their contributions that have lead to broadcasts.
“I’m proud of my pitches that have turned into broadcasts. I have them all bookmarked and saved”
Lucia Aybar, Architect and Happs Community Leader in Dominican Republic
Key Insight #3 - Producers need an easier way to find, keep track of and develop promising stories.
The virtual newsroom should surface interesting stories that are garnering a lot of interest from the community to our production team. There needs to be a way for our producers to flag and keep track of these stories as they develop.
“Sometimes Slack is like a firehose, I try to catch all the pitches that have potential but I know I’m missing some.”
Andi Johnson, Happs Producer in Los Angeles
Ideation
Design Studio
In order to generate a large amount of viable solutions to these problems in a short amount of time, we conducted a design studio with our whole team. Each participant was encouraged to sketch proposed solutions very quickly, aiming for quantity over quality, to explore a range of ideas and generate creative solutions.
Round 1
8 sketches in 8 mins
Present ideas, feedback
Round 2
2 sketches in 10 mins
Present ideas, feedback
Solution #1 - Community Education
Based on our insight that there was a lack of understanding in our Slack community, we created educational content that would be served to new users of the platform.
We created an introduction video featuring one of our founders David Neuman. I wrote a script and in true startup fashion, we made a teleprompter out of a shoebox, some string, a mirror and an iPad.
We also designed an onboarding overlay that would appear on the home screen, pointing out key features and explaining functionality for first-time users.
We also did some additional ideation around how we might redesign a contributors initial experience signing up for on the platform.
Solution #2 - Newsroom Feed and Broadcast Development
The solution we came up with for the feed/timeline addresses multiple needs of our producer persona as well as contributors.
Contributors can compose a pitch in multiple forms (text, link, photo and video) and that pitch can be voted on by the community after posting. Pitches that garner a lot of attention from our community are surfaced to our producers who can flag them and develop the story all the way through to broadcast.
Solution #3 - Newsroom Feed and Broadcast Development
It was clear that our users wanted to establish an identity within their community, they wanted a role and to showcase how they contribute to the Happs mission. We created a basic profile for V1, a chance to establish this identity, and as a primary feature of these profiles we included an activity feed. The activity feed would be a chance for users to show off each of the stories they have been involved in. We would eventually gamify the social features, create a badging system to reward users for their accomplishments. We also experimented with showcasing contributors on social media and designing shareable “Baseball Cards” for key participants in our newsroom.
User Story Mapping
Our next step was to drill down deeper into our possible solutions. I felt that a user story mapping exercise would be the most effective use of our time. The final product of this would be a clear path for our design phase and a useful backlog for our engineering team.
The map consists of three layers: 1. User activities (orange/yellow) which would serve as the backbone 2. Tasks (blue), and 3. Sub-tasks or details (pink).
Description of an activity that a user performs that could include multiple steps.
The potential steps the user takes during an activity.
Each feature that needs to be designed and built.
During the course of a week, our team set aside an hour or two per day to focus on the user story map. By the end of our last session we had a very clear roadmap of what needed to be built.
Here is an actual example of some of the post it notes from our exercise.
Design & User Testing
During the course of three weeks, I designed the entire UI for the Happs Virtual Newsroom. We worked in agile sprints, our developers were in the same room as me every day which made things a lot easier.
User Testing Methodology
We conducted moderated usability testing of our first prototype with both contributors and producers. We used the following metrics:
Task success rate (behavioral, quantitative)
Overall system usability (attitudinal, quantitative)
User pain points & needs (attitudinal, qualitative)
Findings
81 A rank (SUS score indicating the usability of the product)
86% of tasks were completed successfully
22 unknown issues were caught before product rollout
Users felt confident using the product and feel like it is a major upgrade from Slack
Users were unclear about how to compose their pitches, how to word it and what to include. (This finding led us to add prompt text to the compose window, explaining how to compose a pitch.)
Users want the ability to share photos that we could potentially use during livestreams
Takeaways & Impact
Working in an agile and collaborative manner was a great way to make sure that there were no surprises within the development cycle. Our engineers were very accessible and worked closely with us on exercises like user story mapping and also made themselves available to discuss UI nuances during the design phase.
This project emphasized the importance of validating decisions with users along the way, our user testing validated a lot and shed light on a lot of small details that led to a polished product upon launch. We were lucky enough to have a group of passionate users that were willing to help us at every step. The only thing I would have done differently is try to recruit more new users of our Slack community during research because the insights we gained from their feedback proved to be the most important.
Project impact
The Happs Virtual Newsroom product would eventually serve as a pivotal part of our pitch to raise a post-seed round of funding. In June of 2021 Happs successfully raised a round of $4.7 million.
