Happy Hour
A digital mainstream media app alternative that focuses on positive, uplifting news.
Skills
UX Design, UI Design, Branding
TOOLS
Figma, Photoshop, Illustrator, InDesign, Diagrams.net
TIMELINE
13 weeks, Individual
Overview
With doomscrolling (the endless scrolling through bad news) manifesting as a habit of social media, Happy Hour is a news publication platform that offers an optimistic media alternative to the doom-and-gloom style of news perpetuated in mainstream media.
I don't know about you, but there was definitely a period in time (and maybe it's still happening), where all media could do was sensationalize bleakness. Whether it was the pandemic or the rising cost of living, there were no breaks to be caught.
For this project, I wanted to create a news publication platform that focused on positive, uplifting news. The world isn't all bad, and we could sure put in more effort to lift up stories that also show goodness. So, this is Happy Hour - my response to an issue of my choosing for a user experience and interface design course.
I don't know about you, but there was definitely a period in time (and maybe it's still happening), where all media could do was sensationalize bleakness. Whether it was the pandemic or the rising cost of living, there were no breaks to be caught.
For this project, I wanted to create a news publication platform that focused on positive, uplifting news. The world isn't all bad, and we could sure put in more effort to lift up stories that also show goodness. So, this is Happy Hour - my response to an issue of my choosing for a user experience and interface design course.
Product validation
The search for user data
Like all research, its best to first validate biases just to ensure that you're travelling in a needed and proper direction. To check my biases, which was assuming that people were tired of bad news, I conducted interviews and surveys with 5 individuals in a one-on-one format and 42 participants in a survey, all between the ages of 21 and 35 to learn about their behaviors towards social and news media. To summarize:
- Most respondents found it easier to engage with social media for longer periods of time than reading the news. On average, respondents were able to commit 2-3 hours to social media, while capping news to no more than an hour.
- Social media did not often influence a respondent emotionally or mentally, but in circumstances where it did, it left positive feelings.
- Only 2% of respondents claimed the news positively affects them, 43% felt neutral, while the remaining 55% felt negatively.
- Respondents enjoyed the social and sharing aspects of social media, features that are typically missing in media apps, which make it less enjoyable for them
- News content lacking in quality and factuality would be faced with apprehension.
Research artifacts from the user interviews and surveys
One point of interest to note was that respondents concerned themselves with the credibility of news pieces, if the context was staying informed, but if they were browsing with a leisurely mindset? Not so much. This lent to a particular dichotomy where the reason for consumption mattered and actually changed their approach for what was needed from the content.
The interviews and surveys also gave an understanding to what respondents felt were currently missing from news media. These findings helped me pivot my concept to integrate socially-driven approach that respondents positively view.
The interviews and surveys also gave an understanding to what respondents felt were currently missing from news media. These findings helped me pivot my concept to integrate socially-driven approach that respondents positively view.
USER PERSONA
Faces of prospective users
By contextualizing the user data, key pain-points and needs of this audience group were identified to create three personas for Happy Hour. Each persona listed below represents at a high level the findings that came out of the user interviews and surveys. Between the personas, they are all willing to connect with news media to stay informed, but vary in degree as contributers and consumers.
Three user personas crafted from the user interviews and survey data
Core components
Implementing what matters most
Based on all the data synthesized so far, five core components were established as the guiding principles to ensure the app was designed with user needs in mind:
- Bookmarking system that also enables folder structures
- Engaging with articles and other readers through comments and threads
- In-app and cross-platform article sharing
- An inbox for messaging friends
- Filter searching for articles using a tags system
workflow
Charting out the definition of done
Before committing to any fidelity of prototyping, I needed to work out each of the core component's interactive logic. As the actual app has five different features, for brevity, I'll be covering the process and evolution of the Bookmarking function, starting with the user flow below.
Here, I considered the complexities required of the Bookmarking function. Where would bookmarking appear? What tools and controls do users have? What methods do they have for retrieval? What is the definition of bookmarking?
Here, I considered the complexities required of the Bookmarking function. Where would bookmarking appear? What tools and controls do users have? What methods do they have for retrieval? What is the definition of bookmarking?
User flow and actions that can arise during the Bookmarking interaction
Journey Mapping
Following the Yellow Brick Road
I also created a journey map to evaluate a user's touchpoint within Happy Hour, identifying the different stages a user would take to progress through Happy Hour. By breaking down the process of content consumption, it provided an analytical overview that illustrates the resources and control a user has at each point to complete their journey.
User journey depicting the touchpoints through Happy Hour
Mid-fidelity prototype
From concept to first design
I was able to conceptualize the user flow and journey map into a series of five mid-fi (mid-fidelity) screens for Bookmarking. For efficiency, bookmarking can be initiated when an article appears without actually requiring the user to click into it, minimizing their need to be fully invested in order to keep it tabs on it.
When a user clicks on the bookmark icon, a pop-up appears for users to save the article. Clicking on the dropdown next to 'Save Article' will swap the layout for existing folders, while clicking the '+' will trigger the ability to create a new folder.
When a user clicks on the bookmark icon, a pop-up appears for users to save the article. Clicking on the dropdown next to 'Save Article' will swap the layout for existing folders, while clicking the '+' will trigger the ability to create a new folder.
Wireframes for the Bookmarking flow
Iterating for improvements
Conducting usability testing rounds
To test this user flow, I recruited six potential Happy Hour users for a usability test, measuring their interaction with benchmarks that utilized time-spent and number of clicks to determine their success. Their goal was to find an article of their choosing and bookmark it to folder titled 'Emotional'. With the data I collected, I would compare it against the minimum amount of time and actions needed to complete the task.
Usability results from testing the Bookmarking interaction
While my users were successful in their endeavors, there were mixed results where participants expected a different interaction response. A few had the idea that simply clicking the icon would complete the interaction of bookmarking. On the other hand, others had found the display of previous articles in the pop-up distracting and confusing.
How could I fix these mismatched expectation to meet with users who do value a the organization and customization of the existing interaction? To remedy this, I improved the logic of the bookmarking flow by prioritizing the expected outcome as the dominant result. Below shows the improved flow, where greyed out screens remain unchanged.
How could I fix these mismatched expectation to meet with users who do value a the organization and customization of the existing interaction? To remedy this, I improved the logic of the bookmarking flow by prioritizing the expected outcome as the dominant result. Below shows the improved flow, where greyed out screens remain unchanged.
Improved wireframes for the Bookmarking flow
To implement levels of organization, the bookmarking interaction was also split into two to distinguish the control behind the feature. First, a quick tap on the bookmark button would simply save the article. To contrast, a long-press would trigger the 'Select folder' rather than 'Save article' screen. All in all, the second screen was replaced to create consistency in the overall logic of the bookmarking process.
In practice, this would also need to be remedied with a first-time prompt that clues users into this power-feature as it cannot be expected that each user would perform a long-press for interactions without prior indication. This circumstance was added as the sixth screen.
In practice, this would also need to be remedied with a first-time prompt that clues users into this power-feature as it cannot be expected that each user would perform a long-press for interactions without prior indication. This circumstance was added as the sixth screen.
High-fidelity prototype
Introducing Happy Hour
After implementing the suggestions from the mid-fid prototypes, I moved the designs into hi-fi (hi-fidelity) before conducting another round of tests. In the end, there were a total of 3 design rounds and 3 user testing rounds. Below are the final results!
Onboarding
A brief kick-start to curate content to what the user would like to see the most, offering a personalized experience. It was important to also give users a choice on how quick their onboarding should be with the option to skip. If happiness is in dire need, it should be delivered stress-free!
A brief kick-start to curate content to what the user would like to see the most, offering a personalized experience. It was important to also give users a choice on how quick their onboarding should be with the option to skip. If happiness is in dire need, it should be delivered stress-free!
Exploring
Our users wanted diverse media formats, so I organized different content in an accessible manner through the toolbar. It is available from almost all screens on the app, so no news format is far from reach.
Our users wanted diverse media formats, so I organized different content in an accessible manner through the toolbar. It is available from almost all screens on the app, so no news format is far from reach.
Bookmarking
Articles can be saved for later and can even be saved to folder structures for those that like the organization. It was vital to create an opportunity for users to easily and quickly bookmark without having to hop into the article first.
Articles can be saved for later and can even be saved to folder structures for those that like the organization. It was vital to create an opportunity for users to easily and quickly bookmark without having to hop into the article first.
Commenting
As users noted, news media platforms often miss the mark on social spaces, so I stickied the comments section to the top toolbar for extra visibility. Now, users can share their own thoughts and discuss with others, no matter how far down the article they are.
As users noted, news media platforms often miss the mark on social spaces, so I stickied the comments section to the top toolbar for extra visibility. Now, users can share their own thoughts and discuss with others, no matter how far down the article they are.
Sharing
Happy Hour provides various options for sharing news articles, so senders and recipients aren't bound to the app. Happy news deserves to exist everywhere!
Happy Hour provides various options for sharing news articles, so senders and recipients aren't bound to the app. Happy news deserves to exist everywhere!
Citations
To support best practices for credible journalism, the author and contributor roles are listed at the end of each article. Citations are also displayed to support the credibility and sources of the reporting as needed.
To support best practices for credible journalism, the author and contributor roles are listed at the end of each article. Citations are also displayed to support the credibility and sources of the reporting as needed.
Reflections
To pull at the threads discovered along the way
Although Happy Hour was a huge undertaking being a solo-project from its ideation to execution, there was a pivotal moment in the research stage that I could've capitalize on, which could've made for a really interesting but undoubtedly different outcome.
In the end, I realize that I had created any news app, especially when I had to utilize borrowed content. But as I was reading through the headlines I had in the prototype, it made me realize that content heavily dictates the vibe of Happy Hour.
In my research, respondents concerned themselves with the credibility of news pieces, and that was something to press further on. What does credibility look like to them and how is that supported through the media they consume? Is it the practices behind the journalism methods? What design patterns could I have implemented further or created to foster credibility?
It is not uncommon for media outlets to be oriented somewhere on the political spectrum. There may have been an opportunity to create designs that help with transparency - a system that shows where the Author sits on the spectrum, social proof and accolades, community-voting on content accuracy - things like that.
That being said, I don't think I failed at the project. I did implement what the research informed, although I do find that the premise of "positive, uplifting news" really hinges on the content instead of design, so I definitely fell short with the conceptualization and not realizing there should be more of a design element to fulfilling that need.
All in all, this project really shows me how vital it is to ask the right questions in research and it makes for an interesting thought exercise that there was a tiny thread I could've pulled at to unravel a much different project!
In the end, I realize that I had created any news app, especially when I had to utilize borrowed content. But as I was reading through the headlines I had in the prototype, it made me realize that content heavily dictates the vibe of Happy Hour.
In my research, respondents concerned themselves with the credibility of news pieces, and that was something to press further on. What does credibility look like to them and how is that supported through the media they consume? Is it the practices behind the journalism methods? What design patterns could I have implemented further or created to foster credibility?
It is not uncommon for media outlets to be oriented somewhere on the political spectrum. There may have been an opportunity to create designs that help with transparency - a system that shows where the Author sits on the spectrum, social proof and accolades, community-voting on content accuracy - things like that.
That being said, I don't think I failed at the project. I did implement what the research informed, although I do find that the premise of "positive, uplifting news" really hinges on the content instead of design, so I definitely fell short with the conceptualization and not realizing there should be more of a design element to fulfilling that need.
All in all, this project really shows me how vital it is to ask the right questions in research and it makes for an interesting thought exercise that there was a tiny thread I could've pulled at to unravel a much different project!
The collection of all the wireframes between mid and high-fidelity
© jeffrey chan, 2024.