DESKTOP TO MOBILE DESIGN
Our National Conversation
UX Designer
Figma
To create an app that gives users the ability to freely navigate news articles from the perspective of all political affiliations, challenging the bias of specific news organizations. We were tasked to start with Desktop designs and later create mobile designs.
Create a user-friendly experience for effortlessly navigating news articles from a variety of sources.
Increase awareness of the differences in media coverage but also help readers recognize media biases.
Provide a space where users can read and contribute well-researched solutions to both national and global problems, empowering them to be a part of meaningful change in our world.
As we kicked off the project, we had some valuable input from the CEO regarding our target audience, which primarily consisted of college-aged users. While this input was undoubtedly helpful from a business perspective, we felt the need to truly get to know the people who read news articles and were willing to engage with a news platform. To dive deeper into our potential user base, we decided to run a survey with questions aimed at understanding the typical user demographics and uncovering the reasons behind varying levels of engagement with news articles. This allowed us to bridge the gap between our initial assumptions and the real behaviors and preferences of our audience.
Our findings indicated that our usual readers tend to be between the ages of 25 and 55
Their degree of engagement with news articles largely depends on how relevant the content is to their personal interests and concerns
Accessing news articles from different sources often involves dealing with challenging obstacles, such as paywalls, intrusive ads, and complicated navigation methods
With a richer understanding of our users, our team ventured into crafting two distinct user personas to paint a more vivid picture of our target audience:
1. The Casual Reader: This group comprises college-aged individuals who occasionally peruse news articles, typically doing so when the content resonates with their immediate interests.
2. The Avid Reader: Within this category, we encounter middle-aged readers who have developed a regular habit of consuming news articles. They turn to reputable sources like The New York Times for their daily dose of news updates.
Casual Reader
To truly grasp our users' intentions, our team took on the task of creating user stories and user flows. This allowed us to vividly express the practical benefits of each product feature and delve into the reasons behind why users sought specific functionalities.
As a user of the app, I want to feel confident that the news articles I'm reading come from reputable sources, ensuring that the content I engage with is reliable and well-sourced.
As a news enthusiast, I want to have the capability to switch between news sources effortlessly so that explore various viewpoints on a specific topic and gain a more comprehensive understanding.
As a user interested in staying informed, I want an app that will help me easily discover news articles that are directly relevant to my interests, making it convenient to access content that matters to me.
User Stories
With this valuable knowledge in hand, we pressed on, building the core architecture and promptly transitioning to our initial design sketches, imagining the app's potential look and feel.
We started the design process by focusing on mobile interfaces and, along the way, pinpointed the key features that needed to be incorporated into the mobile version of the app. As we delved into the mobile designs, we quickly shifted our attention to brainstorming and sketching ideas for the desktop version. Both version went through an internal critique where we pinpointed ways would could improve the design in preparation for our paper prototype.
Mobile and Desktop Sketches
We conducted a usability test with potential users, utilizing a paper prototype developed following our internal critique. This insightful process brought to light a spectrum of issues that needed attention:
1. Streamlining News Navigation: Users faced difficulties when trying to navigate news articles and filter them based on their interests. In response, our team gathered feedback and proposed an improved filtering system. We also introduced a "Hot Topics" feature, enabling users to easily choose from a list of currently popular subjects.
2. Enhancing Information Organization: Users found it confusing and challenging to locate different news article topics. To address this, we conducted a card sorting test to reorganize topics and subtopics, improving the overall organization of information.
3. Personalized Features: Many users felt that the home screen lacked a personal touch and was overwhelming due to the abundance of articles. To address this, our team suggested including a personalization option during onboarding. This feature would allow users to specify their interests, populating the home page with articles that the system recognized as relevant to them.
4. Clear System Feedback: Users were puzzled by the "Become a Writer" feature and unsure when they had completed the sign-up process. Our team acknowledged this and proposed implementing proper statuses and feedback to provide users with a clearer understanding of the system's status.
Low-Fidelity Sketches
In this phase, we advanced to mid-fidelity prototypes to assess our proposed app designs. Initially, we conducted a presentation for key stakeholders, including the CEO, CTO, and management, to seek their input. With limited feedback from this session, we proceeded to user testing. The usability testing phase revealed several critical areas requiring adjustments:
1. The desktop home page needed further refinement, as users still grappled with its complex structure and the overwhelming amount of information displayed on a single page.
2. The article voting feature proved more intricate than necessary, causing difficulties for users trying to vote on posts. Our team recognized the need to reevaluate the model, simplifying calculations and redesigning icons for better user comprehension.
3. Users faced challenges in finding specific topics on mobile devices and were not utilizing the search functionality. This led us to the decision to relocate the search functionality from the hamburger menu, making it easily accessible to users.
Armed with these valuable insights, the usability issues identified in our research became the catalyst for refining ONC's final high-fidelity prototype, resulting in significant improvements to the interface and the overall user experience.
Mid-Fidelity Wireframes
As our internship neared its end, we conducted a final round of usability testing with five participants to assess how the app's usability had improved. The results allowed us to prioritize issues on a scale from 0 (indicating no usability problem) to 4 (representing a severe usability issue). We documented these insights and shared them with key stakeholders to inform future improvements. In addition to the recommendations, we also presented the high-fidelity wireframes and a prototype, delivering a comprehensive package to support further app development.
High-Fidelity Wireframes
This project drove home the importance of thorough team preparation when making the shift from mobile designs to desktop versions. As the lead intern, I came to recognize the critical role of early-stage readiness in ensuring our team was fully prepared for the demands of mobile development. While it's common to start with mobile designs, we faced hurdles in ensuring that all the features stakeholders envisioned would smoothly find their place in the final mobile product.
WEBSITE DESIGN AND CONTENT©2024 Kyle Olson
