There is no figma file

[mhbdesignr]

Hi @balzack, I'm MHB. I am a UI/UX and Visual Designer. I found out this project on contribute.design, and I would love to contribute to this project, but I am new to GitHub and would be nice if I had directions/instructions on what to do.

→There is no Figma team for this project, so that probably means starting from scratch. To complicate things, there is also a mobile version that I try to keep consistent.

→Originally posted by @balzack in #125 (comment)_

[balzack]

hi @mhbdesignr , thanks for your interest in the project!

You are correct, there is no Figma team for this project and there is a mobile and browser version of the app, that I try and keep consistent where it makes sense.

I am primarily a developer, so my thoughts on what to do in terms of directions or instructions probably won't be too useful. It would be nice if there were a Figma wireframe for the current app, and then the ability for the designer or community to comment or suggest changes. I don't know how practical that is.

I am not sure how Figma integrates with github in a useful way. It would be nice if there was a project file that could be added to the git repo but I don't think that is how Figma works.

In summary, I don't really know the best way to combine Figma with a community app.

[mhbdesignr]

You can integrate Figma with GitHub, but you need Dev mode(Paid) and only can import issues and pull requests. Not much useful.
→https://www.figma.com/community/plugin/1220512233196109878/github
Penpot also can integrate GitHub but not so sure about that
→https://penpot.app/integrations-api
→https://help.penpot.app/technical-guide/integration/
So, we can create a Figma or Penpot file and share it. If anyone wants, they can duplicate it and edit them to show suggestions. Sorry, I am not a developer, but I can help you with design related stuff. So shall I create design file in Figma or Penpot(developer friendly, free)?

[balzack]

I haven't used Penpot before, but from what I read it seems to be more geared towards open source (so slight preference for penpot without having used it). That being said, I am happy to go with whatever you prefer.

I am about a month away from releasing a new version of the web & mobile app. It's primarily an under the hood refactor, but there are some UI tweaks. The colors are still to be determined, although I still lean towards green. Below are some screenshots for reference:

[mhbdesignr]

Hi, Sorry man. Took some extra time. Local holidays in my town. Green is really a good choice. Lots of people use WhatsApp and this app is similar to it, so it gives familiarity to the user. I created the figma file for the screenshots you provided.
Here's the link: https://www.figma.com/design/eVFi8bYlybn5KeyEePEaey/Databag---Github?node-id=1-6&t=Is2AiTfwktFO5aY0-1
Anyone can view, duplicate and edit this file.

And is there anyway one can convert html/css into figma design?

[balzack]

Awesome, thank you for doing this! As for converting html to figma, I see there is a plugin html.to.design, but I haven't had a chance to try it out yet.

I think the firma link should be added to the root github readme, so it's easily visible. Do you know how projects generally share a figma file?

I see you replaced the 'cog' icon for 'vertical-more', I like that change and will update the UI accordingly.

I've had a good amount of critical feedback on the calling screen. I would have liked to make it such that people can still send messages while on the call, but I didn't see a way to make that work in terms of the UI. Below is another attempt at it. Previously it was a windowed modal and now it's a full screen modal. I'm still not satisfied with it, but I feel it might be a step in the right direction.

[mhbdesignr]

Thanks, Man. Not only that, you as Owner being active and communicating with other people really helps.

1. To add FIGMA LINK to the README.md, I think I need to fork this repository, right And then edit changes.

• Should I add any Instructions for it? Like if someone wants to make changes in the design.
• Rn one can duplicate the Figma file and then change/update the design and ask in issues. Is that ok?

2. For CALLING SCREEN, why not make it similar to Whatsapp? If possible, can you share the screenshot of previous windowed modal? I will work on it.
3. Do you need help in LOGO?

[balzack]

1. Perhaps a 'how to contribute' note with the 2nd bullet point would be sufficient for now.
2. I looked at the whatsapp call screen and it doesn't seem to be that different in terms of UI elements. The differences seem mostly on sizing and placement, which can have a big impact, so any suggestions are welcome. Below is a screenshot of the previous call UI. It was just a modal square, with the image being that of the contact's profile.
3. Yes, I think the LOGO needs some help. By this I assume you mean the icon of the browser tab and mobile app. Let me know if you are referring to something else.

Thank you!

[balzack]

Yes, I think screenshots are a better approach; I'll rework the the calling screen, but there are some minor details:

• the "share screen" button, "good connection" label, and "add contact" button don't apply
• if the remote contact initiates video, should the call screen automatically pop out, or is the video icon enough?
• if there is an incoming call, should it be a modal, or show up in the same area as the active audio call?
• there can be several incoming calls at the same time, should it only show the first?
• if there is an incoming call while on an active call, should it be visible?
• in the large layout (tablet view, or web browser, attached below), should the call area be above the conversation header?

[balzack]

...btw, you can see a 'cog' icon in the previous screenshot. The 'dots' icon seemed out of place on the left side of the component. The 'dots' are however now present in the smaller mobile view on the right.

[cozats]

Hello! I want to start redesigning the app from the ground up, if it is ok with you. I will keep the colors but will change the layout (spacing, fonts, icons but not functionality). I will try to upload a complete figma file for all the screens I can create and also try to form a set of components and a style guide so other designers can contribute. I hope this is ok and I'm not highjacking the conversation :)

[balzack]

That's great! I'm looking forward to see what you come up with. Thank you!

[mhbdesignr]

Hey @balzack sorry man. Had to take care of some family business. I hope you figured out the answers. but anyways here are my thooughts,

1. • the "share screen" button, "good connection" label, and "add contact" button don't apply

2. • if the remote contact initiates video, should the call screen automatically pop out, or is the video icon enough?

3. • if there is an incoming call, should it be a modal, or show up in the same area as the active audio call?

4. • there can be several incoming calls at the same time, should it only show the first?

5. • if there is an incoming call while on an active call, should it be visible?

6. • in the large layout (tablet view, or web browser, attached below), should the call area be above the conversation header?

Answer:
2. A call screen should square pop out in the middle of screen saying “Video call incoming”.
3. For another incoming video/voice call it is recommended not to show another full screen popup, use a Modal from top-down notification with a beep sound or same ringtone.
4. Yes, only show the first caller. For rest, add a missed call feature if possible.
5. same as 3
6. I attached the img of mobile version and did the same for desktop version.

How is the new version going? How long to finish? Can we test it?
Also, If @cozats redesigns the entire app, how long it will take you for a finished app?
✌️

[mhbdesignr]

Hello! I want to start redesigning the app from the ground up, if it is ok with you. I will keep the colors but will change the layout (spacing, fonts, icons but not functionality). I will try to upload a complete figma file for all the screens I can create and also try to form a set of components and a style guide so other designers can contribute. I hope this is ok and I'm not highjacking the conversation :)

Hi @cozats if possible can we collaborate on this one?

[cozats]

Hi @cozats if possible can we collaborate on this one?

Hey! Of course we could! I started redesigning the screens I could grab from the existing app, and I've already done many screens on mobile. I'm trying to figure out some user flows to continue right now. You can see a demo prototype below and we can talk how to collaborate more effectively..

Demo

All opinions are welcome of course!

[balzack]

@mhbdesignr I made some small decisions before receiving your response. It's all changeable if they were incorrect from a design perspective. To your question on how long a rebuild would take; a rewrite of the app UI with no functional changes would likely take ~2 months. I've learned the hard way that a migration plan is best. As in, determine a way to migrate from one design to the next through smaller releases. A first release could for example change the spacing and size of things. Layout changes could happen in later releases. Chances are I would be adding other features and bug fixes along with these releases.

@mhbdesignr @cozats I am dev done with the refactor. It might be a few weeks before I update the apps publicly. In the meantime I can show you the webapp by updating the demo site (databag.coredb.org) and for mobile I can either post the APK or add either of you as an internal iOS tester (depending on which phone type you have). Let me know if that is of interest.

[mhbdesignr]

Hi @cozats amazing work. Shows why you're the Senior. Also, for the user flow, I think it is better we test the updated app and then proceed.

@balzack Would love to test the Updated Version. Demo Site or APK, which one is easy for you to share. For APK, my device is Moto G34 5G - Android 14.

[balzack]

@mhbdesignr:

The demo site is now updated. Also, I have uploaded the APK, which you can download here.

If you've installed the Databag from an app store, it may require you to uninstall before allowing you to install the uploaded APK.

The update includes the calling flow updates which you called out. I am curious to know how closely this matches your expectations; as well as the rest.

thank you both for your interest in this project!

[cozats]

@balzack I see the updated desktop app normally. Can you setup a chat to communicate about the design with you and @mhbdesignr?

Also, I'm on iPhone and can't connect after I logout from database.coredb.org.

[balzack]

@cozats I think you have a typo on the demo server name; it should be "databag.coredb.org" What do you have in mind for a chat to communicate? Were you thinking a Databag topic or do you have a tool you use?

For the iPhone, you can use the mobile browser and see the UI changes. To see the changes in the ios app, I would need to add you as a tester through an email address and you would need to install Test Flight from the app store. Let me know if you want to do do that otherwise I should be able to publish the UI changes publicly in a few weeks.

[cozats]

@cozats I think you have a typo on the demo server name; it should be "databag.coredb.org" What do you have in mind for a chat to communicate? Were you thinking a Databag topic or do you have a tool you use?

For the iPhone, you can use the mobile browser and see the UI changes. To see the changes in the ios app, I would need to add you as a tester through an email address and you would need to install Test Flight from the app store. Let me know if you want to do do that otherwise I should be able to publish the UI changes publicly in a few weeks.

A databag topic of course! You can find me with the same username :)

I corrected the typo and I'll work with the mobile browser for now!

[rockerpower]

Hi, I'd love to contribute to this project! How can I get started? im designer too

[balzack]

@rockerpower I assume you could collaborate with the people on this thread. I am always happy to receive design recommendations in the case you wanted to go your own way.

I created a "Topic" on the databag demo server here. I will try and connect with people if you want to create an account on your private server or the demo server, and we can chat there?

[balzack]

I should share a broader goal I have for this project. My hope is that databag can be used as a general decentralized data sharing network. I think the messenger will always be the flagship service, but now with the SDK, I think it should be straightforward to also provide a contact app (to share various contact attributes), a photo app (to share photo albums), a music app (to share music playlists), etc...

If this project can be successful at all that, then I think there is an opportunity to create an overlay network through connected contacts. If an account is willing to forward bits of data between all of it's connected contacts, then you would have exponential connectivity to people with a high degree of trust. I think this opens up great use cases from other forms of social media without a profit incentive, to honest product review/recommendations, etc...

I know I'm getting ahead of myself, and there will be obstacles I don't understand, but that's the general direction I hope this project evolves towards. I wouldn't want this to distract from the messenger design, which I see as always the most important service, but maybe this plants some seeds if someone wanted to work on a different service.

[balzack]

If you want to be added to the Databag chat, let me know your username or connect to me "abeam" on the demo server.

[rockerpower]

I just add connection with you @balzack

[KitanWayne]

Hi Everybody, I am a designer and I would love to contribute to this project,

[balzack]

We've been chatting about the design with the Databag app. If you create an account on the demo site, I can connect to you and add you to the topic.

[KitanWayne]

@balzack I sent you a connect request already
It's a request from Kitan Wayne

[mhbdesignr]

@balzack add me also to the Topic. My username is MhbDesktop. I sent you a request in the Demo server.