Introducing a responsive design to expand readership to the modern news consumer.
Client Overview
Nichi Bei is a nonprofit organization dedicated to keeping the Japanese American, and indeed all Asian Americans, connected through news and events. On their website, you can read articles, blogs, see hosted events, and subscribe to the Nichi Bei Weekly, their bi-weekly newspaper, to stay connected to Pan-Asian culture. Their drive to expand readership and communal engagement has led them to consider their site’s user experience to see if that may be the avenue to their goals.
The Details
Duration
2-Week Sprint
The Gang
Myself
Ashley Revales
Linnea Svahn-Jaccoma
The Tools
Figma
Miro
Airtable
Whimsical
The Methods
Business analysis
Heuristic Evaluation
Competitive and comparative analyses
Survey
User interviews
Affinity mapping
Prioritization Matrix
Usability tests
Wireframing
Prototyping
The Problem
Consumption of the news has changed, but Nichi Bei hasn’t changed with it.
The way people check the news has undergone a dramatic shift in the past two decades, and it largely has to do with the technological advancements that generation Z and generation Y engage with. Social media and short pieces dominate the world of news as attention spans have dropped and news updates have become available on the go. This largely has to do with the domination of mobile phones as the primary medium through which news is now consumed.
Nichi Bei’s current site is a comprehensive, albeit complicated, experience on desktop, but that same experience has not been tailored for a mobile device user. This means that they are missing out almost entirely on the largest age demographic of news readers today.
The Solution
An exercise in mobile primacy.
Moving forward our design should seek to engage that hitherto uncaptured market represented in mobile users. The goal will be to design for simplicity and efficiency to ensure that users feel that the experience is tailored to their interests, the navigation patterns are wholly familiar and expected of a news site, and social media sharing options are easily identifiable and accessible.
Research and Testing
Our Approach.
Heuristic Evaluation and Competitive & Comparative analysis
Getting to know the client and competition.
We first set out to familiarize ourselves with the client’s site, conducting a heuristic evaluation of their desktop experience to see what could be made more user friendly if anything. It was during this that we noted that their desktop experience was not at all changed when we visited the site via our mobile devices, which immediately drew our focus because we then knew that the site was not responsive. Next we sought to understand what a user would expect from a news site via competitive and comparative analysis. Major news sites, like LA Times and the New York Times, as well as smaller more niche organizations, such as The Japan News and Gothamist, were our focus. We noted, with mounting clarity in our design’s direction, that each of these had a different experience for those users who visited the site on their mobile device. From this information we suspected we knew what we had to do for Nichi Bei, but we needed to have a clearer idea of the why.
Survey and User Interviews
Discovering the evolving news consumption trends.
The next step, as mentioned above, was to determine the why, and this could only be accomplished through user research. We created a survey asking users about their news consumption habits, and of 34 responses we saw that 97% of them used their mobile device, with other mediums representing considerably small percentages. After this we selected 3 of the respondents for a follow up interview to gain more in depth insights into their needs. We discovered that they searched for news at varying times and for varying reasons, which told us that our design needed to be efficient and simple. These interviews also revealed to us the importance of social media in news sharing, as well as the value of targeted or tailored stories specific to their individual interests.
User Persona
Narrowing the scope.
With our interviews completed we next sought to sculpt a persona, which was done after a round of affinity mapping. Our target user, the Busy Browser, emerged from this exercise and would be our guiding light through the design process.
Usability Testing
Validation of the design.
The final step was usability testing, for which we had six testers, three of them being our prior interviewees. It was interesting to watch them interact with something designed for a phone, but on a desktop via the Figma mobile prototype function. To a one their feedback was qualified, explaining that their actions and moments of confusion could be connected to the aforementioned scenario. The world being what it is with the COVID crisis, we turned to roommates to test our design for us, and the results were disquieting in their positivity. When accessing the prototype on a mobile device, for which it was designed, there were no hiccups and no constructive criticism. The thoroughness of our research seemed to have resulted in a near iteration free design.
Deliverables.
Familiarity for the time constrained.
As the site was wholly unresponsive when we first encountered it, we designed from essentially scratch what the responsive design needed to look like to effectively engage our target user. Adhering to a single column layout for mobile was simply industry standard, as was the consolidation of navigation into a hamburger menu. The information architecture was determined through our extensive research on competitors, resulting in an experience that was simple to navigate, to read, and gave a sense of confidence to our busy user through its familiarity.
Sharing is caring.
As we had discovered from our user research, social media is a major factor in regards to news. We thus ensured that sharing was a function attached to each piece in a clearly marked fashion, and displayed at both the beginning and end. Through this readership would grow via each individual users’ own community.
An experience that seems to know you.
The last major feature we implemented in our design was to display articles and events related to prior or current searches. Our target user does not have the time, nor attention span, to constantly search for those things which interest them, so we made sure they simply didn’t have to.
Results and reflections
Accommodation.
In keeping with Nichi Bei’s purpose, we would want to build out a translation function to ensure that it was equally accessible to those readers who are perhaps less familiar with the English language.
Testing post-COVID.
As I mentioned earlier, the lack of constructive feedback was odd, to say the least. In a world free of COVID we would want to conduct many more tests in which we could observe interaction with the design on the device for which it was intended.
Keeping up with Nichi Bei.
Our design included a profile button, but during this 2-week design sprint we were unable to satisfactorily build it out to completion. This would be a next step for us in our design, and it would serve Nichi Bei in its business needs, as well as our target user’s desire to tailor their content.