4 days Rapid Prototyping: Designing a News Aggregator

Hello World! Thank you for reading my post and joining my journey through the ups and downs of designing my first app.

I knew this was going to be challenging because firstly, I have no visual / graphic design experience. Furthermore I have never actually used a News Aggregator because I usually read the news on papers and magazines.

Despite being apprehensive, ‘the bigger the obstacle, the greater the triumph’ popped in my mind. I like being triumphant so although starting this first project is a giant step out of my comfort zone, I rolled up my sleeves, put on my game face and got to work!

Game Face on!

User Research

First thing I did was to bring out the double diamond diagram to chart my design process; I wanted to make sure I follow the process carefully (this project must be done to the best of my ability!)

Simple Double Diamond

So now beginning at the data collection stage, I decided to use Jennifer Brook’s 4-list method (Pain, Pleasure, Context, Behaviour) to conduct my user research. I knew straight from the onset that my data was to help my understand my users and how dealt with their problems relating to the news. I also knew that my data had to be unbiased! The unbiased part was tricky because my previous professional experience had always been about selling, influencing and convincing my clients (salesperson occupational hazard). I made a serious mental note to be unbiased…

I asked 4 of my course-mates to fill up the 4-list. They ranged from age 26 to 35 and I had 2 ladies and 2 gentlemen. They each only had 5 minutes to complete their respective lists.

I found out that each of them were existing users of news aggregators; some had more than 1! With more time, I would have liked to get data from people who had never used news aggregators as well; this can be a strong prospective user base if I can solve their problems.

While my potential users were filling up their lists, I had several ideas for what my project would be…
My first idea was to design an app that would give users the reliability check of each news article they received. As there are simply too many news sources out on the internet, having a credibility checker app seemed like something very useful!

I was becoming excited with my first idea, but then caught myself; is this idea stemming from my personal interest or is this something my users want? Immediately I focused my attention back to my user research to dig deeper into their problems and needs.

After receiving the completed 4-lists, I conducted interviews with each participant in order for me to get more details on their data. I kept probing them as much as possible for each point they wrote on the 4-list. For example:

“I can get news conveniently”

Q: What do you do with it?

A: To update myself on work related topics.

Q: Why do you want to be updated on these topics?

A: So I can perform well at work.

Q: Why is it important for you to perform well at work?

A: So I can get promoted.

Q: Why do you want to be promoted?

A: $@%#$#$$&&&^^$@#$@#$

I was starting to become really annoying and I had to cut my interview short at just 5 minutes before I made them furious. Keypoint on user research is that people really don’t enjoy being probed too much. I need to work on my interview skills, questions and also my approach.

Stop asking me!

User Research Analysis

With the user research completed, I now had the difficult task of organizing and compiling the data to help my generate features for my app.

I wrote down every single data / feedback from the 4-lists and interviews on yellow sticky notes. I stuck them on my blank wall and made a few attempts to affinity-map the notes…

Trying to map
Mapping failed… trying to use emotional visualisation

Eventually I was able to group the stickies and drew out 3 essences from my data:

My users:

• Want to customize their news browsing experience

•Want to see news which interest them the most as priority content.

  • Want convenience when viewing the news

I decided to focus on the first 2 essences and formed my problem statement: “I want to customize the layout of my news!”

User flow & Sketches

With my problem statement clearly formed, I needed to create my user flow diagram for my app to help users customise their news layout. To aid in my visualisation of this flow process, I used paper.li as a case study.

User Flow Legend
User Flow of my app

Paper.li was a news aggregator which is web based. As such, I was able to edit the layout of the news articles by simply dragging each article around the laptop screen. I really liked this idea and decided to incorporate it into my app design.

Low fidelity screens for adding news topics
Low Fidelity screens for users to drag topics around and customise layout

I was now ready to sketch my first paper prototype and start usability testing!

Prototyping

Paper Prototype Usability Test Scenario: You hear about stock market crash happening soon. You want to know everything about the stock market news.

Task: Prioritize your favourite news.

Straight off the bat, Luke spotted an improvement for my phrasing of the task. “Prioritize your favourite news” implies that this user is an existing user; silly because there aren’t any users for my app which is still in the process of being built. So with his advice, I changed it to:

Updated Task: As a new user, use this app to prioritize your stock market news.

I found 3 users to test my paper prototype. Each of them had used news aggregators before and I made a mental note to not interfere with their task, to facilitate the testing by asking them questions such as ‘what would you expect to see when you tap that’. I was also ready to take as much notes as possible.

Now my headache begins because nobody completed the task in the way which I had imagined.

Ok sounds great to me. Prototypes are meant to crash and burn utterly so it’s back to the drawing board to create something better!

I knew immediately that my user flow had to change because the dragging and dropping of articles was not intuitive on the smaller screen of a mobile device.

Only need 3 user inputs to complete layout

Paper Prototype 2 Usability Test Scenario: You hear about stock market crash happening soon. You want to know everything about the stock market news.

Task: As a new user, use this app to prioritize your stock market news.

I found 2 users to test my paper prototype 2. And each of them found the 2nd prototype to be intuitive and straightforward! I was really happy with this design and decided to us it as my final app.

Reflections & Learning Journey

My major challenges during the usability testing; firstly it was very difficult to be taking down notes by hand whilst users were giving their input. I should have used the HUG method and done a video-recording of their whole task completion process. My users also did not complete the task in the way which I had expected during my first prototype. This vulnerability turned out to be a blessing because my 2nd prototype turned out to be much better. Last but not least, prototypes are meant to fail; so fail more and fail quickly!

In retrospect, there are several improvements I would make to my design process. First would be to expand my interview group during the user research phase. I will also include additional rounds of usability tests for existing proto-types and have additional Tasks for users to complete.

For the app itself, I would like to have Social Media integration / Sharing integration so help users connect to other news readers. I will also design a ‘Save for airplane mode reading’ to give greater convenience to my users.

I hope you enjoyed reading this as much as I enjoyed sharing; project 1 was really an eye-opening experience for me. I look forward to sharing more exciting journeys with you through the rest of my projects so stay tuned!

-Alex Wong

Watch my Paper prototype live! : https://popapp.in/w/projects/5656b2683bce16f90507dd28/preview

One clap, two clap, three clap, forty?

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