UX Case Study 1 : MyNews

Problem Statement:

I want to…. See the news I care about from the sources I trust.

On January 19th I started the UX submersion program at General assembly. Since Monday was a holiday our first week was only going to be 4 days. This doesn’t sound like a big deal until you realize that on Friday, yes in four days you are about to do your first project and…. presentation! Yes, I had that moment where I realized that I was going to have to learn, create and present in 4 days. The GA process really supports you in learning each step of the project, from classroom learning, user research, sketching, user testing, prototyping and presenting. The first week’s project was about understanding the current user experience and needs and creating an app that solves this problem.

Conducting User Research: What is the user experience?

The project I was assigned was a News Aggregator. Ironically I have worked for a very successful aggregator but I am not a news junky so this was an interesting project for me to hopefully use some of my knowledge while also being a blank slate to absorb knowledge about the current experience. After learning about user research; how to do interviews, and creating our interviews questions, we were unleashed into the world. Well, really we mainly interviewed each other but we did run around to other floors and tried to nab 10 minutes from other GA students. I also used my “call a friend” card and interviewed a friend of mine. I stayed pretty close to the questions but also allowed my users to go on some tangents so I could really see what they were feeling about their experience and tweak my questions to get more information. Below are the interview questions. I also took notes and photographed my participants.

Interview Questions:

  1. Do you follow the news? How and when do you follow the news?
  2. What type of news do you look for?
  3. How do you feel about your current news aggregator experience?
  4. Do you find yourself checking the news often?
  5. What do you look for when scanning news streams?
  6. Is there anything that you would like to see in your ideal news aggregator?

The next step in defining the user experience was finding the themes in my interview notes. I put everything into PostIt notes and made an affinity diagram. Now when I say everything I mean everything. Our teacher was very specific to instruct us on this and while it seemed tedious it made sense in the end, and it ensured that you had the most amount of data. The first round I found myself writing almost from memory (which was not ideal), but then I went back literally redid it verbatim. I went through this process twice as I also transcribed the actual stickies to virtual ones. While this wasn’t needed it allowed me to really process what the users were saying and see the trends and finally the themes that I would zero in on.

Affinity Diagram in Mural

The themes that I began to see were the following:

  • They don’t trust mainstream news.
  • They can’t get all the sources they want in one place.
  • They want the system to learn what they like! (smart aggregator)

Now before I mentioned that I was not a news junky. So I just thought that media like the NYTimes etc were the place to go. But the more people I spoke to the more I realized that this was not the case and certainly not the behavior that the current experience was creating. People didn’t fully trust mainstream news, and they wanted other opinions from other sources like blogs they trust to balance out the information. Additionally, the current aggregators that they tried, weren’t sending them the sources that they wanted to see. They were only showing the mainstream media and then random other articles that meant nothing to them. It was too much of what they didn’t want. So instead of using an an aggregator they jumped around from source to source.

I chose to try to solve this problem:

How can I create an app, that allows the user to curate their own feed. Where they can customize everything from the feed label, to the sources that are presented, and include the ability to present blogs.

Techniques & Tools:

  • Drafting interview questions
  • Note taking & Recordings
  • Photographing current experience
  • Affinity diagrams
  • User journeys
  • Use Case

Sketching & Prototyping: Flow and Design

Iteration 1: The next part of this project was to start sketching. As an artist i was very excited for this part. I knew I would enjoy it but I enjoyed it so much more than I expected. We began with a simple 3–5 step flow. I rough draft of the problem you were trying to solve.

That morning we put everything up on the wall to get our first round of feedback. I don’t know why I didn’t get that much and I do wish I had gotten more. The image below shows my flow and concept.

First Design Flow!
  • Screen 1: The dashboard
  • Screen 2: Adding a feed
  • Screen 3: Customizing the sources in the feed
  • Screen 4: Confirmation of the customization
  • Screen 5: Reading the new feeds results!

Now to me this all seemed very clear but of course it was because I had drawn it. The feedback told me otherwise. So I went back to the drawing board literally before I started prototyping. I added more screens and context. I confirmed some iPhone standards (I’m an android users so I felt very out of the loop) to clarify the directional cues that I wanted to present. I even began to cut out little drawings like keyboards and notifications so that I could photograph more screens to make the flow even more clear. I then turned all the images that I had taken into a prototype on POP so that you could actually click through he screens as if it was an app. This was so much fun!

Techniques & Tools:

  • Sketching on notecards
  • Note cards, sharpie (think & thin), pencil and eraser
  • Pop app on mobile and desktop for prototyping

Iteration 2 and Usability Testing:

Iterations has been a new concept for me to learn. I’m a glass sculptor at heart and, well… you don’t have that much time to iterate when you are hands on. Either you got it or you don’t, and there is not much you can do without completely starting over. There really isn’t the opportunity to tweak things very much. What this meant is that in my mind, every iteration kinda felt like it was done… Until I did usability testing. This was a hard concept for me, and it pushed me out of my box, for the better.

Sample: Add/Edit Screen: Iteration 1 then Iteration 2 after edits

I interviewed some classmates and even grabbed a GA alum in the kitchen. I used what we call the hug technique where you turn on quick time video, turn the computer around and have the person hug the computer while they test the app. it is so simple yet rather genius. In usability testing you are supposed to draft out a script. I was supposed to use a script for consistency and to seem unbiased but I found that very difficult (hence why I said supposed). I found myself reacting and had to force myself to stand back and let them play/test. The script consisted of a standard intro (including permission to record them), explanation of the project, current status of the app (eg what may or may not be working) and what their assignment was. In my case the assignment or task I proposed to them was :

I have created a customizable new aggregator where you can name your own feed and assign your own desired sources. Please try to add a new feed, customize it to add a source, then go to see the feed results.

I did 3 rounds of interviews with recordings with the time we had and the feedback was really interesting. There were questions about terminology, function, other features, and also just design confusion. I had a lot of work to do! However, one great thing to note is that, in its simplest form I did manage to solve one of the problems! Choosing your own source! Additionally there was a positive reaction to this ability so I was actually enhancing the user’s experience. This felt great!

User Testing — screen captures of the “Hug Method”

Usability Feedback:

  • Can I favorite an article? How does it learn what I like or save for later?
  • I don’t understand where I go now…
  • Oh… I thought I was supposed to click there.
  • Maybe that should say Label instead of name
  • I like that I can choose my source (Yay!)
  • What does “age” mean?
  • How do I edit from the feed from the results page?

Back to the drawing board!

Iteration 3: Prototyping felt like sketch animation to me. I can’t repeat myself more when I say I loved this part of the process. I photographed each of the images and steps in the flow. After the first round of usability testing I had a lot of work to do. I began to think steps ahead of myself on how I would make the prototyping process more simple so that all the cut outs could show the flow better and provide more clarity around my design. I also had my lists of feedback items that I needed to conquer. I went down the list and checked off almost everything.

Some of the new sketches in Pop

Here is what I added in this iteration:

  • Added ability to save/favorite
  • Added ability to view favorited articles
  • Made alerts more clear
  • Fine tuned navigation
  • Added features
  • Added functionality
  • Moved compartments around for clarity.

Techniques & Tools:

  • Sketching on notecards
  • Pop for prototyping
  • QuickTime player for Hug method recording
  • Standard note taking

Here is the link to the prototype I did with all of the feedback so far. This is certainly getting closer although there is much work still to be done. You should be able to clearly add or edit a feed. Choose a source for the feed (you will be prompted to add a Sports feed and a sports source due to POP limitations). Click through to see the feed results and even click off to the 3rd party site (the original source). You can also see the icons for making something a favorite and editing an old feed.

MyNews Prototype

Wrap up:

Did I solve the problem? As a reminder my problem was to solve to create an app that allowed the user to see the news they care about from the sources they trust. Well I solved some of it, and here is the recap:

  1. I did design an app where you can create feeds and add your own sources per feed. — Yes! (note: I’m fully away there is a lot of back end integration that would be needed here but I focused on the front end convention assuming no back end limitation as of yet.)
  2. I made a function to allow for “smart” technology but I don’t think this is enough for what the users really needed. — Needs work
  3. While I made it customizable I don’t think I have enough filters to really filter out what users don’t want. “All the extra clutter” — needs work

Next Steps in Research:

  • How to I “Dislike” and article?
  • Figuring out better wording for “Source” as this may have confused testers
  • Work on the smart technology aspect. Is it just about likes and dislikes?How can meta tags get introduced to help refine?
  • Can an outside person be the “curator” of a user’s feeds? — some feedback was they they wanted another PERSON to choose the articles that they would receive.
  • Research more on the “Advanced search options that would have been provided

Lessons Learned:

  • Do more company comparisons: If you don’t know the apps they are referring to that already exist — do your research
  • Do More user testing
  • Don’t just iterate your sketches iterate your interview questions to ensure you are getting valuable information.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.