How we built the iDB app – part 1: concept and design

By , Jun 24, 2016

This is a guest post by Giulio Michelon, proud designer and CEO of Belka, the Italian studio that designed and developed the iDB app. We’ve asked Giulio to come here and share his experience developing the app, from the initial concept to the final product. In part 1, Giulio will talk about concept and design. Part 2, and 3 will be published over the next couple of weeks.

iDownloadBlog’s app started with a concept from Sebastien: he asked us to build an app to discover the latest news for his blog in a fast and convenient way. He mentioned us some example of the result he wanted to see: something similar to Tinder, but for news.

Starting with the design

Before actually building an app there’s a lot of work on the design side and I’m going to explain that in this post.

design quote steve jobs

We researched similar apps and similar user interface patterns that already work well in order to gather as much inspiration as possible. This is important because if a pattern is already well-established, every user will have that kind of mental model. For instance, the comment icon is usually a speech bubble, the Like icon is usually a heart, or a thumb up, and so on.

Most of the time, a designer doesn’t invent, but he rather combines existing elements in order to make an interface as clear and usable as possible for the user.

Paper prototyping

The first iteration was on paper prototyping inside Belka. We usually keep this as fast as possible, that’s why the paper is the best media for this kind of discussion: it’s fast, non-expensive, and it can be easily printed on, with whatever we have in mind to explain the concept.

In this part, the actual look of the app is not important. In fact, our sketching skills are pretty terrifying. The main goal here is to confront our ideas internally and to get as fast as possible to the next step with clear concepts.

paper prototyping

The glamorous work of paper prototyping

Lo-fi prototype

After the paper prototyping, we moved to a lo-fi prototype to discuss it with Sebastien. A lo-fi prototype is a graphically basic version of the app (like the picture below) which is used to understand the sections and the interaction of the app between us and someone else.

This confrontational part can be done in very different ways depending on the client’s attitude. In this project Sebastien communicated with us mainly via email.

This was the best way to discuss considering two factors:

  • The 9-hour time difference between California and Italy
  • The daily iteration we had on the prototypes that led us work during the day and the morning after having a fresh design review

Every morning we had a revision of the content sent to Sebastien the day before via email. Based on Sebastien’s feedback, we discussed every interaction of the app in order to ship the best product we could build to iDB readers.

lo-fi design of app

This is how simple iterations on some parts of a lo-fi design look like

Here’s an example of an iteration on our design’s proposal. We followed the Apple’s design guidelines and put a Status Bar on top, but Sebastien proposed to move everything to the bottom in order to have more screen estate available. This is a great idea so we modified that and now, as you can see from the app in production, this idea is live. We had a lot of this type of confrontation and disagreement during the design process over a lot of small details.

We discussed different proposals with Sebastien in order to clearly understand his needs and simplify the interaction between the user and the app as much as possible. He cared a lot about minimalism, so we focused on that.

In parallel with the lo-fi mockups, we designed a flow map in order to get a better idea of what the bigger picture should look like. That helped clarify the concepts between the two parts involved: us and iDB. Typically, one of the biggest problems while designing an app are the differences between the mental model of the designer and the mental model of the client. This flow map helps reduce the differences.

app interaction workflow

The flow map

Why not starting directly from a higher fidelity mockup? Because the devil is in the details. Starting with an higher level means defining the interaction and the aspect of the app, which are very different things, even if they are in the same field — which is design.

I will talk about the higher level in the next part, so stay tuned!

What do you think about this process? Feel free to ask me anything in the comments, and I will reply personally.

  • Share:
  • Follow:

  • solai

    Good stuff

  • siddique

    People prefer the website instead of the app

    • I use the app all the time!

      • siddique

        For me because first i open diffrent tabs then i read them ..

      • Giulio Michelon

        Hey Siddique! I’m the author of the app. You can use bookmarks on the app to get the same result.

      • siddique

        I have downloaded the app and used it for a while now . it would be a great that you bring the bookmark button on a front page ..

        Its annoying you inside the topic and then bookmark them ..

        A person like me who just come to IDB website , reads headlines and open topic which matters him in differents tabs and then he start to read and swip and delete in safari simple

      • Giulio Michelon

        Pro tip: double tap on the article to add it to your bookmarks

      • siddique

        It’s nice to know that 🙂 yeah I just tried it 😀
        But here is a suggestion !
        When a person make dubble tap and bookmark ,the next topic automatically will come , no need to swip 🙂

        When I bookmarked 5 and th 6th I cant , ok Here I want to support IDB but I see the price high , It should be one time pay not monthly

      • Giulio Michelon

        The price is monthly because the blog publish content everyday, not just once

      • siddique

        People always ready to support the blog they love .What my point is take one time price Or do you want to people to leave for an other blog ? Think about it ..:)

        Thank you 🙂

    • Burge

      When was this poll taken? And do you mean webapp or the actual website as in desktop view?

      • siddique

        I have downloaded the app and used it for a while now . it would be a great that you bring the bookmark button on a front page ..

        Its annoying you inside the topic and then bookmark them ..

        A person like me who just come to IDB website , reads headlines and open topic which matters him in differents tabs and then he start to read and swip and delete in safari simple and eassy

      • Marcus

        Exactly my view. I just load up the website on my Mac at the end of every day and open all of the new articles in new tabs and then read through them. I do the same thing with a few other sites as well. It’s a great experience in my opinion.

  • Quilliv

    The app needs work to be honest hate the whole card view

    • John Wickham

      I agree. As a designer, the app feels ill conceived and poorly tested. But that’s just one perspective

      • siddique

        I use the website because to open tabs for the topic i like and then read them

      • Giulio Michelon

        Hello John, author of the app here.
        What do you mean by “poorly tested”? Did you find bugs? Do you have the feeling that your use case is not fulfilled? Let me know.

      • John Wickham

        Thanks for responding, Giulio. Im curious about what kind of user testing you did before deploying that app. Much of the feedback / criticism that I’ve heard could have been caught in focus group or A/B testing.

      • Giulio Michelon

        Hello John, we had a closed beta with a lot of users during all the development phases.
        Can you give me more specific feedback regarding the use case you don’t like? I’d like to understand. Thanks

      • John Wickham

        My use case is much like everyone else’s. Just looking through the comments on this article, many people agree that “the website is way better.”

        Namely, most people “hate the whole card view.” We’re accustomed to browsing articles as a list so we can chose the content that we’re interested in reading more of. The card view obstructs the expected workflow.

        I want to reiterate that this is only my opinion and my observation of others’ feedback. The app actually has a 4.5 star average App Store rating, so it’s clear that plenty of other people love the app.

      • Zack Morris

        I agree with John. Please don’t take this as an assault but rather constructive criticism. I would like to see a way I can view the articles either by scrolling or with headlines so I can choose what I want to see. Right now, it feels like you have to swipe through the ones you don’t want regardless if you want to read the article. Maybe some like it but if you could have an option with a setting that allows for a list rather than card view, I think you could not only satisfy the people that want something different but also the people that would rather use the website. I like the offline feature. I just want to know my options on articles rather than swiping through. Thanks.

      • John Wickham

        Definitely not an assault, just sharing my thoughts and why I prefer the website over the app. An option within the app would be terrific, it’d definitely get me to switch over!

      • Giulio Michelon

        That’s not on our work pipeline but I understand better your point now. Thanks for the feedback! I wrote an answer which fits with your doubts to Zack Morris.

      • Giulio Michelon

        Hey! Definitively not an assault, I understand you are just telling me your opinion.
        The use case of mobile is very different from the desktop website. This app is as it is on purpose. We wanted to have a very small interaction while you have let’s say 1.5m of time available. Obviously the web has more tabs and space but it’s a different use case. This is why the app doesn’t exclude the website, but it’s a companion while you are on the go. I hope the vision is now more clear.
        Thanks for the feedback!

      • Zack Morris

        agree with John. Please don’t take this as an assault but rather constructive criticism. I would like to see a way I can view the articles either by scrolling or with headlines so I can choose what I want to see. Right now, it feels like you have to swipe through the ones you don’t want regardless if you want to read the article. Maybe some like it but if you could have an option with a setting that allows for a list rather than card view, I think you could not only satisfy the people that want something different but also the people that would rather use the website. I like the offline feature. I just want to know my options on articles rather than swiping through. Thanks.

      • I understand the criticism about the overall design, however, as I explained in the first post I wrote when I announced the launch of the app, this was an intentional decision. I wanted to make something different, and no amount of beta testing would have changed that.

        This said, the app works exactly as it should, so it’s unfair to say it’s poorly tested.

      • diggitydang

        I think “poorly tested” was a poorly chosen term. I don’t think he means that it was actually poorly TESTED in terms of bugs.

        That said, I think his gripe is with the card view and I tend to agree. How about giving people an option of card or list view? I’d prefer a list view, personally. I like the app and figured alternate views would come soon though.

  • Feivl

    I really prefer the website in safari. Got a bookmark on my homescreen. Works great for me.

  • Itzkhaoz

    The website is way better.

  • MrTarek

    website all they way!

  • Ruchir Raju-Deepti

    I read iDB on feedly. via rss.

  • siddique

    I use the website because to open tabs for the topics i like and then read them

  • [RECON1]

    When I’m on my phone I use the app. However, I’m not really a fan of the card view. The app is simple and easy to use, but for me personally, I don’t really like having to hit the ‘x’ to back out of an article, and swipe over to the next. Also, not sure if I’m liking a comment tab. On the website you can just stay on the same page and keep scrolling down.

    • Giulio Michelon

      Hey Recon, author of the app here. You don’t need to touch the X to close the article. We implemented a very convenient swipe back gesture to go back to the articles. Regarding the comments it is mostly a technical constraint, so we didn’t have much choice.

      Thanks for you feedback!

  • Scott Curry

    @iDB – You HAD to expect a flood of criticism with this post….lol

    • It’s alright. People are usually more vocal when they dislike something rather than when they like it, so we’re kind of used to that.

  • Fardeen Beharry

    nice

  • Burge

    I’ve used the web app since the start and now I’m using the the official app. I’ve only got one or two issue. What took Sep so long to get this sorted. I was asking for a app since iOS 3 The other is every now and then the app seems to pause as though it wants to show the advert before we could purchase the ad free version which of course I’m using.

  • Andrew

    Wow, lots of hate in these comments about the card view. It’s actually my favourite feature of the app. It’s different and refreshing.

    Also, cool article. I’m looking at getting into software development, so I find it helpful and interesting to see what goes into an actual app on the App Store.

    • Giulio Michelon

      Thanks Andrew!

  • I prefer the site, the app is awful and don’t have much logic all the big white spaces, and that Tinder like swipe

  • Stephaughn Alston

    One of the parts I find interesting is in the lo-fi design, seems like theres two prototypes and I like the 2nd one better. It seems to be a card view with a preview of the article below it. Seems it would’ve been better for usability so a user wouldn’t always have to tap a card to see what the article was about if they didn’t want to.