Redesign the ODK-X Survey app icon

[maprehensive]

The current Survey app icon is not branded ODK-X, and do not clearly communicate the core app function.

This task is to redesign the app icon to be:

• Recognisable as applications in the ODK-X suite of tools
• Ideally incorporating the ODK-X logo (note this issue for Logo refresh https://github.com/odk-x/tool-suite-X/issues/355)
• can be distinguished as the Survey app without accompanying text
• Preferably does not rely on the app name in the icon

App icons should be created as SVG format and be clear and legible at small sizes, such as 20x20px

You do not need to be assigned to this issue to work on it for an Outreachy application

[Karimatu05]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

[Redeem-Grimm-Satoshi]

@maprehensive sent a PR for the first issue, Can I draft out different versions of this ODK-X Survey App Icon?

[maprehensive]

@maprehensive sent a PR for the first issue, Can I draft out different versions of this ODK-X Survey App Icon?

Yes, that's a good way to approach this task. We will then provide feedback on the designs and you can iterate again.

[maprehensive]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

Sure thing @Karimatu05 , I will assign you.

[jessjaey]

@maprehensive can I be assigned this

[Thimmo]

Hello @maprehensive Can I also be assigned to join @Karimatu05 in fixing this issue

[Karimatu05]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

Sure thing @Karimatu05 , I will assign you.

Thanks but am a UI\UX designer so would i also send a pull request or i can attach my contribution to the issues am assigned ? @maprehensive

[Karimatu05]

@maprehensive can u send us where we can get the complete design so that we can make the icons changes

[jessjaey]

@maprehensive Please review my design on the Survey app icon icon

[Karimatu05]

@maprehensive this is what i came up with. Your feedbacks are welcome thank you.

[Augusta2]

Hello @maprehensive I would love to work on this

[jessjaey]

I put your feedback into consideration for my iterations of the app icons

[Cveman1]

I put your feedback into consideration for my iterations of the app icons

I love your new iterations, a bit sleek

[jessjaey]

I put your feedback into consideration for my iterations of the app icons

I love your new iterations, a bit sleek

Thankyou for your feedback ✨

[Grace-io]

Hi @maprehensive . this was what i came up with

Looking forward to your feedbacks

[Itsmiracle1130]

Kindly review this I would like to know what you think

[Thimmo]

Hello @maprehensive, Here is what I have come up with for the survey app icon.

For accessibility, I also tested the logo for distortion in different sizes.

I'd also appreciate your feedback.

[maprehensive]

@jessjaey Great work!

Your concepts are very polished, the gradient gives it really professional look.

I like the way the first iteration promotes the document / list icon – it focusses on the function of the app.

A question to help with the next iteration – which icon communicates the function of the app better - the document icon, or the document with the list?

Great work, this is really good.

[maprehensive]

@Karimatu05 Good job.

Great to see the iterations, the use of the brand colors and seeing the icon placed in the header is really helpful - we get to see how it will work!

For your next iteration see if you can bring your ideas together into one strong icon:

• selecting the color you think will work best
• choose between the outline or solid color treatment
• choose between having the ODK-X logo in the icon or sitting underneath

The ideas are strong – look forward to see how you bring it together!

[maprehensive]

@Grace-io This is a really unique idea - well done.

The presentation and rationale is really good. The explanation of the technical design choices is a good thing to include – it shows how much thought has gone into the idea.

And showing the icon in different treatments – mono, white background, color background – really helps show how it will work.

In your next iteration you could try:

• using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Look forward to seeing where you take this.

[maprehensive]

@Itsmiracle1130 This is a very distinct and eye-catching design.

The incorporation of parts of the logo and clipboard is well done.

I would be interested to see:

• some of your design rationale / decisions written down
• your summary of what the final icon shape is meant to represent
• versions using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Well done, this is very inventive.

[maprehensive]

@Thimmo This is a nice execution, I like the way you've brought your ideas together.

Good communication of the design rationale, and it's great to see the different sizes.

I would be interested to see:

• an iteration on the sizes of the elements in the icon - the checkboxes, list lines, ODK-X logo - the balance doesn't feel quite right
• Could the tick be incorporated into a check box? that may still communicate the idea, but simplify the overall execution
• versions using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Congratulations, this is looking very promising.

[Grace-io]

@Grace-io This is a really unique idea - well done.

The presentation and rationale is really good. The explanation of the technical design choices is a good thing to include – it shows how much thought has gone into the idea.

And showing the icon in different treatments – mono, white background, color background – really helps show how it will work.

In your next iteration you could try:

• using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Look forward to seeing where you take this.

Thank you for the feedback @maprehensive I will ensure that I implement them in my next iteration.

[jessjaey]

@maprehensive Thankyou for your feedback I'll work on it✨

@jessjaey Great work!

Your concepts are very polished, the gradient gives it really professional look.

I like the way the first iteration promotes the document / list icon – it focusses on the function of the app.

A question to help with the next iteration – which icon communicates the function of the app better - the document icon, or the document with the list?

Great work, this is really good.

[Itsmiracle1130]

@Itsmiracle1130 This is a very distinct and eye-catching design.

The incorporation of parts of the logo and clipboard is well done.

I would be interested to see:

• some of your design rationale / decisions written down

• your summary of what the final icon shape is meant to represent

• versions using fewer colors - simplifying can really strengthen a design

• showing the icon in context - e.g. the app header with the app name next to it

Well done, this is very inventive.

Thanks for your feedback @maprehensive ,all observations are duly noted and will be effected as requested in my iteration

[JessicaItepu]

.

[jessjaey]

@maprehensive Please review my design,I put your feedback into consideration for my iterations of the app icons

[maprehensive]

@jessjaey This is really nice.

I like the way you've simplified and provided a rationale for your preferred design.

My only minor feedback is the same as for Services icon:

I think the ODK-X logo is still a little hard to see (my eyesight is quite bad 🤓). One suggestion is to slightly increase the whitespace around the logo – that can help bring clarity at small sizes.

Thanks!

[Karimatu05]

@Karimatu05 Good job.

Great to see the iterations, the use of the brand colors and seeing the icon placed in the header is really helpful - we get to see how it will work!

For your next iteration see if you can bring your ideas together into one strong icon:

• selecting the color you think will work best
• choose between the outline or solid color treatment
• choose between having the ODK-X logo in the icon or sitting underneath

The ideas are strong – look forward to see how you bring it together!

@maprehensive what do you think on this?

[Grace-io]

Hi @maprehensive, here is what I was able to come up with after iteration based on your feedback. I'll appreciate more feedbacks as it will help me improve my design.