Your news, your way.

"NuseAI" is an AI powered news aggregator that focuses on helping people stay connected with and understand current events and how they affect their individual lives.

App name:

NuseAI

Role:

Sole UX Researcher, UX Designer

Year:

2024

coinbase screens
coinbase screens
coinbase screens

The Challenge

I was tasked with creating an application of my choice over the course of 8 weeks, based on 3 weeks of previous research as part of my MUXD 5300.01 course. My capstone project focuses on helping people stay connected with and understand current events and how they affect their own lives. Additionally, this was my final project and the culmination of my studies at The Maryland Institute College of Art.

In light of the events over the course of 2024 and with an election quickly approaching, I felt it was more important than ever to stay informed and connected with the world around you, and I still do. That's why I chose to build NuseAI, to advocate for those who feel similarly to me and are part of the 75% of people who don't feel "very confident" explaining how their government works and would like to get a better understanding.

Process

To ensure that I approached the problem from a holistic standpoint, I utilized a 5 step problem-solving process that allowed me to move forward strategically. I repeat steps 3-5 to polish the product.

  1. Empathize: During this step, I put myself in the user's shoes to understand their current journey, thoughts, actions, motivations, and any points of contention.

  2. Define: Here, my goal is to clarify problems that need to be solved and the goals / KPI's that ned to be achieved.

  3. Ideate: In this step, I outline potential solutions to the problems defined in the previous step using clever visual design, proper UX strategy, and data-informed decision-making.

  4. Prototype: Here, I bring solutions to life through thoughtful interaction design. It's important to remain as detailed as possible when prototyping to remove any ambiguity during development.

  5. Test: Collecting real data on the effectiveness of your decisions is paramount to continuously improving your strategy and refining the product. Therefore, I repeated steps 3-5 as often as time allows.

Research & Discovery (Empathize)

Tools used:

  1. Secondary Research

  2. Market Research

  3. User Interviews

With interviews top of mind and experience under my belt, I understood that recruiting for interviews takes time. For this reason, I chose to prepare as early as possible. Immediately after creating a research plan, I built a provisional persona which would act as a framework for the types of participants that I was looking to recruit. Micheal is completely based on assumptions and only served as highly generalized framework.

Meet Micheal.

Biography

Micheal is a business consultant in his mid-30s living in Boston, MA. Everyday, Micheal gets most of his information through social media. He doesn’t take all the content at face value, but he does believe his favorite creators. He regularly consumes the news on tv; however, he doesn’t find himself scrolling through news aggregators. He finds a lot of it hard to understand and wishes he had someone to explain it to him in layman's terms. He thinks it’s important to stay connected with the world around him, but it just feels overwhelming for Micheal.

Goals

  • To stay connected to his community

  • To understand the world around him on a deeper level

Motivations

  • To be involved in news-centric conversation

  • Understanding how news will affect his finances

Pain points

  • Doesn't understand a significant portion of the headlines.

  • Starting from zero understanding is a daunting hurdle, which causes hesitation.

I also made use of an initial how might we question to answer through research:
"HMW help our users stay on top of current events so that everyone is knowledgable regarding today's political climate and can have an informed perspective."

Secondary Research: Learning from others

While recruiting for interviews, I got started on the peripheral research. I scoured the web for any information that could prove useful in answering our research question and objectives. I ended up utilizing 1 scholarly abstraction, 1 paper, and various articles based on the successful distribution of media in modern era. I compiled my research using Dovetail, my research repository of choice.

Secondary Research Findings

Through my research, I established the following:

  1. Information distribution platforms cater to a wide variety of users, and thus, require sufficient context and precise methods of narrowing information on the screen to match their needs. This includes: traditional filters, search bars, quick sharing, offline use, etc.

  2. Additionally, the research performed helped me refine my HMW statement further. It now reads: "How might we help users understand and stay up-to-date with relevant headlines that actually impact their everyday lives."

Customization is paramount when designing for a variety of users, each with their own, highly contextual, motivations.

Customization is paramount when designing for a variety of users, each with their own, highly contextual, motivations.

Trustworthiness must be a primary objective for any product that's looking to distribute information on a large scale.

Trustworthiness must be a primary objective for any product that's looking to distribute information on a large scale.

Market Analysis: Getting the big picture

In addition to desk research, I performed both a SWOT analysis and a visual competitive analysis on Apple News, AP News, and Reuters.

Category

Name

AP News

Apple News

Reuters

Strengths

  • Clean layout

  • Easy navigation

  • No paywall

  • Reputable source

  • Clean, user-friendly interface

  • Strong focus on personalized content

  • Human-curated stories

  • Reputable source

  • Wide range of global news coverage

  • Multiple language options

  • Personalized news feed

Weaknesses

  • Little personalization

  • Lack of customization

  • Interface feels slightly cluttered at times

  • Lack of customization

  • Ads can be intrusive

  • Paywall for some content

Opportunities

  • Improving personalization features to increase user engagement

  • Explore interactive content to enhance user experience

  • Expand availability to non-Apple devices

  • Explore international markets

  • Improve search functionality

  • Improve interface design for better user experience

  • Explore options for ad-free experience

  • Offer more personalized content

Threats

  • Stiff competition from other news sources

  • Users seeking a more personalized experience may switch to other platforms

  • Growing competition from other news sources

  • Users seeking a wider range of perspectives may switch to other platforms

  • Stiff competition from other news sources

  • Users seeking a more seamless experience may switch to other platforms

Both analyses revealed to me that my competitors take a highly standardized approach to presenting current events. They all make use of minimalism and aesthetically uncluttered layouts. Additionally, they make use of white space and a variety of imagery to break up large chunks of text that you'd typically find in similar applications. AP News was the only one that provided some sort of top level filter on their homepage, allowing the user to customize what they see.

User Interviews: Meeting my audience

Moving forward, I conducted user interviews to gain a holistic understanding of the product landscape and establish user’s current habits. Because we’re seeking to keep people informed, our only requirement was that each participant feel either well-informed regarding current events or have a desire to become better-informed. To do so, each interviewee was screened before the interview.

I conducted moderated, remote and in-person, user interviews with 5 participants ranging from 20 - 76 years old with varying degrees of political savvy and interest in becoming politically savvy. Interviewees’ work backgrounds ranged from early stage mechanical engineering to banking executives. Every participant said they consume political media in some form multiple times every single day.

Findings & Solutions

I performed a research synthesis workshop to gain a better understanding of the results of my usability tests. I first drew insights from my feedback to take an objective look at my observations from research. From here, I drew conclusions based on the insights. This allowed me to put exactly what was working and what wasn't into perspective and framed the next step: recommendations. During this step, I brainstormed potential solutions to any issues realized when I was drawing conclusions and outlined next steps to continue building my product in a way that resonates with my target audience.

From this workshop, I unearthed 2 main findings:

  1. All of my users' motivations are completely individualistic and require a catered experience to fit their needs. (Be it staying on top of portfolios or feeling connected to a larger group).

  2. Where misinformation is rampant, it's important to act as a source of truth for my users. A couple even went so far as to say:

"The danger though is the false information that is being put out, you know, via quote unquote social media."

"The danger though is the false information that is being put out, you know, via quote unquote social media."

"I think the biggest concern is there's so many different sources and so many opinions that it's hard to consume such a wide breadth of information."

"I think the biggest concern is there's so many different sources and so many opinions that it's hard to consume such a wide breadth of information."

Synthesis (Define)

Tools used:

  1. User stories

  2. User personas

  3. User flows

With research in tow, it was time for me to use the data I had collected to better empathize with my audience and frame how I'd move towards the design of my product.

User Stories

In addition to recommendations, I built user stories based on the list of conclusions to use as an actionable, pseudo-feature set.

  1. As a user, I want to be able to specify my interests and see corresponding headlines so that I have a personalized experience.

  2. As a user, I want to know that my headlines are coming from a reputable source so that I know I’m getting accurate information.

  3. As a user, I want to feel like a part of a larger whole so that I can relate with my peers about current events.

  4. As a retiree, I need to understand how the headlines will affect my retirement fund so that I can continue to survive off of my savings.

  5. As a recent grad, I want to know if the headlines will affect my student loans so that I can plan my financial growth accordingly.

  6. As a user, I want to access my news headlines at all times so that I’m never disconnected from what’s important to me.

Meet Jamie.

Biography

Jamie is a working, single, mom who balances her busy work life with raising her son and managing their finances. Both her and her son’s lifestyles are funded by Jamie’s investments and are subject to frequent change. Because of this, it’s important to Jamie that she stay on top of current events, news happenings, and overall remain “in-the-know” to adjust her and her son’s growth plans accordingly.

Often, she finds it difficult to filter impactful headlines from sensationalized garbage. That’s why we’re building an application that seeks to help users both stay in the know and understand the impact of headlines on their individual lives.

Goals

  • To put her son through school using her investments

  • To adjust her and her son's growth plans according to the market

Motivations

  • Keep up with headlines that interest her

  • Understanding how news will affect her investments and growth plans

Pain points

  • Her biggest issue is filtering sensationalized headlines from impactful ones.

  • Active social media user but doesn't believe most of hwat she sees.

Meet George.

Biography

An additional persona that arose as a result of research was George. George is a 21 year old college student with an interest in learning about current events and how they impact his life moving forward. George spends a large amount of his time on social media, and as a result, consumes a lot of media with questionable credibility. George is looking for a source of information that can:

  1. Keep him informed about the world around him

  2. Explain to him the impact of these events

Goals

  • To set himself up for success after graduation through proper understanding and analysis of the news

  • Involve himself in more discourse about current events

Motivations

  • Understand how current events will affect his life post grad

  • Be involved in conversation with his more politically adept friends

Pain points

  • He feels the barrier to entry is too high considering all the political jargon and history behind current events.

  • George struggles to stay engaged with lengthy stories.

User Flows

Using the user-stories as a basic framework for what types of screens needed to be included, I ideated one user flow per persona in hopes of addressing their most pressing concerns and helping them reach their goals.


The top flow is for George, utilizing AI as a method of both input digestion and article summarization. The bottom flow is for Jamie, which utilizes AI for the same purpose as above, but also enables offline access to all of her most pressing articles.

Sketching / Low Fidelity (Ideate)

Tools used:

  1. Sketch pad

Before creating any digital products, I put pen to paper. I sketched each screen that I'd be building to establish an outline as this is my first pass at ideating upon the user-flows I built. It includes:

  • AI Input digestion

  • Summarization

  • Social connectivity

  • Offline access

Color and typography

Color:

My visual analysis of all 3 competitors revealed that red is a common primary color among news aggregators. This is likely because of their connotation with "breaking news" as red is a color that communicates urgency and importance. As such, I decided to walk a similar path. Additionally, all competitors featured a minimal color palette. I needed a complimentary color to represent AI and it's use within the prototype without extending the color range too far outside of what the eye is already accustomed to seeing within the app, so I went with a purple of a similar saturation.

Background

#FFFFFF

Primary

#FC5556

Secondary

#FC5556 @ 10% opacity

Elevated #FAFAFA

AI Purple

#ED6957

Secondary Gray

#616161

Primary Black

#1D1D1D

AI White

#EAEAEA

Typography:

I used the Playfair Display font as an elegant, serifed, typeface for the heading font to convey a sense of formality. I've also used reddit sans as a sans-serifed, typeface for the body for its readability at a variety of sizes.

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Playfair Display

Reddit Sans

Reddit Sans

Reddit Sans

Reddit Sans

Reddit Sans

Reddit Sans

Reddit Sans

Reddit Sans

UI Kit

As I continued iterating, I started to move into mid-fidelity wire framing. My goal was to have all essential elements and colors in place. Luckily, a friend of mine works in UX & development and sourced me a UI kit specific to my project.

Medium-Fidelity (Ideate)

Tools used:

  1. Figma

  2. Wireframes

With a set of sketches to ideate upon, I developed mid-fidelity wireframes which utilized the same flow. These wireframes had colors and article content in place, just enough to perform tests! I performed 5 usability tests with participants aged 20-55.


Participants were asked to complete 5 tasks:

  • Sign up and onboard

  • Summarize an article

  • Download an article for offline use

  • Investigate the comments and like the top post

  • Access an article through bookmarks and summarize it

Medium Fidelity Testing (Prototype & Test)

Mid-Fidelity Testing (Prototype & test)

Tools used:

  1. Figma

  2. Usability Testing

Through my tests, I was able to confirm that my solutions are intuitive to my target audience, although, there were some notable findings. Feedback from my users mainly revolved around the specific verbiage used within the application as well as some issues with states; however, there was one glaring issue that had to be addressed immediately.

What was tested

Testing (Prototype & test)

Tools used:

  1. Figma

  2. Usability Testing

3/5

visibly struggled to see the textbox to provide additional context

3/5

visibly struggled to see the textbox to provide additional context

3/5

visibly struggled to see the textbox to provide additional context

2/5

asked what the word "contextualize" meant when summarizing articles

2/5

asked what the word "contextualize" meant when summarizing articles

2/5

asked what the word "contextualize" meant when summarizing articles

2/5

showed visible concern when they were able to click "continue" with an empty text box

2/5

showed visible concern when they were able to click "continue" with an empty text box

2/5

showed visible concern when they were able to click "continue" with an empty text box

1/5

expressed that they felt that the product was "angry" with them

1/5

expressed that they felt that the product was "angry" with them

1/5

expressed that they felt that the product was "angry" with them

"I don't think I'm doing this right. It feels like it's angry at me."

"I don't think I'm doing this right. It feels like it's angry at me."

"Normally, I'd just click it, but what does "contextualize" mean? "

"Normally, I'd just click it, but what does "contextualize" mean? "

Issue prioritization

I categorized my findings in order of priority from most detrimental to least, relative to completing the task at hand.

Issue

Quote (if any)

Recommendation

Priority

After clicking “follow”, the text still read “follow”, combined with the primary red to indicate importance, caused the user to feel as if the application were upset.

“I don’t think I’m doing this right. It feels like it’s angry at me.”

Change primary color and fix copy between button states

HIGH

The text box in which a user is prompted to provide additional context for their uses of the app was difficult to see for 3/5 users

Adjust visual treatment to increase contrast of the textbox

HIGH

The word “contextualize” caused 2/5 users to ask what the word meant

“Normally, I’d just click it, but what does “contextualize” mean?”

Change “contextualize” to “summarize”

HIGH

On the “specify your interests” screen, 2/5 users showed visible concern when they were able to click “continue” even though the text input was empty.

Disable use of continue button until the user has filled in the text box

HIGH

Issue

Quote (if any)

Recommendation

Priority

After clicking “follow”, the text still read “follow”, combined with the primary red to indicate importance, caused the user to feel as if the application were upset.

“I don’t think I’m doing this right. It feels like it’s angry at me.”

Change primary color and fix copy between button states

HIGH

The text box in which a user is prompted to provide additional context for their uses of the app was difficult to see for 3/5 users

Adjust visual treatment to increase contrast of the textbox

HIGH

The word “contextualize” caused 2/5 users to ask what the word meant

“Normally, I’d just click it, but what does “contextualize” mean?”

Change “contextualize” to “summarize”

HIGH

On the “specify your interests” screen, 2/5 users showed visible concern when they were able to click “continue” even though the text input was empty.

Disable use of continue button until the user has filled in the text box

HIGH

Issue

Quote (if any)

Recommendation

Priority

After clicking “follow”, the text still read “follow”, combined with the primary red to indicate importance, caused the user to feel as if the application were upset.

“I don’t think I’m doing this right. It feels like it’s angry at me.”

Change primary color and fix copy between button states

HIGH

The text box in which a user is prompted to provide additional context for their uses of the app was difficult to see for 3/5 users

Adjust visual treatment to increase contrast of the textbox

HIGH

The word “contextualize” caused 2/5 users to ask what the word meant

“Normally, I’d just click it, but what does “contextualize” mean?”

Change “contextualize” to “summarize”

HIGH

On the “specify your interests” screen, 2/5 users showed visible concern when they were able to click “continue” even though the text input was empty.

Disable use of continue button until the user has filled in the text box

HIGH

As you can see, my highest priority issue is when a user expressed they felt that the application seemed "angry with them". It's a major red flag for me, as an empathetic designer, that a user feels any hostility while using my product. Therefore, it prompted a change in my color palette and all associated components. My other concerns had to do with contrast adjustment, state management, and copy changes.

High-Fidelity (Ideate)

Tools used:

  1. Figma

  2. Wireframes

  3. Usability testing

Now that I had actionable recommendations to build on, I translated my designs into high-fidelity wireframes. The color palette, contrast, and copy adjusted, as well. Unfortunately, as the class wound down, I ran out of time to perform another round of usability testing.

The final result

My MVP is the amalgamation of my research, ideation, and testing thus far and successfully uses AI to:


  1. Provide a highly personalized experience to all of my users

  2. Helps users understand and keep up to date with headlines and the impact they have on the life of the individual, which was my goal when I began the project.

Future roadmap

Make contextualized headlines more apparent

  • NuseAI aims to provide a highly personalized experience and, as such, I'd like to make it obvious to users that articles and headlines aren't just summarized, but personalized to help the user understand exactly how each story affects them and their livelihood. NuseAI isn't just a news app, it's your news app.

Perform a second round of usability tests

  • It is important to remember that the design process is never truly finished. Continuously iterating and refining the app can improve performance and help keep it relevant and competitive in the market. This can be done by using feedback provided during testing and staying up to date with the latest design trends and technologies.

Develop more user flows

  • Moving forward, I’d love to ideate upon more user flows to build the application to a larger scale. Additionally, a more polished application introduces opportunity for more refined feedback, which, in turn, would enable me to ideate further.

Final thoughts

With the project complete, I can say that the overall process didn’t come without it’s fair share of hiccups, but every bump in the road is an important lesson that I’ll take into my future projects. Here are my top 3 challenges and how I plan to adjust for them as I move forward.

You cannot plan for the unknowns of life.

  • Managing time can become laborious when you can’t factor in your future schedule or obligations. Be sure to include “buffer time” when you’re initially time boxing the work.

Often, people will be uncomfortable with being recorded in any way, which is inconvenient for you.

  • Acknowledge this and prepare to take detailed notes for reference later.

Scheduling time with participants for both interviews and usability testing is often difficult.

  • User’s schedules are unpredictable and subject to constant change. Don’t take it personal and perhaps, invest in using a platform like Maze or something similar.