AI Digest
Introducing AI Digest, the solution that brings personalized news content directly to users based on their unique interests and reading history. By employing advanced AI algorithms, our platform analyzes users' behavior to curate a tailored news feed that aligns with their preferences.
Overview:
In my interface design course at Northwestern, our task was to develop a mobile app that addresses a specific problem we identified. With the assignment offering flexibility and a limited timeframe, I seized the opportunity to align my project with my passion for AI.
Role:
With a longstanding interest in AI, particularly during the past few months when it has gained significant attention, I embarked on designing an app that incorporates AI technology. For my project, I aim to develop a personalized news app that leverages AI to curate news articles tailored to users' specific interests and reading history.
My roles included:
UI/UX designer
Strategist
Researcher
Wire-framing & Prototyping
Team:
Individual Project - Northwestern Graduate School Assignment (IDS 464: Interface Design)
Scope:
UI/UX Design, Sketching, User Flows, Wire-framing, Prototyping, Moderated Usability Testing
Tools:
Figma, InVision, Mock-up (iPad), Miro
Duration:
3 Weeks
Starting off…
Problem Statement
Project Background
To ensure effective user research, I took a step back to consider the broader perspective. I began by identifying the primary user and understanding their pain points. Additionally, I contemplated how our app could distinguish itself from existing news platforms. By brainstorming potential answers to these crucial questions, I laid the foundation for the initial design process.
The process…
Applying the design thinking process introduced in class, I embarked on the initial phase: Define. In this stage, my objective was to structure the research I had gathered. Through careful analysis of my observations, I sought to pinpoint the fundamental challenges users encounter. It is crucial to approach the problem definition and statement from a human-centered perspective, prioritizing the needs and viewpoints of the users.
Competitive Analysis
Following the development of AI Digest, the logical progression is to conduct a comprehensive analysis of existing competitors. To accomplish this, I undertook an evaluation of popular features by gathering user feedback through surveys. This process allowed me to identify potential gaps in functionality that AI Digest could leverage to enhance its offering.
App Features
To begin my analysis, I initially focused on examining the features of each app. By thoroughly evaluating the functionalities offered by Apple News, SmartNews, and Flipboard, I gained a comprehensive understanding of the unique features and capabilities of each platform. This examination allowed me to identify key points of differentiation and potential areas for improvement for AI Digest.
Target Demographic (Competitors)
For second step of my competitive analysis, I delved into the target demographic for each app. By closely examining the user base and characteristics of Apple News, SmartNews, and Flipboard, I gained valuable insights into the specific audience that each platform caters to. This information played a vital role in shaping the marketing and positioning strategies for AI Digest.
General Demographic Summary:
SWOT Analysis
To gain a comprehensive understanding of AI Digest's market positioning, I conducted a thorough SWOT analysis on three prominent competitors: Apple News, SmartNews, and Flipboard. This analysis involved assessing the strengths, weaknesses, opportunities, and threats associated with each platform. By examining these factors, I obtained valuable insights that can guide the effective positioning of AI Digest within the competitive landscape. This analysis also helped in identifying areas where AI Digest can leverage its unique strengths to differentiate itself from the competition and capitalize on market opportunities.
SWOT Analysis Results
Based on the SWOT analyses of Apple News, SmartNews, and Flipboard, there are a few potential areas where a AI Digest would differentiate itself:
Starting with:
Final thoughts:
A successful AI-powered news app would likely need to strike a balance between personalization, diversity of sources, and innovative features to stand out in a crowded market. Additionally, the app would need to be mindful of potential regulatory or legal challenges around content curation and partnerships with publishers.
Next Steps…
Following the completion of the competitive analysis, I successfully formulated the problem statement. With a clear understanding of the competitive landscape and user needs, I generated a concise and targeted problem statement that serves as a foundation for developing effective solutions and guiding the design process.
In today's world, the abundance of news sources and biased reporting often leaves individuals struggling to stay informed on current events. This highlights the need for a personalized news app that harnesses the power of AI to curate news articles based on users' interests and reading history.
By developing a personalized news app that leverages AI, we can address these concerns and offer a solution. Such an app would enable users to efficiently and effectively stay informed about the topics that matter most to them, without being inundated with irrelevant content or biased reporting.
Design Question (How Might We...):
How might we… design a personalized news app that leverages AI to curate news articles based on users' interests and reading history, while also providing a comprehensive and unbiased view of the news?
Target Demographic
Task #2 - Features
Task #3 - Inputting Data
AI Digest’s target audience is anyone who wants to stay informed on current events but may not have the time or desire to sift through a variety of sources. This includes busy professionals, students, and anyone who values staying informed but finds traditional news sources overwhelming or biased.
To understand the target users, I developed a persona focused on the Gen-Z and Millennial niche. This persona creation process allowed me to immerse myself in the perspective of the users, enabling me to uncover their underlying needs and identify the features that hold the highest priority for them.
Key Differentiators
Features
Task #1 - Onboarding
Clearer Navigation Cues
Throughout this week, I delved into various approaches to leverage available data for algorithmic analysis and predicting user needs, thereby enhancing the value of the product.
One practical method I opted to pursue involves utilizing predictive models to personalize the user experience. For instance, this can entail customizing the user interface to match their preferences. By implementing these personalized features, the product gains increased value by delivering tailored and relevant experiences to users. Consequently, this can foster heightened user satisfaction, engagement, and loyalty.
Task #4 - Design System & Branding
User Persona
Research & Exploration
Throughout the design thinking process, I conducted thorough research to identify our problem statement, positioning AI Digest in the market in relation to its competitors, and defining our target demographic. Armed with this information, we formulated a clear vision of the key differentiators and innovative solutions that will shape the design of the app.
AI Digest sets itself apart from other news apps through its unique personalized news experience. By harnessing the power of AI algorithms, the app curates news articles tailored to users' individual interests and reading history, ensuring the discovery of highly relevant content. Moreover, the app offers an array of user-friendly features such as article filtering, search functionality, article saving and sharing options, and real-time notifications, all of which combine to deliver an enhanced and seamless user experience.
Prior to delving into the creation of lo-fi wireframes, I made the deliberate choice to prioritize key features that AI Digest will heavily emphasize. Considering the project's constrained scope and timeframe, it became necessary for me to make certain assumptions on behalf of the user. These assumptions were made to ensure a streamlined and efficient design process.
Assumptions:
#1 - Users will be willing to share their data to enable personalized content curation.
#2 - The AI algorithms will be effective in accurately curating relevant content for users.
#3 - The target audience will be interested in using a news app that offers personalized content curation.
#4 - Partnerships with news publishers and other app developers will be feasible and mutually beneficial.
#5 - The app will be able to generate revenue through advertising or other means.
Features:
#1 - Other multi media content options (podcasts, videos, etc.)
#2 - Personalization based on user interests and reading history
#3 - Prioritize local and niche news sources
Here’s comes the fun part… Moving on to lo-fi wireframes! :)
As part of the structured course, once we had completed the initial two steps of the design thinking process, our next assignment entailed creating a lo-fi onboarding flow for our respective projects. This task aimed to provide a preliminary visual representation of the user onboarding experience for our projects.
According to Jon Yablonski in the Laws of UX, a good guide to follow when prototyping and onboarding is to provide a clear and simple user interface that is easy to understand and use. This can be achieved by following these guidelines that he stated -
With those steps in mind, here’s the onboarding flow i designed:
On the left side, you'll find a low to mid-fi design showcasing how a new user would be introduced to the interface by navigating through the bottom navigation bar. To guide users through each page, a text box will appear, providing an introduction to the features present. This design approach ensures a user-friendly and informative onboarding experience for newcomers to the interface.
In addition to our previous objective, the third task served as a valuable add-on. This task focused on designing and demonstrating how users can engage with a collection of data within the app. Considering the significant role of personalization in AI Digest, I devised a design flow that empowers users to customize their homepage topics. This customization feature enables users to curate their own personalized news feed, aligning perfectly with AI Digest's commitment to delivering a tailored news experience.
To streamline subsequent design tasks, including prototyping and usability testing, I took the proactive step of creating a comprehensive design system and style guide specifically tailored for AI Digest. This design system will serve as a valuable resource, providing consistency in visual elements, typography, color schemes, and other essential design components. By establishing a unified design language, the design system and style guide will facilitate seamless collaboration and ensure a cohesive and visually appealing user experience across the app.
Style Guide
Typography
Task #5 - Desirability and Persuasion
In preparation for the usability test, our final objective centered around introducing desirability into the app. The key focus was to understand and address the reasons why users would choose to use the product repeatedly. After brainstorming and sketching potential flows, I decided to integrate gamification as a means to enhance user engagement.
The proposed strategies was to introduce weekly interactive challenges and quizzes related to news topics. Users would have the opportunity to participate in daily or weekly quizzes, trivia contests, or opinion polls. By offering rewards or points for correct answers or timely completion, we can incentivize users to actively engage with the app. Additionally, incorporating time-based challenges can create a sense of urgency and encourage users to return to the app regularly, fostering sustained usage and a delightful user experience.
The mid-fi interaction design showcases the flow of a particular feature. To illustrate, on the left side, the design demonstrates how the interaction unfolds.
For instance, every Sunday, the gift tab pops up, serving as a signal to the user that the quiz is now available for their participation. The quizzes are specifically tailored to the topics the user has bookmarked and shows interest in.
However, users also have the option to explore quizzes from other categories. Furthermore, the design showcases the visibility of friends' scores and the user's current ranking among friends, promoting a sense of friendly competition and social engagement.
Validate
Usability Testing
Within the given 1 week time frame, I conducted a series of 5 moderated usability tests to evaluate the effectiveness of the user flows that were designed previously. These usability tests involved interacting with participants in a controlled environment to gather valuable insights and feedback. By conducting these tests, we aimed to identify any usability issues, evaluate the clarity and efficiency of the user flows, and make informed refinements to enhance the overall user experience.
Usability Testing Task #1: Create a New Account and Go Through the Onboarding Process
Objective: To evaluate the user experience of creating a new account and going through the onboarding process of our application. We want to assess the ease of account creation, the clarity of onboarding instructions, and the overall user satisfaction with the process.
Usability Testing Task #2: Add a New Topic to Your Homepage Topic Menu Bar
Objective: to evaluate the user experience of adding a new topic to the homepage topic menu bar in our application. We want to assess the ease of locating the menu bar, the clarity of the process for adding a new topic, and the overall user satisfaction with this feature.
Usability Testing Task #3: Participate in Your Weekly Quiz
Objective: to evaluate the user experience of participating in the weekly quiz feature of our application. We want to assess the ease of accessing and navigating the quiz, the clarity of the questions and instructions, and the overall user satisfaction with this interactive feature.
Interaction Decisions
Based on the conducted usability tests, several noteworthy observations were made concerning the user experience of specific tasks.
During the user testing, it was discovered that two users found the statistics presented at the end of the quiz to be confusing. Nonetheless, participants expressed their engagement with the quiz and felt motivated to complete it.
The feedback highlighted areas for improvement, such as enhancing the clarity of instructions, addressing minor issues related to customization settings, and providing clearer navigation cues throughout the quiz.
Overall, the feedback received from participants was predominantly positive, indicating a strong foundation of usability and user satisfaction with the tested features. With these design decisions and improvements in mind, I proceeded to create the full prototype, incorporating the user feedback and striving to deliver an enhanced and seamless user experience.
Design Iteration
Clearer UI
Final Prototype
Retrospective
As an AI enthusiast, the opportunity to design AI Digest within a condensed timeframe of almost one month was both enlightening and enjoyable. Although the limited time frame posed challenges and prevented a deeper exploration, I am proud to have developed a product that incorporates the essential concepts covered in this module.
One of the major challenges I encountered was the broad nature of the project, requiring me to narrow down topics and features within the given time constraints. This forced me to be mindful of user behavior and avoid making assumptions based solely on my own experiences. Moreover, I discovered that it is perfectly acceptable to introduce entirely new features, as the guidelines are not set in stone. Through thorough exploration and research, it is possible to generate innovative ideas that can greatly enhance the product.
Overall, this experience has been invaluable in expanding my understanding of AI design principles and the iterative process of creating user-centric products. I am excited to continue exploring and refining my skills as an AI designer, embracing new challenges and opportunities for innovation.
Takeaways:
Creating User-centric Designs is KEY
Designing with the user in mind is crucial. Considering user behavior, preferences, and feedback helps create a seamless and intuitive user experience.
Iterate & iterate & Iterate…
Conducting usability tests and gathering user feedback throughout the design process is vital. This iterative approach allows for refinements and improvements based on user insights, leading to an optimized user experience.
Balancing simplicity & customization
Striking a balance between a simple and intuitive interface while offering customization options allows users to personalize their experience without overwhelming them with too many choices.
The next objective we were assigned was to design a prototype that incorporates user interaction with data. With the completion of the lo-fi flow for new users, I turned my attention to the design of the bottom navigation bar/menu specifically tailored for new users. This step allowed for a more comprehensive and user-centric design approach, enabling seamless navigation and enhancing the overall user experience.