news app

I wanted to do a UI project just for fun and practice. I found a briefing on Daily UI about the application of NBC News. As an extra challenge I decided to not only do this project, but also give myself a 24hour time limit.


I’m dutch, meaning it’d be less likely that I’d do a case for an American company versus a Dutch one. In order to make this briefing more plausible, I decided that the dutch news platform “NOS” would be a more realistic candidate. Hence why my briefing notes are about the NOS and another dutch news platform.


For this case I gave myself three design criteria.

With these criteria in mind I started my research to see how these criteria could be met.

RESEARCH

Before designing anything I want to make sure my design criteria are actually usable and/or feasible, get a baseline for how current news aps function and how I can improve upon these ideas. In order to do this I took a look at the screens from the original briefing, the NOS app and another app from the competition.


In researching these apps I found a few ways to achieve some of the goals I had set for my own design and ways to solve other problems with the current applications. For instance I noticed some applications were quite inconsistent in their navigational elements, by placing them both on the top and bottom of the screen. Possibly making it difficult to understand. Of course these are just my hypotheses and not tested. This might sound risky, but as long as the designer is aware of the fact that his design/theory is not tested, it’s not finished anyway.

SKETCHING

Time to start sketching out ideas, as well as working on the flowchart. I prefered working on both deliverables simultaneously in order adapt the interface elements to the amount of pages in the flowchart and vice versa.

Because navigation and interaction were at the core of this project I wanted both to be simple and consistent. To achieve this I wanted one way to to navigate to and from each page. If more time was available I would’ve done tests in order to see whether this was the best solution or if a method involving less clicks would be better suited.

The sketches I made aren’t complete wireframes. That’s because I wanted so save time by just sketching out elements instead of full screens. I would then later puzzle them together digitally. I could permit myself this working method because I was working solo. In a team I would have used a different method in order to better the communication and therefore quality of the product.

ICONS

As an extra challenge I tried making my own icon set, but learned designing and illustrating 16 icons in a few hours is not something you’d want to do, if a consistent and well designed set of icons is desired. I’d love to give a full set of icons another chance in the future, given enough time. I imagine it to be a fun deviation from logo design.

GOING DIGITAL

It was time to start making things digital. For this project I used Adobe XD, because I don’t have an Apple for sketch even though I do know how to use it. I only learned about Figma after completing this project. I also used XD to make a clickable version for testing purposes. I learned that some people found the placement of the burger menu questionable. This was one of my concerns when designing the app. Another thing I learned was that people were in fact able to always tell where the were and were always able to get back to the home menu. I didn't do any extensive tests, so I didn’t learn much more than that, but the original goal was achieved.

Floris Vogelpoel