Enhancing ESMira Visuals

[IvanCvetanovic]

Dear Developers,

First of all, thank you for providing such an amazing open-source tool for the research community!

I am currently in a process of setting up a server for the project at TU Wien (Technical University of Vienna) and was wondering if it would be possible to contribute to the project by upgrading the visuals for Android and iOS? My goal would be to improve the overall look and feel of the app, mostly targeting colors, gradients, buttons etc.

If you are open for contributions, I would be more than happy to share the screenshots of the visual overhauls I already made!

Best regards,
Ivan Cvetanović, BSc
Technical University of Vienna

[SelinaDev]

Hi Ivan!

Thank you a lot for your interest in the project. Of course, we would be excited for contributions. As most of the time only one developer is working on the project, we usually aim for "good enough to be understandable", so if someone took the time to go beyond that it would be a tremendous help. I would be interested to see what overhauls you already did.

I just want to say a few things in advance.

First, going back to usually only a single developer working on the project, I feel like one goal should be to make these improvements manageable in the future. I.e., the worst case would be someone making ESMira extremely pretty in a way that takes a lot of effort to implement, and then abandoning the project, which would cause us to either expend more effort for every new UI addition, or gradually introducing a break in quality again. As such, it would be most helpful if all these changes are straight forward to apply to future development.

Second, while I realize that the colors might not be optimal (I used them on a whim when sketching a logo suggestion for jodli, and he just used them), we have to keep in mind that at any time someone could be actively using ESMira for a study. This means I want to avoid drastic changes, in order to avoid confusing participants of studies (many of which, judging from experience, do not understand that the researchers conducting the study don't have anything to do with the application itself).

However, beyond simple visual enhancements we are also open to other UX improvements.

Best,
Selina

[IvanCvetanovic]

Hi Selina!

Sorry for the late response!

Here is a short list of what I changed to the UI of the app while also trying to keep the code simple and comprehensive:

• Added button for changing theme from dark to light and vice versa. (Made the testing faster but I think it would also be nice to offer users manual override.) The button was added in the overflow menu.
• Changed colors. Dark mode does not use black but dark blue, while light mode uses really soft blue.
• Added shadows to the text, icons and buttons.
• Changed how the subsections look, since they were really similar to buttons, so the users I tested the app on were initially confused and tapped on the subsection heading.
• Added gradient bar at the top to introduce more colors and make the app less boring for the eyes.
• Added rounded corners to the buttons.
• Added padding between subsections.

Here are the two screenshots for dark and light modes:

I am interested about what you think of these changes? Anything you agree or disagree with? Let me know!

Best regards,
Ivan

[SelinaDev]

Hi Ivan,

thank you for your reply!

I overall really like it. Especially having the background colors less harsh is great, and I only recently had someone confuse the headings with buttons as well, so I agree that was a problem, and your redesign solves that as well. The overall aesthetics with the rounded corners and subtle shadows are an improvement, and the theme switching button is welcome as well (I would probably have to work that into the database storage, so the choice is persistent.

My biggest issue is honestly the gradient. Yes, it introduces new colors, but I'm not sure that's a good thing. Maybe it's just that I am used to associating ESMira with certain colors for a long time, but I feel that in a way it adds new colors that are not intentional. Also, the bar at the top is not an element that needs to draw the eye, so I don't mind it being "boring".

Another thing I would mention is text shadows. They are really subtle in your case, I'm not really sure I'm noticing them, but in principle I fear that they can make text seem blurry.

While you're at it, I'm just noticing that the middle gap between buttons is wider than the outer gap (I think the elements just have the same padding, and that sums up to a double gap when there's two of them next to each other). It's something that's already present in the current version, so not a critique of your design, but another thing you might improve.

In any case, thank you for your effort so far. I will also show your suggestions to the others involved in the project.

Best,
Selina

[IvanCvetanovic]

Hi Selina!

Thank you for the feedback, I am happy that you are mostly satisfied with my design.

Let me show you the second round of changes:

• Removed gradient
• Removed shadows for the text only.
• Made the space between the buttons and on their sides the same.

Let me know what you think about this!

Best regards,
Ivan Cvetanović