New UI/UX

[cuducos]

Now Jarbas is changing. From an internal tool for Serenata it will become the public API for the general public. And this impacts UI/UX.

In terms of UX we might change the landing page to offer two ways to start a search, to start browsing our data, maybe two tabs or something like that (sorry about the pt-BR):

And in terms of UI, @tatianasb is working on it.

This is want we have in mind, but we are open to discuss how to better conduct this changes (the technical part is discussed in #52). I just ask you to be down-to-earth and precise in further comments, suggestions — we have a deadline with our 1296 bosses which is mid-January ; )

[felipekzig]

@cuducos How is this redesign going? I'm thrilled to help on the UI piece, although I'm bit new to elmJS. Let me know if this issue is still wanted and if you have any other design in mind and which we should start to move forward.

Thanks, Felipe

[cuducos]

Hi @felipekzig — just to clarify: are you willing to contribute with the graphic design part (mostly visual) or with the coding it into HTML/CSS/Elm whatever?

[felipekzig]

Hey @cuducos, Definitely coding contribution – I could help on the visual, but this is not my strongest skill.

[cuducos]

Ok, great then… Probably we'll keep the Elm for the front-end, but I used the material design library and I don't think we need this level of abstraction.

Probably the new version is going for Elm + standard CSS built from SASS (I'm big fan of Bourbon family, but no strings attached). Once we have the visual done we can get started. Wanna join us? Drop a line on Telegram (public group ou PVT me, same username).

[cuducos]

Ok, here it's, @tatianasb's proposal:

[fgrehm]

That looks nice! How would the recently introduced "Reimbursements on the same date" fit into this? Would it be just a "replica" of the "Reimbursement details" section?

[felipekzig]

Great! This looks amazing. How are you willing to split it up into workable items? And how are you planning to track them?

I thought about the following items:

1. Page overall structure
2. Sections 2.1. Congressperson 2.2. Document 2.3. Company 2.4. Reimbursement

Thank you

[cuducos]

@fgrehm: I think a replica fits well, but @tatianasb will work on that ; )

@felipekzig: I have no experience on that, you suggestion looks good. I might start with the Elm refactor so we have the HTML base, then we move to 1. Page overall structure and so on… does that look good?

[felipekzig]

@cuducos Yeah, sounds like a plan. Let me know when you get almost pass the item 1; then, I can start off to work on a section. Sections could be done in parallel so we can achieve the mid-January deadline :)

[glauberramos]

@cuducos @felipekzig I can help with the Elm + SASS as well. But I will be available only after january 8. When is the deadline for this new layout?

[cuducos]

@felipekzig Gonna get started next week and keep you updated. Not sure what's gonna be left to the 8th of January, but feel free to jump in later @glauberramos — there's always something to be done, enhanced, etc ; )

[augusto-herrmann]

The UI is looking nice so far. : )

I'd like to make a couple of suggestions:

1. Have the "other reimbursements on the same month and subquota" section be a timeline widget, instead of just a list. Maybe similar to this one or maybe using d3.js. Make the horizontal axis be the time scale and vertical bars representing each reimbursement with a link, and make the height of the vertical bar proportional to the expense value. This would make easier for people to spot visually cases where a big expense might be divided into a series of small ones in a short interval.
2. When referencing restaurants, bars and hotels, have links to the page about that business on social platforms like Trip Advisor and Yelp. This will help people checking the page to easily see if the venue does have reviews and evaluations and have an idea whether or not it seems to be a legitimate business and also about price range.

[cuducos]

The UI is looking nice so far. : )

Kudos to @tatianasb!

Have the "other reimbursements on the same month and subquota" section be a timeline widget, instead of just a list.

A list has a big advantage: one of the main reason to show these expenses in the UI is to make it easier to verify hypothesis such as the limit on expenses for a given subquota.

What I mean is something among these lines: if we know they can't spend more than 6k BRL/month with fuel, for example, checking a short list of all values spent on fuel in a given month is a vary easy way to quickly ponder on the total amount spent in that month. So having this table like widget makes it easier IMHO to see the values and mentally ponder if it worth it or not to sum them all.

When referencing restaurants, bars and hotels, have links to the page about that business on social platforms like Trip Advisor and Yelp.

That would be an awesome feature! Any idea to implement it? We can try to scrap this data — and then I'd invite you to open a issue/PR on our main repo to collect this data. Alternatively we might just use a search engine API (Duck Duck Go) and point users to the first result searching for <restaurant name> <city> (tripadivisor OR foursquare OR yelp) for example. In that case a proper issue/PR to discuss and test it would be very welcomed here at Jarbas repo ; )

[cuducos]

Even if it's in pt-BR it worth it to bring this blog post in — thanks @cacarrara ; )

[jtemporal]

Hi @luanfonceca requested some day the files with @tatianasb proposals here are some links:

• The indd file
• The pdf file

let me know by any chance you can't access it ;)

[sergioestrella]

Hey @cuducos, here my proposal for the Jabas home page and the new logo for Operação Serenata de Amor. I also would like to suggest, as I talked to you in last Saturday hackathon, to not use internal names publicly, using Operação Serenata de Amor for all user interfaces and communications instead. Names like Jarbas and Rosie should be used internally only, to avoid user confusion and the need to learn the "lore" of the project to effectively understand it.

Attachments:

• New logo
• Home - lighter version
• Home - darker version

[annesoares]

Hey everyone =)

So, I've been wanting to do this for a while but I don't really know Elm to refactor the code and all else. Therefore, I though maybe doing this little by little, so it could be improved and shipped quickier, and I could get better at the code before going to bigger tasks.

What I though was:

• Minor repairs in actual version, to make it more readable and prettier (centralizing text in big screens, fixing spacing around menu icon and a few more that I intend to collect and put here before PR-ing)
• Adjusting to @tatianasb's proposal layout, since it'll probably only change colors, and not page structure, when changed to @sergioestrella's layout (to be split up into smaller steps)
• Changing to SASS (to be split up into smaller steps)
• Implementing @sergioestrella's layout (to be split up into smaller steps)
• Adding features like the congressman/congresswoman page suggested by @cacarrara and timeline/Yelp links suggested by @augusto-herrmann (maybe they could be turned into their own issues then)

Don't know if I missed something, and maybe some stuff still need approval and a better discussion around it's pros and cons. That's why I'm trying to start smaller and older. If you think this is okay, I'll be collecting minor changes that can be made and getting used to the code =)

Yay Serenata! <3

[cuducos]

Many thanks for the message and enthusiasm, @annesoares! I'll comment on some bits from my experience:

I don't really know Elm to refactor the code and all else

We're not Elm slaves here. Elm helped us to deliver something faster one of these days and that's why Jarbas frontend is based in Elm. But nothing impedes us from leaving Elm behind. IMHO we should start any of the new UI focusing on the basics: HTML and CSS (even if using fancy stuff to wrote them, such as SASS for example).

Minor repairs in actual version, to make it more readable and prettier

I'd say this is low priority: this version uses a Google MDL port to Elm and zero CSS at all. So minor changes might need a CSS pre-processor, need studying the CSS and HTML output given by this port etc. So surely these edits are welcomed, but I'm not sure how minor they might end up being.

Adjusting to @tatianasb's proposal layout, since it'll probably only change colors, and not page structure, when changed to @sergioestrella's layout (to be split up into smaller steps)

TBH the core of these limitations is the original purpose Jarbas served. As I mentioned in the opening post: From an internal tool for Serenata it will become the public API for the general public. As an internal tool we designed to serve people running analysis with data. Now it's serves a completely different purpose: it's the public interface for citizens to browse data about how our representatives are spending this share of public money.

I have no experience in migrations a kind of complex frontend, but sometimes it feels to me doing it from scratch would be easier — and in that case we could just start drafting HTML and CSS for any new version we pick up. If we opt to keep the basis we have we need to update Elm dependencies at least and properly address #272.

[gushonorato]

Hello everyone!

I saw Serenata de Amor project on Fantastico last Sunday and since that I've spent some hours exploring the project. I can tell that I'm really impressed and I'm very motivated to help. I've read this issue carefully and I think I have time to embrace this project and put all exposed ideas here together and deliver the new dashboard. @annesoares can I give you a hand? :)

This is the next steps I have in mind:

1. I really liked @sergioestrella and @cacarrara ideas. Transforming Jarbas in a kind of Reclame aqui for congressman is very smart. Think of how great it would be if we type a congressman name in Google and the congressman profile appear in first result showing all suspicious activities of this congressman.

2. If everyone agree that we should go into this direction I can create UX mockups so we can discuss the features and the interaction design of the missing parts and how everything will work together before start coding anything.

3. After that, I can create a roadmap of the deliveries and start coding.

PS: I saw that a new website is being developed (https://github.com/datasciencebr/serenata-website/issues/43). I think it'll be more appealing to the visitor and citizen in general if the dashboard (https://github.com/datasciencebr/jarbas/issues/61#issuecomment-327000010) become the new root page of serenatadeamor.org. If we think in a more user centered design, In my opinion, it's more important to the visitor to access the project information first, which is self explanatory, instead of reading an "institutional page". The "institutional page" may be on a kind of "about page" in the new Jarbas dashboard.

[cuducos]

Hi @gushonorato! Many thanks for you support and enthusiasm. In general I do support your 1, 2, 3 bullet points, and I'd be really happy to offer suport on this roadmap — it looks a really good way to get started. I just have several concerns when it comes to your PS:

I saw that a new website is being developed (datasciencebr/serenata-website#43). I think it'll be more appealing to the visitor and citizen in general if the dashboard (#61 (comment)) become the new root page of serenatadeamor.org

IMHO this definitively should not happen anytime soon. Jarbas and the Serenata's institutional site have completely different roles in the project. When you say if we think in a more user centered design who is the user you have in mind? Because this is the core difference.

Jarbas is our platform for visualizing data gathered and created by Serenata de Amor. Who'd be interested in this data…? Well, people who already know what Serenata is about, engaged citizens, general interested public, public administration staff, governamental and NGO auditing bodies and so on.

On the other hand Serenata de Amor website is for people who do not know what the project is about, people interested in finding out who we are, how we work, possible investors, journalists looking for the story underneath the project and so on.

So I do believe that being user centered would lead us to keeping Jarbas and the institutional page two clearly separated websites. Surely they could be (waaay) better linked (BTW that's one of the reasons why Jarbas offers an JSON API) but I don't think serving Jarbas in the root of serenatadeamor.org is a good idea: data served by Jarbas only makes sense once the user knows what Serenata is about, and that should be the role of the root of the domain – that is to say, informing newcomers and curious what Serenata is about.